多个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中必须存在

记录生活记录工作！