feat: 过滤条件穿透到tab组件内部视图

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

@@ -2,7 +2,7 @@
   <div class="de-tabs-div">
     <el-tabs v-model="activeTabName" type="card" class="de-tabs">
       <el-tab-pane
-        v-for="(item, index) in tabList"
+        v-for="(item, index) in element.options.tabList"
         :key="item.name+index"
         :lazy="true"
         :name="item.name"
@@ -26,7 +26,7 @@
                 {{ $t('detabs.selectview') }}
               </el-dropdown-item>
 
-              <el-dropdown-item v-if="tabList.length > 1" :command="beforeHandleCommond('deleteCur', item)">
+              <el-dropdown-item v-if=" element.options.tabList.length > 1" :command="beforeHandleCommond('deleteCur', item)">
                 {{ $t('table.delete') }}
               </el-dropdown-item>
 
@@ -35,7 +35,7 @@
         </span>
 
         <div v-if="activeTabName === item.name" class="de-tab-content">
-          <user-view v-if="item.content && item.content.propValue && item.content.propValue.viewId" :ref="item.name" :in-tab="true" :is-edit="isEdit" :active="active" :element="item.content" :out-style="outStyle" />
+          <user-view v-if="item.content && item.content.propValue && item.content.propValue.viewId" :ref="item.name" :in-tab="true" :is-edit="isEdit" :active="active" :element="item.content" :filters="item.content.filters" :out-style="outStyle" />
         </div>
 
       </el-tab-pane>
@@ -130,14 +130,15 @@ export default {
       dialogVisible: false,
       textarea: '',
       curItem: null,
-      viewDialogVisible: false,
+      viewDialogVisible: false
-      tabList: []
+
     }
   },
   computed: {
     dropdownShow() {
       return this.isEdit && !this.mobileLayoutStatus
     },
+
     ...mapState([
       'curComponent',
       'mobileLayoutStatus'
@@ -152,8 +153,7 @@ export default {
   },
   created() {
     bus.$on('add-new-tab', this.addNewTab)
-    this.tabList = this.element.options && this.element.options.tabList
+    this.activeTabName = this.element.options.tabList[0].name
-    this.activeTabName = this.tabList[0].name
   },
   methods: {
     beforeHandleCommond(item, param) {
@@ -192,7 +192,8 @@ export default {
       const newComponentId = uuid.v1()
       const componentInfo = {
         type: 'view',
-        id: node.id
+        /* id: node.id */
+        id: node.innerId
       }
 
       componentList.forEach(componentTemp => {
@@ -239,7 +240,7 @@ export default {
       while (len--) {
         if (this.element.options.tabList[len].name === param.name) {
           this.element.options.tabList.splice(len, 1)
-          this.tabList = this.element.options.tabList
+
           const activIndex = (len - 1 + this.element.options.tabList.length) % this.element.options.tabList.length
           this.activeTabName = this.element.options.tabList[activIndex].name
         }
@@ -256,7 +257,7 @@ export default {
         content: null
       }
       this.element.options.tabList.push(tab)
-      this.tabList = this.element.options.tabList
+
       this.styleChange()
     },
     styleChange() {

frontend/src/store/index.js

@@ -203,20 +203,35 @@ const data = {
 
       for (let index = 0; index < state.componentData.length; index++) {
         const element = state.componentData[index]
+        if (element.type && element.type === 'de-tabs') {
+          for (let idx = 0; idx < element.options.tabList.length; idx++) {
+            const ele = element.options.tabList[idx].content
+            if (!ele.type || ele.type !== 'view') continue
+            const currentFilters = ele.filters || []
+            const vidMatch = viewIdMatch(condition.viewIds, ele.propValue.viewId)
+
+            let jdx = currentFilters.length
+            while (jdx--) {
+              const filter = currentFilters[jdx]
+              if (filter.componentId === filterComponentId) {
+                currentFilters.splice(jdx, 1)
+              }
+            }
+            // 不存在该条件 且 条件有效 直接保存该条件
+            // !filterExist && vValid && currentFilters.push(condition)
+            vidMatch && vValid && currentFilters.push(condition)
+            ele.filters = currentFilters
+          }
+          state.componentData[index] = element
+        }
         if (!element.type || element.type !== 'view') continue
         const currentFilters = element.filters || []
         const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId)
 
         let j = currentFilters.length
-        // let filterExist = false
         while (j--) {
           const filter = currentFilters[j]
           if (filter.componentId === filterComponentId) {
-            // filterExist = true
-            // 已存在该条件 且 条件值有效 直接替换原体检
-            // vidMatch && vValid && (currentFilters[j] = condition)
-            // 已存在该条件 且 条件值无效 直接删除原条件
-            // vidMatch && !vValid && (currentFilters.splice(j, 1))
             currentFilters.splice(j, 1)
           }
         }

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

@@ -387,11 +387,28 @@ export default {
       return roots
     },
     loadViews() {
-      const viewIds = this.componentData
+      /* const viewIds = this.componentData
         .filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
-        .map(item => 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]
+        if (element.type && element.propValue && element.propValue.viewId && element.type === 'view') {
+          viewIds.push(element.propValue.viewId)
+        }
+
+        if (element.type && element.type === 'de-tabs') {
+          tabViewIds = element.options.tabList.filter(item => item.content && item.content.type === 'view' && item.content.propValue && item.content.propValue.viewId).map(item => item.content.propValue.viewId)
+        }
+        viewIds = [...viewIds, ...tabViewIds]
+      }
       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
       })