基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(四)

简介: 基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(四)

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888

接上一节,今天讲动态更新数据的方法

1、后端动态更新代码如下:

/**
     * 根据主表名,关键字和数据动态更新一条记录
     * @param tableName 主表名称
     */
    @SaCheckPermission("workflow:form:edit")
    @PostMapping(value = "/updateDataById")
    public R<?> updateDataById(@RequestBody FormDataVo formDataVo) {
        return R.ok(formService.updateDataById(formDataVo));
    }
@Override
  public int updateDataById(FormDataVo formDataVo) {
    return baseMapper.updateDataById(formDataVo.getTableName(), formDataVo.getPrimaryKey(),Long.valueOf(formDataVo.getId()),formDataVo.getUpdateMap());
  }
int updateDataById(@Param("tableName") String tableName, @Param("primaryKey") String primaryKey,
                       @Param("id") Long id, @Param("updateMap") Map<String,Object> updateMap); 
<update id="updateDataById">
        UPDATE ${tableName} SET
        <foreach collection="updateMap" item="val" index="key" separator=",">
            ${key} = #{val}
        </foreach>
        WHERE ${primaryKey} = #{id}
    </update>

2、前端代码如下:

/** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          console.log("submitForm this.form",this.form)
          const id = this.form[this.primaryKey] || this.ids
          const formData = {
            tableName: this.tableName,
            primaryKey: this.primaryKey,
            id: id,
            updateMap: this.form
          }
          console.log("submitForm formData",formData)
          if (id != null) {
            updateDataById(formData).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } 
        }
      });
    },

3、效果图如下:


相关实践学习
基于Hologres轻量实时的高性能OLAP分析
本教程基于GitHub Archive公开数据集,通过DataWorks将GitHub中的项⽬、行为等20多种事件类型数据实时采集至Hologres进行分析,同时使用DataV内置模板,快速搭建实时可视化数据大屏,从开发者、项⽬、编程语⾔等多个维度了解GitHub实时数据变化情况。
阿里云实时数仓实战 - 用户行为数仓搭建
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求:熟练掌握 SQL 语法熟悉 Linux 命令,对 Hadoop 大数据体系有一定的了解 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
传感器 物联网
详解MQTT主题和通配符
详解MQTT主题和通配符
1735 0
详解MQTT主题和通配符
|
4月前
|
存储 Android开发 数据安全/隐私保护
安卓手机和苹果手机如何快速完成文件互传?安卓手机文件传到苹果手机方法分享
在日常工作中,跨设备文件传输需求频繁,尤其是Android与iOS之间。本文推荐一款名为LocalSend的工具,支持Android、iOS、Windows、Mac平台,通过局域网实现快速、安全的文件互传,无需互联网连接。操作简便,界面直观,适合多设备用户使用。
1267 1
Element table组件封装 核心:父子组件传值、传方法
本文介绍了如何基于Element UI的table组件进行二次封装,创建一个具有父子组件传值和传方法功能的自定义表格组件,并提供了封装后的组件如何引入、注册和使用的方法。
337 0
Element table组件封装 核心:父子组件传值、传方法
|
存储 人工智能 自然语言处理
文档智能(Document Mind)服务体验测评
一文带你详细了解文档智能(Document Mind)
1087 5
文档智能(Document Mind)服务体验测评
|
存储 Java
|
Dart 开发工具 Windows
Dart安装(Winodws)
Dart安装(Winodws)
342 0
|
数据安全/隐私保护
CI/CD笔记.Gitlab系列.新用户管理
CI/CD笔记.Gitlab系列.新用户管理
243 1
命令行下使用javac编译文件时出现 错误: 编码 GBK 的不可映射字符
命令行下使用javac编译文件时出现 错误: 编码 GBK 的不可映射字符
429 0
el-progress进度条提示Invalid prop: custom validator check failed for prop “status“
el-progress进度条提示Invalid prop: custom validator check failed for prop “status“
495 0
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(五)
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(五)
282 0