多个form表单校验

多个form表单校验

解决办法：分别校验表单，每个表单校通过后 将表单多合一提交

校验表单部分：

  /** 校验表单 **/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中必须存在

记录生活记录工作！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！