From 5d3365412cb6a736944e4085e22e67cbeb06c9da Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Mon, 27 Apr 2026 16:37:02 +0800
Subject: [PATCH] fix: Tree selector related bug

---
 .../items/TreeSelectConstructor.vue           | 28 ++++++++++++-------
 ui/src/locales/lang/en-US/dynamics-form.ts    |  1 +
 ui/src/locales/lang/zh-CN/dynamics-form.ts    |  1 +
 ui/src/locales/lang/zh-Hant/dynamics-form.ts  |  1 +
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/dynamics-form/constructor/items/TreeSelectConstructor.vue b/ui/src/components/dynamics-form/constructor/items/TreeSelectConstructor.vue
index c549564d5a0..f28adb93011 100644
--- a/ui/src/components/dynamics-form/constructor/items/TreeSelectConstructor.vue
+++ b/ui/src/components/dynamics-form/constructor/items/TreeSelectConstructor.vue
@@ -1,5 +1,15 @@
 <template>
-  <el-form-item>
+  <el-form-item
+    prop="treeData"
+    :rules="[
+      {
+        message: $t('dynamicsForm.TreeSelect.selectRequired'),
+        blur: 'change',
+        type: 'array',
+        min: 1,
+      },
+    ]"
+  >
     <template #label>
       <div class="flex-between">
         <span>
@@ -21,7 +31,7 @@
     </template>
     <el-card shadow="never" class="border-r-6 w-full" style="--el-card-padding: 8px">
       <el-tree
-        :data="treeData"
+        :data="formValue.treeData"
         node-key="id"
         default-expand-all
         :expand-on-click-node="false"
@@ -75,7 +85,7 @@
   >
     <el-tree-select
       v-model="formValue.default_value"
-      :data="treeData"
+      :data="formValue.treeData"
       :multiple="formValue.multiple"
       :render-after-expand="false"
       style="width: 100%"
@@ -194,7 +204,7 @@
   </el-dialog>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, watch, ref, reactive } from 'vue'
+import { computed, onMounted, reactive } from 'vue'
 import { t } from '@/locales/'
 
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -214,7 +224,7 @@ const formValue = computed({
 const getData = () => {
   return {
     input_type: 'TreeSelect',
-    attrs: { multiple: formValue.value.multiple, data: treeData.value },
+    attrs: { multiple: formValue.value.multiple, data: formValue.value.treeData, filterable: true },
     default_value: formValue.value.default_value,
     show_default_value: formValue.value.show_default_value,
   }
@@ -222,7 +232,7 @@ const getData = () => {
 const rander = (form_data: any) => {
   const attrs = form_data.attrs || {}
   formValue.value.multiple = attrs.multiple
-  treeData.value = attrs.data || []
+  formValue.value.treeData = attrs.data || []
   formValue.value.default_value = form_data.default_value
   formValue.value.show_default_value = form_data.show_default_value
 }
@@ -255,8 +265,6 @@ const treeProps = {
   label: 'label',
 }
 
-const treeData = ref<TreeNode[]>([])
-
 const addDialog = reactive<{
   visible: boolean
   mode: AddMode
@@ -349,7 +357,7 @@ function submitAdd() {
   }))
 
   if (addDialog.mode === 'root') {
-    treeData.value.push(...newNodes)
+    formValue.value.treeData.push(...newNodes)
   } else {
     const parent = addDialog.parentNode
     if (!parent) {
@@ -411,7 +419,7 @@ function handleDelete(node: TreeNode) {
     type: 'warning',
   })
     .then(() => {
-      const removed = removeNodeById(treeData.value, node.id)
+      const removed = removeNodeById(formValue.value.treeData, node.id)
       if (removed) {
         ElMessage.success(t('common.deleteSuccess'))
       } else {
diff --git a/ui/src/locales/lang/en-US/dynamics-form.ts b/ui/src/locales/lang/en-US/dynamics-form.ts
index 775780254ed..3979da874c6 100644
--- a/ui/src/locales/lang/en-US/dynamics-form.ts
+++ b/ui/src/locales/lang/en-US/dynamics-form.ts
@@ -59,6 +59,7 @@ export default {
   TreeSelect: {
     label: 'Tree Select',
     select: 'Option',
+    selectRequired: 'Options are required',
     allowMultipleSelections: 'Allow Multiple Selections',
     addDialog: {
       addFirstOption: 'Add Root Option',
diff --git a/ui/src/locales/lang/zh-CN/dynamics-form.ts b/ui/src/locales/lang/zh-CN/dynamics-form.ts
index c5f725f1f4a..5ac1974cec3 100644
--- a/ui/src/locales/lang/zh-CN/dynamics-form.ts
+++ b/ui/src/locales/lang/zh-CN/dynamics-form.ts
@@ -60,6 +60,7 @@ export default {
   TreeSelect: {
     label: '树形选择器',
     select: '选项',
+    selectRequired: '选项必填',
     allowMultipleSelections: '允许多选',
     addDialog: {
       addFirstOption: '添加一级选项',
diff --git a/ui/src/locales/lang/zh-Hant/dynamics-form.ts b/ui/src/locales/lang/zh-Hant/dynamics-form.ts
index 6b61fec98c8..9f642b1ec06 100644
--- a/ui/src/locales/lang/zh-Hant/dynamics-form.ts
+++ b/ui/src/locales/lang/zh-Hant/dynamics-form.ts
@@ -59,6 +59,7 @@ export default {
   TreeSelect: {
     label: '樹狀選擇器',
     select: '選項',
+    selectRequired: '選項必填',
     allowMultipleSelections: '允許多選',
     addDialog: {
       addFirstOption: '新增第一層選項',