效果图
完整代码
1 <script setup>
2 import { defineProps, onMounted, reactive, ref, defineEmits} from 'vue'
3 import { Card, Input, Select, DatePicker, FormItem, Form, Button } from 'ant-design-vue'
4 import { useRuleCheckStore } from '@/stores/ruleCheck' // 后端接口
5
6 const ruleCheckStore = useRuleCheckStore()
7 const formModel = reactive({
8 // policyInfo: {
9 // bigPolicyNumber: '', // 大保单号
10 // smallPolicyNumber: '', // 小保单号
11 // province: '', // 省份
12 // city: '', // 城市
13 // }, // 保单信息
14 // peopleInfo: {
15 // applicantPeople: '', // 投保人
16 // assuredPeople: '', // 被保险人
17 // carOwnerGender: '', // 车主性别
18 // carOwnerAge: '', // 车主年龄
19 // }, // 人员信息
20 // dateInfo: {
21 // recordingTime: '', // 录单时间
22 // underwritingTime: '', // 核保完成时间
23 // startTime: '', // 起保时间
24 // finalTime: '', // 终保时间
25 // }, // 日期信息
26 })
27 // // 封装select下拉框，哪里需要就调用这个方法
28 function useOptions(request, format) {
29 const options = ref([]);
30 async function getOptions (...args) {
31 let data = await request(...args);
32 if (typeof format === 'function') {
33 data = data.map(format);
34 }
35 console.log('options:', data)
36 options.value = data
37 }
38 return [options, getOptions];
39 }
40 // 生命周期里面调用
41 onMounted(()=>{
42 getOptionsProvince();
43 })
44 // 省份名称下拉列表
45 const [ProvinceList, getOptionsProvince] = useOptions(
46 // 后端提供的接口
47 ruleCheckStore.getProvinceList,
48 (item) => ({
49 original: item,
50 label: item.name,
51 value: item.code,
52 }),
53 );
54 // change事件
55 const provinceHandleChange = (item) => {
56 ProvinceList.value = [];
57 getOptionsProvince();
58 }
59 // 遍历的数据
60 const dataList = [
61 {
62 "formTitle": "保单信息",
63 "formFields": [
64 {
65 "label": "大保单号",
66 "name": "bigPolicyNumber",
67 "type": "input",
68 },
69 {
70 "label": "小保单号",
71 "name": "smallPolicyNumber",
72 "type": "input"
73 },
74 {
75 "label": "省份名称",
76 "name": "province",
77 "type": "select",
78 "options": ProvinceList
79 },
80 {
81 "label": "城市名称",
82 "name": "city",
83 "type": "select",
84 "options": ProvinceList
85 }
86 ]
87 },
88 {
89 "formTitle": "人员信息",
90 "formFields": [
91 {
92 "label": "投保人",
93 "name": "applicantPeople",
94 "type": "input"
95 },
96 {
97 "label": "被投保人",
98 "name": "assuredPeople",
99 "type": "input"
100 },
101 {
102 "label": "车主性别",
103 "name": "carOwnerGender",
104 "type": "select",
105 "options": ProvinceList
106 },
107 {
108 "label": "车主年龄",
109 "name": "carOwnerAge",
110 "type": "input"
111 },
112 ]
113 },
114 {
115 "formTitle": "日期信息",
116 "formFields": [
117 {
118 "label": "录单时间",
119 "name": "recordingTime",
120 "type": "DatePicker"
121 },
122 {
123 "label": "核保完成时间",
124 "name": "underwritingTime",
125 "type": "DatePicker"
126 },
127 {
128 "label": "起保时间",
129 "name": "startTime",
130 "type": "DatePicker"
131 },
132 {
133 "label": "终保时间",
134 "name": "finalTime",
135 "type": "DatePicker"
136 },
137 ]
138 }
139 ]
140 // 自定义校验验证车主年龄不能超过71岁
141 const checkName = async (_rule, value) => {
142 if (value > 71 ) {
143 return Promise.reject('车主的年龄不能超过71岁');
144 } else {
145 return Promise.resolve();
146 }
147 }
148 // 验证数据
149 const rules = {
150 bigPolicyNumber: [
151 {
152 required: true,
153 message: '请输入大保单号',
154 trigger: 'blur',
155 },
156 ],
157 province: [
158 {
159 required: true,
160 message: '请选择省份',
161 trigger: 'blur',
162 },
163 ],
164 city: [
165 {
166 required: true,
167 message: '请选择城市',
168 trigger: 'blur',
169 },
170 ],
171 carOwnerGender: [
172 {
173 required: true,
174 message: '请选择车主性别',
175 trigger: 'blur',
176 },
177 ],
178 carOwnerAge: [
179 {
180 required: true,
181 message: '请输入车主年龄',
182 trigger: 'blur',
183 },
184 {
185 validator:checkName //自定义的校验函数
186 }
187 ],
188 recordingTime: [
189 {
190 required: true,
191 message: '请选择录单时间',
192 trigger: 'blur',
193 }
194 ],
195 underwritingTime: [
196 {
197 required: true,
198 message: '核保完成时间',
199 trigger: 'blur',
200 }
201 ],
202 startTime: [
203 {
204 required: true,
205 message: '请选择起保时间',
206 trigger: 'blur',
207 }
208 ],
209 finalTime: [
210 {
211 required: true,
212 message: '请选择终保时间',
213 trigger: 'blur',
214 }
215 ],
216
217 }
218 // 提交数据按钮
219 // 获取form表单
220 const formRef = ref(null)
221 const create = async () => {
222 try {
223 await formRef.value.validate().then(()=>{
224 // 后端接口
225 // ruleCheckStore.getAddValidationDataById(formState)
226 })
227 } catch (error) {
228 console.log(error);
229 }
230 }
231
232 </script>
template代码
1 <template>
2 <div class="expectedResult">
3 <div style="display:flex;justifyContent:space-between">
4 <div class="expectedResult-title">输入数据信息</div>
5 <Button @click="create" style="marginBottom:16px;color:#0058FB ">
6 提交
7 </Button>
8 </div>
9 <Card :bordered="false" v-for="(iten,index) in dataList" :key="index">
10 <div class="expectedResult-content">{{ iten.formTitle }}</div>
11 <Form
12 ref="formRef"
13 :model="formModel"
14 :rules="rules"
15 >
16 <template v-for="item in iten.formFields" :key="item.name">
17 <FormItem :label="item.label" :name="item.name" v-if="item.type == 'input'">
18 <Input v-model:value="formModel[item.name]" :bordered="false"/>
19 </FormItem>
20 <FormItem :label="item.label" :name="item.name" v-if="item.type == 'select'">
21 <Select
22 v-model:value="formModel[item.name]"
23 show-search
24 placeholder="请选择"
25 :options="item.options"
26 @change="provinceHandleChange"
27 :bordered="false"
28 style="width: 240px;"
29 ></Select>
30 </FormItem>
31 <FormItem :label="item.label" :name="item.name" v-if="item.type == 'DatePicker'">
32 <DatePicker v-model:value="formModel[item.name]" :bordered='false' show-time value-format='YYYY-MM-DD HH:mm:ss'/>
33 </FormItem>
34 </template>
35 </Form>
36 </Card>
37 </div>
38 </template>
css样式代码
1 <style lang="less" scoped>
2 .expectedResult {
3 padding: 16px;
4 margin-top: 16px;
5
6 &-title {
7 padding: 14px 0 14px 24px;
8 font-size: 14px;
9 font-family: PingFangSC-Medium, PingFang SC;
10 font-weight: 500;
11 color: rgba(0,0,0,0.85);
12 background: #F5F6FB;
13 line-height: 20px;
14 }
15 .expectedResult{
16 background-color:#fff ;
17 &-content{
18 width: 64px;
19 border-left: 4px solid #0058FB ;
20 padding-left: 4px;
21 margin: 0px 0 16px 0px;
22 font-size: 14px;
23 }
24 }
25 :deep(.ant-form){
26 display:flex;
27 justify-content: flex-start;
28 flex-wrap: wrap;
29 }
30 :deep(.ant-form-item){
31 display: flex;
32 border: 1px solid #ECEBF2;
33 margin-bottom: 0;
34 &-label{
35 width: 140px;
36 font-size: 14px;
37 font-weight: 400;
38 text-align: right;
39 padding: 10px 8px;
40 background: #F7F8F9;
41 color: rgba(0,0,0,0.65);
42 overflow: hidden;
43 white-space: normal;
44 }
45 .ant-input{
46 line-height: 42px;
47 }
48 .ant-form-item-control-input-content{
49 width: 240px;
50 line-height: 52px;
51 }
52 }
53 }
54 </style>
标签：const,name,form,antdesignvue,blur,label,vue3,message,type From： https://www.cnblogs.com/fxw1996/p/17733343.html