From 777f1fe30009ba79346638d56d20f6c0ce80619e Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Tue, 24 Sep 2024 17:28:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=91=E4=B8=8B=E6=8B=89treeSelect-?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E9=80=89=E4=B8=AD=E4=B8=80=E4=B8=AA=E5=90=8E?=
 =?UTF-8?q?=E4=B8=8D=E6=B8=85=E9=99=A4=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1046360 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001046360
---
 .../pure/ms-advance-filter/filterDrawer.vue   |  1 +
 .../components/pure/ms-tree-select/index.vue  | 43 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/frontend/src/components/pure/ms-advance-filter/filterDrawer.vue b/frontend/src/components/pure/ms-advance-filter/filterDrawer.vue
index 97d4b369d9..91717f07df 100644
--- a/frontend/src/components/pure/ms-advance-filter/filterDrawer.vue
+++ b/frontend/src/components/pure/ms-advance-filter/filterDrawer.vue
@@ -127,6 +127,7 @@
             :data="item.treeSelectData ?? []"
             :disabled="isValueDisabled(item)"
             allow-clear
+            :multiple="item.treeSelectProps?.multiple"
             v-bind="item.treeSelectProps"
             :placeholder="t('common.pleaseSelect')"
             :field-names="item.treeSelectProps?.fieldNames"
diff --git a/frontend/src/components/pure/ms-tree-select/index.vue b/frontend/src/components/pure/ms-tree-select/index.vue
index b37551a0b9..3e72c563c5 100644
--- a/frontend/src/components/pure/ms-tree-select/index.vue
+++ b/frontend/src/components/pure/ms-tree-select/index.vue
@@ -8,8 +8,10 @@
   >
     <a-tree-select
       v-model:model-value="selectValue"
+      v-model:input-value="inputValue"
       :data="props.data"
       :disabled="props.disabled"
+      :multiple="props.multiple"
       :field-names="props.fieldNames"
       allow-search
       :filter-tree-node="filterTreeNode"
@@ -20,6 +22,11 @@
         },
       }"
       v-bind="$attrs"
+      @input-value-change="handleInputValueChange"
+      @popup-visible-change="handlePopupVisibleChange"
+      @change="handleChange"
+      @keyup="handleKeyup"
+      @clear="handleClear"
     >
       <template #label="{ data: slotData }">
         <div class="one-line-text">{{ slotData.label }}</div>
@@ -44,9 +51,13 @@
     data: TreeNodeData[];
     fieldNames?: TreeFieldNames;
     disabled?: boolean;
+    multiple?: boolean;
   }>();
   const selectValue = defineModel<any>('modelValue', { required: true });
 
+  const inputValue = ref('');
+  const tempInputValue = ref('');
+
   const getTreeSelectTooltip = computed(() => {
     return () => {
       let treeSelectTooltip = '';
@@ -68,6 +79,38 @@
       return treeSelectTooltip;
     };
   });
+
+  /**
+   * 处理输入框搜索值变化
+   * @param val 搜索值
+   */
+  function handleInputValueChange(val: string) {
+    inputValue.value = val;
+    if (val !== '') {
+      // 只存储有值的搜索值，因为当搜索完选中一个选项后，arco-tree-select 会自动清空输入框，这里需要过滤掉
+      tempInputValue.value = val;
+    }
+  }
+  function handlePopupVisibleChange(val: boolean) {
+    if (!val) {
+      tempInputValue.value = '';
+    }
+  }
+  function handleChange() {
+    if (props.multiple) {
+      nextTick(() => {
+        inputValue.value = tempInputValue.value;
+      });
+    }
+  }
+  function handleKeyup(e: KeyboardEvent) {
+    if (e.code === 'Backspace' && inputValue.value === '') {
+      tempInputValue.value = '';
+    }
+  }
+  function handleClear() {
+    tempInputValue.value = '';
+  }
 </script>
 
 <style lang="less">