ruoyi vue表单设计器

时间:2024-05-19 15:31:47

ruoyi vue表单设计器

整了半个多月的表单设计器终于出来了!
说一下我的具体需求吧。

  1. 因为公司要做很多有关表单的业务,为了减少代码量和增加工作效率。
  2. 和工作流进行整合,在工作流中调用表单。

之前做过一个html标签的拖拽表单设计,感觉写的有点乱,判断各种属性标签生成数据库表字段有点麻烦,所以最近又做了一套vue版本的相比较 vue的操作简单一点,
参考几套oa系统。jeecgboot,湘北智造,
基于 Form Generator

思路:Form Generator 组件显示时通过一个js写死的list数据,这是关键点,因为这就是vue_json_field。然后再java中转json 提取出vModel就是属性名,提取出taglcon就是字段类型。把这两个属性存入map 在mappe.xml中遍历添加到数据表中。
回显: 再次设计表单时回显之前设计的属性, 只要把vue_json_field给到前台 放到相应的组件中就行,
添加数据: 跟回显一样,只是把回显的页面重新掉了一次换了个地方而已, 最后提交的时候提交的数据为:vue_json_field 赋值的组件,转成json 在java中把vModel和defaultValue遍历取出便可以实现动态添加
修改:去数据库中查出数据 遍历值输出到 vue_json_field的defaultValue中、
从设计表单,到动态调取表单添加,修改,删除,查看。
sql字段设计如下,tb_1和tb_2表关系,一对多。(这里有个更好的实现方法,一个tb_2表就可以完成,当时做的时候没有考虑到,直接存入json数据后就不用tb_2表。tb_2的数据,相当于vue_json_field的数据)
tb_1
ruoyi vue表单设计器
tb_2
ruoyi vue表单设计器