这部分很多功能代码由网友撼动宇宙提供，这里先感谢这位网友的辛苦工作
这部分主要是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表单
<!--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<String, Object> getOnlCgformHeadByFormId(String formId) { // TODO Auto-generated method stub Map<String, Object> map = new HashMap<String, Object>(); List<OnlCgformHeadVO> onlData = new ArrayList<OnlCgformHeadVO>(); 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<String> arrayList = new ArrayList<String>(attInfo.length); Collections.addAll(arrayList, attInfo); //查询 QueryWrapper<OnlCgformHead> onlCgformHeadQueryWrapper = new QueryWrapper<OnlCgformHead>(); onlCgformHeadQueryWrapper.eq("table_type",Integer.valueOf(3)); onlCgformHeadQueryWrapper.eq("is_db_synch","Y"); onlCgformHeadQueryWrapper.in("table_name",arrayList); onlCgformHeadQueryWrapper.orderByAsc("tab_order_num"); List<OnlCgformHead> onlCgformHeadAll = onlCgformHeadService.list(onlCgformHeadQueryWrapper); //整理返回数据信息 onlData.add(dataInfomation(onlCgFormHead)); for(int i=0;i<onlCgformHeadAll.size();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 } } } },
获取提交的数据
