当前位置: 首页 > news >正文

基于若依的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://122.227.135.243:9888
 

接上一节,今天主要处理新增一条动态表单数据的方法

1、后端处理

/*** 根据主表名,关键字和数据动态插入一条记录* @param tableName 主表名称*/@SaCheckPermission("workflow:form:edit")@PostMapping(value = "/addDataById")public R<?> addDataById(@RequestBody FormDataVo formDataVo) {return R.ok(formService.addDataById(formDataVo));}@Overridepublic 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、效果图如下:

http://www.lryc.cn/news/287083.html

相关文章:

  • 多场景建模:阿里多场景多任务元学习方法M2M
  • 仿真机器人-深度学习CV和激光雷达感知(项目2)day03【机器人简介与ROS基础】
  • 【多商户开源-BSD- Fecmall 电商平台】
  • 2023春秋杯冬季赛 --- Crypto wp
  • ImageMagick使用手册
  • 嵌入式培训机构四个月实训课程笔记(完整版)-C++和QT编程第五天-Qt编程技巧若干解答(物联技术666)
  • 【蓝桥杯选拔赛真题59】python小写字母 第十五届青少年组蓝桥杯python 选拔赛比赛真题解析
  • 代码随想录算法训练营Day37|738.单调递增的数字、贪心算法总结
  • 笔记-影响力-对比,互惠,赌徒原理
  • PIL、cv2、numpy,和pytorch(torch)之间的转换
  • Java面试题50道
  • 电脑怎么剪辑视频?这些软件不可错过
  • HBase学习七:Compaction
  • MySQL定期整理磁盘碎片
  • 【centos7安装docker】
  • 四、Flask学习之JavaScript
  • IO 专题
  • MySql索引事务讲解和(经典面试题)
  • 《微信小程序开发从入门到实战》学习九十一
  • 【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解
  • Node.JS CreateWriteStream(大容量写入文件流优化)
  • 安卓开发之自动缩放布局
  • DDD系列 - 第9讲 实体、值对象
  • 5分钟做自己的微信红包封面
  • pytorch中BCELoss 和 binary_cross_entropy_with_logits之间的区别
  • 无刷电机学习-方波电调 程序篇1(AM32)
  • 如何自己制作一个属于自己的小程序?
  • HTML 入门手册(二)
  • 零基础学Python(5)— 基本数据类型
  • centos7安装Redis7.2.4