From c9f9122c1294c1884aa92fcd72abc0c6895a4647 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 19 Dec 2023 17:54:25 +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/icons/svg/icon-filter_outlined.svg    |  3 +
 .../src/views/chart/view/ChartEdit.vue        | 84 +++++++++++-------
 .../src/views/chart/view/FilterTree.vue       | 86 +++++++++++++++++++
 3 files changed, 142 insertions(+), 31 deletions(-)
 create mode 100644 core/frontend/src/icons/svg/icon-filter_outlined.svg
 create mode 100644 core/frontend/src/views/chart/view/FilterTree.vue

diff --git a/core/frontend/src/icons/svg/icon-filter_outlined.svg b/core/frontend/src/icons/svg/icon-filter_outlined.svg
new file mode 100644
index 0000000000..edff90dc53
--- /dev/null
+++ b/core/frontend/src/icons/svg/icon-filter_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12"  xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 5.71552V10.75C8 10.8881 7.88807 11 7.75 11H7.25C7.11193 11 7 10.8881 7 10.75V5.5C7 5.42652 7.01585 5.35674 7.04432 5.2939C7.08231 5.19959 7.15031 5.11653 7.24423 5.06046L10 3.41546V2H2V3.4329L4.67252 5.03056C4.86366 5.10083 5 5.28449 5 5.5V9C5 9.13807 4.88807 9.25 4.75 9.25H4.25C4.11193 9.25 4 9.13807 4 9V5.73259L1.23691 4.08079C1.17489 4.04371 1.12421 3.99484 1.08604 3.93873C1.03333 3.8929 1 3.82534 1 3.75V1.5C1 1.22386 1.22386 1 1.5 1H10.5C10.6381 1 10.7631 1.05596 10.8536 1.14645C10.944 1.23693 11 1.36193 11 1.5V3.59655C11.0039 3.63166 11.0038 3.6669 11 3.70162V3.75C11 3.83421 10.9584 3.90869 10.8946 3.95399C10.86 3.99642 10.8176 4.03363 10.7679 4.06329L8 5.71552Z" />
+</svg>
diff --git a/core/frontend/src/views/chart/view/ChartEdit.vue b/core/frontend/src/views/chart/view/ChartEdit.vue
index 8e219fff94..62bf76e736 100644
--- a/core/frontend/src/views/chart/view/ChartEdit.vue
+++ b/core/frontend/src/views/chart/view/ChartEdit.vue
@@ -1095,36 +1095,19 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span>{{ $t('chart.result_filter') }}</span>
-                      <draggable
-                        v-model="view.customFilter"
-                        group="drag"
-                        animation="300"
-                        :move="onMove"
-                        class="theme-item-class"
-                        style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
-                        @add="addCustomFilter"
-                        @update="calcData(true)"
-                      >
-                        <transition-group class="draggable-group">
-                          <filter-item
-                            v-for="(item,index) in view.customFilter"
-                            :key="item.id"
-                            :param="param"
-                            :index="index"
-                            :item="item"
-                            :dimension-data="dimension"
-                            :quota-data="quota"
-                            @onFilterItemRemove="filterItemRemove"
-                            @editItemFilter="showEditFilter"
-                          />
-                        </transition-group>
-                      </draggable>
-                      <div
-                        v-if="!view.customFilter || view.customFilter.length === 0"
-                        class="drag-placeholder-style"
-                      >
-                        <span class="drag-placeholder-style-span">{{ $t('chart.placeholder_field') }}</span>
+                      <span class="data-area-label">
+                        <span>{{ $t('chart.result_filter') }}</span>
+                        <span class="setting">已设置</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                        />
+                      </span>
+                      <div class="tree-btn" @click="openTreeFilter">
+                        <svg-icon
+                          class="svg-background"
+                          icon-class="icon-filter_outlined"
+                        />
+                        <span>过滤</span>
                       </div>
                     </el-row>
                     <el-row
@@ -1833,6 +1816,7 @@
         @onEditClose="closeChartCalcField"
       />
     </el-dialog>
+    <FilterTree @filter-data="changeFilterData" ref="filterTree"></FilterTree>
   </el-row>
 </template>
 
