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

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 基于若依的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、效果图如下:


相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
6月前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统修复自定义业务表单的收回功能
基于若依的ruoyi-nbcio流程管理系统修复自定义业务表单的收回功能
64 1
|
6月前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务流程出现多个时相应的流程选择问题(二)
基于若依的ruoyi-nbcio流程管理系统自定义业务流程出现多个时相应的流程选择问题(二)
61 3
|
6月前
基于若依的ruoyi-nbcio流程管理系统增加仿钉钉流程设计(六)
基于若依的ruoyi-nbcio流程管理系统增加仿钉钉流程设计(六)
76 0
|
6月前
|
JSON 移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(二)
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(二)
92 2
|
6月前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(三)
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(三)
70 2
|
6月前
|
移动开发 前端开发 数据库
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(一)
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(一)
77 1
|
6月前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法(二)
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法(二)
72 2
|
6月前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务实现一种简单的动态任务标题(续)
基于若依的ruoyi-nbcio流程管理系统自定义业务实现一种简单的动态任务标题(续)
45 1
|
6月前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务实现一种简单的动态任务标题需求
基于若依的ruoyi-nbcio流程管理系统自定义业务实现一种简单的动态任务标题需求
86 1
|
6月前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法(一)
基于若依的ruoyi-nbcio流程管理系统自定义业务回写状态的一种新方法(一)
73 1