提交 | 用户 | age
|
0b6110
|
1 |
<template> |
V |
2 |
<div class="high-form"> |
|
3 |
<a-page-header title="高级表单" :ghost="false"> |
|
4 |
高级表单常见于一次性输入和提交大批量数据的场景。 |
|
5 |
</a-page-header> |
|
6 |
|
|
7 |
<div class="m-5"> |
|
8 |
<a-card title="仓库管理" :bordered="false"> |
|
9 |
<BasicForm @register="register" layout="vertical" /> |
|
10 |
</a-card> |
|
11 |
<a-card title="任务管理" :bordered="false" class="mt-5"> |
|
12 |
<BasicForm @register="registerTask" layout="vertical" /> |
|
13 |
</a-card> |
|
14 |
<a-card title="成员管理" :bordered="false" class="mt-5"> |
|
15 |
<PersonTable ref="tableRef" /> |
|
16 |
</a-card> |
|
17 |
</div> |
|
18 |
|
234c1d
|
19 |
<AppFooterToolbar> |
0b6110
|
20 |
<template #right> |
V |
21 |
<a-button type="primary" @click="submitAll">提交</a-button> |
|
22 |
</template> |
234c1d
|
23 |
</AppFooterToolbar> |
0b6110
|
24 |
</div> |
V |
25 |
</template> |
|
26 |
<script lang="ts"> |
|
27 |
import { BasicForm, useForm } from '/@/components/Form'; |
|
28 |
import { defineComponent, ref } from 'vue'; |
|
29 |
import PersonTable from './PersonTable.vue'; |
234c1d
|
30 |
import { AppFooterToolbar } from '/@/components/Application'; |
V |
31 |
|
0b6110
|
32 |
import { schemas, taskSchemas } from './data'; |
V |
33 |
|
|
34 |
export default defineComponent({ |
234c1d
|
35 |
components: { BasicForm, PersonTable, AppFooterToolbar }, |
0b6110
|
36 |
setup() { |
V |
37 |
const tableRef = ref<{ getDataSource: () => any } | null>(null); |
|
38 |
|
|
39 |
const [register, { validate }] = useForm({ |
|
40 |
baseColProps: { |
|
41 |
span: 6, |
|
42 |
}, |
|
43 |
schemas: schemas, |
|
44 |
showActionButtonGroup: false, |
|
45 |
}); |
|
46 |
|
|
47 |
const [registerTask, { validate: validateTaskForm }] = useForm({ |
|
48 |
baseColProps: { |
|
49 |
span: 6, |
|
50 |
}, |
|
51 |
schemas: taskSchemas, |
|
52 |
showActionButtonGroup: false, |
|
53 |
}); |
|
54 |
|
|
55 |
async function submitAll() { |
|
56 |
try { |
|
57 |
if (tableRef.value) { |
|
58 |
console.log('table data:', tableRef.value.getDataSource()); |
|
59 |
} |
|
60 |
|
|
61 |
const [values, taskValues] = await Promise.all([validate(), validateTaskForm()]); |
|
62 |
console.log('form data:', values, taskValues); |
|
63 |
} catch (error) {} |
|
64 |
} |
|
65 |
|
|
66 |
return { register, registerTask, submitAll, tableRef }; |
|
67 |
}, |
|
68 |
}); |
|
69 |
</script> |
|
70 |
<style lang="less" scoped> |
|
71 |
.high-form { |
|
72 |
padding-bottom: 48px; |
|
73 |
} |
|
74 |
</style> |