From fa5f4348eae222525330b42da043883562e27a29 Mon Sep 17 00:00:00 2001
From: fit2bot <68588906+fit2bot@users.noreply.github.com>
Date: Fri, 14 Mar 2025 19:08:14 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=95=B0=E9=87=8F?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=20(#4808)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: ibuler <ibuler@qq.com>
---
 src/components/Cards/SummaryCard/index.vue    |  10 +-
 .../ListTable/TableAction/QuickFilter.vue     | 267 ++++++++++--------
 src/components/Table/TreeTable/index.vue      |   4 +-
 3 files changed, 152 insertions(+), 129 deletions(-)

diff --git a/src/components/Cards/SummaryCard/index.vue b/src/components/Cards/SummaryCard/index.vue
index 2c80101a0..b85b3ce55 100644
--- a/src/components/Cards/SummaryCard/index.vue
+++ b/src/components/Cards/SummaryCard/index.vue
@@ -1,19 +1,19 @@
 <template>
   <div>
     <div class="summary-header">
-      <el-tooltip :content="title" placement="top" :open-delay="500">
+      <el-tooltip :content="title" :open-delay="500" placement="top">
         <span class="title">{{ title }}</span>
       </el-tooltip>
     </div>
     <slot>
       <h3 class="no-margins ">
         <span
-          v-async="iCount"
-          class="num"
           :class="{ 'can-direct': body.canDirect ? true : false }"
+          class="num"
           @click="handleClick"
         >
-          -
+          <span v-if="iCount === null"> - </span>
+          <span v-else>{{ iCount }}</span>
         </span>
       </h3>
     </slot>
@@ -35,7 +35,7 @@ export default {
     },
     count: {
       type: [Number, String, Promise],
-      default: 0
+      default: null
     },
     route: {
       type: [String, Object],
diff --git a/src/components/Table/ListTable/TableAction/QuickFilter.vue b/src/components/Table/ListTable/TableAction/QuickFilter.vue
index fe8fa7caf..4869b2d40 100644
--- a/src/components/Table/ListTable/TableAction/QuickFilter.vue
+++ b/src/components/Table/ListTable/TableAction/QuickFilter.vue
@@ -20,7 +20,7 @@
                 >
                   {{ option.label }}
                   <span v-if="option.hasCount">
-                    (<span v-async="getCount(option)">-</span>)
+                    <span>({{ option.count }})</span>
                   </span>
                   <!--                  <i class="el-icon-circle-check" />-->
                 </span>
@@ -32,19 +32,13 @@
           <span v-for="item of iSummary" :key="item.title" class="summary-block">
             <SummaryCard
               :class="item.active ? 'active' : ''"
-              :count="getCount(item)"
+              :count="item.count"
               :title="item.title"
               @click="handleFilterClick(item)"
             />
           </span>
         </div>
       </div>
-      <div class="expand-bar-wrap">
-        <div class="expand-bar" @click="toggle">
-          <i :class="isExpand ? 'expand': 'shrink' " class="fa fa-angle-double-up" />
-          <span v-show="!isExpand"> 展开过滤器 </span>
-        </div>
-      </div>
     </div>
   </div>
 </template>
@@ -76,10 +70,11 @@ export default {
   },
   data() {
     return {
-      iFilters: this.cleanFilters(),
-      iSummary: this.cleanSummary(),
+      iFilters: [],
+      iSummary: [],
       filtered: {},
-      activeFilters: []
+      activeFilters: [],
+      reCount: false
     }
   },
   computed: {
@@ -92,7 +87,32 @@ export default {
       }
     }
   },
+  watch: {
+    tableUrl() {
+      this.generateCount()
+    }
+  },
+  mounted() {
+    this.iFilters = this.cleanFilters()
+    this.iSummary = this.cleanSummary()
+    this.generateCount()
+  },
   methods: {
+    async generateCount() {
+      this.iFilters.forEach(category => {
+        category.options.forEach(option => {
+          if (option.hasCount) {
+            option.count = null
+            this.getCount(option)
+          }
+        })
+      })
+
+      this.iSummary.forEach(item => {
+        item.count = null
+        this.getCount(item)
+      })
+    },
     async getCount(item) {
       if (item.count || item.count === 0) {
         return item.count
@@ -117,6 +137,7 @@ export default {
           category: 'summary',
           label: item.title,
           ...item,
+          count: null,
           filter: item.filter || {},
           active: false
         }
@@ -170,138 +191,138 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
- .quick-filter {
-   background: white;
-   padding: 10px 10px 10px 20px;
-   margin-bottom: 10px;
-   display: flex;
-   place-content: stretch flex-end;
-   justify-content: center;
-   align-content: stretch;
-   box-shadow: 0 1px 1px 0 rgba(54, 58, 80, .32);
+.quick-filter {
+  background: white;
+  padding: 10px 10px 10px 20px;
+  margin-bottom: 10px;
+  display: flex;
+  place-content: stretch flex-end;
+  justify-content: center;
+  align-content: stretch;
+  box-shadow: 0 1px 1px 0 rgba(54, 58, 80, .32);
 
-   &.shrink {
-     background: inherit;
-     padding: 0;
-     margin-bottom: 0;
-     box-shadow: none;
-   }
+  &.shrink {
+    background: inherit;
+    padding: 0;
+    margin-bottom: 0;
+    box-shadow: none;
+  }
 
-   .quick-filter-wrap {
-     display: inline-block;
-     width: calc(100% - 70px);
+  .quick-filter-wrap {
+    display: inline-block;
+    width: calc(100% - 70px);
 
-     .summary-zone {
-       padding-top: 10px;
-       display: flex;
-       justify-content: space-between;
-     }
+    .summary-zone {
+      padding-top: 10px;
+      display: flex;
+      justify-content: space-between;
+    }
 
-     .summary-block {
-       .active {
-         ::v-deep .no-margins .num {
-           color: var(--color-primary);
+    .summary-block {
+      .active {
+        ::v-deep .no-margins .num {
+          color: var(--color-primary);
 
-           &::after {
-             content: "\e720";
-             font-family: element-icons !important;
-             font-size: 13px;
-             line-height: 1;
-           }
-         }
-       }
-     }
+          &::after {
+            content: "\e720";
+            font-family: element-icons !important;
+            font-size: 13px;
+            line-height: 1;
+          }
+        }
+      }
+    }
 
-     .quick-filter-zone {
-       display: flex;
-       justify-content: flex-start;
-       flex-wrap: wrap; /* 允许 item-zone 换行 */
-       gap: 10px;
+    .quick-filter-zone {
+      display: flex;
+      justify-content: flex-start;
+      flex-wrap: wrap; /* 允许 item-zone 换行 */
+      gap: 10px;
 
-       h5 {
-         font-weight: 600;
-         text-transform: uppercase;
-         font-size: 12px;
-         margin-bottom: .5rem;
-         line-height: 1.2;
-         display: inline-block;
-       }
+      h5 {
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: 12px;
+        margin-bottom: .5rem;
+        line-height: 1.2;
+        display: inline-block;
+      }
 
-       .item-zone {
-         margin-right: 30px;
-         margin-bottom: 5px;
-       }
+      .item-zone {
+        margin-right: 30px;
+        margin-bottom: 5px;
+      }
 
-       .item {
-         display: inline-block;
-         margin-right: 8px;
-         color: #303133;
-         font-size: 12px;
-         cursor: pointer;
+      .item {
+        display: inline-block;
+        margin-right: 8px;
+        color: #303133;
+        font-size: 12px;
+        cursor: pointer;
 
-         &::after {
-           content: "";
-           margin-left: 4px;
-           margin-bottom: 2px;
-           vertical-align: middle;
-           width: 1px; /* 分割线宽度 */
-           height: 8px; /* 分割线高度 */
-           background-color: var(--color-icon-primary); /* 分割线颜色 */
-           display: inline-block;
-         }
+        &::after {
+          content: "";
+          margin-left: 4px;
+          margin-bottom: 2px;
+          vertical-align: middle;
+          width: 1px; /* 分割线宽度 */
+          height: 8px; /* 分割线高度 */
+          background-color: var(--color-icon-primary); /* 分割线颜色 */
+          display: inline-block;
+        }
 
-         &:last-child::after {
-           display: none;
-         }
+        &:last-child::after {
+          display: none;
+        }
 
-         i {
-           visibility: hidden;
-           margin-left: -3px;
-         }
+        i {
+          visibility: hidden;
+          margin-left: -3px;
+        }
 
-         &.active {
-           color: var(--color-primary);
+        &.active {
+          color: var(--color-primary);
 
-           i {
-             visibility: visible;
-           }
-         }
+          i {
+            visibility: visible;
+          }
+        }
 
-         &:hover {
-           color: var(--color-primary);
-         }
-       }
+        &:hover {
+          color: var(--color-primary);
+        }
+      }
 
-       ul {
-         list-style: none outside none;
-         margin-block-start: 0;
-         padding-left: 0;
-       }
-     }
-   }
- }
+      ul {
+        list-style: none outside none;
+        margin-block-start: 0;
+        padding-left: 0;
+      }
+    }
+  }
+}
 
- .filter-options {
-   display: block;
- }
+.filter-options {
+  display: block;
+}
 
- .expand-bar-wrap {
-   margin: auto 0;
-   min-width: 60px;
+.expand-bar-wrap {
+  margin: auto 0;
+  min-width: 60px;
 
-   .expand-bar {
-     float: right;
-     display: block;
-     cursor: pointer;
+  .expand-bar {
+    float: right;
+    display: block;
+    cursor: pointer;
 
-     i {
-       padding: 5px;
+    i {
+      padding: 5px;
 
-       &.shrink {
-         transform: rotate(180deg);
-       }
-     }
-   }
- }
+      &.shrink {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
 
 </style>
diff --git a/src/components/Table/TreeTable/index.vue b/src/components/Table/TreeTable/index.vue
index e97879b1b..63458212b 100644
--- a/src/components/Table/TreeTable/index.vue
+++ b/src/components/Table/TreeTable/index.vue
@@ -7,7 +7,9 @@
         :style="{width: treeWidth}"
         class="left"
       >
-        <span v-if="component === 'AutoDataZTree'" class="title">{{ $t('AssetTree') }}</span>
+        <span v-if="component === 'AutoDataZTree'" class="title">
+          {{ $t('AssetTree') }}
+        </span>
         <component
           :is="component"
           :key="componentTreeKey"