| 提交 | 用户 | 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> | |
