新建一条表单记录,里面存在多选下拉菜单,点击保存需要将多选下拉菜单转变成string类型.
回到列表页,点击查看,回显时,为了保证能够正确回显需要将后端返回string类型的两个字段转变成数组类型
再次点击保存,提交的就是数组类型和后端不对应就会报错.
解决办法
再次点击保存时,深拷贝一份表单对象值,判断下拉菜单值是否为数组,是就转变成string,将拷贝的对象作为保存接口的入参.
// 基本信息保存
saveform(val) {
console.log(val)
let val2 = _.cloneDeep(val)
if(Array.isArray(val2.dispatchVehicle) || Array.isArray(val2.driver)){
val2.dispatchVehicle = val2.dispatchVehicle.join(",")
val2.driver = val2.driver.join(",")
}
if (val.id) {
carSendupd(val.id, val2).then((res) => {
if (res.data.code == 200) {
this.$message.success(res.data.message);
this.isOpenRegister = false;
this.getData();
}
});
} else {
val.deleteState = 0;
carSendadd(val).then((res) => {
if (res.data.code == 200) {
// this.isOpenRegister = false;
console.log(res.data.data)
this.getData();
this.applydata = res.data.data;
this.$message.success(res.data.message);
this.isShowPushBtn = false;
}
});
}
},
//回显
async getdetail(val) {
return carSenddetail(val.id).then((res) => {
if (res.data.code == 200) {
res.data.data.fillingTime = getNowHumanFormat(
res.data.data.fillingTime
);
res.data.data.departureTime = getNowHumanFormat(
res.data.data.departureTime
);
res.data.data.collectionTime = getNowHumanFormat(
res.data.data.collectionTime
);
if(res.data.data.dispatchVehicle !== "" && res.data.data.dispatchVehicle.length !== 0){
res.data.data.dispatchVehicle = res.data.data.dispatchVehicle.split(",") ?? ""
}
if(res.data.data.driver !== "" && res.data.data.driver.length !== 0){
res.data.data.driver = res.data.data.driver.split(",") ?? ""
}
let obj = {};
obj = Object.assign(res.data.data, {
taskId : val.taskId,
businessKey: val.businessKey,
});
this.carformdatalist = obj;
this.detailid = val;
}
});
},
注意:
??是es11新出的操作符,作用类似于三元表单式,??之前的条件成立,则返回??左侧的值,否则返回右侧的默认值
参考链接:https://www.jianshu.com/p/06ea14f9f19d