perf: 下拉过滤器选模糊搜索

core/frontend/src/components/elVisualSelect/index.vue

@@ -124,9 +124,9 @@ export default {
     },
     list() {
       this.resetList()
-      this.show = false
+      // this.show = false
       this.$nextTick(() => {
-        this.show = true
+        // this.show = true
         this.$nextTick(() => {
           this.init()
         })
@@ -212,14 +212,20 @@ export default {
       )
       this.scrollbar = document.querySelector(`.${this.classId} .el-select-dropdown .el-scrollbar`)
       this.selectBoxDom = document.querySelector(`.${this.classId} .el-select-dropdown__wrap`)
-      this.selectBoxDom.style.display = 'flex'
-      this.selectBoxDom.style.flexDirection = 'row'
-      this.domList = selectDom.querySelector(
-        `.${this.classId} .el-select-dropdown__wrap .el-select-dropdown__list`
-      )
-      this.addScrollDiv(this.selectBoxDom)
+      if (this.selectBoxDom) {
+        this.selectBoxDom.style.display = 'flex'
+        this.selectBoxDom.style.flexDirection = 'row'
+      }
+      if (selectDom) {
+        this.domList = selectDom.querySelector(
+          `.${this.classId} .el-select-dropdown__wrap .el-select-dropdown__list`
+        )
+      }
+      if (this.selectBoxDom) {
+        this.addScrollDiv(this.selectBoxDom)
+      }
 
-      this.scrollFn()
+      this.scrollbar && this.scrollFn()
       this.customInputStyle()
     },
 

core/frontend/src/components/widget/deWidget/DeSelect.vue

@@ -94,7 +94,9 @@ export default {
       data: [],
       onFocus: false,
       keyWord: '',
-      separator: ','
+      separator: ',',
+      timeMachine: null,
+      changeIndex: 0
     }
   },
   computed: {
@@ -292,8 +294,55 @@ export default {
       this.value = this.element.options.attrs.multiple ? [] : null
       this.$refs.deSelect && this.$refs.deSelect.resetSelectAll && this.$refs.deSelect.resetSelectAll()
     },
+
+    searchWithKey(index) {
+      this.timeMachine = setTimeout(() => {
+        if (index === this.changeIndex) {
+          this.refreshOptions()
+        }
+        this.destroyTimeMachine()
+      }, 1500)
+    },
+    destroyTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
     filterMethod(key) {
+      if (key === this.keyWord) {
+        return
+      }
       this.keyWord = key
+      this.destroyTimeMachine()
+      this.changeIndex++
+      this.searchWithKey(this.changeIndex)
+    },
+    refreshOptions() {
+      // this.data = []
+      let method = multFieldValues
+      const token = this.$store.getters.token || getToken()
+      const linkToken = this.$store.getters.linkToken || getLinkToken()
+      if (!token && linkToken) {
+        method = linkMultFieldValues
+      }
+      if (!this.element.options.attrs.fieldId) {
+        return
+      }
+      const param = { fieldIds: this.element.options.attrs.fieldId.split(this.separator), sort: this.element.options.attrs.sort, keyword: this.keyWord }
+      if (this.panelInfo.proxy) {
+        param.userId = this.panelInfo.proxy
+      }
+      this.element.options.attrs.fieldId &&
+      this.element.options.attrs.fieldId.length > 0 &&
+      method(param).then(res => {
+        // console.log(res.data)
+        this.data = this.optionData(res.data)
+        /* this.$nextTick(() => {
+          this.handleCoustomStyle()
+        }) */
+        // bus.$emit('valid-values-change', true)
+      }).catch(e => {
+        // bus.$emit('valid-values-change', false)
+      })
     },
     onScroll() {
       if (this.onFocus) {