Merge pull request #3430 from dataease/pr@dev@feat_tab-filter

feat(仪表板): Tab组件内的过滤组件作用域仅限于当前Tab页范围

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

@@ -41,12 +41,14 @@
         :in-screen="inScreen"
         :edit-mode="'preview'"
         :h="config.style.height"
+        :canvas-id="canvasId"
       />
       <component
         :is="config.component"
         v-else
         ref="wrapperChild"
         class="component"
+        :canvas-id="canvasId"
         :out-style="config.style"
         :style="getComponentStyleDefault(config.style)"
         :prop-value="config.propValue"
@@ -83,6 +85,10 @@ export default {
   components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
   mixins: [mixins],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     sourceConfig: {
       type: Object,
       require: true,

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

@@ -58,6 +58,7 @@
       <de-out-widget
         v-if="renderOk && item.type==='custom'"
         :id="'component' + item.id"
+        :canvas-id="canvasId"
         ref="wrapperChild"
         class="component"
         :style="getComponentStyleDefault(item.style)"
@@ -72,6 +73,7 @@
         :is="item.component"
         v-else-if="renderOk && item.type==='other'"
         :id="'component' + item.id"
+        :canvas-id="canvasId"
         ref="wrapperChild"
         class="component"
         :style="getComponentStyle(item.style)"
@@ -84,6 +86,7 @@
         :is="item.component"
         v-else-if="renderOk"
         :id="'component' + item.id"
+        :canvas-id="canvasId"
         ref="wrapperChild"
         class="component"
         :filters="filterMap[item.propValue && item.propValue.viewId]"
@@ -1416,10 +1419,12 @@ export default {
             matrixStyleOriginWidth: this.matrixStyle.originWidth,
             matrixStyleOriginHeight: this.matrixStyle.originHeight
           })
-        this.$store.commit('setPreviewCanvasScale', {
+        if(this.canvasId === 'canvas-main'){
-          scaleWidth: this.scalePointWidth,
+          this.$store.commit('setPreviewCanvasScale', {
-          scaleHeight: this.scalePointHeight
+            scaleWidth: this.scalePointWidth,
-        })
+            scaleHeight: this.scalePointHeight
+          })
+        }
       }
     },
     getShapeStyleIntDeDrag(style, prop, item) {
@@ -1627,7 +1632,6 @@ export default {
       let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
       newX = newX > 0 ? newX : 1
       newY = newY > 0 ? newY : 1
-      console.log("moveTabCollisionActive="+this.moveTabCollisionActive)
       if (this.moveTabCollisionActive) {
         return
       }

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

@@ -43,6 +43,7 @@
           :key="index"
           ref="viewWrapperChild"
           :config="item"
+          :canvas-id="canvasId"
           :source-config="componentData[index]"
           :search-count="searchCount"
           :in-screen="inScreen"
@@ -440,7 +441,9 @@ export default {
       } else {
         this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比
       }
-      this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
+      if(this.canvasId === 'canvas-main'){
+        this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
+      }
       this.handleScaleChange()
     },
     resetID(data) {

frontend/src/components/canvas/custom-component/UserView.vue

@@ -216,6 +216,10 @@ export default {
   name: 'UserView',
   components: { UserViewDialog, DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null

frontend/src/components/dataease/DeOutWidget.vue

@@ -39,6 +39,7 @@
                 :is="element.component"
                 v-if="element.type==='custom'"
                 :id="'component' + element.id"
+                :canvas-id="canvasId"
                 ref="deOutWidget"
                 class="component-custom"
                 :out-style="element.style"
@@ -64,6 +65,10 @@ export default {
   name: 'DeOutWidget',
   mixins: [inputStyleMixin],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: () => {}

frontend/src/components/widget/DeWidget/DeDate.vue

@@ -35,6 +35,10 @@ import customInput from '@/components/widget/DeWidget/customInput'
 export default {
   mixins: [customInput],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -221,6 +225,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator

frontend/src/components/widget/DeWidget/DeInputSearch.vue

@@ -27,6 +27,10 @@ import bus from '@/utils/bus'
 export default {
 
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -104,6 +108,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: !this.value ? [] : Array.isArray(this.value) ? this.value : [this.value],
         operator: this.operator

frontend/src/components/widget/DeWidget/DeNumberRange.vue

@@ -47,6 +47,10 @@ import bus from '@/utils/bus'
 export default {
 
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -230,6 +234,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: [this.form.min, this.form.max],
         operator: this.operator

frontend/src/components/widget/DeWidget/DeSelect.vue

@@ -52,6 +52,10 @@ export default {
   components: { ElVisualSelect },
   mixins: [customInput],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: () => {}
@@ -311,6 +315,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator

frontend/src/components/widget/DeWidget/DeSelectGrid.vue

@@ -73,6 +73,10 @@ import { attrsMap, styleAttrs, textSelectGridWidget } from '@/components/widget/
 
 export default {
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -312,6 +316,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator

frontend/src/components/widget/DeWidget/DeSelectTree.vue

@@ -36,6 +36,10 @@ export default {
   components: { ElTreeSelect },
   mixins: [customInput],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: () => {}
@@ -298,6 +302,7 @@ export default {
       const val = this.formatFilterValue()
 
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: val,
         operator: this.operator,

frontend/src/store/index.js

@@ -164,7 +164,7 @@ const data = {
     ...snapshot.mutations,
     ...lock.mutations,
 
-    setTabActiveTabNameMap(state, tabActiveInfo){
+    setTabActiveTabNameMap(state, tabActiveInfo) {
       state.tabActiveTabNameMap[tabActiveInfo.tabId] = tabActiveInfo.activeTabName
     },
 
@@ -288,6 +288,13 @@ const data = {
       const vValid = valueValid(condition)
       //   1.根据componentId过滤
       const filterComponentId = condition.componentId
+      const canvasId = data.canvasId
+
+      //过滤时 主画布的过滤组件可以过滤所有的视图
+      const canvasViewIds = state.componentData.filter(item => item.type === 'view' && (canvasId === 'canvas-main' || item.canvasId === canvasId)).map((itemView) => {
+        return itemView.propValue.viewId
+      })
+      const canvasViewIdMatch = (viewId) => canvasViewIds && canvasViewIds.length > 0 && canvasViewIds.includes(viewId)
 
       //   2.循环每个Component 得到 三种情况 a增加b删除c无操作
       const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
@@ -317,7 +324,7 @@ const data = {
         }
         if (!element.type || element.type !== 'view') continue
         const currentFilters = element.filters || []
-        const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId)
+        const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId) && canvasViewIdMatch(element.propValue.viewId)
         let j = currentFilters.length
         while (j--) {
           const filter = currentFilters[j]
@@ -484,12 +491,8 @@ const data = {
         }
       }
     },
-
+    deleteComponent(state) {
-    deleteComponent(state, index) {
+      this.commit('deleteComponentWithId',state.curComponent.id)
-      if (index === undefined) {
-        index = state.curComponentIndex
-      }
-      state.componentData.splice(index, 1)
     },
     setLinkageInfo(state, targetLinkageInfo) {
       state.linkageSettingStatus = true
@@ -752,13 +755,13 @@ const data = {
     setTabMoveOutComponentId(state, componentId) {
       state.tabMoveOutComponentId = componentId
     },
-    clearTabMoveInfo(state){
+    clearTabMoveInfo(state) {
       state.tabMoveInActiveId = null
       state.tabCollisionActiveId = null
       state.tabMoveOutActiveId = null
       state.tabMoveOutComponentId = null
     },
-    setMousePointShadowMap(state,mousePoint){
+    setMousePointShadowMap(state, mousePoint) {
       state.mousePointShadowMap.mouseX = mousePoint.mouseX
       state.mousePointShadowMap.mouseY = mousePoint.mouseY
       state.mousePointShadowMap.width = mousePoint.width