fix: Tree selector related bug (#5178)

Author: shaohuzhang1

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,15 +224,15 @@ 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,
   }
 }
 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 {

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',

ui/src/locales/lang/zh-CN/dynamics-form.ts

@@ -60,6 +60,7 @@ export default {
   TreeSelect: {
     label: '树形选择器',
     select: '选项',
+    selectRequired: '选项必填',
     allowMultipleSelections: '允许多选',
     addDialog: {
       addFirstOption: '添加一级选项',

ui/src/locales/lang/zh-Hant/dynamics-form.ts

@@ -59,6 +59,7 @@ export default {
   TreeSelect: {
     label: '樹狀選擇器',
     select: '選項',
+    selectRequired: '選項必填',
     allowMultipleSelections: '允許多選',
     addDialog: {
       addFirstOption: '新增第一層選項',