fix(仪表板): 修复查询按钮不能控制Tab组件内部视图问题

frontend/src/components/canvas/DeCanvas.vue

@@ -252,6 +252,9 @@ export default {
     bus.$off('button-dialog-edit', this.editButtonDialog)
   },
   methods: {
+    getWrapperChildRefs() {
+      return this.$refs[this.editorRefName].getWrapperChildRefs()
+    },
     initEvents() {
       bus.$on('component-dialog-edit', this.editDialog)
       bus.$on('button-dialog-edit', this.editButtonDialog)

frontend/src/components/canvas/components/editor/ComponentWrapper.vue

@@ -223,10 +223,18 @@ export default {
     runAnimation(this.$el, this.config.animations)
   },
   methods: {
-    setChartData(chart) {
+    getComponentId() {
-      this.chart = chart
+      return this.config.id
+    },
+    getCanvasId() {
+      return this.canvasId
+    },
+    getType() {
+      return this.config.type
+    },
+    getWrapperChildRefs() {
+      return this.$refs.wrapperChild.getWrapperChildRefs()
     },
-    getStyle,
     getShapeStyleIntDeDrag(style, prop) {
       if (prop === 'rotate') {
         return style['rotate']

frontend/src/components/canvas/components/editor/DeEditor.vue

@@ -1017,7 +1017,7 @@ export default {
     ]),
 
     searchButtonInfo() {
-      const result = this.buildButtonFilterMap(this.componentData)
+      const result = this.buildButtonFilterMap(this.$store.state.componentData)
       return result
     },
     filterMap() {
@@ -1138,6 +1138,25 @@ export default {
   created() {
   },
   methods: {
+    getWrapperChildRefs() {
+      return this.$refs['wrapperChild']
+    },
+    getAllWrapperChildRefs() {
+      let allChildRefs = []
+      const currentChildRefs = this.getWrapperChildRefs()
+      if (currentChildRefs && currentChildRefs.length > 0) {
+        allChildRefs.push.apply(allChildRefs, currentChildRefs)
+      }
+      currentChildRefs && currentChildRefs.forEach(subRef => {
+        if (subRef?.getType && subRef.getType() === 'de-tabs') {
+          const currentTabChildRefs = subRef.getWrapperChildRefs()
+          if (currentTabChildRefs && currentTabChildRefs.length > 0) {
+            allChildRefs.push.apply(allChildRefs, currentTabChildRefs)
+          }
+        }
+      })
+      return allChildRefs
+    },
     setChartData(chart) {
       this.componentData.forEach((item, index) => {
         if (item.type === 'view' && item.component === 'user-view' && item.propValue.viewId === chart.id) {
@@ -1154,7 +1173,7 @@ export default {
       })
     },
     refreshButtonInfo(isClear = false) {
-      const result = this.buildButtonFilterMap(this.componentData, isClear)
+      const result = this.buildButtonFilterMap(this.$store.state.componentData, isClear)
       this.searchButtonInfo.buttonExist = result.buttonExist
       this.searchButtonInfo.relationFilterIds = result.relationFilterIds
       this.searchButtonInfo.filterMap = result.filterMap
@@ -1162,10 +1181,12 @@ export default {
       this.buttonFilterMap = this.searchButtonInfo.filterMap
     },
     triggerSearchButton(isClear = false) {
+      if (this.canvasId !== 'canvas-main') {
+        return
+      }
       this.refreshButtonInfo(isClear)
       this.buttonFilterMap = this.searchButtonInfo.filterMap
-
+      this.$store.state.componentData.forEach(component => {
-      this.componentData.forEach(component => {
         if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
           component.filters = this.buttonFilterMap[component.propValue.viewId]
         }
@@ -1212,20 +1233,16 @@ export default {
       return result
     },
     buildViewKeyFilters(panelItems, result, isClear = false) {
-      const refs = this.$refs
+      const wrapperChildAll = this.getAllWrapperChildRefs()
-      if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result
+      if (!wrapperChildAll || !wrapperChildAll.length) return result
-      const len = this.$refs['wrapperChild'].length
       panelItems.forEach((element) => {
-        if (element.type !== 'custom') {
-          return true
-        }
-
         let param = null
-        const index = this.getComponentIndex(element.id)
+        let wrapperChild
-        if (index < 0 || index >= len) {
+        wrapperChildAll?.forEach(item => {
-          return true
+          if (item?.['getComponentId'] && item.getComponentId() === element.id) {
+            wrapperChild = item
           }
-        const wrapperChild = refs['wrapperChild'][index]
+        })
         if (!wrapperChild || !wrapperChild.getCondition) return true
         if (isClear) {
           wrapperChild.clearHandler && wrapperChild.clearHandler()
@@ -1234,9 +1251,11 @@ export default {
         const condition = formatCondition(param)
         const vValid = valueValid(condition)
         const filterComponentId = condition.componentId
+        const conditionCanvasId = wrapperChild.getCanvasId && wrapperChild.getCanvasId()
         Object.keys(result).forEach(viewId => {
           const vidMatch = viewIdMatch(condition.viewIds, viewId)
           const viewFilters = result[viewId]
+          const canvasMatch = this.checkCanvasViewIdsMatch(conditionCanvasId, viewId)
           let j = viewFilters.length
           while (j--) {
             const filter = viewFilters[j]
@@ -1244,14 +1263,24 @@ export default {
               viewFilters.splice(j, 1)
             }
           }
-          vidMatch && vValid && viewFilters.push(condition)
+          canvasMatch && vidMatch && vValid && viewFilters.push(condition)
         })
       })
       return result
     },
+    checkCanvasViewIdsMatch(conditionCanvasId, viewId) {
+      if (conditionCanvasId === 'canvas-main') {
+        return true
+      }
+      for (let index = 0; index < this.$store.state.componentData.length; index++) {
+        const item = this.$store.state.componentData[index]
+        if (item.type === 'view' && item.propValue.viewId === viewId && item.canvasId === conditionCanvasId) return true
+      }
+      return false
+    },
     getComponentIndex(id) {
-      for (let index = 0; index < this.componentData.length; index++) {
+      for (let index = 0; index < this.$store.state.componentData.length; index++) {
-        const item = this.componentData[index]
+        const item = this.$store.state.componentData[index]
         if (item.id === id) return index
       }
       return -1

frontend/src/components/canvas/components/editor/Preview.vue

@@ -366,7 +366,7 @@ export default {
     ]),
 
     searchButtonInfo() {
-      const result = this.buildButtonFilterMap(this.componentData)
+      const result = this.buildButtonFilterMap(this.$store.state.componentData)
       return result
     },
     filterMap() {
@@ -448,6 +448,26 @@ export default {
     bus.$off('trigger-reset-button', this.triggerResetButton)
   },
   methods: {
+    getWrapperChildRefs() {
+      return this.$refs['viewWrapperChild']
+    },
+    getAllWrapperChildRefs() {
+      let allChildRefs = []
+      const currentChildRefs = this.getWrapperChildRefs()
+      if (currentChildRefs && currentChildRefs.length > 0) {
+        allChildRefs.push.apply(allChildRefs, currentChildRefs)
+      }
+      currentChildRefs && currentChildRefs.forEach(subRef => {
+        if (subRef?.getType && subRef.getType() === 'de-tabs') {
+          const currentTabChildRefs = subRef.getWrapperChildRefs()
+          if (currentTabChildRefs && currentTabChildRefs.length > 0) {
+            allChildRefs.push.apply(allChildRefs, currentTabChildRefs)
+          }
+        }
+      })
+      return allChildRefs
+    },
+
     getCanvasHeight() {
       return this.mainHeightCount
     },
@@ -484,12 +504,15 @@ export default {
       })
     },
     triggerSearchButton(isClear = false) {
-      const result = this.buildButtonFilterMap(this.componentData, isClear)
+      if (this.canvasId !== 'canvas-main') {
+        return
+      }
+      const result = this.buildButtonFilterMap(this.$store.state.componentData, isClear)
       this.searchButtonInfo.autoTrigger = result.autoTrigger
       this.searchButtonInfo.filterMap = result.filterMap
       this.buttonFilterMap = this.searchButtonInfo.filterMap
 
-      this.componentData.forEach(component => {
+      this.$store.state.componentData.forEach(component => {
         if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
           component.filters = this.buttonFilterMap[component.propValue.viewId]
         }
@@ -534,19 +557,20 @@ export default {
       return result
     },
     buildViewKeyFilters(panelItems, result, isClear = false) {
-      const refs = this.$refs
+      const wrapperChildAll = this.getAllWrapperChildRefs()
-      if (!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result
+      if (!wrapperChildAll || !wrapperChildAll.length) return result
       panelItems.forEach((element) => {
         if (element.type !== 'custom') {
           return true
         }
-
+        let wrapperChild
-        const index = this.getComponentIndex(element.id)
+        wrapperChildAll?.forEach(item => {
-        if (index < 0) {
+          if (item?.['getComponentId'] && item.getComponentId() === element.id) {
-          return true
+            wrapperChild = item
           }
+        })
+        if (!wrapperChild || !wrapperChild.getCondition) return true
         let param = null
-        const wrapperChild = refs['viewWrapperChild'][index]
         if (isClear) {
           wrapperChild.clearHandler && wrapperChild.clearHandler()
         }
@@ -554,9 +578,12 @@ export default {
         const condition = formatCondition(param)
         const vValid = valueValid(condition)
         const filterComponentId = condition.componentId
+        const conditionCanvasId = wrapperChild.getCanvasId && wrapperChild.getCanvasId()
         Object.keys(result).forEach(viewId => {
           const vidMatch = viewIdMatch(condition.viewIds, viewId)
           const viewFilters = result[viewId]
+          const canvasMatch = this.checkCanvasViewIdsMatch(conditionCanvasId, viewId)
+
           let j = viewFilters.length
           while (j--) {
             const filter = viewFilters[j]
@@ -564,11 +591,21 @@ export default {
               viewFilters.splice(j, 1)
             }
           }
-          vidMatch && vValid && viewFilters.push(condition)
+          canvasMatch && vidMatch && vValid && viewFilters.push(condition)
         })
       })
       return result
     },
+    checkCanvasViewIdsMatch(conditionCanvasId, viewId) {
+      if (conditionCanvasId === 'canvas-main') {
+        return true
+      }
+      for (let index = 0; index < this.$store.state.componentData.length; index++) {
+        const item = this.$store.state.componentData[index]
+        if (item.type === 'view' && item.propValue.viewId === viewId && item.canvasId === conditionCanvasId) return true
+      }
+      return false
+    },
     getComponentIndex(id) {
       for (let index = 0; index < this.componentData.length; index++) {
         const item = this.componentData[index]

frontend/src/components/dataease/DeOutWidget.vue

@@ -175,6 +175,12 @@ export default {
     this.$set(this.element.style, 'innerBgColor', innerBgColor || '')
   },
   methods: {
+    getComponentId() {
+      return this.element.id
+    },
+    getCanvasId() {
+      return this.canvasId
+    },
     handlerPositionChange(val) {
       const { horizontal = 'left', vertical = 'center' } = val
       this.titleStyle = {
@@ -185,7 +191,6 @@ export default {
         flexDirection: 'column'
       }
 
-      
       if (vertical !== 'top' && this.element.component !== 'de-select-grid') {
         this.titleStyle = null
         this.outsideStyle = {

frontend/src/components/widget/deWidget/DeTabs.vue

@@ -76,6 +76,7 @@
         >
           <Preview
             :component-data="tabCanvasComponentData(item.name)"
+            :ref="'canvasTabRef-'+item.name"
             :canvas-style-data="canvasStyleData"
             :canvas-id="element.id+'-'+item.name"
             :panel-info="panelInfo"
@@ -458,6 +459,23 @@ export default {
     bus.$off('add-new-tab', this.addNewTab)
   },
   methods: {
+    getType() {
+      return this.element.type
+    },
+    getWrapperChildRefs() {
+      let refsSubAll = []
+      const _this = this
+      this.element.options.tabList.forEach(tabItem => {
+        const refsSub = _this.$refs['canvasTabRef-' + tabItem.name]
+        if (refsSub && refsSub.length) {
+          const refsSubArray = refsSub[0].getWrapperChildRefs()
+          if (refsSubArray && refsSubArray.length > 0) {
+            refsSubAll.push.apply(refsSubAll, refsSubArray)
+          }
+        }
+      })
+      return refsSubAll
+    },
     titleStyle(itemName) {
       if (this.activeTabName === itemName) {
         return {