之前主要是讲了数据源的录入与数据库测试功能,但保存这块没有说,今天主要讲保存这块。
因为通过online设计表单生成的代码已经有保存功能,所以主要功能不需要修改,只需要修改下面几个方面就可以。
一、保存按钮的修改
主要是增加了两个:
1、新的值包括用户可能编辑的数据重新赋值给model
const newList = {};
this.dataLink.forEach(item => {
newList[item.label] = item.value;
});
this.model.config = JSON.stringify(newList);
2、保存的时候进行检查,需要测试OK后才能保存
if (this.testReplyCode != "200") {
this.$message.error("测试结果为成功后方可保存!");
return;
}
3、具体完整代码如下:
submitForm () {
const that = this;
const newList = {};
this.dataLink.forEach(item => {
newList[item.label] = item.value;
});
this.model.config = JSON.stringify(newList);
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
if (this.testReplyCode != "200") {
this.$message.error("测试结果为成功后方可保存!");
return;
}
that.confirmLoading = true;
let httpurl = '';
let method = '';
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
})
}
})
},
二、编辑的时候处理
1、在edit增加一个初始化
if (record.id) {根据record.id判断新增还是编辑
this.editInit(this.model.type);
}
这里需要区分一下是新增还是编辑,两个不一样。
2、初始化读出的数据
要结合读出的数据与原来type类型的进行更新处理,再显示出来,完整代码如下:
edit (record) {
this.model = Object.assign({}, record);
if (record.id) {根据record.id判断新增还是编辑
this.editInit(this.model.type);
}
this.visible = true;
},
editInit(type) {
const that = this;
let url = this.url.queryByCode, method = 'get';
let params = {code: type};
getAction(url,params).then((res)=>{
if(res.success){
//that.$message.success(res.message);
console.log("onchange res=",res);
that.dataLink = JSON.parse(res.result.jsonValue);
console.log("onchange that.dataLink=",that.dataLink);
let newDataLink = [];
newDataLink = that.dataLink;
let sourceConfigJson = JSON.parse(that.model.config);
for (let i = 0; i < newDataLink.length; i++) {
newDataLink[i].value = sourceConfigJson[newDataLink[i].label];
}
this.dataLink = newDataLink;
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
})
},
三、效果图