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

本文涉及的产品
可视分析地图(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、如点击下面的编辑,应该可以进行查询出来进行编辑修改

2、前端做好修改的代码如下:

/** 修改按钮操作 */
    handleUpdate(row) {
      this.loading = true;
      this.reset();
      const id = row[this.primaryKey] || this.ids
      const formData = {
        tableName: this.tableName,
        primaryKey: this.primaryKey,
        id: id
      }
      console.log("handleUpdate formData",formData)
      getDataById(formData).then(response => {
        console.log("getDataById response",response)
        this.loading = false;
        this.form = response.data;
        this.open = true;
      });
    },

3、open打开编辑界面如下:

<!-- 添加或修改online主对话框,需要动态生成 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div v-for="(item, i) in columnList">
          <el-form-item :label="item.__config__.label" :prop="item.__vModel__">
            <el-input v-model="form[item.__vModel__]" :placeholder="'请输入' + item.__config__.label" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

4、打开界面后如下:

5、后端动态查询接口如下:

import lombok.Data;
/**
 * @author superfusion
 * @Date 2024/1/22
 * @Description:
 * @Version 1.0
 */
@Data
public class FormDataVo {
  /**
     * 表名
     */
  String tableName;
  /**
     * 主键
     */
  String primaryKey;
  /**
     * 数据id
     */
  String id;
  
  /**
     * 传入要更新的字段名与值
     */
  Map<String,Object> updateMap;
}
/**
     * 根据主表名,关键字和数据动态获取具体一条表数据
     * @param tableName 主表名称
     */
    @SaCheckPermission("workflow:form:query")
    @PostMapping(value = "/getDataById")
    public R<Map> getDataById(@RequestBody FormDataVo formDataVo) {
        return R.ok(formService.getDataById(formDataVo));
    }
@Override
  public Map getDataById(FormDataVo formDataVo) {
    return baseMapper.getDataById(formDataVo.getTableName(), formDataVo.getPrimaryKey(),Long.valueOf(formDataVo.getId()));
  }
@Select("SELECT * FROM ${tableName} where ${primaryKey} = #{id}")
    Map getDataById(@Param("tableName") String tableName, @Param("primaryKey") String primaryKey,
                @Param("id") Long id);


相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
2月前
|
Java 关系型数据库 数据库连接
Mybatis+MySQL动态分页查询数据经典案例(含代码以及测试)
Mybatis+MySQL动态分页查询数据经典案例(含代码以及测试)
|
20天前
|
测试技术 数据库 Python
使用django构建表单测试
【6月更文挑战第14天】该文档介绍了如何对本地库进行自动化测试,特别是关注于代码结构和模型测试。作者鼓励为其他模型和表单创建类似的测试,并提及测试应避免对底层框架的重复验证。
55 0
使用django构建表单测试
|
2月前
|
移动开发 前端开发
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(五)
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现(五)
19 0
|
2月前
|
SQL Java 数据库连接
【Java调试】通过SqlSessionFactory类对象获取mapper文件内的动态SQL在执行时的完整SQL及参数(2种使用方法+测试Demo及结果)
【Java调试】通过SqlSessionFactory类对象获取mapper文件内的动态SQL在执行时的完整SQL及参数(2种使用方法+测试Demo及结果)
76 0
|
9月前
|
存储 测试技术 网络架构
软件测试|测试平台开发-Flask入门:Flask动态路由
软件测试|测试平台开发-Flask入门:Flask动态路由
44 0
|
12月前
|
安全 数据库
ALPHA项目的测试电机、性能信息和动态推力近似值数据库(Matlab代码实现)
ALPHA项目的测试电机、性能信息和动态推力近似值数据库(Matlab代码实现)
|
Java 关系型数据库 MySQL
Mybatis+MySQL动态分页查询数据经典案例(含代码以及测试)
Mybatis+MySQL动态分页查询数据经典案例(含代码以及测试)
|
JavaScript 测试技术
软件测试|测试平台Vue3 - 表单的输入与绑定
软件测试|测试平台Vue3 - 表单的输入与绑定
149 0
软件测试|测试平台Vue3 - 表单的输入与绑定
|
前端开发 JavaScript API
轮播图-动态响应轮播图-测试&amp;移动端切换 |学习笔记
快速学习 轮播图-动态响应轮播图-测试&amp;移动端切换
234 0
轮播图-动态响应轮播图-测试&amp;移动端切换 |学习笔记