jeecgboot的大屏设计器开发——数据源设计三

     之前主要是讲了数据源的录入与数据库测试功能，但保存这块没有说，今天主要讲保存这块。

     因为通过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、具体完整代码如下：

1.  
   submitForm () {
2.  
   const that = this;
3.  
   const newList = {};
4.  
   this.dataLink.forEach(item => {
5.  
   newList[item.label] = item.value;
6.  
   });
7.  
   this.model.config = JSON.stringify(newList);
8.  
   // 触发表单验证
9.  
   this.$refs.form.validate(valid => {
10.  
    if (valid) {
11.  
    if (this.testReplyCode != "200") {
12.  
    this.$message.error("测试结果为成功后方可保存！");
13.  
    return;
14.  
    }
15.  
    that.confirmLoading = true;
16.  
    let httpurl = '';
17.  
    let method = '';
18.  
    if(!this.model.id){
19.  
    httpurl =this.url.add;
20.  
    method = 'post';
21.  
    }else{
22.  
    httpurl =this.url.edit;
23.  
    method = 'put';
24.  
    }
25.  
    httpAction(httpurl,this.model,method).then((res)=>{
26.  
    if(res.success){
27.  
    that.$message.success(res.message);
28.  
    that.$emit('ok');
29.  
    }else{
30.  
    that.$message.warning(res.message);
31.  
    }
32.  
    }).finally(() => {
33.  
    that.confirmLoading = false;
34.  
    })
35.  
    }
36.  
     
37.  
    })
38.  
    },

  二、编辑的时候处理

1、在edit增加一个初始化

     if (record.id) {根据record.id判断新增还是编辑
          this.editInit(this.model.type);
        }  

    这里需要区分一下是新增还是编辑，两个不一样。

2、初始化读出的数据

    要结合读出的数据与原来type类型的进行更新处理，再显示出来，完整代码如下：

1.  
   edit (record) {
2.  
   this.model = Object.assign({}, record);
3.  
   if (record.id) {根据record.id判断新增还是编辑
4.  
   this.editInit(this.model.type);
5.  
   }
6.  
   this.visible = true;
7.  
   },
8.  
   editInit(type) {
9.  
   const that = this;
10.  
    let url = this.url.queryByCode, method = 'get';
11.  
    let params = {code: type};
12.  
    getAction(url,params).then((res)=>{
13.  
    if(res.success){
14.  
    //that.$message.success(res.message);
15.  
    console.log("onchange res=",res);
16.  
    that.dataLink = JSON.parse(res.result.jsonValue);
17.  
    console.log("onchange that.dataLink=",that.dataLink);
18.  
    let newDataLink = [];
19.  
    newDataLink = that.dataLink;
20.  
    let sourceConfigJson = JSON.parse(that.model.config);
21.  
    for (let i = 0; i < newDataLink.length; i ) {
22.  
    newDataLink[i].value = sourceConfigJson[newDataLink[i].label];
23.  
    }
24.  
    this.dataLink = newDataLink;
25.  
    }else{
26.  
    that.$message.warning(res.message);
27.  
    }
28.  
    }).finally(() => {
29.  
    that.confirmLoading = false;
30.  
    })
31.  
    },

三、效果图

这篇好文章是转载于：学新通技术网