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

gitee源代碼地址

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

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

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

gitee源代碼地址

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

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

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

接上一節(jié)，之前可以動態(tài)列表查詢出來后，需要進行動態(tài)查詢與修改

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主對話框,需要動態(tài)生成 -->
    <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、后端動態(tài)查詢接口如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-820956.html

import lombok.Data;

/**
 * @author superfusion
 * @Date 2024/1/22
 * @Description:
 * @Version 1.0
 */
@Data
public class FormDataVo {
	/**
     * 表名
     */
	String tableName;
	/**
     * 主鍵
     */
	String primaryKey;
	/**
     * 數(shù)據(jù)id
     */
	String id;
	
	/**
     * 傳入要更新的字段名與值
     */
	Map<String,Object> updateMap;
}

/**
     * 根據(jù)主表名,關鍵字和數(shù)據(jù)動態(tài)獲取具體一條表數(shù)據(jù)
     * @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);

到了這里，關于基于若依的ruoyi-nbcio流程管理系統(tǒng)一種簡單的動態(tài)表單模擬測試實現(xiàn)（三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！