fix: 视图过滤器支持与或关系配置

core/frontend/src/views/chart/view/ChartEdit.vue

@@ -1097,13 +1097,15 @@
                     >
                       <span class="data-area-label">
                         <span>{{ $t('chart.result_filter') }}</span>
-                        <span class="setting">已设置</span>
+                        <span v-if="!!view.customFilter.logic" class="setting">已设置</span>
                         <i
+                          @click="deleteTreeFilter"
                           class="el-icon-arrow-down el-icon-delete data-area-clear"
                         />
                       </span>
                       <div
                         class="tree-btn"
+                        :class="!!view.customFilter.logic && 'active'"
                         @click="openTreeFilter"
                       >
                         <svg-icon
@@ -1877,6 +1879,7 @@ import { compareItem } from '@/views/chart/chart/compare'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import DimensionExtItem from '@/views/chart/components/dragItem/DimensionExtItem'
 import PluginCom from '@/views/system/plugin/PluginCom'
+import _ from 'lodash'
 import { mapState } from 'vuex'
 import FilterTree from './FilterTree.vue'
 import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
@@ -2298,11 +2301,14 @@ export default {
 
   methods: {
     changeFilterData(customFilter) {
-      this.view.customFilter = customFilter
+      this.view.customFilter = _.cloneDeep(customFilter)
       this.calcData(true)
     },
     openTreeFilter() {
-      this.$refs.filterTree.init(this.view.customFilter)
+      this.$refs.filterTree.init(_.cloneDeep(this.view.customFilter))
+    },
+    deleteTreeFilter() {
+      this.changeFilterData({})
     },
     includesAny,
     equalsAny,
@@ -4295,13 +4301,20 @@ span {
 .tree-btn {
     width: 100%;
     background: #fff;
-    height: 28px;
+    height: 32px;
     border-radius: 4px;
-    border: 1px solid #BBBFC4;
+    border: 1px solid #DCDFE6;
     display: flex;
+    color: #CCCCCC;
     align-items: center;
     cursor: pointer;
     justify-content: center;
+    font-size: 12px;
+
+    &.active {
+      color: #3370FF;
+      border-color: #3370FF;
+    }
   }
 
 .data-area-clear {

core/frontend/src/views/chart/view/FilterTree.vue

@@ -32,6 +32,7 @@
 import rowAuth from '@/views/dataset/data/components/rowAuth.vue'
 export default {
   name: 'FilterTree',
+  inject: ['filedList'],
   components: {
     rowAuth
   },
@@ -39,6 +40,16 @@ export default {
         return {
             dialogVisible: false,
         }
+  },
+  computed: {
+    computedFiledList() {
+      return this.filedList().reduce((pre, next) => {
+        if (next.id !== 'count') {
+          pre[next.id] = next
+        }
+          return pre
+        }, {})
+      }
     },
     methods: {
         closeFilter() {
@@ -54,15 +65,39 @@ export default {
               })
               return
             }
+            this.dfsTreeDelete(items)
             this.$emit('filter-data', { logic, items })
             this.dialogVisible = false
-        },
-        init(tree) {
-          this.dialogVisible = true
-          this.$nextTick(() => {
-            this.$refs.rowAuth.init(tree || {})
-            })
-        }
+      },
+      dfsTreeDelete(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTreeDelete(ele.subTree.items)
+          } else {
+            if (ele.field) {
+               this.$delete(ele, 'field')
+            }
+          }
+        })
+      },
+      dfsTree(arr) {
+        arr.forEach((ele) => {
+          if (ele?.subTree?.items?.length) {
+            this.dfsTree(ele.subTree.items)
+          } else {
+            if (this.computedFiledList[ele.fieldId]) {
+              ele.field = this.computedFiledList[ele.fieldId]
+            }
+          }
+        })
+      },
+      init(tree) {
+        this.dialogVisible = true
+        this.$nextTick(() => {
+          this.dfsTree(tree.items || [])
+          this.$refs.rowAuth.init(tree || {})
+        })
+      }
     }
 }
 </script>