feat: 仪表板查询组件增加快速检索功能

frontend/src/views/panel/filter/filterDialog.vue

@@ -13,8 +13,25 @@
             </el-breadcrumb>
           </div>
           <div class="component-result-content filter-common">
+            <el-col>
+              <el-row>
+                <el-form>
+                  <el-form-item class="my-form-item">
+                    <el-input
+                      v-model="keyWord"
+                      size="mini"
+                      :placeholder="$t('dataset.search')"
+                      prefix-icon="el-icon-search"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-form>
+              </el-row>
+              <el-row>
                 <el-tree
                   v-if="showDomType === 'tree'"
+                  :default-expanded-keys="expandedArray"
+                  node-key="id"
                   :data="datas"
                   :props="defaultProps"
                   lazy
@@ -39,13 +56,15 @@
                     @start="start1"
                   >
                     <transition-group>
-                  <div v-for="item in fieldDatas" :key="item.id" class="filter-db-row">
+                      <div v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))" :key="item.id" class="filter-db-row">
                         <i class="el-icon-s-data" />
                         <span> {{ item.name }}</span>
                       </div>
                     </transition-group>
                   </draggable>
                 </div>
+              </el-row>
+            </el-col>
           </div>
         </el-tab-pane>
         <el-tab-pane :lazy="true" class="de-tab" :label="$t('panel.select_by_module')" name="assembly">
@@ -59,10 +78,26 @@
           </div>
 
           <div class="component-result-content filter-common">
+
+            <el-col>
+              <el-row>
+                <el-form>
+                  <el-form-item class="my-form-item">
+                    <el-input
+                      v-model="viewKeyWord"
+                      size="mini"
+                      :placeholder="$t('dataset.search')"
+                      prefix-icon="el-icon-search"
+                      clearable
+                    />
+                  </el-form-item>
+                </el-form>
+              </el-row>
+              <el-row>
                 <el-table
                   v-if="comShowDomType === 'view'"
                   class="de-filter-data-table"
-              :data="viewInfos"
+                  :data="viewInfos.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))"
                   :show-header="false"
                   size="mini"
                   :highlight-current-row="true"
@@ -90,13 +125,15 @@
                     @start="start1"
                   >
                     <transition-group>
-                  <div v-for="item in comFieldDatas" :key="item.id" class="filter-db-row">
+                      <div v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))" :key="item.id" class="filter-db-row">
                         <i class="el-icon-s-data" />
                         <span> {{ item.name }}</span>
                       </div>
                     </transition-group>
                   </draggable>
                 </div>
+              </el-row>
+            </el-col>
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -201,6 +238,7 @@ import { mapState } from 'vuex'
 // import { ApplicationContext } from '@/utils/ApplicationContext'
 import { groupTree, fieldList, fieldValues, post } from '@/api/dataset/dataset'
 import { viewsWithIds } from '@/api/panel/view'
+import { authModel } from '@/api/system/sysAuth'
 export default {
   name: 'FilterDialog',
   components: {
@@ -259,7 +297,11 @@ export default {
         sort: 'type desc,name asc'
       },
       isTreeSearch: false,
-      defaultDatas: []
+      defaultDatas: [],
+      keyWord: '',
+      timer: null,
+      expandedArray: [],
+      viewKeyWord: ''
     }
   },
   computed: {
@@ -296,6 +338,18 @@ export default {
         this.componentInfo.options.attrs.fieldId = null
         this.$emit('re-fresh-component', this.componentInfo)
       }
+    },
+    keyWord(val) {
+      this.expandedArray = []
+      if (this.showDomType === 'field') {
+        return
+      }
+      if (this.timer) {
+        clearTimeout(this.timer)
+      }
+      this.timer = setTimeout(() => {
+        this.getTreeData(val)
+      }, (val && val !== '') ? 1000 : 0)
     }
   },
   created() {
@@ -310,7 +364,52 @@ export default {
   },
 
   methods: {
+    getTreeData(val) {
+      if (val) {
+        this.isTreeSearch = true
+        this.searchTree(val)
+      } else {
+        this.isTreeSearch = false
+        this.treeNode(this.groupForm)
+      }
+    },
+    searchTree(val) {
+      this.expandedArray = []
+      const queryCondition = {
+        withExtend: 'parent',
+        modelType: 'dataset',
+        name: val
+      }
+      authModel(queryCondition).then(res => {
+        this.datas = this.buildTree(res.data)
+      })
+    },
+    buildTree(arrs) {
+      const idMapping = arrs.reduce((acc, el, i) => {
+        acc[el[this.defaultProps.id]] = i
+        return acc
+      }, {})
+      const roots = []
+      arrs.forEach(el => {
+        // 判断根节点 ###
+        el.type = el.modelInnerType
+        el.isLeaf = el.leaf
+        if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') {
+          roots.push(el)
+          return
+        }
+        // 用映射表找到父元素
+        const parentEl = arrs[idMapping[el[this.defaultProps.parentId]]]
+        // 把当前元素添加到父元素的`children`数组中
+        parentEl.children = [...(parentEl.children || []), el]
 
+        // 设置展开节点 如果没有子节点则不进行展开
+        if (parentEl.children.length > 0) {
+          this.expandedArray.push(parentEl[this.defaultProps.id])
+        }
+      })
+      return roots
+    },
     loadViews() {
       const viewIds = this.componentData
         .filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
@@ -338,7 +437,7 @@ export default {
           }
         }
       } else {
-        resolve(node.data.children)
+        node.data.children && resolve(node.data.children)
       }
     },
     treeNode(group) {
@@ -400,11 +499,15 @@ export default {
 
       this.removeTail(bread)
       this.$nextTick(() => {
+        this.expandedArray = []
+        this.keyWord = ''
+        this.isTreeSearch = false
         this.datas = JSON.parse(JSON.stringify(this.defaultDatas))
       })
     },
     comBackLink(bread) {
       this.comShowDomType = 'view'
+      this.viewKeyWord = ''
       this.comRemoveTail()
     },
     // loadTable(sceneId) {
@@ -435,12 +538,14 @@ export default {
       })
     },
     showFieldDatas(row) {
+      this.keyWord = ''
       this.showDomType = 'field'
       this.setTailLink(row)
       this.addTail(row)
       this.loadField(row.id)
     },
     comShowFieldDatas(row) {
+      this.viewKeyWord = ''
       this.comShowDomType = 'field'
       this.comSetTailLink(row)
       this.comAddTail(row)
@@ -511,6 +616,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  .my-form-item {
+      cursor: text;
+  }
   .de-dialog-container {
     height: 50vh !important;