表单设计-树形选择、级联选择优化

src/views/demo/form-design/components/VFormDesign/components/FormOptions.vue

@@ -26,11 +26,11 @@
           <div class="options-box">
             <Input
               :value="label"
-              @blur="updateLabelOrValue('label', label, value, $event.target.value)"
+              @input="updateLabelOrValue('label', label, value, $event.target.value)"
             />
             <Input
               :value="value"
-              @blur="updateLabelOrValue('value', label, value, $event.target.value)"
+              @input="updateLabelOrValue('value', label, value, $event.target.value)"
               class="options-value"
             />
             <!-- {{ key }}-{{ label }}-{{ value }} -->
@@ -89,24 +89,24 @@
 
       // 树的ref
       const treeDataAndOptions = ref<TreeItem[]>([]);
-      // 树的节点个数
-      let len: number = 1;
 
       watch(
-        () => formConfig.value.currentItem?.component,
+        () => formConfig.value.currentItem.component,
         () => {
-          if (formConfig.value.currentItem?.component == 'Select') {
-            treeDataAndOptions.value = [];
-            key = 'options';
-          } else if (formConfig.value.currentItem?.component == 'TreeSelect') {
+          if (formConfig.value.currentItem?.component == 'TreeSelect') {
+            // 树形选择
             treeDataAndOptions.value = formConfig.value.currentItem?.componentProps?.treeData;
             key = 'treeData';
           } else if (formConfig.value.currentItem?.component == 'Cascader') {
+            // 级联选择
             treeDataAndOptions.value = formConfig.value.currentItem?.componentProps?.options;
             key = 'options';
           } else if (formConfig.value.currentItem?.component == 'Transfer') {
-            treeDataAndOptions.value = [];
+            // 穿梭框
             key = 'dataSource';
+          } else {
+            // 下拉选择、单选框-组、复选框-组、自动完成、选项卡、卡片组
+            key = 'options';
           }
         },
         { deep: true, immediate: true },
@@ -119,13 +119,12 @@
       }
       // 添加树的父节点、子节点
       function addTreeNode(value) {
-        len = 1;
-        getLength(treeDataAndOptions.value);
+        let length = getLength(1, treeDataAndOptions.value);
         getTree().insertNodeByKey({
           parentKey: value,
           node: {
-            label: `选项${len}`,
-            value: len,
+            label: `选项${length}`,
+            value: `${length}`,
           },
           // 往后插入
           push: 'push',
@@ -137,16 +136,18 @@
         getTree().deleteNodeByKey(value);
         refresh();
       }
-      // 获取树的节点个数
-      function getLength(treeDataOrOptions) {
-        treeDataOrOptions.forEach((to) => {
-          if (to.value) {
-            len++;
-          }
+      // 获取树的节点的不重复的默认值
+      function getLength(length, treeDataOrOptions) {
+        treeDataOrOptions?.forEach((to) => {
           if (to.children) {
-            getLength(to.children);
+            length = getLength(length, to.children);
+          }
+          if (length == to.value) {
+            length++;
+            length = getLength(length, treeDataOrOptions);
           }
         });
+        return length;
       }
       // 修改树的label或者value
       function updateLabelOrValue(type, label, value, newLabelOrValue) {

src/views/demo/form-design/core/formItemConfig.ts

@@ -390,17 +390,6 @@ export const commonComponents: IVFormComponent[] = [
       ],
     },
   },
-  {
-    component: 'Divider',
-    label: '分割线',
-    icon: 'radix-icons:divider-horizontal',
-    colProps: { span: 24 },
-    field: '',
-    componentProps: {
-      orientation: 'center',
-      dashed: true,
-    },
-  },
 ];
 
 export const baseComponents: IVFormComponent[] = [
@@ -581,6 +570,17 @@ export const baseComponents: IVFormComponent[] = [
       maxSize: 100,
     },
   },
+  {
+    component: 'Divider',
+    label: '分割线',
+    icon: 'radix-icons:divider-horizontal',
+    colProps: { span: 24 },
+    field: '',
+    componentProps: {
+      orientation: 'center',
+      dashed: true,
+    },
+  },
 ];
 
 // // https://next.antdv.com/components/transfer-cn