基于jeecgboot的flowable流程支持online表单(二)

       这部分很多功能代码由网友撼动宇宙提供，这里先感谢这位网友的辛苦工作

      这部分主要是online表单的显示与录入数据获取

1、先建两个表

-- ----------------------------
-- Table structure for bpm_tool_designer
-- ----------------------------
DROP TABLE IF EXISTS `bpm_tool_designer`;
CREATE TABLE `bpm_tool_designer` (
  `id` varchar(255) NOT NULL,
  `create_by` varchar(50) DEFAULT NULL COMMENT &＃39;创建人&＃39;,
  `create_time` datetime DEFAULT NULL COMMENT &＃39;创建日期&＃39;,
  `update_by` varchar(50) DEFAULT NULL COMMENT &＃39;更新人&＃39;,
  `update_time` datetime DEFAULT NULL COMMENT &＃39;更新日期&＃39;,
  `field_show_type` varchar(255) NOT NULL COMMENT &＃39;表字段控件类型&＃39;,
  `field_type` varchar(255) CHARACTER SET utf8 NOT NULL COMMENT &＃39;前端控件编码&＃39;,
  PRIMARY KEY (`id`,`field_show_type`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=DYNAMIC COMMENT=&＃39;表单控件与前端编码的匹配关系&＃39;;
 

-- ----------------------------
-- Table structure for bpm_tool_rule
-- ----------------------------
DROP TABLE IF EXISTS `bpm_tool_rule`;
CREATE TABLE `bpm_tool_rule` (
  `id` varchar(255) NOT NULL,
  `create_by` varchar(50) DEFAULT NULL COMMENT &＃39;创建人&＃39;,
  `create_time` datetime DEFAULT NULL COMMENT &＃39;创建日期&＃39;,
  `update_by` varchar(50) DEFAULT NULL COMMENT &＃39;更新人&＃39;,
  `update_time` datetime DEFAULT NULL COMMENT &＃39;更新日期&＃39;,
  `field_vaild_type` varchar(255) NOT NULL COMMENT &＃39;表单字段校验规则&＃39;,
  `rule_type` varchar(255) CHARACTER SET utf8 NOT NULL COMMENT &＃39;前端校验编码&＃39;,
  PRIMARY KEY (`id`,`field_vaild_type`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=DYNAMIC COMMENT=&＃39;表单验证规则与前端编码的匹配关系&＃39;;

2、前端显示online表单

提交重置

       这里使用了大量自己定义的前端各个字段类型的组件，等做好代码发布后会正式公布，主要是以下组件，以后还会根据需要扩充

//online表单显示组件
  import { handongRule } from &＃39;@comp/formdesigner/hanDongYuZhou/handongCommon&＃39;
  import hanDongInput from "@comp/formdesigner/hanDongYuZhou/hanDongInput";
  import hanDongPassword from "@comp/formdesigner/hanDongYuZhou/hanDongPassword";
  import hanDongSwitch from "@comp/formdesigner/hanDongYuZhou/hanDongSwitch";
  import hanDongList from "@comp/formdesigner/hanDongYuZhou/hanDongList";
  import hanDongRadio from "@comp/formdesigner/hanDongYuZhou/hanDongRadio";
  import hanDongCheckbox from "@comp/formdesigner/hanDongYuZhou/hanDongCheckbox";
  import hanDongListMulti from "@comp/formdesigner/hanDongYuZhou/hanDongListMulti";
  import hanDongSelSearch from "@comp/formdesigner/hanDongYuZhou/hanDongSelSearch";
  import hanDongTextArea from "@comp/formdesigner/hanDongYuZhou/hanDongTextArea";
  import hanDongDate from "@comp/formdesigner/hanDongYuZhou/hanDongDate";
  import hanDongDateTime from "@comp/formdesigner/hanDongYuZhou/hanDongDateTime";
  import hanDongTime from "@comp/formdesigner/hanDongYuZhou/hanDongTime";
  import hanDongImage from "@comp/formdesigner/hanDongYuZhou/hanDongImage";
  import hanDongFile from "@comp/formdesigner/hanDongYuZhou/hanDongFile";
  import hanDongUmeditor from "@comp/formdesigner/hanDongYuZhou/hanDongUmeditor";
  import hanDongSelUser from "@comp/formdesigner/hanDongYuZhou/hanDongSelUser";
  import hanDongSelDepart from "@comp/formdesigner/hanDongYuZhou/hanDongSelDepart";
  import hanDongMarkDown from "@comp/formdesigner/hanDongYuZhou/hanDongMarkDown";
  import hanDongPca from "@comp/formdesigner/hanDongYuZhou/hanDongPca";
  import hanDongPopup from "@comp/formdesigner/hanDongYuZhou/hanDongPopup";
  import hanDongSelTree from "@comp/formdesigner/hanDongYuZhou/hanDongSelTree";
  import hanDongCatTree from "@comp/formdesigner/hanDongYuZhou/hanDongCatTree";
  import hanDongLinkDown from "@comp/formdesigner/hanDongYuZhou/hanDongLinkDown";

3、对应的端口接口

public Map getOnlCgformHeadByFormId(String formId) {// TODO Auto-generated method stubMap map = new HashMap();List OnlData= new ArrayList();OnlCgformHead OnlCgFormHead= onlCgformHeadService.getById(formId);if(String.valueOf(onlCgFormHead.getTableType()).equals("2")){//表类型: 0单表、1主表、2附表String.valueOf(onlCgFormHead.getTableType());//查询当前表的附表String[] attInfo = String.valueOf(onlCgFormHead.getSubTableStr()).split(",");ArrayList arrayList = new ArrayList(attInfo.length);Collections.addAll(arrayList, attInfo);//查询QueryWrapper OnlCgformHeadQueryWrapper= new QueryWrapper();onlCgformHeadQueryWrapper.eq("table_type",Integer.valueOf(3));onlCgformHeadQueryWrapper.eq("is_db_synch","Y");onlCgformHeadQueryWrapper.in("table_name",arrayList);onlCgformHeadQueryWrapper.orderByAsc("tab_order_num");List OnlCgformHeadAll= onlCgformHeadService.list(onlCgformHeadQueryWrapper);//整理返回数据信息onlData.add(dataInfomation(onlCgFormHead));for(int i=0;i

4、效果图如下：