feat: 过滤组件选择数据集时支持逐级返回

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

@@ -33,7 +33,7 @@
                   v-if="showDomType === 'tree'"
                   :default-expanded-keys="expandedArray"
                   node-key="id"
-                  :data="datas"
+                  :data="tempTreeDatas || datas"
                   :props="defaultProps"
 
                   @node-click="handleNodeClick"
@@ -296,7 +296,8 @@ export default {
         viewInfos: []
       },
       currentElement: null,
-      allFields: []
+      allFields: [],
+      tempTreeDatas: null
     }
   },
   computed: {
@@ -427,7 +428,6 @@ export default {
       }, {})
       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
@@ -435,22 +435,29 @@ export default {
           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
     },
+    getNode(id, roots) {
+      for (let index = 0; index < roots.length; index++) {
+        const node = roots[index]
+        if (node.id === id) return node
+
+        if (node && node.children && node.children.length) {
+          const temp = this.getNode(id, node.children)
+          if (temp) return temp
+        }
+      }
+      return null
+    },
+
     loadViews() {
-      /* const viewIds = this.componentData
-        .filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
-        .map(item => item.propValue.viewId) */
       let viewIds = []; let tabViewIds = []
       for (let index = 0; index < this.componentData.length; index++) {
         const element = this.componentData[index]
@@ -465,27 +472,21 @@ export default {
       }
       viewIds && viewIds.length > 0 && viewsWithIds(viewIds).then(res => {
         const datas = res.data
-        /* datas.forEach(item => {
-          if (tabViewIds.includes(item.id)) {
-            item.name = 'tabs(' + item.name + ')'
-          }
-        }) */
+
         this.viewInfos = datas
         this.childViews.viewInfos = datas
       })
       viewIds && viewIds.length > 0 && paramsWithIds(viewIds).then(res => {
         const datas = res.data
-        /* datas.forEach(item => {
-          if (tabViewIds.includes(item.id)) {
-            item.name = 'tabs(' + item.name + ')'
-          }
-        }) */
+
         this.childViews.datasetParams = datas
       })
     },
     handleNodeClick(data) {
-      if (data.type !== 'group') {
+      if (data.modelInnerType !== 'group') {
         this.showFieldDatas(data)
+      } else {
+        this.showNextGroup(data)
       }
     },
 
@@ -499,7 +500,7 @@ export default {
 
     setTailLink(node) {
       const tail = this.dataSetBreads[this.dataSetBreads.length - 1]
-      tail.type = node.type
+      tail.type = node.modelInnerType
       tail.link = true
     },
     comSetTailLink(node) {
@@ -511,10 +512,58 @@ export default {
       const tail = {
         link: false,
         label: node.label || node.name,
-        type: node.type
+        type: node.modelInnerType,
+        id: node.id
       }
       this.dataSetBreads.push(tail)
     },
+    addQueue(node) {
+      this.dataSetBreads = this.dataSetBreads.slice(0, 1)
+      const root = {
+        id: null,
+        children: JSON.parse(JSON.stringify(this.datas))
+      }
+      this.getPathById(node.id, root, res => {
+        if (res.length > 1) {
+          for (let index = 1; index < res.length; index++) {
+            const node = res[index]
+            const temp = {
+              link: true,
+              label: node.label || node.name,
+              type: node.modelInnerType,
+              id: node.id
+            }
+            this.dataSetBreads.push(temp)
+            this.dataSetBreads[0].link = true
+          }
+
+          this.dataSetBreads[this.dataSetBreads.length - 1].link = false
+        }
+      })
+    },
+    getPathById(id, catalog, callback) {
+      var temppath = []
+      try {
+        const getNodePath = function(node) {
+          temppath.push(node)
+          if (node.id === id) {
+            // eslint-disable-next-line no-throw-literal
+            throw ('GOT IT!')
+          }
+          if (node.children && node.children.length > 0) {
+            for (var i = 0; i < node.children.length; i++) {
+              getNodePath(node.children[i])
+            }
+            temppath.pop()
+          } else {
+            temppath.pop()
+          }
+        }
+        getNodePath(catalog)
+      } catch (e) {
+        callback(temppath)
+      }
+    },
     comAddTail(node) {
       const tail = {
         link: false,
@@ -525,9 +574,14 @@ export default {
     },
 
     removeTail(bread) {
+      if (!bread.id) {
+        this.dataSetBreads = this.dataSetBreads.slice(0, 1)
+        this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
+        return
+      }
       for (let index = 0; index < this.dataSetBreads.length; index++) {
         const element = this.dataSetBreads[index]
-        if (element.type === bread.type) {
+        if (element.type === bread.type && element.id === bread.id) {
           this.dataSetBreads = this.dataSetBreads.slice(0, index + 1)
           this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
           return
@@ -546,6 +600,15 @@ export default {
         this.expandedArray = []
         this.keyWord = ''
         this.isTreeSearch = false
+        if (bread.id) {
+          const node = this.getNode(bread.id, this.datas)
+          if (node) {
+            this.tempTreeDatas = node.children
+          }
+        } else {
+          this.tempTreeDatas = null
+        }
+
         this.datas = JSON.parse(JSON.stringify(this.defaultDatas))
       })
     },
@@ -580,11 +643,16 @@ export default {
     showFieldDatas(row) {
       this.keyWord = ''
       this.showDomType = 'field'
-      this.setTailLink(row)
-      this.addTail(row)
+      this.addQueue(row)
       this.fieldsParent = row
       this.loadField(row.id)
     },
+    showNextGroup(row) {
+      this.tempTreeDatas = JSON.parse(JSON.stringify(row.children))
+      this.keyWord = ''
+      this.showDomType = 'tree'
+      this.addQueue(row)
+    },
     comShowFieldDatas(row) {
       this.viewKeyWord = ''
       this.comShowDomType = 'field'