From ae5eaf003f1fa251f71f89f65913b900144c7765 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Thu, 14 Dec 2023 15:12:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90=E7=94=A8=E6=88=B7=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E3=80=91=E7=AD=9B=E9=80=89=E6=9D=A1=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../drawer-filter/src/DrawerFilter.vue        | 121 ++++-------------
 .../drawer-filter/src/DrawerTreeFilter.vue    | 124 +++---------------
 2 files changed, 42 insertions(+), 203 deletions(-)

diff --git a/core/core-frontend/src/components/drawer-filter/src/DrawerFilter.vue b/core/core-frontend/src/components/drawer-filter/src/DrawerFilter.vue
index 895c01b80f..af7903f5ad 100644
--- a/core/core-frontend/src/components/drawer-filter/src/DrawerFilter.vue
+++ b/core/core-frontend/src/components/drawer-filter/src/DrawerFilter.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { propTypes } from '@/utils/propTypes'
-import { ElSelect, ElPopover, ElOption, ElIcon } from 'element-plus-secondary'
-import { computed, reactive, nextTick, ref } from 'vue'
-import { Icon } from '@/components/icon-custom'
+import { ElSelect, ElOption } from 'element-plus-secondary'
+import { computed, reactive } from 'vue'
 
 const props = defineProps({
   optionList: propTypes.arrayOf(
@@ -15,28 +14,19 @@ const props = defineProps({
 })
 
 const state = reactive({
-  currentStatus: [],
   activeStatus: []
 })
+const emits = defineEmits(['filter-change'])
 
-const elPopoverU = ref(null)
-const more = ref(null)
-
-const statusChange = (id: string | number) => {
-  state.activeStatus = state.activeStatus.filter(ele => ele.id !== id)
-}
 const selectStatus = ids => {
-  const [item] = ids
-  state.activeStatus.push(item)
-  state.currentStatus = []
-  nextTick(() => {
-    elPopoverU.value?.hide()
-    more.value?.click()
-  })
+  emits(
+    'filter-change',
+    ids.map(item => item.label)
+  )
 }
 
 const optionListNotSelect = computed(() => {
-  return props.optionList.filter(ele => !state.activeStatus.map(t => t.id).includes(ele.id))
+  return [...props.optionList]
 })
 const clear = () => {
   state.activeStatus = []
@@ -50,48 +40,22 @@ defineExpose({
   <div class="filter">
     <span>{{ title }}</span>
     <div class="filter-item">
-      <span
-        v-for="ele in state.activeStatus"
-        :key="ele.id"
-        class="item active"
-        @click="statusChange(ele.id)"
-        >{{ $t(ele.name) }}</span
+      <el-select
+        :teleported="false"
+        style="width: 100%"
+        v-model="state.activeStatus"
+        value-key="id"
+        filterable
+        multiple
+        @change="selectStatus"
       >
-      <slot v-if="!!optionListNotSelect.length">
-        <el-popover
-          :show-arrow="false"
-          ref="elPopoverU"
-          placement="bottom"
-          popper-class="filter-popper"
-          width="200"
-          trigger="click"
-        >
-          <el-select
-            :teleported="false"
-            style="width: 100%"
-            v-model="state.currentStatus"
-            value-key="id"
-            filterable
-            multiple
-            @change="selectStatus"
-          >
-            <el-option
-              v-for="item in optionListNotSelect"
-              :key="item.name"
-              :label="item.name"
-              :value="item"
-            />
-          </el-select>
-          <template #reference>
-            <span ref="more" class="more">
-              <el-icon>
-                <Icon name="icon_add_outlined"> </Icon>
-              </el-icon>
-              更多
-            </span>
-          </template>
-        </el-popover>
-      </slot>
+        <el-option
+          v-for="item in optionListNotSelect"
+          :key="item.name"
+          :label="item.name"
+          :value="item"
+        />
+      </el-select>
     </div>
   </div>
 </template>
@@ -113,45 +77,6 @@ defineExpose({
 
   .filter-item {
     flex: 1;
-
-    .item,
-    .more {
-      font-family: PingFang SC;
-      white-space: nowrap;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 24px;
-      margin-right: 12px;
-      text-align: center;
-      padding: 1px 6px;
-      background: var(--deTextPrimary5, #f5f6f7);
-      color: var(--deTextPrimary, #1f2329);
-      border-radius: 2px;
-      cursor: pointer;
-      display: inline-block;
-      margin-bottom: 12px;
-    }
-
-    .active,
-    .more:hover {
-      background: var(--primary10, rgba(51, 112, 255, 0.1));
-      color: var(--primaryselect, #0c296e);
-    }
-
-    .more {
-      white-space: nowrap;
-      display: inline-flex;
-      align-items: center;
-      i {
-        margin-right: 5px;
-      }
-    }
   }
 }
 </style>
-<style lang="less">
-.filter-popper {
-  padding: 0 !important;
-  background: #fff !important;
-}
-</style>
diff --git a/core/core-frontend/src/components/drawer-filter/src/DrawerTreeFilter.vue b/core/core-frontend/src/components/drawer-filter/src/DrawerTreeFilter.vue
index 88d21348cc..710c437b84 100644
--- a/core/core-frontend/src/components/drawer-filter/src/DrawerTreeFilter.vue
+++ b/core/core-frontend/src/components/drawer-filter/src/DrawerTreeFilter.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { propTypes } from '@/utils/propTypes'
-import { ElTreeSelect, ElPopover, ElIcon } from 'element-plus-secondary'
-import { computed, reactive, ref, watch } from 'vue'
-import { Icon } from '@/components/icon-custom'
+import { ElTreeSelect } from 'element-plus-secondary'
+import { computed, reactive, ref } from 'vue'
 
 const props = defineProps({
   optionList: propTypes.arrayOf(
@@ -21,18 +20,8 @@ const state = reactive({
   activeStatus: []
 })
 
-const elPopoverU = ref(null)
-const more = ref(null)
-const filterTree = ref(null)
-const statusChange = (value: string | number) => {
-  state.activeStatus = state.activeStatus.filter(ele => ele?.value !== value)
-  state.currentStatus = state.currentStatus.filter(val => val !== value)
-  emits(
-    'filter-change',
-    state.activeStatus.map(item => item.value)
-  )
-}
-
+const emits = defineEmits(['filter-change'])
+const filterTree = ref()
 const treeChange = () => {
   const nodes = state.currentStatus.map(id => {
     return filterTree.value?.getNode(id).data
@@ -43,23 +32,12 @@ const treeChange = () => {
     state.activeStatus.map(item => item.value)
   )
 }
-
-watch(
-  () => state.currentStatus,
-  () => {
-    treeChange()
-  },
-  { deep: true, immediate: true }
-)
-
 const optionListNotSelect = computed(() => {
   return [...props.optionList]
 })
 const clear = () => {
-  state.activeStatus = []
   state.currentStatus = []
 }
-const emits = defineEmits(['filter-change'])
 defineExpose({
   clear
 })
@@ -69,46 +47,21 @@ defineExpose({
   <div class="filter">
     <span>{{ title }}</span>
     <div class="filter-item">
-      <span
-        v-for="ele in state.activeStatus"
-        :key="ele.value"
-        class="item active"
-        @click="statusChange(ele.value)"
-        >{{ $t(ele.label) }}</span
-      >
-      <slot v-if="!!optionListNotSelect.length">
-        <el-popover
-          :show-arrow="false"
-          ref="elPopoverU"
-          placement="bottom"
-          popper-class="filter-popper"
-          width="200"
-          trigger="click"
-        >
-          <el-tree-select
-            ref="filterTree"
-            node-key="value"
-            :teleported="false"
-            style="width: 100%"
-            v-model="state.currentStatus"
-            :data="optionListNotSelect"
-            :highlight-current="true"
-            multiple
-            :render-after-expand="false"
-            :placeholder="$t('common.please_select') + $t('user.role')"
-            show-checkbox
-            check-on-click-node
-          />
-          <template #reference>
-            <span ref="more" class="more">
-              <el-icon>
-                <Icon name="icon_add_outlined"> </Icon>
-              </el-icon>
-              更多
-            </span>
-          </template>
-        </el-popover>
-      </slot>
+      <el-tree-select
+        node-key="value"
+        ref="filterTree"
+        :teleported="false"
+        style="width: 100%"
+        @change="treeChange"
+        v-model="state.currentStatus"
+        :data="optionListNotSelect"
+        :highlight-current="true"
+        multiple
+        :render-after-expand="false"
+        :placeholder="$t('common.please_select') + $t('user.role')"
+        show-checkbox
+        check-on-click-node
+      />
     </div>
   </div>
 </template>
@@ -130,45 +83,6 @@ defineExpose({
 
   .filter-item {
     flex: 1;
-
-    .item,
-    .more {
-      font-family: PingFang SC;
-      white-space: nowrap;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 24px;
-      margin-right: 12px;
-      text-align: center;
-      padding: 1px 6px;
-      background: var(--deTextPrimary5, #f5f6f7);
-      color: var(--deTextPrimary, #1f2329);
-      border-radius: 2px;
-      cursor: pointer;
-      display: inline-block;
-      margin-bottom: 12px;
-    }
-
-    .active,
-    .more:hover {
-      background: var(--primary10, rgba(51, 112, 255, 0.1));
-      color: var(--primaryselect, #0c296e);
-    }
-
-    .more {
-      white-space: nowrap;
-      display: inline-flex;
-      align-items: center;
-      i {
-        margin-right: 5px;
-      }
-    }
   }
 }
 </style>
-<style lang="less">
-.filter-popper {
-  padding: 0 !important;
-  background: #fff !important;
-}
-</style>