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

2023-01-31 17:23:14 +08:00 · 2023-01-31 17:23:14 +08:00 · be6f263afb
commit be6f263afb
parent 12c4c93187
6 changed files with 135 additions and 35 deletions
--- a/frontend/src/components/canvas/DeCanvas.vue
+++ b/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)
--- a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@ -223,10 +223,18 @@ export default {
    runAnimation(this.$el, this.config.animations)
  },
  methods: {
-    setChartData(chart) {
-      this.chart = chart
+    getComponentId() {
+      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']
--- a/frontend/src/components/canvas/components/editor/DeEditor.vue
+++ b/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.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]
        }
@ -1212,20 +1233,16 @@ export default {
      return result
    },
    buildViewKeyFilters(panelItems, result, isClear = false) {
-      const refs = this.$refs
-      if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result
-      const len = this.$refs['wrapperChild'].length
+      const wrapperChildAll = this.getAllWrapperChildRefs()
+      if (!wrapperChildAll || !wrapperChildAll.length) return result
      panelItems.forEach((element) => {
-        if (element.type !== 'custom') {
-          return true
-        }
-
        let param = null
-        const index = this.getComponentIndex(element.id)
-        if (index < 0 || index >= len) {
-          return true
-        }
-        const wrapperChild = refs['wrapperChild'][index]
+        let wrapperChild
+        wrapperChildAll?.forEach(item => {
+          if (item?.['getComponentId'] && item.getComponentId() === element.id) {
+            wrapperChild = item
+          }
+        })
        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++) {
-        const item = this.componentData[index]
+      for (let index = 0; index < this.$store.state.componentData.length; index++) {
+        const item = this.$store.state.componentData[index]
        if (item.id === id) return index
      }
      return -1
--- a/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/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
-      if (!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result
+      const wrapperChildAll = this.getAllWrapperChildRefs()
+      if (!wrapperChildAll || !wrapperChildAll.length) return result
      panelItems.forEach((element) => {
        if (element.type !== 'custom') {
          return true
        }
-
-        const index = this.getComponentIndex(element.id)
-        if (index < 0) {
-          return true
-        }
+        let wrapperChild
+        wrapperChildAll?.forEach(item => {
+          if (item?.['getComponentId'] && item.getComponentId() === element.id) {
+            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]
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/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 = {
--- a/frontend/src/components/widget/deWidget/DeTabs.vue
+++ b/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 {