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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
| <script lang="ts" setup>
| import { Page } from '@vben/common-ui';
|
| import { Card, message } from 'ant-design-vue';
|
| import { useVbenForm } from '#/adapter/form';
|
| const [QueryForm] = useVbenForm({
| // 默认展开
| collapsed: false,
| // 所有表单项共用，可单独在表单内覆盖
| commonConfig: {
| // 所有表单项
| componentProps: {
| class: 'w-full',
| },
| },
| // 提交函数
| handleSubmit: onSubmit,
| // 垂直布局，label和input在不同行，值为vertical
| // 水平布局，label和input在同一行
| layout: 'horizontal',
| schema: [
| {
| // 组件需要在 #/adapter.ts内注册，并加上类型
| component: 'Input',
| // 对应组件的参数
| componentProps: {
| placeholder: '请输入用户名',
| },
| // 字段名
| fieldName: 'username',
| // 界面显示的label
| label: '字符串',
| },
| {
| component: 'InputPassword',
| componentProps: {
| placeholder: '请输入密码',
| },
| fieldName: 'password',
| label: '密码',
| },
| {
| component: 'InputNumber',
| componentProps: {
| placeholder: '请输入',
| },
| fieldName: 'number',
| label: '数字(带后缀)',
| suffix: () => '¥',
| },
| {
| component: 'Select',
| componentProps: {
| allowClear: true,
| filterOption: true,
| options: [
| {
| label: '选项1',
| value: '1',
| },
| {
| label: '选项2',
| value: '2',
| },
| ],
| placeholder: '请选择',
| showSearch: true,
| },
| fieldName: 'options',
| label: '下拉选',
| },
| {
| component: 'DatePicker',
| fieldName: 'datePicker',
| label: '日期选择框',
| },
| ],
| // 是否可展开
| showCollapseButton: true,
| submitButtonOptions: {
| content: '查询',
| },
| // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
| wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
| });
|
| const [QueryForm1] = useVbenForm({
| // 默认展开
| collapsed: true,
| collapsedRows: 2,
| // 所有表单项共用，可单独在表单内覆盖
| commonConfig: {
| // 所有表单项
| componentProps: {
| class: 'w-full',
| },
| },
| // 提交函数
| handleSubmit: onSubmit,
| // 垂直布局，label和input在不同行，值为vertical
| // 水平布局，label和input在同一行
| layout: 'horizontal',
| schema: (() => {
| const schema = [];
| for (let index = 0; index < 14; index++) {
| schema.push({
| // 组件需要在 #/adapter.ts内注册，并加上类型
| component: 'Input',
| // 字段名
| fieldName: `field${index}`,
| // 界面显示的label
| label: `字段${index}`,
| });
| }
| return schema;
| })(),
| // 是否可展开
| showCollapseButton: true,
| submitButtonOptions: {
| content: '查询',
| },
| // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
| wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
| });
|
| function onSubmit(values: Record<string, any>) {
| message.success({
| content: `form values: ${JSON.stringify(values)}`,
| });
| }
| </script>
|
| <template>
| <Page
| description="查询表单，常用语和表格组合使用，可进行收缩展开。"
| title="表单组件"
| >
| <Card class="mb-5" title="查询表单，默认展开">
| <QueryForm />
| </Card>
| <Card title="查询表单，默认折叠，折叠时保留2行">
| <QueryForm1 />
| </Card>
| </Page>
| </template>
|
|
