新增搜索

src/views/finance/WaybillAudit.vue

@@ -5,63 +5,47 @@
       <div v-h5uShow="search">
         <!-- 查询模块 -->
         <el-form :inline="true" :model="query" class="header_search">
-          <!-- 收货单位 -->
-          <el-form-item label="收货单位"
-            ><el-input v-model="details.query.consignee" placeholder="请输入收货单位"
-          /></el-form-item>
-
-          <!-- 审核状态 -->
-          <el-form-item label="审核状态">
-            <el-select v-model="details.query.checkStatus" placeholder="请选择审核状态" clearable>
-              <el-option
-                v-for="item in [
-                  { label: '全部', value: '' },
-                  { label: '已审核', value: 1 },
-                  { label: '待审核', value: 0 },
-                ]"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+          <el-form-item
+            v-for="item in details.titleSearchOption"
+            :key="item.prop"
+            :label="item.label"
+          >
+            <template v-if="item.type === 'input'">
+              <el-input
+                v-model.trim="query[item.prop]"
+                :placeholder="`请输入${item.label}`"
+                clearable
+              ></el-input>
+            </template>
+
+            <template v-else-if="item.type === 'select'">
+              <el-select v-model="query[item.prop]" :placeholder="`请选择${item.label}`" clearable>
+                <el-option
+                  v-for="value in item.checkarr"
+                  :key="value.value"
+                  :label="value.label"
+                  :value="value.value"
+                />
+              </el-select>
+            </template>
+
+            <template v-else-if="item.type === 'time'">
+              <el-date-picker
+                v-model="query[item.prop]"
+                type="datetimerange"
+                unlink-panels
+                range-separator="至"
+                start-placeholder="开始时间"
+                end-placeholder="结束时间"
+                :shortcuts="shortcuts"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                clearable
               />
-            </el-select>
-          </el-form-item>
-
-          <!-- 开单时间 -->
-          <el-form-item label="开单时间" class="el-times">
-            <el-date-picker
-              class="w100"
-              v-model="details.query.createTimeArr"
-              type="daterange"
-              unlink-panels
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :shortcuts="shortcuts"
-              value-format="YYYY-MM-DD"
-              clearable
-            >
-            </el-date-picker>
-          </el-form-item>
-
-          <!-- 审核时间 -->
-          <el-form-item label="审核时间" class="el-times">
-            <el-date-picker
-              class="w100"
-              v-model="details.query.checkTimeArr"
-              type="daterange"
-              unlink-panels
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-              :shortcuts="shortcuts"
-              value-format="YYYY-MM-DD"
-              clearable
-            >
-            </el-date-picker>
+            </template>
           </el-form-item>
 
           <!-- 查询按钮 -->
-          <el-form-item>
+          <el-form-item class="el-btn">
             <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
             <el-button icon="el-icon-delete" @click="searchReset">清 空</el-button>
           </el-form-item>
@@ -293,6 +277,41 @@ const details = reactive<any>({
   columnList: deepClone(columnList),
   /** 列表数据 */
   data: [],
+  titleSearchOption: [
+    { type: 'input', label: '收货单位', prop: 'consignee' },
+    {
+      type: 'select',
+      label: '审核状态',
+      prop: 'checkStatus',
+      checkarr: [
+        { label: '全部', value: '' },
+        { label: '已审核', value: 1 },
+        { label: '待审核', value: 0 },
+      ],
+    },
+    {
+      type: 'select',
+      label: '收款状态',
+      prop: 'payStatus',
+      checkarr: [
+        { label: '未收款', value: '10' },
+        // {label: '部分收款', value: '20'},
+        { label: '已收款', value: '30' },
+      ],
+    },
+    {
+      type: 'select',
+      label: '结算状态',
+      prop: 'settlementStatus',
+      checkarr: [
+        { label: '未结算', value: '10' },
+        // {label: '部分结算', value: '20'},
+        { label: '已结算', value: '30' },
+      ],
+    },
+    { type: 'time', label: '开单时间', prop: 'createTimeArr' },
+    { type: 'time', label: '审核时间', prop: 'checkTimeArr' },
+  ],
   /** 页面loading */
   loadingObj: {
     /** 列表加载loading */
@@ -375,11 +394,11 @@ const onLoad = async () => {
     if (code !== 200) return;
     details.data = data.records;
 
-    for (let i = 0; i <  details.data .length; i++) {
-      const value =  details.data [i];
-      
-      !value.payStatus && (value.payStatus = '10')
-      !value.settlementStatus && (value.settlementStatus = '10')
+    for (let i = 0; i < details.data.length; i++) {
+      const value = details.data[i];
+
+      !value.payStatus && (value.payStatus = '10');
+      !value.settlementStatus && (value.settlementStatus = '10');
     }
 
     details.page.total = data.total;