CN-1664 feat: 实体搜索框功能优化

src/components/advancedSearch/Index.vue

@@ -129,7 +129,13 @@ export default {
     enterListener (event) {
       if (event.keyCode === 13) {
         this.$refs.tagMode && this.$refs.tagMode.enterSearch()
-        this.$refs.textMode && this.$refs.textMode.search()
+        const timer = setTimeout(() => {
+          // 如果回车是选择hint面板的值，则不进行搜索
+          if (this.$refs.textMode && !this.$refs.textMode.isHintEnter) {
+            this.$refs.textMode.search()
+          }
+          clearTimeout(timer)
+        }, 100)
       }
     }
   },

src/components/advancedSearch/TextMode.vue

@@ -44,6 +44,7 @@
           <hint v-if="hintVisible" :hintList="hintList"
                 @load="handleHintLoad"
                 @select="handleSelect"
+                @keydownEnter="handleEnter"
                 :hintParams="hintParams"
                 :hintSearch="searchStr"></hint>
         </div>
@@ -86,7 +87,8 @@ export default {
       hintVisible: false,
       dataset: null,
       CodeMirror,
-      myUnitTestStr: this.unitTestStr
+      myUnitTestStr: this.unitTestStr,
+      isHintEnter: null
     }
   },
   emits: ['changeMode', 'search'],
@@ -467,6 +469,9 @@ export default {
       this.emitter.on('advanced-search', function () {
         vm.search()
       })
+    },
+    handleEnter (e) {
+      this.isHintEnter = e
     }
   },
   watch: {

src/components/advancedSearch/showhint/Hint/Hint.vue

@@ -3,7 +3,7 @@
   <div class="Hint" @click.stop>
     <div class="hint__block">
       <div class="hint__block-filter">
-        <hint-info v-on="$listeners" :hintList="hintList" @select="onSelect"></hint-info>
+        <hint-info v-on="$listeners" :hintList="hintList" @select="onSelect" @keydownEnter="onKeydownEnter"></hint-info>
       </div>
       <div class="hint__block-helper">
         <helper-info :hintSearch="hintSearch"></helper-info>
@@ -29,6 +29,9 @@ export default {
   methods: {
     onSelect (item, index, hintList) {
       this.$emit('select', item, index, hintList)
+    },
+    onKeydownEnter (e) {
+      this.$emit('keydownEnter', e)
     }
   }
 }

src/components/advancedSearch/showhint/Hint/HintInfo.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="HintInfo">
+  <div class="HintInfo" id="myHint" @mouseenter="onMouseenter">
     <ul style="padding-left: 0;margin: -10px 0 0 0;min-width: calc(100% - 12px)">
       <template v-for="(item,index) in hintList" :key="index">
         <li :ref="'hint_'+index" class="relative-item CodeMirror-hint"
             style="margin-bottom: 2px"
             @click="handleSelect(item,index,hintList)"
+            :id="'filterItem'+index"
             :class="{'CodeMirror-hint-active':index === activeIndex,[item.className]:true}"
         >{{ item.displayText }}</li>
       </template>
@@ -26,7 +27,8 @@ export default {
   data () {
     return {
       active: true,
-      activeIndex: null
+      activeIndex: null,
+      currentIndex: -1
     }
   },
   mounted () {
@@ -36,8 +38,94 @@ export default {
       label: this.name,
       vm: this
     })
+    document.addEventListener('keydown', this.initKeyDown)
   },
   methods: {
+    initKeyDown (event) {
+      const dom = document.getElementById('myHint')
+      const vm = this
+      if (dom) {
+        // 检测方向键
+        switch (event.key) {
+          case 'Enter':
+            // eslint-disable-next-line no-case-declarations
+            const item = vm.hintList[vm.currentIndex]
+            if (item) {
+              this.$emit('keydownEnter', 'Enter')
+              vm.handleSelect(item, vm.currentIndex, vm.hintList)
+              vm.currentIndex = -1
+            } else {
+              this.$emit('keydownEnter', null)
+            }
+            break
+          case 'ArrowUp': // 上方向键
+            // 上方向键被按下时的操作
+            if ((vm.currentIndex <= vm.hintList.length - 1) && vm.currentIndex > 0) {
+              vm.currentIndex -= 1
+            } else {
+              vm.currentIndex = vm.hintList.length - 1
+            }
+            vm.hintList.forEach((e, index) => {
+              if (index === vm.currentIndex) {
+                let realIndex = index
+                if (e.type === 'abstract') {
+                  realIndex -= 1
+                  vm.currentIndex -= 1
+                }
+                const itemDom = document.getElementById('filterItem' + realIndex)
+                if (itemDom) {
+                  itemDom.style.backgroundColor = 'var(--el-fill-color-dark)'
+                  if (realIndex >= 10) {
+                    dom.scrollTop = (realIndex - 10) * 26 + 16
+                  } else {
+                    dom.scrollTop = 0
+                  }
+                }
+              } else {
+                const itemDom = document.getElementById('filterItem' + index)
+                if (itemDom) {
+                  itemDom.style.backgroundColor = ''
+                }
+              }
+            })
+            break
+          case 'ArrowDown': // 下方向键
+            if (vm.currentIndex < vm.hintList.length - 1) {
+              vm.currentIndex += 1
+            } else {
+              vm.currentIndex = 0
+            }
+            vm.hintList.forEach((e, index) => {
+              if (index === vm.currentIndex) {
+                let realIndex = index
+                if (e.type === 'abstract') {
+                  realIndex += 1
+                  vm.currentIndex += 1
+                }
+                const itemDom = document.getElementById('filterItem' + realIndex)
+                if (itemDom) {
+                  itemDom.style.backgroundColor = 'var(--el-fill-color-dark)'
+                  if (realIndex >= 10) {
+                    // 26是24的行高+2px的margin，16是两个标题总的margin
+                    dom.scrollTop = (realIndex - 10) * 26 + 16
+                  } else {
+                    dom.scrollTop = 0
+                  }
+                }
+              } else {
+                const itemDom = document.getElementById('filterItem' + index)
+                if (itemDom) {
+                  itemDom.style.backgroundColor = ''
+                }
+              }
+            })
+            break
+          default:
+            // 其他按键的操作
+            break
+        }
+      }
+    },
     scrollToView (index = 0) {
       // 移动到可视区域
       const li = this.$refs['hint_' + index][0]
@@ -96,7 +184,17 @@ export default {
       const index = this.activeIndex || 0
       const item = this.hintList[index]
       this.$emit('select', item, index, this.hintList)
+    },
+    onMouseenter () {
+      const itemDom = document.getElementById('filterItem' + this.currentIndex)
+      if (itemDom) {
+        itemDom.style.backgroundColor = ''
+        this.currentIndex = -1
+      }
     }
+  },
+  unmounted () {
+    document.removeEventListener('keydown', this.initKeyDown)
   }
 }
 </script>