基于若依的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、后端处理

/**
     * 根据主表名,关键字和数据动态插入一条记录
     * @param tableName 主表名称
     */
    @SaCheckPermission("workflow:form:edit")
    @PostMapping(value = "/addDataById")
    public R<?> addDataById(@RequestBody FormDataVo formDataVo) {
        return R.ok(formService.addDataById(formDataVo));
    }
@Override
  public int addDataById(FormDataVo formDataVo) {
    return baseMapper.addDataById(formDataVo.getTableName(), formDataVo.getPrimaryKey(),formDataVo.getUpdateMap());
  }
int addDataById(@Param("tableName") String tableName, @Param("primaryKey") String primaryKey, @Param("insertMap") Map<String,Object> insertMap); 
<!-- 动态插入数据 -->
  <insert id="addDataById">
     INSERT INTO ${tableName}
     <foreach collection="insertMap" item="val" index="field"  separator="," open="(" close=")">
          <if test="field != #{primaryKey}" >
              ${field}
          </if>      
     </foreach>
             VALUES  
     <foreach collection="insertMap" item="val" index="key"  separator="," open="(" close=")">
        <if test="key != #{primaryKey}" >
              #{val}
          </if>          
     </foreach>
  </insert>

2、前端处理

/** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
    },
// 表单重置
    reset() {
      this.form = {};
      //使用for循环向this.form中赋值
      for (let itemindex = 0; itemindex < this.columnList.length; itemindex++) {
        //$set()方法第一个参数是对象,第二个参数是key值,第三个参数是value值
        this.$set(this.form, this.columnList[itemindex].__vModel__, undefined);
      }
      this.resetForm("form");
    },
/** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          console.log("submitForm this.form",this.form)
          const id = this.form[this.primaryKey]
          const formData = {
            tableName: this.tableName,
            primaryKey: this.primaryKey,
            id: id,
            updateMap: this.form
          }
          console.log("submitForm formData",formData)
          if ( id != null && id.length > 0 ) {
            updateDataById(formData).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            addDataById(formData).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },

3、效果图如下:


相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
28天前
|
JavaScript Java 测试技术
大学生体质测试|基于Springboot+vue的大学生体质测试管理系统设计与实现(源码+数据库+文档)
大学生体质测试|基于Springboot+vue的大学生体质测试管理系统设计与实现(源码+数据库+文档)
28 0
|
1月前
|
运维 Kubernetes 测试技术
容器技术:优化软件测试流程的利器
本文介绍了容器技术的概念、优势和历史发展,对比了容器与虚拟机的区别,并提及了Docker和Kubernetes等常见容器技术。容器作为轻量级虚拟化工具,提供高效、灵活的应用部署方式,广泛应用于软件开发、云计算和微服务架构。随着技术演进,容器将在边缘计算、人工智能等领域发挥更大作用,推动行业变革。
29 3
|
4天前
|
测试技术 数据库 Python
使用django构建表单测试
【6月更文挑战第14天】该文档介绍了如何对本地库进行自动化测试,特别是关注于代码结构和模型测试。作者鼓励为其他模型和表单创建类似的测试,并提及测试应避免对底层框架的重复验证。
50 0
使用django构建表单测试
|
14天前
|
测试技术
软件测试项目式学习三(软件测试原则与基本流程与实际测试用例)
软件测试项目式学习三(软件测试原则与基本流程与实际测试用例)
13 0
|
18天前
|
JavaScript Java 测试技术
基于ssm+vue.js的在线测试管理系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js的在线测试管理系统附带文章和源代码设计说明文档ppt
13 0
|
19天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线测试管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线测试管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
272 0
|
22天前
|
安全 数据管理 测试技术
网络安全与信息安全:防范漏洞、加强加密与提升安全意识深入探索自动化测试框架的设计原则与实践应用化测试解决方案。文章不仅涵盖了框架选择的标准,还详细阐述了如何根据项目需求定制测试流程,以及如何利用持续集成工具实现测试的自动触发和结果反馈。最后,文中还将讨论测试数据管理、测试用例优化及团队协作等关键问题,为读者提供全面的自动化测试框架设计与实施指南。
【5月更文挑战第27天】 在数字化时代,网络安全与信息安全已成为维护国家安全、企业利益和个人隐私的重要环节。本文旨在分享关于网络安全漏洞的识别与防范、加密技术的应用以及提升安全意识的重要性。通过对这些方面的深入探讨,我们希望能为读者提供一些实用的建议和策略,以应对日益严峻的网络安全挑战。 【5月更文挑战第27天】 在软件开发周期中,自动化测试作为保障软件质量的关键步骤,其重要性日益凸显。本文旨在剖析自动化测试框架设计的核心原则,并结合具体案例探讨其在实际应用中的执行策略。通过对比分析不同测试框架的优缺点,我们提出一套高效、可扩展且易于维护的自动
|
23天前
|
安全 测试技术 网络安全
API渗透测试的基本流程及关键点
【5月更文挑战第26天】API渗透测试类似Web应用渗透测试,涉及资产分析和模拟攻击,以发现安全缺陷。
|
11天前
|
机器学习/深度学习 人工智能 自然语言处理
深入探索软件测试:策略、工具与未来趋势
【5月更文挑战第38天】 在软件开发的生命周期中,测试环节扮演着至关重要的角色。随着技术的不断进步和市场需求的多样化,传统的测试方法已逐渐不能满足现代软件项目的需求。本文旨在提供一个全面的软件测试概述,包括最新的测试策略、常用工具以及预测未来的发展趋势。通过分析自动化测试的效益、持续集成的重要性以及人工智能在测试中的应用,文章将帮助读者构建一个更高效、更智能的软件测试环境。
|
4天前
|
机器学习/深度学习 人工智能 jenkins
探索自动化测试工具的选择与应用
在软件开发生命周期中,软件测试是确保质量的重要环节。随着自动化技术的发展,自动化测试工具的选择和应用变得至关重要。这篇文章将深入探讨如何选择适合的自动化测试工具,并结合实例分析其实际应用效果,从而为开发团队提供有效的指导。