|
@@ -13,12 +13,9 @@
|
|
|
</CollapseContainer>
|
|
|
<CollapseContainer title="表单组增删" class="my-3">
|
|
|
<a-button @click="setGroup">设置初始值</a-button>
|
|
|
- <a-button class="m-2" @click="addGroup">
|
|
|
- 批量添加表单
|
|
|
- </a-button>
|
|
|
+ <a-button class="m-2" @click="addGroup"> 批量添加表单 </a-button>
|
|
|
<a-button @click="delGroup">批量减少表单</a-button>
|
|
|
- <BasicForm @register="registerGroup" @submit="handleSubmitGroup">
|
|
|
- </BasicForm>
|
|
|
+ <BasicForm @register="registerGroup" @submit="handleSubmitGroup" />
|
|
|
</CollapseContainer>
|
|
|
</PageWrapper>
|
|
|
</template>
|
|
@@ -27,8 +24,9 @@
|
|
|
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({
|
|
@@ -60,7 +58,7 @@
|
|
|
async function handleSubmit() {
|
|
|
try {
|
|
|
const data = await validate();
|
|
|
- createMessage.success("请前往控制台查看输出")
|
|
|
+ createMessage.success('请前往控制台查看输出');
|
|
|
console.log(data);
|
|
|
} catch (e) {
|
|
|
console.log(e);
|
|
@@ -136,23 +134,26 @@
|
|
|
}
|
|
|
const [
|
|
|
registerGroup,
|
|
|
- { appendSchemaByField: appendSchemaByFieldGroup, removeSchemaByField:removeSchemaByFieldGroup, getFieldsValue:getFieldsValueGroup,setFieldsValue },
|
|
|
+ {
|
|
|
+ appendSchemaByField: appendSchemaByFieldGroup,
|
|
|
+ removeSchemaByField: removeSchemaByFieldGroup,
|
|
|
+ getFieldsValue: getFieldsValueGroup,
|
|
|
+ setFieldsValue,
|
|
|
+ },
|
|
|
] = useForm({
|
|
|
schemas: [
|
|
|
{
|
|
|
field: `field[${count.value}].a`,
|
|
|
component: 'Input',
|
|
|
label: '字段a',
|
|
|
- colProps:{span:9},
|
|
|
-
|
|
|
+ colProps: { span: 9 },
|
|
|
},
|
|
|
{
|
|
|
field: `field[${count.value}].b`,
|
|
|
- colProps:{span:9},
|
|
|
+ colProps: { span: 9 },
|
|
|
component: 'Input',
|
|
|
label: '字段b',
|
|
|
},
|
|
|
-
|
|
|
],
|
|
|
labelWidth: 100,
|
|
|
actionColOptions: { span: 24 },
|
|
@@ -161,19 +162,23 @@
|
|
|
|
|
|
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',
|
|
|
- },
|
|
|
- ],"")
|
|
|
+ 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() {
|
|
@@ -181,17 +186,19 @@
|
|
|
count.value--;
|
|
|
}
|
|
|
|
|
|
- function setGroup(){
|
|
|
+ function setGroup() {
|
|
|
setFieldsValue({
|
|
|
- field:[{
|
|
|
- a:"默认a",
|
|
|
- b:"默认b"
|
|
|
- }]
|
|
|
- })
|
|
|
+ field: [
|
|
|
+ {
|
|
|
+ a: '默认a',
|
|
|
+ b: '默认b',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- function handleSubmitGroup(){
|
|
|
- createMessage.success("请前往控制台查看输出")
|
|
|
- console.log(getFieldsValueGroup())
|
|
|
+ function handleSubmitGroup() {
|
|
|
+ createMessage.success('请前往控制台查看输出');
|
|
|
+ console.log(getFieldsValueGroup());
|
|
|
}
|
|
|
</script>
|