更多ruoyi-nbcio功能請(qǐng)看演示系統(tǒng)

gitee源代碼地址

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

演示地址：RuoYi-Nbcio后臺(tái)管理系統(tǒng)

更多nbcio-boot功能請(qǐng)看演示系統(tǒng)

gitee源代碼地址

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

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

在線演示（包括H5） ： http://122.227.135.243:9888
?

接上一節(jié)，今天主要處理新增一條動(dòng)態(tài)表單數(shù)據(jù)的方法

1、后端處理

/**
     * 根據(jù)主表名,關(guān)鍵字和數(shù)據(jù)動(dòng)態(tài)插入一條記錄
     * @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); 

<!-- 動(dòng)態(tài)插入數(shù)據(jù) -->
	<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循環(huán)向this.form中賦值
      for (let itemindex = 0; itemindex < this.columnList.length; itemindex++) {
        //$set()方法第一個(gè)參數(shù)是對(duì)象，第二個(gè)參數(shù)是key值，第三個(gè)參數(shù)是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.zghlxwxcb.cn/news/detail-819869.html

到了這里，關(guān)于基于若依的ruoyi-nbcio流程管理系統(tǒng)一種簡(jiǎn)單的動(dòng)態(tài)表單模擬測(cè)試實(shí)現(xiàn)（五）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！