我的稽核

src/views/workplace/audit/index.vue

 <template>
   <div class="table-box">
+    <div class=" bg-white">
+      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane
+            :label="item.label"
+            :name="item.value"
+            v-for="(item, index) in tabs"
+            :key="index"
+          >
+          <template #label>
+            <div>
+              {{item.label}}
+            <el-badge :value='item.msg' :max="9999"></el-badge>
+            </div>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
     <div>
       <ProTable
         :config="config"
@@ -7,18 +24,6 @@
         :api="getTrackRecord"
         :paramCallback="paramCallback"
       >
-        <template #table_top>
-          <div>
-            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
-              <el-tab-pane
-                :label="item.label"
-                :name="item.value"
-                v-for="(item, index) in AuditStatus"
-                :key="index"
-              ></el-tab-pane>
-            </el-tabs>
-          </div>
-        </template>
         <!-- 表格 header 按钮 -->
         <template #left_buttons>
           <el-button
@@ -46,32 +51,81 @@
   import { getTrackRecord } from '@/api/property';
   import { batchSave } from '@/api/audit';
   import { useUserStore } from '@/stores/modules/user';
-  const { userInfo } = useUserStore();
   import { getTenantPage } from '@/api/tenant';
   import { useDict } from '@/hooks/useDict';
+  import { watch } from 'vue';
   const { PhoneResultStatus, ReduceType, FlowStatus, FollowStatus, AuditStatus, CaseStatus } = useDict("PhoneResultStatus","ReduceType", "FlowStatus", "FollowStatus","AuditStatus", "CaseStatus");
   const envs = getAppEnvConfig();
+  const { userInfo } = useUserStore();
+
   import { reactive, ref } from 'vue';
   const downloadfile = inject('download');
 
   const allocationModalRef = ref();
   const caseLRef = ref();
   const selectdList = ref([]);
+  const tabs = ref([]);
   const callDrawerRef = ref();
   const srcList = ref([]);
   const RefImage = ref(false);
   const onCheckboxChange = (row) => {
     selectdList.value = row.records;
   };
+  watch(
+    () => AuditStatus.value,
+    (newValue, oldValue) => {
+      const list = []
+      if (AuditStatus && AuditStatus.value && AuditStatus.value.length) {
+        AuditStatus.value.forEach(async e => {
+          const param = {
+            current: 1,
+            size: 1,
+            auditStatus: e.value,
+            followStatus: [
+              'progress',
+              'pass_on',
+              'no_pass',
+              'Claims_unrelated_to_creditors',
+              'Claiming_not_to_be_myself',
+            ]
+          }
+          const t = e.value
+          if (userInfo.id) {
+            param['createBy'] = userInfo.id;
+          }
+          let result = new Promise((resolve, reject) => {
+            getTrackRecord(param).then(res => {
+              const obj = {}
+              obj[e.value] = res
+              resolve(obj)
+            })
+          });
+          list.push(result)
+        })
+      }
+      Promise.all(list).then(res => {
+        console.log(res)
+        let tttt = {}
+        res.forEach(e => {
+          tttt = {...tttt, ...e}
+        })
+        AuditStatus.value.forEach(e => {
+          const obj = JSON.parse(JSON.stringify(e))
+          obj['msg'] = tttt[e.value].result.page.totalElements
+          tabs.value.push(obj)
+        })
+      })
+    }
+  );
 
   const activeName = ref('un_audit');
   const callMode = ref('');
   const paramCallback = (param) => {
     const obj = JSON.parse(JSON.stringify(param));
-    obj['auditStatus'] = activeName.value;
     if (userInfo.id) {
       obj['createBy'] = userInfo.id;
     }
+    obj['auditStatus'] = activeName.value;
     if (obj['trackTime']) {
       if (obj['trackTime'][0]) obj['trackTimeBegin'] = obj['trackTime'][0];
       if (obj['trackTime'][1]) obj['trackTimeEnd'] = obj['trackTime'][1];
@@ -150,7 +204,7 @@
               );
             },
           },
-          // search: { el: 'input', props: { clearable: true }, key: 'cpeName', labelWidth: 78 },
+          search: { el: 'input', props: { clearable: true }, key: 'cpeName', labelWidth: 78 },
         },
         {
           showOverflow: 'tooltip',
@@ -162,7 +216,7 @@
             },
           },
           enum: () => getTenantPage({ current: 1, size: 999999999, status: 'enable' }),
-          // search: { el: 'select', props: { filterable: true }, key: 'tenantId', labelWidth: 78 },
+          search: { el: 'select', props: { filterable: true }, key: 'tenantId', labelWidth: 78 },
           fieldNames: { label: 'name', value: 'id' },
           title: '调解中心',
           width: 100,
@@ -285,7 +339,7 @@
                   <>
                     {row.voices.map((item, index) => (
                       <el-icon>
-                        <Download onClick={() => download(item)} />
+                        <Download onClick={() => download(item)} style="cursor: pointer;" />
                       </el-icon>
                     ))}
                   </>
@@ -428,7 +482,7 @@
     query();
   };
   const query = () => caseLRef.value?.search();
-
+  
   onMounted(() => {
     query();
   });