基于若依的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、生成的json包含字段名称与表名

3、模拟器的列表如下:

javascript 复制代码
<!-- 列表标题与内容这个部分要根据配置动态根据主表信息来动态生成 -->
    <el-table v-loading="loading" :data="mainDataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <div v-for="(item, i) in columnList">
        <el-table-column :label="item.__config__.label" align="center"
                         :width="item.style.width" :prop="item.__vModel__" />
      </div>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope"> <!-- 这个暂时固定,以后可根据配置动态生成按钮-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['workflow:flowConfig:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['workflow:flowConfig:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

4、相应的数据调用

javascript 复制代码
mounted() {
    const that = this;
    const formId =  that.$route.query && that.$route.query.formId;
    if (formId) {
      getForm(formId).then(res => {
        that.formConf = JSON.parse(res.data.content);
        console.log("getForm that.formConf",that.formConf);
        that.columnList = that.formConf.fields;
        console.log("getForm that.columnList",that.columnList);
        const tableName = that.formConf.mainTable;
        if(tableName) {
          getData(tableName).then(response => {
            console.log("getData response",response);
            that.mainDataList = response.data;
          })
        }
      })
    }
  },

5、效果图如下:

相关推荐
li35745 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj5 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel5 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel5 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵7 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld7 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
叫我阿柒啊8 小时前
从Java全栈到前端框架:一次真实面试的深度复盘
java·spring boot·typescript·vue·database·testing·microservices
东风西巷8 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军8 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js