perf(component): 1.优化appendSchemaByField只能单一添加一个表单项的问题，可以传入数组表单项，统一添加，减少重复方法调用 2…

…. 增加批量添加表单项demo (#2472)

perf(component): 1.优化appendSchemaByField只能单一添加一个表单项的问题，可以传入数组表单项，统一添加，减少重复方法调用 2…
…. 增加批量添加表单项demo (#2472)
Vinton · GitHub
1 parent 582d7e73
Showing 4 changed files with 50 additions and 7 deletions
src/components/Form/src/hooks/useForm.ts
src/components/Form/src/hooks/useFormEvents.ts
src/components/Form/src/types/form.ts
src/views/demo/form/AppendForm.vue
@@ -94,7 +94,7 @@ export function useForm(props?: Props): UseFormReturnType {
     },
     appendSchemaByField: async (
-      schema: FormSchema,
+      schema: FormSchema | FormSchema[],
       prefixField: string | undefined,
       first: boolean,
     ) => {
@@ -152,19 +152,23 @@ export function useFormEvents({
   /**
    * @description: Insert after a certain field, if not insert the last
    */
-  async function appendSchemaByField(schema: FormSchema, prefixField?: string, first = false) {
+  async function appendSchemaByField(
+    schema: FormSchema | FormSchema[],
+    prefixField?: string,
+    first = false,
+  ) {
     const schemaList: FormSchema[] = cloneDeep(unref(getSchema));
     const index = schemaList.findIndex((schema) => schema.field === prefixField);
-
+    const _schemaList = isObject(schema) ? [schema as FormSchema] : (schema as FormSchema[]);
     if (!prefixField || index === -1 || first) {
-      first ? schemaList.unshift(schema) : schemaList.push(schema);
+      first ? schemaList.unshift(..._schemaList) : schemaList.push(..._schemaList);
       schemaRef.value = schemaList;
       _setDefaultValue(schema);
       return;
     }
     if (index !== -1) {
-      schemaList.splice(index + 1, 0, schema);
+      schemaList.splice(index + 1, 0, ..._schemaList);
     }
     _setDefaultValue(schema);
@@ -35,7 +35,7 @@ export interface FormActionType {
   setProps: (formProps: Partial<FormProps>) => Promise<void>;
   removeSchemaByField: (field: string | string[]) => Promise<void>;
   appendSchemaByField: (
-    schema: FormSchema,
+    schema: FormSchema | FormSchema[],
     prefixField: string | undefined,
     first?: boolean | undefined,
   ) => Promise<void>;
@@ -4,6 +4,7 @@
       <BasicForm @register="register" @submit="handleSubmit">
         <template #add="{ field }">
           <Button v-if="Number(field) === 0" @click="add">+</Button>
+          <Button class="ml-2" v-if="Number(field) === 0" @click="add">批量添加表单配置</Button>
           <Button v-if="field > 0" @click="del(field)">-</Button>
         </template>
       </BasicForm>
@@ -106,13 +107,51 @@
         );
         n.value++;
       }
+      /**
+       * @description: 批量添加
+       */
+      function batchAdd() {
+        appendSchemaByField(
+          [
+            {
+              field: `field${n.value}a`,
+              component: 'Input',
+              label: '字段' + n.value,
+              colProps: {
+                span: 8,
+              },
+              required: true,
+            },
+            {
+              field: `field${n.value}b`,
+              component: 'Input',
+              label: '字段' + n.value,
+              colProps: {
+                span: 8,
+              },
+              required: true,
+            },
+            {
+              field: `${n.value}`,
+              component: 'Input',
+              label: ' ',
+              colProps: {
+                span: 8,
+              },
+              slot: 'add',
+            },
+          ],
+          '',
+        );
+        n.value++;
+      }
       function del(field) {
         removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
         n.value--;
       }
-      return { register, handleSubmit, add, del };
+      return { register, handleSubmit, add, del, batchAdd };
     },
   });
 </script>