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