From 8c866e3b6cd3ccb413c695a460aab6c5796289c0 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Thu, 19 Sep 2024 18:38:04 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=AB=98=E7=BA=A7=E7=AD=9B=E9=80=89-?=
 =?UTF-8?q?=E6=A0=91=E4=B8=8B=E6=8B=89=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1046359 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001046359
---
 .../pure/ms-advance-filter/filterDrawer.vue   | 28 ++-----
 .../components/pure/ms-tree-select/index.vue  | 79 +++++++++++++++++++
 2 files changed, 85 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/components/pure/ms-tree-select/index.vue

diff --git a/frontend/src/components/pure/ms-advance-filter/filterDrawer.vue b/frontend/src/components/pure/ms-advance-filter/filterDrawer.vue
index 23d424ce47..80a2d4cff1 100644
--- a/frontend/src/components/pure/ms-advance-filter/filterDrawer.vue
+++ b/frontend/src/components/pure/ms-advance-filter/filterDrawer.vue
@@ -121,32 +121,16 @@
             :options="item.selectProps?.options || []"
             v-bind="item.selectProps"
           />
-          <a-tree-select
+          <MsTreeSelect
             v-else-if="item.type === FilterType.TREE_SELECT"
             v-model:model-value="item.value"
-            :data="item.treeSelectData"
+            :data="item.treeSelectData ?? []"
             :disabled="isValueDisabled(item)"
             allow-clear
-            allow-search
-            :placeholder="t('common.pleaseSelect')"
-            :filter-tree-node="filterTreeNode"
-            :tree-props="{
-              virtualListProps: {
-                height: 200,
-                threshold: 200,
-              },
-            }"
             v-bind="item.treeSelectProps"
-          >
-            <template #label="{ data }">
-              <div class="one-line-text">{{ data.label }}</div>
-            </template>
-            <template #tree-slot-title="node">
-              <a-tooltip :content="`${node.name}`" position="tr">
-                <div class="one-line-text max-w-[170px]">{{ node.name }}</div>
-              </a-tooltip>
-            </template>
-          </a-tree-select>
+            :placeholder="t('common.pleaseSelect')"
+            :field-names="item.treeSelectProps?.fieldNames"
+          />
           <a-date-picker
             v-else-if="item.type === FilterType.DATE_PICKER && item.operator !== OperatorEnum.BETWEEN"
             v-model:model-value="item.value"
@@ -228,13 +212,13 @@
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
+  import MsTreeSelect from '@/components/pure/ms-tree-select/index.vue';
   import MsSelect from '@/components/business/ms-select';
   import ViewNameInput from './components/viewNameInput.vue';
 
   import { addView, getViewDetail, updateView } from '@/api/modules/user/index';
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
-  import { filterTreeNode } from '@/utils';
 
   import { SelectValue } from '@/models/projectManagement/menuManagement';
   import { FilterType, OperatorEnum, ViewTypeEnum } from '@/enums/advancedFilterEnum';
diff --git a/frontend/src/components/pure/ms-tree-select/index.vue b/frontend/src/components/pure/ms-tree-select/index.vue
new file mode 100644
index 0000000000..b37551a0b9
--- /dev/null
+++ b/frontend/src/components/pure/ms-tree-select/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <a-tooltip
+    :content="getTreeSelectTooltip()"
+    :disabled="!(modelValue ?? []).length"
+    position="top"
+    content-class="tree-select-content"
+    :mouse-enter-delay="300"
+  >
+    <a-tree-select
+      v-model:model-value="selectValue"
+      :data="props.data"
+      :disabled="props.disabled"
+      :field-names="props.fieldNames"
+      allow-search
+      :filter-tree-node="filterTreeNode"
+      :tree-props="{
+        virtualListProps: {
+          height: 200,
+          threshold: 200,
+        },
+      }"
+      v-bind="$attrs"
+    >
+      <template #label="{ data: slotData }">
+        <div class="one-line-text">{{ slotData.label }}</div>
+      </template>
+      <template #tree-slot-title="node">
+        <a-tooltip :content="`${node[props?.fieldNames?.title || 'title']}`" position="tr">
+          <div class="one-line-text max-w-[170px]">{{ node[props?.fieldNames?.title || 'title'] }}</div>
+        </a-tooltip>
+      </template>
+    </a-tree-select>
+  </a-tooltip>
+</template>
+
+<script lang="ts" setup>
+  import type { MsTreeNodeData } from '@/components/business/ms-tree/types';
+
+  import { filterTreeNode, findNodeByKey } from '@/utils';
+
+  import type { TreeFieldNames, TreeNodeData } from '@arco-design/web-vue';
+
+  const props = defineProps<{
+    data: TreeNodeData[];
+    fieldNames?: TreeFieldNames;
+    disabled?: boolean;
+  }>();
+  const selectValue = defineModel<any>('modelValue', { required: true });
+
+  const getTreeSelectTooltip = computed(() => {
+    return () => {
+      let treeSelectTooltip = '';
+      const values = Array.isArray(selectValue.value) ? selectValue.value : [selectValue.value];
+      if (props.data) {
+        treeSelectTooltip = values
+          ?.map((valueItem: string) => {
+            const optItem = findNodeByKey<MsTreeNodeData>(
+              props.data as MsTreeNodeData[],
+              valueItem,
+              props?.fieldNames?.key
+            );
+            return optItem ? optItem[props?.fieldNames?.title || 'title'] : '';
+          })
+          .filter(Boolean) // 过滤掉假值
+          .join('，');
+      }
+
+      return treeSelectTooltip;
+    };
+  });
+</script>
+
+<style lang="less">
+  .tree-select-content {
+    overflow-y: auto;
+    max-height: 150px;
+    .ms-scroll-bar();
+  }
+</style>