基于若依的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、模拟器的列表如下：

4、相应的数据调用

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、效果图如下：