基于jeecgboot的大屏设计器开发——数据源设计(三)

简介: 基于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、具体完整代码如下:

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;
        })
      },

三、效果图


相关文章
|
存储 数据可视化 JavaScript
(低代码)可视化搭建平台数据源设计剖析
低代码平台属于APaaS(应用平台即服务),其解决的是企业内部应用协调和人效成本的问题. 随着计算机技术诸如云服务等的发展, 传统软件服务已无法满足数字化浪潮的压力,
1089 0
|
9月前
|
数据库
基于jeecgboot的大屏设计器开发——数据源设计(二)
基于jeecgboot的大屏设计器开发——数据源设计(二)
171 1
|
9月前
|
前端开发
基于jeecgboot的大屏设计器开发——数据集设计(一)
基于jeecgboot的大屏设计器开发——数据集设计(一)
177 3
|
9月前
|
数据可视化 Java BI
商业开源MES+源码+送可拖拽式数据大屏
这是一个商业开源的JAVA MES系统,包含源码和本地部署教程。基于Springboot、Vue3和MySQL8,适用于开发学习。功能包括车间数据建模、生产物料控制、计划管理、过程控制、质量管理、库存管理、看板管理、报表分析和基础管理。需JDK11、Tomcat及Maven环境,源码付费获取。
143 0
|
9月前
|
JSON Oracle 前端开发
基于jeecgboot的大屏设计器开发——数据源设计(一)
基于jeecgboot的大屏设计器开发——数据源设计(一)
101 0
|
9月前
|
前端开发 BI
基于jeecgboot的大屏设计器开发——大屏报表管理(二)
基于jeecgboot的大屏设计器开发——大屏报表管理(二)
186 0
|
9月前
|
移动开发 前端开发 BI
基于jeecgboot的大屏设计器开发——大屏报表管理(一)
基于jeecgboot的大屏设计器开发——大屏报表管理(一)
192 0
|
9月前
|
前端开发
基于jeecgboot流程管理平台的自定义业务表单集成方法
基于jeecgboot流程管理平台的自定义业务表单集成方法
204 0
|
供应链 数据可视化 数据管理
[开源]免费开源MES系统,精美的可视化数字大屏,支持低代码大屏设计
万界星空开源MES制造执行系统的Java开源版本。开源mes系统包括系统管理,车间基础数据管理,计划管理,物料控制,生产执行,质量管理,库存管理,看板管理,数据分析等主体功能模块。广泛应用于汽车、高科技电子、 设备制造、新能源、电梯、家电、家居、纺织、电气、电机等行业。
1045 0
[开源]免费开源MES系统,精美的可视化数字大屏,支持低代码大屏设计
|
消息中间件 API Nacos
【组件开发实践】云巧流程组件对接实践
通过简单的业务场景进行举例,介绍如果通过云巧流程组件的API进行集成对接
31781 1