@@ -1888,7 +1872,7 @@ import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import DimensionExtItem from '@/views/chart/components/dragItem/DimensionExtItem'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import { mapState } from 'vuex'
-
+import FilterTree from './FilterTree.vue'
 import FunctionCfg from '@/views/chart/components/senior/FunctionCfg'
 import MapMapping from '@/views/chart/components/senior/MapMapping'
 import AssistLine from '@/views/chart/components/senior/AssistLine'
@@ -1924,6 +1908,7 @@ export default {
     ChartComponentG2,
     QuotaExtItem,
     FilterItem,
+    FilterTree,
     FieldEdit,
     TableSelector,
     ResultFilterEditor,
@@ -1942,6 +1927,11 @@ export default {
     MapMapping,
     MarkMapDataEditor
   },
+  provide() {
+    return {
+      filedList: () => this.filedList
+    }
+  },
   props: {
     param: {
       type: Object,
@@ -2075,6 +2065,9 @@ export default {
     }
   },
   computed: {
+    filedList() {
+      return [...this.dimension, ...this.quota]
+    },
     obj() {
       return {
         view: this.view,
@@ -2298,6 +2291,13 @@ export default {
   },
 
   methods: {
+    changeFilterData(customFilter) {
+      this.view.customFilter = customFilter
+      this.calcData(true)
+    },
+    openTreeFilter() {
+      this.$refs.filterTree.init(this.view.customFilter)
+    },
     includesAny,
     equalsAny,
     setTitle(title, id) {
@@ -4271,8 +4271,30 @@ span {
   position: relative;
   width: 100%;
   display: inline-block;
+  .setting {
+    padding: 0px 4px 0px 4px;
+    border-radius: 2px;
+    background-color: #1F23291A;
+    color: #646A73;
+    position: absolute;
+    top: 1px;
+    right: 23px;
+    z-index: 1;
+  }
 }
 
+.tree-btn {
+    width: 100%;
+    background: #fff;
+    height: 28px;
+    border-radius: 4px;
+    border: 1px solid #BBBFC4;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    justify-content: center;
+  }
+
 .data-area-clear {
   position: absolute;
   top: 4px;
diff --git a/core/frontend/src/views/chart/view/FilterTree.vue b/core/frontend/src/views/chart/view/FilterTree.vue
new file mode 100644
index 0000000000..f810c62f7a
--- /dev/null
+++ b/core/frontend/src/views/chart/view/FilterTree.vue
@@ -0,0 +1,86 @@
+<template>
+    <el-dialog
+        width="896px"
+        append-to-body
+        title="添加过滤"
+        destroy-on-close
+        class="de-dialog-form filter-tree-cont"
+        :visible.sync="dialogVisible"
+    >
+    <div class="tree-cont">
+            <div class="content">
+              <rowAuth ref="rowAuth" />
+            </div>
+          </div>
+          <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          @click="closeFilter"
+        >{{ $t('chart.cancel') }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="changeFilter"
+        >{{ $t('chart.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+</template>
+<script>
+import rowAuth from '@/views/dataset/data/components/rowAuth.vue'
+export default {
+  name: 'FilterTree',
+  components: {
+    rowAuth
+  },
+    data() {
+        return {
+            dialogVisible: false,
+        }
+    },
+    methods: {
+        closeFilter() {
+            this.dialogVisible = false
+        },
+        changeFilter() {
+            const { logic, items, errorMessage } = this.$refs.rowAuth.submit()
+            if (errorMessage) {
+              this.$message({
+                message: errorMessage,
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+            this.$emit('filter-data', { logic, items })
+            this.dialogVisible = false
+        },
+        init(tree) {
+          this.dialogVisible = true
+          this.$nextTick(() => {
+            this.$refs.rowAuth.init(tree || {})
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.filter-tree-cont {
+  .tree-cont {
+      height: 200px;
+      width: 100%;
+      padding: 16px;
+      border-radius: 4px;
+      border: 1px solid var(--deBorderBase, #DCDFE6);
+      overflow: auto;
+  
+      .content {
+        height: 100%;
+        width: 100%;
+      }
+    }
+}
+</style>
\ No newline at end of file