Browse Source
perf(component): 1.优化appendSchemaByField只能单一添加一个表单项的问题,可以传入数组表单项,统一添加,减少重复方法调用 2. 增加批量添加表单项demo (#2472)
pull/2474/head
Vinton
4 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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> |
|
|
|
|