贷款审核调整

project/xiushan/apps/finance/AppLoanAudit/loanList.vue

@@ -1,32 +1,44 @@
 <template>
   <section class="loanList">
-    <ai-list>
+    <ai-detail>
       <ai-title slot="title" title="贷款审核" isShowBottomBorder/>
       <template #content>
-        <ai-search-bar>
+        <el-row type="flex">
-          <template #left>
+          <div class="staCard fill" v-for="(op,label) in sta" :key="label">
-            <ai-select v-model="search.status" :selectList="dict.getDict('financialLoanApplyStatus')" placeholder="审批状态"
+            <h2 v-text="op"/>
-                       @change="page.current=1,getTableData()"/>
+            <span v-text="label"/>
-            <ai-search label="申请时间">
+          </div>
-              <el-date-picker size="small" v-model="search.applyTime" type="daterange" @change="handleFilterApplyTime"
+        </el-row>
-                              :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"/>
+        <ai-card hideTitle>
-            </ai-search>
+          <template #content>
+            <ai-search-bar class="mar-t8">
+              <template #left>
+                <ai-select v-model="search.status" :selectList="dict.getDict('financialLoanApplyStatus')"
+                           placeholder="审批状态"
+                           @change="page.current=1,getTableData()"/>
+                <ai-search label="申请时间">
+                  <el-date-picker size="small" v-model="search.applyTime" type="daterange"
+                                  @change="handleFilterApplyTime"
+                                  :default-time="['00:00:00','23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"/>
+                </ai-search>
+              </template>
+              <template #right>
+                <el-input size="small" placeholder="搜索产品名称、企业主体、贷款银行" v-model="search.enterpriseName" clearable
+                          @change="page.current=1,getTableData()"/>
+              </template>
+            </ai-search-bar>
+            <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
+                      @getList="getTableData" :col-configs="colConfigs" :dict="dict">
+              <el-table-column slot="options" label="操作" fixed="right" align="center">
+                <template slot-scope="{row}">
+                  <el-button type="text" @click="showDetail(row.id)">详情</el-button>
+                </template>
+              </el-table-column>
+            </ai-table>
           </template>
-          <template #right>
+        </ai-card>
-            <el-input size="small" placeholder="搜索产品名称、企业主体、贷款银行" v-model="search.enterpriseName" clearable
-                      @change="page.current=1,getTableData()"/>
-          </template>
-        </ai-search-bar>
-        <ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
-                  @getList="getTableData" :col-configs="colConfigs" :dict="dict">
-          <el-table-column slot="options" label="操作" fixed="right" align="center">
-            <template slot-scope="{row}">
-              <el-button type="text" @click="showDetail(row.id)">详情</el-button>
-            </template>
-          </el-table-column>
-        </ai-table>
       </template>
-    </ai-list>
+    </ai-detail>
   </section>
 </template>
 
@@ -58,7 +70,8 @@ export default {
         {label: "贷款银行", prop: "organizationName"},
         {label: "状态", prop: "status", align: "center", dict: "financialLoanApplyStatus"},
         {slot: "options"}
-      ]
+      ],
+      sta: {}
     }
   },
   methods: {
@@ -77,18 +90,39 @@ export default {
     },
     handleFilterApplyTime() {
       this.page.current = 1
-      this.search.applyStartDate = this.search.applyTime?.[0].substring(0,10)
+      this.search.applyStartDate = this.search.applyTime?.[0].substring(0, 10)
-      this.search.applyEndDate = this.search.applyTime?.[1].substring(0,10)
+      this.search.applyEndDate = this.search.applyTime?.[1].substring(0, 10)
       this.getTableData()
+    },
+    getStaData() {
+      this.instance.post("/appfinancialloanapply/staticFinancialLoanApply").then(res => {
+        if (res?.data) {
+          this.sta = res.data
+        }
+      })
     }
   },
   created() {
     this.getTableData()
+    this.getStaData()
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .loanList {
+  .mar-t8 {
+    margin-top: 8px;
+  }
+
+  .staCard {
+    text-align: center;
+    margin: 16px 8px;
+    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
+    border-radius: 4px;
+    padding: 16px;
+    box-sizing: border-box;
+    background: #fff;
+  }
 }
 </style>