基于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 '创建人',
  `create_time` datetime DEFAULT NULL COMMENT '创建日期',
  `update_by` varchar(50) DEFAULT NULL COMMENT '更新人',
  `update_time` datetime DEFAULT NULL COMMENT '更新日期',
  `field_show_type` varchar(255) NOT NULL COMMENT '表字段控件类型',
  `field_type` varchar(255) CHARACTER SET utf8 NOT NULL COMMENT '前端控件编码',
  PRIMARY KEY (`id`,`field_show_type`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=DYNAMIC COMMENT='表单控件与前端编码的匹配关系';
 

-- ----------------------------
-- 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 '创建人',
  `create_time` datetime DEFAULT NULL COMMENT '创建日期',
  `update_by` varchar(50) DEFAULT NULL COMMENT '更新人',
  `update_time` datetime DEFAULT NULL COMMENT '更新日期',
  `field_vaild_type` varchar(255) NOT NULL COMMENT '表单字段校验规则',
  `rule_type` varchar(255) CHARACTER SET utf8 NOT NULL COMMENT '前端校验编码',
  PRIMARY KEY (`id`,`field_vaild_type`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=DYNAMIC COMMENT='表单验证规则与前端编码的匹配关系';

2、前端显示online表单

    <a-modal :title="onlineForm.title"  :visible.sync="onlineForm.visible" :footer="null" :maskClosable="false" 
             closable @cancel="()=>{onlineForm.visible=false}" width="896px">
        <a-form :model="onlineForm.model" ref="previewOnlForm">     
            <a-row v-for="(itemCommon, indexInner) in onlineForm.onlineFormData" :key="indexInner"  :label="itemCommon.onlTitleName" :model="itemCommon.cgformHeadId" >
              <a-col :span="parseInt(itemField.fieldDataTopInfo)" v-for="(itemField, index2) in itemCommon.fieldAll" :key="index2">
                  <a-form-item :label="itemField.dbFieldTxt"  :model="itemField" :key="index2">
                    <component :is="itemField.tableTypeCode" :model="itemField" :key="index2" :fcz="itemField" @commonComponent ="commonComponent" >
                    component>
                  a-form-item>
              a-col>
            a-row>
            <a-form-item style="text-align: center;">
              <a-button type="primary" @click="submitOnlForm">提交a-button>
              <a-button @click="resetOnlForm">重置a-button>
            a-form-item>
        a-form>  
        
    a-modal>

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

//online表单显示组件
  import { handongRule } from '@comp/formdesigner/hanDongYuZhou/handongCommon'
  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 stub
		 Map 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
                 onlData.add(dataInfomation(onlCgformHeadAll.get(i)));
             }
         }else{
 
             onlData.add(dataInfomation(onlCgFormHead));
         }
         map.put("formData", onlData);
		return map;
	}

4、效果图如下：

5、前端获取上面表单录入的数据

commonComponent(zcf){
       console.log("commonComponent zcf=",zcf);
        for(var i = 0;i<this.onlineForm.onlineFormData.length;i++){
          console.log("onlineFormData[i]=",this.onlineForm.onlineFormData[i])
          console.log("onlineFormData[i].id=",this.onlineForm.onlineFormData[i].id)
          console.log("zcf.cgformHeadId=",zcf.cgformHeadId)
          if(this.onlineForm.onlineFormData[i].id == zcf.cgformHeadId){
            var flagInfo =0;
            let fieldname = zcf.dbFieldName
            console.log("this.onlineForm.model=",this.onlineForm.model)
            console.log("fieldname=",fieldname)
            this.onlineForm.model[fieldname] = zcf.commonDataInfo
            console.log("this.onlineForm.model[fieldname]",this.onlineForm.model[fieldname])
            for(var k = 0;k<this.onlineForm.model[fieldname].length;k++){
              if(this.onlineForm.model[fieldname][k].id == zcf.id){
                this.onlineForm.model[fieldname][k] = zcf
                flagInfo = 1;
              }
              if(this.onlineForm.model[fieldname][k].tableTypeCode =='hanDongLinkDown' || this.onlineForm.model[fieldname][k].linkDowmIz =='1'){
                //判断当前组件类型是否是linkDown相关组件
                nextLinkDown(this.onlineForm.model[fieldname][k].linkDowmFieldNext,this.onlineForm.model[fieldname][k].commonLinkDownCodeChild)
              }
            }
            if(flagInfo == 0){
              //this.onlineForm.model[fieldname].push(zcf);
              this.onlineForm.model[fieldname] = zcf.commonDataInfo
            }
          }
        }
      },

获取提交的数据