From 2b967dacd90eb62d7c26760e732e6a95dbf87e71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 14 Aug 2023 15:00:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=AE=9E=E4=BD=93?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=90=9C=E7=B4=A2=E6=A1=86=E7=9A=84=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA=E4=B8=8E=E9=9A=90?=
 =?UTF-8?q?=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/advancedSearch/Index.vue    |  6 ++-
 src/components/advancedSearch/TextMode.vue | 48 +++++++++++++++++++---
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/components/advancedSearch/Index.vue b/src/components/advancedSearch/Index.vue
index 9de6dc9b..0cd80570 100644
--- a/src/components/advancedSearch/Index.vue
+++ b/src/components/advancedSearch/Index.vue
@@ -1,6 +1,8 @@
 <template>
   <div
       class="advanced-search"
+      @mouseenter="showCloseIcon = true"
+      @mouseleave="showCloseIcon = false"
   >
     <text-mode
         v-if="searchMode === 'text'"
@@ -10,6 +12,7 @@
         :show-list="showList"
         @changeMode="changeMode"
         @search="search"
+        :show-close-icon="showCloseIcon"
     ></text-mode>
     <tag-mode
         v-if="searchMode === 'tag'"
@@ -41,7 +44,8 @@ export default {
   data () {
     return {
       str: null,
-      metaList: null
+      metaList: null,
+      showCloseIcon: false
     }
   },
   props: {
diff --git a/src/components/advancedSearch/TextMode.vue b/src/components/advancedSearch/TextMode.vue
index 5094faff..16ba1cd9 100644
--- a/src/components/advancedSearch/TextMode.vue
+++ b/src/components/advancedSearch/TextMode.vue
@@ -11,11 +11,11 @@
           :content="$t('entity.switchToAdvancedSearch')"
       >
         <template #reference>
-          <i class="cn-icon cn-icon-filter" @click="changeMode"></i>
+          <i class="cn-icon cn-icon-filter margin-r-12" @click="changeMode"></i>
         </template>
       </el-popover>
     </div>
-    <div class="search__suffix-close" @click="cleanParams">
+    <div v-show="isCloseIcon" class="search__suffix-close" @click="cleanParams">
       <i class="el-icon-error"></i>
     </div>
     <div class="search__suffix" :class="showList ? 'new-search__suffix' : 'entity-explorer-search'" @click="search">
@@ -43,11 +43,14 @@ export default {
   props: {
     columnList: Array,
     str: String,
-    showList: Boolean
+    showList: Boolean,
+    showCloseIcon: Boolean
   },
   data () {
     return {
-      codeMirror: null
+      codeMirror: null,
+      isCloseIcon: this.showCloseIcon,
+      isEdit: false
     }
   },
   emits: ['changeMode', 'search'],
@@ -69,6 +72,24 @@ export default {
       this.codeMirror.setOption('extraKeys', {
         Enter: (cm) => {}
       })
+      const str = this.codeMirror.getValue().trim()
+      this.codeMirror.on('focus', () => {
+        if (str !== '') {
+          this.isEdit = true
+          this.isCloseIcon = true
+        }
+      })
+      this.codeMirror.on('blur', () => {
+        const timer = setTimeout(() => {
+          this.isEdit = false
+          this.isCloseIcon = false
+          clearTimeout(timer)
+        }, 200)
+      })
+      this.codeMirror.on('update', () => {
+        this.isEdit = true
+        this.isCloseIcon = true
+      })
     },
     search () {
       const str = this.codeMirror.getValue().trim()
@@ -180,6 +201,14 @@ export default {
           })
         }
       }
+    },
+    showCloseIcon (n) {
+      if (!this.isEdit) {
+        const str = this.codeMirror.getValue().trim()
+        if (str !== '') {
+          this.isCloseIcon = n
+        }
+      }
     }
   },
   mounted () {
@@ -197,6 +226,8 @@ export default {
         }
       }
       toRaw(this.codeMirror).setValue(q)
+    } else {
+      this.isCloseIcon = false
     }
 
     const vm = this
@@ -209,10 +240,14 @@ export default {
 
 <style lang="scss">
 .search__suffix-close {
+  height: 40px;
+  line-height: 40px;
+  margin-top: -9px;
+
   .el-icon-error {
     font-size: 17px;
     color: #C4C4C4;
-    margin: 0 12px;
+    margin-right: 12px;
     cursor: pointer;
   }
 }
@@ -235,4 +270,7 @@ export default {
   color: #3976CB;
   margin-top: -2px;
 }
+.margin-r-12 {
+  margin-right: 12px;
+}
 </style>