多个form表单校验
场景:根据条件不同,在同一个页面中出现多个不同from时的校验以及数据的提交
解决办法:分别校验表单,每个表单校通过后 将表单多合一提交
校验表单部分:
/** 校验表单 **/
formValidate(formRefs){
let objectList = [];
let results = formRefs.map(formRef =>
new Promise((resolve, reject) => {
formRef.validate((valid, object) => {
if (valid) {
resolve();
} else {
objectList.push(object);
reject();
}
});
})
)
return Promise.all(results).catch(()=>{
return Promise.reject(objectList);
})
},
/** 表单集合赋值 **/
pushForm() {
let formRefs = [];
if (添加表单1) {
formRefs.push('form1') // 表单对象名
}
if (添加表单2) {
formRefs.push('form2')
}
if(...){
formRefs.push('...')
}
return formRefs.map(key => this.$refs[key]);
},
// 校验部分
this.formValidate(this.pushForm()).then(() => {
// 校验通过
}).catch(err =>{
console.log(err)
})
form合一提交部分,使用Object.assign(a,b)将两个对象合并成一个新的对象作为提交得时候使用得对象
/** 表单赋值 **/
formDate(){
if (...){
this.form = Object.assign(this.form, this.form1)
}else if (...){
this.form = Object.assign(this.form, this.form2)
}else if (...){
this.form = Object.assign(this.form, this.form3)
}else if (...){
this.form = Object.assign(this.form, this.form4)
}else if (...){
this.form = Object.assign(this.form, this.form5)
}
},
修改数据时数据回显重新赋值部分:后端要先将数据按照form表单将各自得数据先行封装(base1、base2…),并将原始数据也返回(allData)
/** 修改时表单赋值 **/
getInfo(data){
getBase(...).then(res =>{
if(res.code === 200){
this.form = Object.assign({}, res.data.allData);
if("机构条件" === item) {
this.form1 = Object.assign({}, res.data.base1);
}else if("人员条件" === item){
this.form2 = Object.assign({}, res.data.base2)
}else if("场所条件" === item){
this.form3 = Object.assign({}, res.data.base3);
}else if("设备条件" === item){
this.form4 = Object.assign({}, res.data.base4);
}else if("制度条件" === item) {
this.form5 = Object.assign({}, res.data.base5);
}
}
})
},
后台数据封装部分:
@Data
public class AllBaseDto {
private Base1 base1;
private Base2 base2;
private Base3 base3;
....
....
private AllBase allBase;
public static AllBaseDto adapter(AllBase allBase){
AllBaseDto allBaseDto = new AllBaseDto ();
//...
Base1 base1= new Base1 ();
BeanUtils.copyProperties(allBase,base1);
allBaseDto .setCityBase1(base1);
//...
Base2 base2= new Base2 ();
BeanUtils.copyProperties(allBase,base2);
allBaseDto .setCityBase2(base2);
// ...
Base3 base3= new Base3 ();
BeanUtils.copyProperties(allBase,base3);
allBaseDto .setCityBase3(base3);
...
//总表
allBaseDto .setCityBaseStandardBase(allBase);
return allBaseDto ;
}
}
再附个具体实体的:
@Data
public class Base1 {
private String a;
private String b;
private String c;
private String d;
}
需要注意的是base1、base2、等实体的属性allbase中必须存在
记录生活记录工作!