perf: 优化 label search (#3634)

Co-authored-by: ibuler <ibuler@qq.com>
jumpserver · Dec 20, 2023 · 1b52e4c · 1b52e4c
1 parent 6ac31b0
commit 1b52e4c
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 9 deletions.
diff --git a/src/components/Table/AutoDataSearch/index.vue b/src/components/Table/AutoDataSearch/index.vue
@@ -1,5 +1,10 @@
 <template>
-  <TagSearch :options="iOption" v-bind="$attrs" v-on="$listeners" />
+  <span>
+    <el-button v-if="shouldFold" circle class="search-btn" size="mini" @click="handleManualSearch">
+      <svg-icon icon-class="search" />
+    </el-button>
+    <TagSearch v-else :options="iOption" v-bind="$attrs" @tagSearch="handleTagSearch" v-on="$listeners" />
+  </span>
 </template>
 
 <script>
@@ -25,17 +30,27 @@ export default {
     exclude: {
       type: Array,
       default: () => []
+    },
+    // 建议折叠
+    fold: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      internalOptions: []
+      internalOptions: [],
+      tags: [],
+      manualSearch: false
     }
   },
   computed: {
     iOption() {
       const options = this.options.concat(this.internalOptions)
       return _.uniqWith(options, _.isEqual)
+    },
+    shouldFold() {
+      return this.fold && this.tags.length === 0 && !this.manualSearch
     }
   },
   watch: {
@@ -52,6 +67,16 @@ export default {
     }
   },
   methods: {
+    handleTagSearch(tags) {
+      this.tags = tags
+      if (tags.length === 0) {
+        this.manualSearch = false
+      }
+      this.$emit('tagSearch', tags)
+    },
+    handleManualSearch() {
+      this.manualSearch = true
+    },
     async genericOptions() {
       const vm = this // 透传This
       vm.internalOptions = [] // 重置
@@ -102,4 +127,11 @@ export default {
 </script>
 
 <style lang='less' scoped>
+.search-btn {
+  margin-top: 4px;
+  cursor: pointer;
+  &:hover {
+    color: #409eff;
+  }
+}
 </style>
diff --git a/src/components/Table/ListTable/TableAction/LabelSearch.vue b/src/components/Table/ListTable/TableAction/LabelSearch.vue
@@ -3,7 +3,6 @@
     <el-button
       v-if="!showLabelSearch"
       class="label-button"
-      plain
       size="small"
       @click="showSearchSelect"
     >
@@ -22,6 +21,8 @@
       filterable
       separator=": "
       size="small"
+      @focus="handleCascaderFocus"
+      @visible-change="handleCascaderVisibleChange"
     >
       <template slot-scope="{ node, data }">
         <span>{{ data.label }}</span>
@@ -38,7 +39,6 @@ export default {
   name: 'LabelSearch',
   data() {
     return {
-      showLabelButton: true,
       showLabelSearch: false,
       labelProps: {
         multiple: true
@@ -60,8 +60,10 @@ export default {
       }
 
       const labelSearch = newValue.map(item => item.join(':')).join(',')
-      console.log('Label search: ', labelSearch)
       this.$emit('labelSearch', labelSearch)
+    },
+    showLabelSearch(newValue) {
+      this.$emit('showLabelSearch', newValue)
     }
   },
   mounted() {
@@ -86,6 +88,23 @@ export default {
     this.$eventBus.$off('labelSearch')
   },
   methods: {
+    handleCascaderFocus() {
+      this.setSearchFocus()
+    },
+    handleCascaderVisibleChange(visible) {
+      if (visible) {
+        setTimeout(() => {
+          this.$refs.labelCascader.updateStyle()
+        },)
+        return
+      } else {
+        const input = this.$refs.labelCascader.$el.getElementsByClassName('el-input--suffix')[0].querySelector('input')
+        input.style.height = '34px'
+      }
+      if (this.labelValue.length === 0) {
+        this.showLabelSearch = false
+      }
+    },
     getLabelOptions() {
       if (this.labelOptions.length > 0) {
         return
@@ -109,13 +128,18 @@ export default {
         this.labelOptions = _.sortBy(labelOptions, 'label')
       })
     },
+    setSearchFocus() {
+      setTimeout(() => {
+        this.$refs.labelCascader.$el.getElementsByClassName('el-cascader__search-input')[0].focus()
+      }, 100)
+    },
     showSearchSelect() {
       this.getLabelOptions()
       this.showLabelSearch = true
-      this.showLabelButton = false
       setTimeout(() => {
         this.$refs.labelCascader.toggleDropDownVisible(true)
-      }, 100)
+        this.setSearchFocus()
+      }, 200)
     }
   }
 }
@@ -130,12 +154,33 @@ export default {
   padding: 10px 13px 10px 12px;
 }
 
+.label-select {
+}
+
 .label-cascader {
+  width: 300px;
+  >>> .el-input--suffix.el-input {
+    input {
+      height: 34px;
+    }
+  }
   >>> .el-input__inner {
     font-size: 13px;
   }
   >>> .el-cascader__search-input {
-    margin: 2px 0 2px 14px;
+    display: none;
+    margin: 0 0 2px 13px;
+  }
+  >>> .el-input.is-focus + .el-cascader__tags .el-cascader__search-input {
+    display: inline;
+  }
+  >>> .el-input.is-focus + .el-cascader__tags {
+    flex-wrap: wrap;
+  }
+  >>> .el-cascader__tags {
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    overflow: hidden;
   }
 }
 

diff --git a/src/components/Table/ListTable/TableAction/index.vue b/src/components/Table/ListTable/TableAction/index.vue
@@ -21,9 +21,11 @@
         <LabelSearch
           v-if="hasLabelSearch"
           @labelSearch="handleLabelSearch"
+          @showLabelSearch="handleLabelSearchShowChange"
         />
         <AutoDataSearch
           v-if="hasSearch"
+          :fold="foldSearch"
           class="right-side-item action-search"
           v-bind="iSearchTableConfig"
           @tagSearch="handleTagSearch"
@@ -96,7 +98,8 @@ export default {
   },
   data() {
     return {
-      keyword: ''
+      keyword: '',
+      foldSearch: false
     }
   },
   computed: {
@@ -132,6 +135,9 @@ export default {
         return
       }
       this.searchTable({ labels: val })
+    },
+    handleLabelSearchShowChange(val) {
+      this.foldSearch = val
     }
   }
 }