代码修改

src/pages/main/performance/components/form.vue

@@ -2,7 +2,7 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-11-01 18:03:02
  * @LastEditors: daiqisheng
- * @LastEditTime: 2022-04-22 15:32:04
+ * @LastEditTime: 2022-04-24 20:34:03
  * @FilePath     : \spfm-market-front\src\pages\main\performance\components\form.vue
 -->
 <template>
@@ -74,9 +74,134 @@
         </el-button>
       </el-col>
     </el-row> -->
-    <div v-if="form.length < 5" class="template-input">
+
+    <div v-if="form.length < 5" class="margin-bottom-10">
+      <div class="template-input width-100">
+        <div class="template-input width-80">
+          <div
+            class="margin-right-10"
+            v-for="({ props, label, type, dictionary }, index) in form.slice(
+              0,
+              2
+            )"
+            :key="index"
+          >
+            <el-form-item :label="label">
+              <template v-if="type === 'select'">
+                <el-select
+                  v-model="object[props]"
+                  :placeholder="label"
+                  filterable
+                  clearable
+                >
+                  <el-option
+                    :label="label"
+                    :value="value"
+                    v-for="({ label, value }, index) in dictionary"
+                    :key="index"
+                  ></el-option>
+                </el-select>
+              </template>
+              <template
+                v-else-if="['datetime', 'date', 'month'].includes(type)"
+              >
+                <el-date-picker
+                  v-model="object[props]"
+                  :type="type"
+                  :placeholder="label"
+                >
+                </el-date-picker>
+              </template>
+              <template v-else-if="type === 'dateRange'">
+                <el-date-picker
+                  v-model="object[props]"
+                  type="datetimerange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </el-date-picker>
+              </template>
+              <template v-else>
+                <el-input
+                  v-model="object[props]"
+                  :placeholder="label"
+                  clearable
+                ></el-input>
+              </template>
+            </el-form-item>
+          </div>
+        </div>
+        <div class="width-20 flex-justify-align-end">
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">搜索</el-button>
+          </el-form-item>
+        </div>
+      </div>
+      <div class="template-input width-100 margin-top-10 margin-bottom-10">
+        <div
+          class="margin-right-10"
+          v-for="({ props, label, type, dictionary }, index) in form.slice(2)"
+          :key="index"
+          :span="6"
+        >
+          <el-form-item :label="label">
+            <template v-if="type === 'select'">
+              <el-select
+                v-model="object[props]"
+                :placeholder="label"
+                filterable
+                clearable
+              >
+                <el-option
+                  :label="label"
+                  :value="value"
+                  v-for="({ label, value }, index) in dictionary"
+                  :key="index"
+                ></el-option>
+              </el-select>
+            </template>
+            <template v-else-if="['datetime', 'date', 'month'].includes(type)">
+              <el-date-picker
+                v-model="object[props]"
+                :type="type"
+                :placeholder="label"
+              >
+              </el-date-picker>
+            </template>
+            <template v-else-if="type === 'dateRange'">
+              <el-date-picker
+                v-model="object[props]"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </template>
+            <template v-else>
+              <el-input
+                v-model="object[props]"
+                :placeholder="label"
+                clearable
+              ></el-input>
+            </template>
+          </el-form-item>
+        </div>
+      </div>
+      <p class="width-100 flex-justify-align-end margin-top-10">
+        <el-button
+          v-for="({ label, props, unlogo }, index) in handle"
+          :key="index"
+          @click="handleSubmit(props)"
+        >
+          <i v-if="!unlogo" class="el-icon-document-add font-weight-bold" />{{
+            label
+          }}
+        </el-button>
+      </p>
       <!-- 输入框 -->
-      <div class="template-input">
+      <!-- <div class="template-input">
         <div
           class="flex-1 margin-right-10"
           v-for="({ props, label, type, dictionary }, index) in form"
@@ -126,9 +251,9 @@
             </template>
           </el-form-item>
         </div>
-      </div>
+      </div> -->
       <!-- 按钮 -->
-      <div class="template-input">
+      <!-- <div class="template-input">
         <el-form-item>
           <el-button type="primary" @click="handleSearch">搜索</el-button>
         </el-form-item>
@@ -143,7 +268,7 @@
             label
           }}
         </el-button>
-      </p>
+      </p> -->
     </div>
     <div v-else>
       <div class="template-content">
@@ -330,6 +455,15 @@ export default {
 .width-100 {
   width: 100%;
 }
+.width-80 {
+  width: 80%;
+}
+.width-20 {
+  width: 20%;
+}
+.border {
+  border: 1px solid red;
+}
 .template {
   &-head {
     display: flex;
@@ -340,8 +474,8 @@ export default {
   }
   &-input {
     display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 10px;
+    // flex-wrap: wrap;
+    // margin-bottom: 10px;
   }
   &-content {
     display: flex;