From 7eac62635bf64fade6e37bb3aeb6ef91a25e3548 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Tue, 19 Dec 2023 16:59:25 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=94=AF=E6=8C=81=E7=82=B9=E5=87=BB=20?=
 =?UTF-8?q?label=20=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/FormFields/Select2.vue    |  1 +
 .../ListTable/TableAction/LabelSearch.vue     | 23 ++++++++++-
 .../Table/TableFormatters/LabelsFormatter.vue | 39 +++++++++++++------
 3 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/components/Form/FormFields/Select2.vue b/src/components/Form/FormFields/Select2.vue
index ea177147c..9bcb13153 100644
--- a/src/components/Form/FormFields/Select2.vue
+++ b/src/components/Form/FormFields/Select2.vue
@@ -375,6 +375,7 @@ export default {
         this.refresh()
         this.$log.debug('Visible change, refresh select2')
       }
+      this.$emit('visible-change', visible)
     }
   }
 }
diff --git a/src/components/Table/ListTable/TableAction/LabelSearch.vue b/src/components/Table/ListTable/TableAction/LabelSearch.vue
index 55c8d1916..c15eee46f 100644
--- a/src/components/Table/ListTable/TableAction/LabelSearch.vue
+++ b/src/components/Table/ListTable/TableAction/LabelSearch.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="label-search">
     <el-button
-      v-if="showLabelButton"
+      v-if="!showLabelSearch"
       class="label-button"
       plain
       size="small"
@@ -64,6 +64,27 @@ export default {
       this.$emit('labelSearch', labelSearch)
     }
   },
+  mounted() {
+    this.$eventBus.$on('labelSearch', label => {
+      if (!label) {
+        this.labelValue = []
+        this.showLabelSearch = true
+        return
+      }
+      const labels = label.split(',').map(item => item.split(':'))
+      const notExistLabels = labels.filter(item => {
+        return !this.labelValue.find(label => label[0] === item[0] && label[1] === item[1])
+      })
+      this.labelValue = [...this.labelValue, ...notExistLabels]
+      this.getLabelOptions()
+      setTimeout(() => {
+        this.showLabelSearch = true
+      }, 500)
+    })
+  },
+  destroyed() {
+    this.$eventBus.$off('labelSearch')
+  },
   methods: {
     getLabelOptions() {
       if (this.labelOptions.length > 0) {
diff --git a/src/components/Table/TableFormatters/LabelsFormatter.vue b/src/components/Table/TableFormatters/LabelsFormatter.vue
index 5835d4143..c127997fb 100644
--- a/src/components/Table/TableFormatters/LabelsFormatter.vue
+++ b/src/components/Table/TableFormatters/LabelsFormatter.vue
@@ -1,25 +1,30 @@
 <template>
   <div>
-    <a class="tag" @click="showDialog=true">
+    <a class="label-formatter-col">
       <span v-if="!iLabels || iLabels.length === 0">
         <el-tag effect="plain" size="mini">
           <i class="fa fa-tag" /> -
         </el-tag>
       </span>
       <div v-else>
-        <el-tag
+        <div
           v-for="label of iLabels"
           :key="label"
-          :type="getLabelType(label)"
-          class="tag-formatter"
-          disable-transitions
-          effect="plain"
-          size="mini"
-          v-bind="formatterArgs.config"
         >
-          <i class="fa fa-tag" /> <b> {{ getKey(label) }}</b>: {{ getValue(label) }}
-        </el-tag>
+          <el-tag
+            :type="getLabelType(label)"
+            class="tag-formatter"
+            disable-transitions
+            effect="plain"
+            size="mini"
+            v-bind="formatterArgs.config"
+            @click="handleLabelSearch(label)"
+          >
+            <i class="fa fa-tag" /> <b> {{ getKey(label) }}</b>: {{ getValue(label) }}
+          </el-tag>
+        </div>
       </div>
+      <a class="edit-btn" style="padding-left: 5px" @click="showDialog = true"> <i class="fa fa-edit" /></a>
     </a>
     <Dialog
       v-if="showDialog"
@@ -97,6 +102,7 @@ export default {
   },
   data() {
     return {
+      focusOn: '',
       formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
       initial: [],
       iLabels: [],
@@ -131,6 +137,9 @@ export default {
     this.iLabels = [...this.initial]
   },
   methods: {
+    handleLabelSearch(label) {
+      this.$eventBus.$emit('labelSearch', label)
+    },
     getLabelType(tag) {
       return this.formatterArgs.getLabelType(tag)
     },
@@ -198,6 +207,14 @@ export default {
   }
 }
 
+.edit-btn {
+  display: none;
+  float: right;
+}
+.label-formatter-col:hover .edit-btn {
+  display: inline;
+}
+
 .tag-zone {
   margin: 20px 0 0 0;
   border: solid 1px #ebeef5;
@@ -223,7 +240,7 @@ export default {
 
 .tag-formatter {
   margin: 2px 0;
-  display: table;
+  //display: table;
 }
 
 .tag-tip {