模板修改

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-06 16:57:36
+ * @LastEditTime: 2022-04-07 12:06:14
  * @FilePath     : \spfm-market-front\src\pages\main\performance\components\form.vue
 -->
 <template>
@@ -75,59 +75,126 @@
       </el-col>
     </el-row>
     <div v-else>
-      <div class="form-header">
-        <div
-          v-for="({ props, label, type, dictionary }, index) in form"
-          :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>
+      <div class="form-content">
+        <div class="form-left">
+          <div class="form-header">
+            <div
+              v-for="({ props, label, type, dictionary }, index) in form.slice(
+                0,
+                1
+              )"
+              :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>
+          <div class="form-header">
+            <div
+              class="margin-right-10"
+              v-for="({ props, label, type, dictionary }, index) in form.slice(
+                1
+              )"
+              :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>
+        </div>
+        <div class="form-right margin-top-10">
+          <el-form-item class="form-search">
+            <el-button type="primary" @click="handleSearch">搜索</el-button>
           </el-form-item>
         </div>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-        </el-form-item>
       </div>
+
       <div class="flex-justify-align-end margin-top-40 margin-bottom-20">
         <el-button
           v-for="({ label, props, unlogo }, index) in handle"
@@ -168,6 +235,8 @@ export default {
   //   },
   // },
   created() {
+    console.log(this.form.slice(0, 1), "aadada");
+    console.log(this.form.slice(1), "dadadaa");
     this.form.forEach((el) => {
       if (el.default) {
         this.object[el.props] = el.default;
@@ -186,10 +255,17 @@ export default {
 };
 </script>
 <style lang="scss" scope>
-.form-header {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  margin-left: 10px;
+.form {
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+  &-content {
+    display: flex;
+    justify-content: space-between;
+  }
 }
 </style>

src/pages/main/performance/mould.vue

@@ -159,6 +159,11 @@ export default {
           props: "templateName",
           type: "input",
         },
+        {
+          label: "模板类型",
+          props: "templateType",
+          type: "input",
+        },
       ],
       table_list: [],
       table_handle: [
@@ -251,7 +256,7 @@ export default {
         data: {
           page: this.page,
           pageSize: this.rows,
-          templateName: this.table_search.templateName,
+          ...this.table_search,
         },
       }).then(({ data: { count, data } }) => {
         this.total = count;
@@ -259,8 +264,9 @@ export default {
         this.table_loading = false;
       });
     },
-    handleSearch({ templateName }) {
-      this.table_search = { templateName };
+    handleSearch(data) {
+      console.log(data, "data");
+      this.table_search = data;
       this.handleReset();
       this.handleInit();
     },