parent
5904bd3b46
commit
e51f951921
3 changed files with 2 additions and 79 deletions
@ -1,4 +1,4 @@ |
||||
import { FormSchema } from '/@/components/Form'; |
||||
import { FormSchema } from '@/components/Form'; |
||||
|
||||
const basicOptions: LabelValueOptions = [ |
||||
{ |
@ -1,77 +0,0 @@ |
||||
<template> |
||||
<PageWrapper class="high-form" title="高级表单" content=" 高级表单常见于一次性输入和提交大批量数据的场景。"> |
||||
<a-card title="仓库管理" :bordered="false"> |
||||
<BasicForm @register="register" /> |
||||
</a-card> |
||||
<a-card title="任务管理" :bordered="false" class="!mt-5"> |
||||
<BasicForm @register="registerTask" /> |
||||
</a-card> |
||||
<a-card title="成员管理" :bordered="false"> |
||||
<PersonTable ref="tableRef" /> |
||||
</a-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'; |
||||
import PersonTable from './PersonTable.vue'; |
||||
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() { |
||||
const tableRef = ref<{ getDataSource: () => any } | null>(null); |
||||
|
||||
const [register, { validate }] = useForm({ |
||||
baseColProps: { |
||||
span: 6, |
||||
}, |
||||
labelWidth: 200, |
||||
layout: 'vertical', |
||||
schemas: schemas, |
||||
showActionButtonGroup: false, |
||||
}); |
||||
|
||||
const [registerTask, { validate: validateTaskForm }] = useForm({ |
||||
baseColProps: { |
||||
span: 6, |
||||
}, |
||||
labelWidth: 200, |
||||
layout: 'vertical', |
||||
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) {} |
||||
} |
||||
|
||||
return { register, registerTask, submitAll, tableRef }; |
||||
}, |
||||
}); |
||||
</script> |
||||
<style lang="less" scoped> |
||||
.high-form { |
||||
padding-bottom: 48px; |
||||
} |
||||
|
||||
/** update-begin-author:taoyan date:2022-5-16 for:/issues/63 下拉框z-index问题 */ |
||||
:deep(.ant-select-dropdown) { |
||||
z-index: 98 !important; |
||||
} |
||||
/** update-end-author:taoyan date:2022-5-16 for:/issues/63 下拉框z-index问题 */ |
||||
</style> |
Loading…
Reference in new issue