基于若依的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、如点击下面的编辑,应该可以进行查询出来进行编辑修改

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

javascript 复制代码
/** 修改按钮操作 */
    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打开编辑界面如下:

javascript 复制代码
<!-- 添加或修改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、后端动态查询接口如下:

java 复制代码
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);
相关推荐
失败尽是常态Z9 分钟前
基于JWT+Redis的登录流程实现
java·数据库·redis·状态模式·jwt·用户登录
快乐肚皮11 分钟前
Redisson学习专栏(二):核心功能深入学习(分布式锁,分布式集合,原子操作与计数器,事件与监听)
java·分布式·分布式锁·redisson·事件·分布式集合·原子
seraph99913 分钟前
pyecharts 画一下股票的月K图(输出html)
前端·python·html
码上飞扬30 分钟前
Java大师成长计划之第35天:未来展望与个人总结
java·开发语言
异常君1 小时前
深入理解 Java Stream.reduce()方法:原理解析与实战应用
java
sorryhc1 小时前
钉钉红包性能优化之路
前端·javascript·性能优化
啊阿狸不会拉杆1 小时前
《软件工程》实战— 在线教育平台开发
java·vue.js·软件工程·团队开发
移动开发者1号2 小时前
Fragment事务commit与commitNow区别
android·java
袁煦丞2 小时前
你的在线相册管理专家Piwigo:cpolar内网穿透实验室第487个成功挑战
前端·程序员·远程工作
꧁༺摩༒西༻꧂2 小时前
Python生成日历导出Excel
java·前端·python