<template>
|
<PageWrapper
|
class="high-form"
|
title="高级表单"
|
content=" 高级表单常见于一次性输入和提交大批量数据的场景。"
|
>
|
<Card title="仓库管理" :bordered="false">
|
<BasicForm @register="register" />
|
</Card>
|
<Card title="任务管理" :bordered="false" class="!mt-5">
|
<BasicForm @register="registerTask" />
|
</Card>
|
<Card title="成员管理" :bordered="false" class="!mt-5">
|
<PersonTable ref="tableRef" />
|
</Card>
|
|
<template #rightFooter>
|
<a-button type="primary" @click="submitAll"> 提交 </a-button>
|
</template>
|
</PageWrapper>
|
</template>
|
<script lang="ts" setup>
|
import { BasicForm, useForm } from '@/components/Form';
|
import { ref } from 'vue';
|
import PersonTable from './PersonTable.vue';
|
import { PageWrapper } from '@/components/Page';
|
import { schemas, taskSchemas } from './data';
|
import { Card } from 'ant-design-vue';
|
|
defineOptions({ name: 'FormHightPage' });
|
|
const tableRef = ref<{ getDataSource: () => any } | null>(null);
|
|
const [register, { validate }] = useForm({
|
layout: 'vertical',
|
baseColProps: {
|
span: 6,
|
},
|
schemas: schemas,
|
showActionButtonGroup: false,
|
});
|
|
const [registerTask, { validate: validateTaskForm }] = useForm({
|
layout: 'vertical',
|
baseColProps: {
|
span: 6,
|
},
|
schemas: taskSchemas,
|
showActionButtonGroup: false,
|
});
|
|
async function submitAll() {
|
try {
|
if (tableRef.value) {
|
console.log('table data:', tableRef.value.getDataSource());
|
}
|
|
const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]);
|
console.log('form data:', values, taskValues);
|
} catch (error) {
|
console.log(error);
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.high-form {
|
padding-bottom: 48px;
|
}
|
</style>
|
