基于若依的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、效果图如下:

相关推荐
RoyLin几秒前
V8引擎与VM模块
前端·后端·node.js
Keepreal4964 分钟前
React受控组件和非受控组件的区别,用法以及常见使用场景
前端·react.js
ITsheng_ge10 分钟前
GitHub Pages 部署静态网站流程、常见问题以及解决方案
前端·github·持续部署
web3d52011 分钟前
CSS水平垂直居中终极指南:从入门到精通
前端·css
1024小神16 分钟前
前端css常用的animation动画效果及其简写
前端
小白菜学前端20 分钟前
Vue 配置代理
前端·javascript·vue.js
m0_zj28 分钟前
63.[前端开发-Vue3]Day05-非父子通信-声明周期-refs-混合-额外补充
前端·javascript·vue.js
golang学习记40 分钟前
Cursor1.7发布,AI编程的含金量还在上升!
前端
北辰alk1 小时前
Next.js 为何抛弃 Vite?自造轮子 Turbopack 的深度技术解析
前端
Cache技术分享1 小时前
203. Java 异常 - Throwable 类及其子类
前端·后端