1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
| <script lang="ts" setup>
| import { ref } from 'vue';
|
| import { Page } from '@vben/common-ui';
|
| import { Button, Card, message, Step, Steps, Switch } from 'ant-design-vue';
|
| import { useVbenForm } from '#/adapter/form';
|
| const currentTab = ref(0);
| function onFirstSubmit(values: Record<string, any>) {
| message.success({
| content: `form1 values: ${JSON.stringify(values)}`,
| });
| currentTab.value = 1;
| }
| function onSecondReset() {
| currentTab.value = 0;
| }
| function onSecondSubmit(values: Record<string, any>) {
| message.success({
| content: `form2 values: ${JSON.stringify(values)}`,
| });
| }
|
| const [FirstForm, firstFormApi] = useVbenForm({
| commonConfig: {
| componentProps: {
| class: 'w-full',
| },
| },
| handleSubmit: onFirstSubmit,
| layout: 'horizontal',
| resetButtonOptions: {
| show: false,
| },
| schema: [
| {
| component: 'Input',
| componentProps: {
| placeholder: '请输入',
| },
| fieldName: 'formFirst',
| label: '表单1字段',
| rules: 'required',
| },
| ],
| submitButtonOptions: {
| content: '下一步',
| },
| wrapperClass: 'grid-cols-1 md:grid-cols-1 lg:grid-cols-1',
| });
| const [SecondForm, secondFormApi] = useVbenForm({
| commonConfig: {
| componentProps: {
| class: 'w-full',
| },
| },
| handleReset: onSecondReset,
| handleSubmit: onSecondSubmit,
| layout: 'horizontal',
| resetButtonOptions: {
| content: '上一步',
| },
| schema: [
| {
| component: 'Input',
| componentProps: {
| placeholder: '请输入',
| },
| fieldName: 'formSecond',
| label: '表单2字段',
| rules: 'required',
| },
| ],
| wrapperClass: 'grid-cols-1 md:grid-cols-1 lg:grid-cols-1',
| });
| const needMerge = ref(true);
| async function handleMergeSubmit() {
| const values = await firstFormApi
| .merge(secondFormApi)
| .submitAllForm(needMerge.value);
| message.success({
| content: `merged form values: ${JSON.stringify(values)}`,
| });
| }
| </script>
|
| <template>
| <Page
| description="表单组件合并示例：在某些场景下，例如分步表单，需要合并多个表单并统一提交。默认情况下，使用 Object.assign 规则合并表单。如果需要特殊处理数据，可以传入 false。"
| title="表单组件"
| >
| <Card title="基础示例">
| <template #extra>
| <Switch
| v-model:checked="needMerge"
| checked-children="开启字段合并"
| class="mr-4"
| un-checked-children="关闭字段合并"
| />
| <Button type="primary" @click="handleMergeSubmit">合并提交</Button>
| </template>
| <div class="mx-auto max-w-lg">
| <Steps :current="currentTab" class="steps">
| <Step title="表单1" />
| <Step title="表单2" />
| </Steps>
| <div class="p-20">
| <FirstForm v-show="currentTab === 0" />
| <SecondForm v-show="currentTab === 1" />
| </div>
| </div>
| </Card>
| </Page>
| </template>
|
|
