canrd-outside / order-erp-front · Commits

Commit 098621892de12b7eeee53872bf0dcddb1beedb2a

Authored by Vinton
Committed by GitHub
1 parent 582d7e73

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

…. 增加批量添加表单项demo (#2472)
Inline Side-by-side
Showing 4 changed files with 50 additions and 7 deletions
src/components/Form/src/hooks/useForm.ts
  View file @0986218
... ... @@ -94,7 +94,7 @@ export function useForm(props?: Props): UseFormReturnType {
94 94 },
95 95  
96 96 appendSchemaByField: async (
97   - schema: FormSchema,
  97 + schema: FormSchema | FormSchema[],
98 98 prefixField: string | undefined,
99 99 first: boolean,
100 100 ) => {
... ...
src/components/Form/src/hooks/useFormEvents.ts
  View file @0986218
... ... @@ -152,19 +152,23 @@ export function useFormEvents({
152 152 /**
153 153 * @description: Insert after a certain field, if not insert the last
154 154 */
155   - async function appendSchemaByField(schema: FormSchema, prefixField?: string, first = false) {
  155 + async function appendSchemaByField(
  156 + schema: FormSchema | FormSchema[],
  157 + prefixField?: string,
  158 + first = false,
  159 + ) {
156 160 const schemaList: FormSchema[] = cloneDeep(unref(getSchema));
157 161  
158 162 const index = schemaList.findIndex((schema) => schema.field === prefixField);
159   -
  163 + const _schemaList = isObject(schema) ? [schema as FormSchema] : (schema as FormSchema[]);
160 164 if (!prefixField || index === -1 || first) {
161   - first ? schemaList.unshift(schema) : schemaList.push(schema);
  165 + first ? schemaList.unshift(..._schemaList) : schemaList.push(..._schemaList);
162 166 schemaRef.value = schemaList;
163 167 _setDefaultValue(schema);
164 168 return;
165 169 }
166 170 if (index !== -1) {
167   - schemaList.splice(index + 1, 0, schema);
  171 + schemaList.splice(index + 1, 0, ..._schemaList);
168 172 }
169 173 _setDefaultValue(schema);
170 174  
... ...
src/components/Form/src/types/form.ts
  View file @0986218
... ... @@ -35,7 +35,7 @@ export interface FormActionType {
35 35 setProps: (formProps: Partial<FormProps>) => Promise<void>;
36 36 removeSchemaByField: (field: string | string[]) => Promise<void>;
37 37 appendSchemaByField: (
38   - schema: FormSchema,
  38 + schema: FormSchema | FormSchema[],
39 39 prefixField: string | undefined,
40 40 first?: boolean | undefined,
41 41 ) => Promise<void>;
... ...
src/views/demo/form/AppendForm.vue
  View file @0986218
... ... @@ -4,6 +4,7 @@
4 4 <BasicForm @register="register" @submit="handleSubmit">
5 5 <template #add="{ field }">
6 6 <Button v-if="Number(field) === 0" @click="add">+</Button>
  7 + <Button class="ml-2" v-if="Number(field) === 0" @click="add">批量添加表单配置</Button>
7 8 <Button v-if="field > 0" @click="del(field)">-</Button>
8 9 </template>
9 10 </BasicForm>
... ... @@ -106,13 +107,51 @@
106 107 );
107 108 n.value++;
108 109 }
  110 + /**
  111 + * @description: 批量添加
  112 + */
  113 + function batchAdd() {
  114 + appendSchemaByField(
  115 + [
  116 + {
  117 + field: `field${n.value}a`,
  118 + component: 'Input',
  119 + label: '字段' + n.value,
  120 + colProps: {
  121 + span: 8,
  122 + },
  123 + required: true,
  124 + },
  125 + {
  126 + field: `field${n.value}b`,
  127 + component: 'Input',
  128 + label: '字段' + n.value,
  129 + colProps: {
  130 + span: 8,
  131 + },
  132 + required: true,
  133 + },
  134 + {
  135 + field: `${n.value}`,
  136 + component: 'Input',
  137 + label: ' ',
  138 + colProps: {
  139 + span: 8,
  140 + },
  141 + slot: 'add',
  142 + },
  143 + ],
  144 + '',
  145 + );
  146 + n.value++;
  147 + }
109 148  
110 149 function del(field) {
111 150 removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
112 151 n.value--;
113 152 }
114 153  
115   - return { register, handleSubmit, add, del };
  154 + return { register, handleSubmit, add, del, batchAdd };
116 155 },
117 156 });
118 157 </script>
... ...