From 9425b7701e9f6bf7b58ceafa51a91101d1b4ded0 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Tue, 24 Sep 2024 18:20:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=91=E4=B8=8B=E6=8B=89treeSelect-?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E9=87=8C=E8=AE=A1=E7=AE=97=E6=9C=80?=
 =?UTF-8?q?=E5=A4=A7=E6=A0=87=E7=AD=BE=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/pure/ms-tree-select/index.vue  | 46 ++++++++++++++++---
 .../components/management/api/apiTable.vue    |  1 -
 .../components/caseTable.vue                  |  1 -
 .../components/detail/caseTable.vue           |  1 -
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/pure/ms-tree-select/index.vue b/frontend/src/components/pure/ms-tree-select/index.vue
index 3e72c563c5..d24395a7b6 100644
--- a/frontend/src/components/pure/ms-tree-select/index.vue
+++ b/frontend/src/components/pure/ms-tree-select/index.vue
@@ -7,6 +7,7 @@
     :mouse-enter-delay="300"
   >
     <a-tree-select
+      ref="treeSelectRef"
       v-model:model-value="selectValue"
       v-model:input-value="inputValue"
       :data="props.data"
@@ -22,6 +23,7 @@
         },
       }"
       v-bind="$attrs"
+      :max-tag-count="maxTagCount"
       @input-value-change="handleInputValueChange"
       @popup-visible-change="handlePopupVisibleChange"
       @change="handleChange"
@@ -43,21 +45,53 @@
 <script lang="ts" setup>
   import type { MsTreeNodeData } from '@/components/business/ms-tree/types';
 
+  import useSelect from '@/hooks/useSelect';
   import { filterTreeNode, findNodeByKey } from '@/utils';
 
   import type { TreeFieldNames, TreeNodeData } from '@arco-design/web-vue';
 
-  const props = defineProps<{
-    data: TreeNodeData[];
-    fieldNames?: TreeFieldNames;
-    disabled?: boolean;
-    multiple?: boolean;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      data: TreeNodeData[];
+      fieldNames?: TreeFieldNames;
+      disabled?: boolean;
+      multiple?: boolean;
+      shouldCalculateMaxTag?: boolean;
+    }>(),
+    {
+      shouldCalculateMaxTag: true,
+    }
+  );
   const selectValue = defineModel<any>('modelValue', { required: true });
 
   const inputValue = ref('');
   const tempInputValue = ref('');
 
+  const treeSelectRef = ref();
+  const { maxTagCount, calculateMaxTag } = useSelect({
+    selectRef: treeSelectRef,
+    selectVal: selectValue,
+  });
+  watch(
+    () => selectValue.value,
+    () => {
+      if (props.shouldCalculateMaxTag !== false && props.multiple) {
+        calculateMaxTag();
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+  watch(
+    () => props.data,
+    () => {
+      if (props.shouldCalculateMaxTag !== false && props.multiple) {
+        calculateMaxTag();
+      }
+    }
+  );
+
   const getTreeSelectTooltip = computed(() => {
     return () => {
       let treeSelectTooltip = '';
diff --git a/frontend/src/views/api-test/management/components/management/api/apiTable.vue b/frontend/src/views/api-test/management/components/management/api/apiTable.vue
index df7abee7c6..3080716347 100644
--- a/frontend/src/views/api-test/management/components/management/api/apiTable.vue
+++ b/frontend/src/views/api-test/management/components/management/api/apiTable.vue
@@ -726,7 +726,6 @@
         multiple: true,
         treeCheckable: true,
         treeCheckStrictly: true,
-        maxTagCount: 1,
       },
     },
     {
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
index b6eff1407d..c740cdb8ea 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
@@ -818,7 +818,6 @@
         multiple: true,
         treeCheckable: true,
         treeCheckStrictly: true,
-        maxTagCount: 1,
       },
     },
     {
diff --git a/frontend/src/views/case-management/caseReview/components/detail/caseTable.vue b/frontend/src/views/case-management/caseReview/components/detail/caseTable.vue
index 45222105b1..26ed93c006 100644
--- a/frontend/src/views/case-management/caseReview/components/detail/caseTable.vue
+++ b/frontend/src/views/case-management/caseReview/components/detail/caseTable.vue
@@ -1030,7 +1030,6 @@
         multiple: true,
         treeCheckable: true,
         treeCheckStrictly: true,
-        maxTagCount: 1,
       },
     },
     {