之前主要是讲了数据源的录入与数据库测试功能，但保存这块没有说，今天主要讲保存这块。
因为通过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; }) },
三、效果图
