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

feat(仪表板): Tab组件内的过滤组件作用域仅限于当前Tab页范围
2022-10-24 17:39:35 +08:00 · 2022-10-24 17:39:35 +08:00 · dc05931e24
commit dc05931e24
parent 70aba6070e 716328444e
12 changed files with 71 additions and 16 deletions
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/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,
--- a/frontend/src/components/canvas/components/Editor/DeEditor.vue
+++ b/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', {
-          scaleWidth: this.scalePointWidth,
-          scaleHeight: this.scalePointHeight
-        })
+        if(this.canvasId === 'canvas-main'){
+          this.$store.commit('setPreviewCanvasScale', {
+            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
      }
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/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) {
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/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
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/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: () => {}
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/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
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/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
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/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
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/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
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/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
--- a/frontend/src/components/widget/DeWidget/DeSelectTree.vue
+++ b/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,
--- a/frontend/src/store/index.js
+++ b/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, index) {
-      if (index === undefined) {
-        index = state.curComponentIndex
-      }
-      state.componentData.splice(index, 1)
+    deleteComponent(state) {
+      this.commit('deleteComponentWithId',state.curComponent.id)
    },
    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