提交 | 用户 | age
|
2f6253
|
1 |
<template> |
陈 |
2 |
<div class="m-4"> |
|
3 |
<div class="mb-4"> |
|
4 |
<a-button @click="validateForm" class="mr-2">手动校验表单</a-button> |
|
5 |
<a-button @click="resetValidate" class="mr-2">清空校验信息</a-button> |
|
6 |
<a-button @click="getFormValues" class="mr-2">获取表单值</a-button> |
|
7 |
<a-button @click="setFormValues" class="mr-2">设置表单值</a-button> |
|
8 |
</div> |
|
9 |
<CollapseContainer title="表单校验"> |
|
10 |
<BasicForm @register="register" @submit="handleSubmit" /> |
|
11 |
</CollapseContainer> |
|
12 |
</div> |
|
13 |
</template> |
|
14 |
<script lang="ts"> |
|
15 |
import { defineComponent } from 'vue'; |
|
16 |
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'; |
|
17 |
import { CollapseContainer } from '/@/components/Container/index'; |
|
18 |
import { useMessage } from '/@/hooks/web/useMessage'; |
|
19 |
const schemas: FormSchema[] = [ |
|
20 |
{ |
|
21 |
field: 'field1', |
|
22 |
component: 'Input', |
|
23 |
label: '字段1', |
|
24 |
colProps: { |
|
25 |
span: 8, |
|
26 |
}, |
285906
|
27 |
required: true, |
2f6253
|
28 |
}, |
陈 |
29 |
{ |
|
30 |
field: 'field2', |
|
31 |
component: 'Input', |
|
32 |
label: '字段2', |
|
33 |
colProps: { |
|
34 |
span: 8, |
|
35 |
}, |
285906
|
36 |
required: true, |
2f6253
|
37 |
}, |
陈 |
38 |
{ |
|
39 |
field: 'field3', |
|
40 |
component: 'DatePicker', |
|
41 |
label: '字段3', |
|
42 |
colProps: { |
|
43 |
span: 8, |
|
44 |
}, |
285906
|
45 |
required: true, |
2f6253
|
46 |
}, |
陈 |
47 |
{ |
|
48 |
field: 'field4', |
|
49 |
component: 'Select', |
|
50 |
label: '字段4', |
|
51 |
colProps: { |
|
52 |
span: 8, |
|
53 |
}, |
|
54 |
componentProps: { |
|
55 |
options: [ |
|
56 |
{ |
|
57 |
label: '选项1', |
|
58 |
value: '1', |
|
59 |
key: '1', |
|
60 |
}, |
|
61 |
{ |
|
62 |
label: '选项2', |
|
63 |
value: '2', |
|
64 |
key: '2', |
|
65 |
}, |
|
66 |
], |
|
67 |
}, |
1d4561
|
68 |
rules: [ |
V |
69 |
{ |
|
70 |
required: true, |
|
71 |
message: '请输入aa', |
|
72 |
}, |
|
73 |
], |
|
74 |
}, |
|
75 |
{ |
|
76 |
field: 'field44', |
|
77 |
component: 'Input', |
|
78 |
label: '自定义校验', |
|
79 |
colProps: { |
|
80 |
span: 8, |
|
81 |
}, |
|
82 |
rules: [ |
|
83 |
{ |
|
84 |
required: true, |
|
85 |
// @ts-ignore |
|
86 |
validator: async (rule, value) => { |
4ff1c4
|
87 |
if (!value) { |
V |
88 |
return Promise.reject('值不能为空'); |
|
89 |
} |
1d4561
|
90 |
if (value === '1') { |
V |
91 |
return Promise.reject('值不能为1'); |
|
92 |
} |
|
93 |
return Promise.resolve(); |
|
94 |
}, |
4ff1c4
|
95 |
trigger: 'change', |
1d4561
|
96 |
}, |
V |
97 |
], |
2f6253
|
98 |
}, |
陈 |
99 |
{ |
|
100 |
field: 'field5', |
|
101 |
component: 'CheckboxGroup', |
|
102 |
label: '字段5', |
|
103 |
colProps: { |
|
104 |
span: 8, |
|
105 |
}, |
|
106 |
componentProps: { |
|
107 |
options: [ |
|
108 |
{ |
|
109 |
label: '选项1', |
|
110 |
value: '1', |
|
111 |
}, |
|
112 |
{ |
|
113 |
label: '选项2', |
|
114 |
value: '2', |
|
115 |
}, |
|
116 |
], |
|
117 |
}, |
|
118 |
rules: [{ required: true }], |
|
119 |
}, |
|
120 |
{ |
|
121 |
field: 'field7', |
|
122 |
component: 'RadioGroup', |
|
123 |
label: '字段7', |
|
124 |
colProps: { |
|
125 |
span: 8, |
|
126 |
}, |
|
127 |
componentProps: { |
|
128 |
options: [ |
|
129 |
{ |
|
130 |
label: '选项1', |
|
131 |
value: '1', |
|
132 |
}, |
|
133 |
{ |
|
134 |
label: '选项2', |
|
135 |
value: '2', |
|
136 |
}, |
|
137 |
], |
|
138 |
}, |
|
139 |
rules: [{ required: true, message: '覆盖默认生成的校验信息' }], |
|
140 |
}, |
|
141 |
]; |
|
142 |
|
|
143 |
export default defineComponent({ |
|
144 |
components: { BasicForm, CollapseContainer }, |
|
145 |
setup() { |
|
146 |
const { createMessage } = useMessage(); |
|
147 |
const [register, { validateFields, clearValidate, getFieldsValue, setFieldsValue }] = useForm( |
|
148 |
{ |
|
149 |
labelWidth: 120, |
|
150 |
schemas, |
|
151 |
actionColOptions: { |
|
152 |
span: 24, |
|
153 |
}, |
|
154 |
} |
|
155 |
); |
|
156 |
async function validateForm() { |
|
157 |
try { |
|
158 |
const res = await validateFields(); |
|
159 |
console.log('passing', res); |
|
160 |
} catch (error) { |
|
161 |
console.log('not passing', error); |
|
162 |
} |
|
163 |
} |
|
164 |
async function resetValidate() { |
|
165 |
clearValidate(); |
|
166 |
} |
|
167 |
function getFormValues() { |
|
168 |
const values = getFieldsValue(); |
|
169 |
createMessage.success('values:' + JSON.stringify(values)); |
|
170 |
} |
|
171 |
function setFormValues() { |
|
172 |
setFieldsValue({ |
|
173 |
field1: '1111', |
|
174 |
field5: ['1'], |
|
175 |
field7: '1', |
|
176 |
}); |
|
177 |
} |
|
178 |
return { |
|
179 |
register, |
|
180 |
schemas, |
|
181 |
handleSubmit: (values: any) => { |
|
182 |
createMessage.success('click search,values:' + JSON.stringify(values)); |
|
183 |
}, |
|
184 |
getFormValues, |
|
185 |
setFormValues, |
|
186 |
validateForm, |
|
187 |
resetValidate, |
|
188 |
}; |
|
189 |
}, |
|
190 |
}); |
|
191 |
</script> |