From 28ae01b938535c6e4133d34978558a693bbff9db Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Wed, 20 Dec 2023 11:14:44 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=86=E5=9B=BE=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E5=99=A8=E6=94=AF=E6=8C=81=E4=B8=8E=E6=88=96=E5=85=B3=E7=B3=BB?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/chart/view/ChartEdit.vue        | 23 +++++++--
 .../src/views/chart/view/FilterTree.vue       | 49 ++++++++++++++++---
 2 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index c2ae9bb3c6..49e41e1158 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/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 {
diff --git a/core/frontend/src/views/chart/view/FilterTree.vue b/core/frontend/src/views/chart/view/FilterTree.vue
index f810c62f7a..278526a6f2 100644
--- a/core/frontend/src/views/chart/view/FilterTree.vue
+++ b/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>