|
|
|
@ -1,6 +1,6 @@ |
|
|
|
<template> |
|
|
|
<PageWrapper title="表单增删示例"> |
|
|
|
<CollapseContainer title="表单增删"> |
|
|
|
<CollapseContainer title="表单项增删"> |
|
|
|
<BasicForm @register="register" @submit="handleSubmit"> |
|
|
|
<template #add="{ field }"> |
|
|
|
<a-button v-if="Number(field) === 0" @click="add">+</a-button> |
|
|
|
@ -11,6 +11,15 @@ |
|
|
|
</template> |
|
|
|
</BasicForm> |
|
|
|
</CollapseContainer> |
|
|
|
<CollapseContainer title="表单组增删" class="my-3"> |
|
|
|
<a-button @click="setGroup">设置初始值</a-button> |
|
|
|
<a-button class="m-2" @click="addGroup"> |
|
|
|
批量添加表单 |
|
|
|
</a-button> |
|
|
|
<a-button @click="delGroup">批量减少表单</a-button> |
|
|
|
<BasicForm @register="registerGroup" @submit="handleSubmitGroup"> |
|
|
|
</BasicForm> |
|
|
|
</CollapseContainer> |
|
|
|
</PageWrapper> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
@ -18,7 +27,10 @@ |
|
|
|
import { BasicForm, useForm } from '@/components/Form'; |
|
|
|
import { CollapseContainer } from '@/components/Container'; |
|
|
|
import { PageWrapper } from '@/components/Page'; |
|
|
|
|
|
|
|
|
|
|
|
import { useMessage } from '@/hooks/web/useMessage'; |
|
|
|
const { createMessage } = useMessage(); |
|
|
|
const count = ref(0); |
|
|
|
const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({ |
|
|
|
schemas: [ |
|
|
|
{ |
|
|
|
@ -48,6 +60,7 @@ |
|
|
|
async function handleSubmit() { |
|
|
|
try { |
|
|
|
const data = await validate(); |
|
|
|
createMessage.success("请前往控制台查看输出") |
|
|
|
console.log(data); |
|
|
|
} catch (e) { |
|
|
|
console.log(e); |
|
|
|
@ -121,4 +134,64 @@ |
|
|
|
removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]); |
|
|
|
n.value--; |
|
|
|
} |
|
|
|
const [ |
|
|
|
registerGroup, |
|
|
|
{ appendSchemaByField: appendSchemaByFieldGroup, removeSchemaByField:removeSchemaByFieldGroup, getFieldsValue:getFieldsValueGroup,setFieldsValue }, |
|
|
|
] = useForm({ |
|
|
|
schemas: [ |
|
|
|
{ |
|
|
|
field: `field[${count.value}].a`, |
|
|
|
component: 'Input', |
|
|
|
label: '字段a', |
|
|
|
colProps:{span:9}, |
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
field: `field[${count.value}].b`, |
|
|
|
colProps:{span:9}, |
|
|
|
component: 'Input', |
|
|
|
label: '字段b', |
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
labelWidth: 100, |
|
|
|
actionColOptions: { span: 24 }, |
|
|
|
baseColProps: { span: 8 }, |
|
|
|
}); |
|
|
|
|
|
|
|
function addGroup() { |
|
|
|
count.value++; |
|
|
|
appendSchemaByFieldGroup([ { |
|
|
|
field: `field[${count.value}].a`, |
|
|
|
component: 'Input', |
|
|
|
colProps:{span:9}, |
|
|
|
label: '字段a', |
|
|
|
}, |
|
|
|
{ |
|
|
|
field: `field[${count.value}].b`, |
|
|
|
component: 'Input', |
|
|
|
colProps:{span:9}, |
|
|
|
label: '字段b', |
|
|
|
}, |
|
|
|
],"") |
|
|
|
} |
|
|
|
|
|
|
|
function delGroup() { |
|
|
|
removeSchemaByFieldGroup([`field[${count.value}].a`, `field[${count.value}].b`]); |
|
|
|
count.value--; |
|
|
|
} |
|
|
|
|
|
|
|
function setGroup(){ |
|
|
|
setFieldsValue({ |
|
|
|
field:[{ |
|
|
|
a:"默认a", |
|
|
|
b:"默认b" |
|
|
|
}] |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
function handleSubmitGroup(){ |
|
|
|
createMessage.success("请前往控制台查看输出") |
|
|
|
console.log(getFieldsValueGroup()) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|