这部分主要是实现online表单的各种形式表单，包括主从表表单，同时录入采用现有官方的模式录入数据，通过选择已有数据的方式进行流程申请与审批，免去各种录入组件等兼容性问题。
1、后端实现
主要实现online表单的信息获取以及具体表单的数据获取，以供前端使用
/** * 通过formId查询 * * @param formId * @return */ @AutoLog(value = "flow_onl_cgform_head-通过formId查询") @ApiOperation(value="flow_onl_cgform_head-通过formId查询", notes="flow_onl_cgform_head-通过formId查询") @GetMapping(value = "/queryByFormId/{formId}") public Result<?> queryByFormId(@PathVariable("formId") String formId) { Map<String, Object> flowOnlCgformHeadMap = flowOnlCgformHeadService.getOnlCgformHeadByFormId(formId); if(flowOnlCgformHeadMap==null) { return Result.error("未找到对应数据"); } return Result.OK(flowOnlCgformHeadMap); } @AutoLog(value = "getColumns-通过code查询获取online表单列表信息") @ApiOperation(value="getColumns-通过code查询获取online表单列表信息", notes="getColumns-通过code查询获取online表单列表信息") @GetMapping({"/getColumns/{code}"}) public Result<OnlComplexModel> a(@PathVariable("code") String code) { Result result = new Result(); OnlCgformHead onlCgformHead = (OnlCgformHead)this.onlCgformHeadService.getById(code); if (onlCgformHead == null) { result.error500("实体不存在"); return result; } else { LoginUser loginuser = (LoginUser)SecurityUtils.getSubject().getPrincipal(); OnlComplexModel onlComplexModel = this.onlineService.queryOnlineConfig(onlCgformHead, loginuser.getUsername()); onlComplexModel.setIsDesForm(onlCgformHead.getIsDesForm()); onlComplexModel.setDesFormCode(onlCgformHead.getDesFormCode()); result.setResult(onlComplexModel); result.setOnlTable(onlCgformHead.getTableName()); return result; } } @AutoLog(value = "getData-通过code查询获取online表单数据") @ApiOperation(value="getData-通过code查询获取online表单数据", notes="getData-通过code查询获取online表单数据") @GetMapping({"/getData/{code}"}) public Result<Map<String, Object>> a(@PathVariable("code") String code, HttpServletRequest request) { Result result = new Result(); OnlCgformHead onlCgformHead = (OnlCgformHead) this.onlCgformHeadService.getById(code); if (onlCgformHead == null) { result.error500("实体不存在"); return result; } else { Map map = null; try { Map objectmap = onlineUtils.objectHashMap(request); boolean bJoinQuery = onlineUtils.isJoinQuery(onlCgformHead); if (bJoinQuery) { map = this.onlineJoinQueryService.pageList(onlCgformHead, objectmap); } else { map = this.onlCgformFieldService.queryAutolistPage(onlCgformHead, objectmap, (List) null); } this.getEnhanceList(onlCgformHead, map); result.setResult(map); } catch (Exception except) { log.error(except.getMessage(), except); result.error500("数据库查询失败，" + except.getMessage()); } result.setOnlTable(onlCgformHead.getTableName()); return result; } } @AutoLog(value = "getFormItem-通过code查询获取子表单数据") @ApiOperation(value="getFormItem-通过code查询获取子表单数据", notes="getFormItem-通过code查询获取子表单数据") @GetMapping({"/getFormItem/{code}"}) public Result<?> b(@PathVariable("code") String code, HttpServletRequest var2) { OnlCgformHead onlCgformHead = (OnlCgformHead) this.onlCgformHeadService.getById(code); if (onlCgformHead == null) { Result.error("表不存在"); } Result result = new Result(); LoginUser loginuser = (LoginUser) SecurityUtils.getSubject().getPrincipal(); JSONObject formItemJsonObject = this.onlineService.queryOnlineFormItem(onlCgformHead, loginuser.getUsername()); result.setResult(onlineUtils.resultOnlineFormItem(formItemJsonObject)); result.setOnlTable(onlCgformHead.getTableName()); return result; }
2、前端实现
下面代码主要是实现online表单具体数据的显示与申请提交
<template> <a-card :bordered="false"> <!-- 查询区域 --> <div class="table-page-search-wrapper"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter="24"> </a-row> </a-form> </div> <!-- 查询区域-END --> <!-- table区域-begin --> <div> <a-table v-if= "tableVisible" ref="table" size="middle" bordered rowKey="id" class="j-table-force-nowrap" :scroll="{x:true}" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" @change="handleTableChange" > <template slot="htmlSlot" slot-scope="text"> <div v-html="text"></div> </template> <template slot="imgSlot" slot-scope="text"> <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span> <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/> </template> <template slot="fileSlot" slot-scope="text"> <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span> <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)"> 下载 </a-button> </template> <span slot="action" slot-scope="text, record"> <a @click="SubmitApplication(record)">提交申请</a> </span> </a-table> </div> </a-card> </template> <script> import {getOnlineFormItem,getOnlineColumns,getOnlineData} from "@/api/form"; //import { JeecgListMixin } from '@/mixins/JeecgListMixin' import '@/assets/less/TableExpand.less' import { filterObj } from '@/utils/util'; import { deleteAction, getAction,downFile,getFileAccessHttpUrl } from '@/api/manage' import Vue from 'vue' import { ACCESS_TOKEN, TENANT_ID } from "@/store/mutation-types" import {definitionStartByOnlineDataId} from "@/views/flowable/api/definition" export default { name: "OnlineTableList", //mixins:[JeecgListMixin], components: { }, props: { }, data () { return { description: 'online表单数据查询页面', taskForm: { returnTaskShow: false, // 是否展示回退表单 delegateTaskShow: false, // 是否展示委派表单 defaultTaskShow: true, // 默认处理 sendUserShow: false, // 审批用户 multiple: false, comment: "", // 意见内容 commentFileDto: { //意见里的附件 type: '', fileurl: '' }, procInsId: "", // 流程实例编号 instanceId: "", // 流程实例编号 deployId: "", // 流程定义编号 taskId: "", // 流程任务编号 procDefId: "", // 流程编号 businessKey: "", //业务主键编号 dataId: "",//业务主键编号 nodeType: "", //当前节点类型 目前只针对多实例会签做处理 vars: "", targetKey: "", category: "",//流程类别，目前主要区别online与自定义使用 onlineId: "",//online表单Id onlineDataId: "",//online数据Id }, /* 数据源 */ dataSource:[], url: { list: "", }, /* 分页参数 */ ipagination:{ current: 1, pageSize: 10, pageSizeOptions: ['10', '20', '30'], showTotal: (total, range) => { return range[0] + "-" + range[1] + " 共" + total + "条" }, showQuickJumper: true, showSizeChanger: true, total: 0 }, /* 排序参数 */ isorter:{ column: 'createTime', order: 'desc', }, /* 筛选参数 */ filters: {}, /* table加载状态 */ loading:false, /* table选中keys*/ selectedRowKeys: [], /* table选中records*/ selectionRows: [], /* 查询折叠 */ toggleSearchStatus:false, // 表头 columns: [], tableVisible: false, indexColumn: [{ title: '#', dataIndex: '', key:'rowIndex', width:60, align:"center", customRender:function (t,r,index) { return parseInt(index)+1; } }], actionColumn: [{ title: '操作', dataIndex: 'action', align:"center", fixed:"right", width:147, scopedSlots: { customRender: 'action' }, }], dictOptions:{}, superFieldList:[], } }, created() { this.taskForm.deployId = this.$route.query && this.$route.query.deployId this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId this.taskForm.category = this.$route.query && this.$route.query.category //节点类型 this.taskForm.nodeType = this.$route.query && this.$route.query.nodeType //online表单id和数据id this.taskForm.onlineId = this.$route.query && this.$route.query.onlineId this.finished = this.$route.query && this.$route.query.finished console.log("this.taskForm=",this.taskForm) this.url.list = "/flowable/onlCgformHead/getData/" + this.taskForm.onlineId +"?column=id&order=desc&pageNo=1&pageSize=10&superQueryMatchType=and" getOnlineColumns(this.taskForm.onlineId).then(res => {//获取从表相关信息 console.log("getOnlineColumns res=",res) if (res.success) { this.columns = res.result.columns console.log("getOnlineColumns columns=",this.columns) this.columns.forEach(function(item, index) {//删除不需要的列 Object.keys(item).map(function (key) { null == item[key] && delete item[key] }) }) this.columns = this.indexColumn.concat(this.columns) this.columns = this.columns.concat(this.actionColumn) console.log("this.columns=",this.columns) getOnlineData(this.taskForm.onlineId).then(datares => { if (datares.success) { console.log("getOnlineData datares=",datares) this.dataSource = datares.result.records this.ipagination.total = datares.result.total console.log("getOnlineData dataSource=",this.dataSource) this.tableVisible = true } else { this.$message.error(datares.message); } }) } else { this.$message.error(res.message); } }) this.getSuperFieldList(); }, computed: { }, methods: { loadData(arg) { if(!this.url.list){ this.$message.error("请设置url.list属性!") return } //加载数据 若传入参数1则加载第一页的内容 if (arg === 1) { this.ipagination.current = 1; } var params = this.getQueryParams();//查询条件 this.loading = true; getAction(this.url.list, params).then((res) => { if (res.success) { //update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------ this.dataSource = res.result.records||res.result; if(res.result.total) { this.ipagination.total = res.result.total; }else{ this.ipagination.total = 0; } //update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------ }else{ this.$message.warning(res.message) } }).finally(() => { this.loading = false }) }, handleTableChange(pagination, filters, sorter) { //分页、排序、筛选变化时触发 //TODO 筛选 console.log(pagination) if (Object.keys(sorter).length > 0) { this.isorter.column = sorter.field; this.isorter.order = "ascend" == sorter.order ? "asc" : "desc" } this.ipagination = pagination; this.loadData(); }, onSelectChange(selectedRowKeys, selectionRows) { this.selectedRowKeys = selectedRowKeys; this.selectionRows = selectionRows; }, getQueryParams() { //获取查询条件 let sqp = {} if(this.superQueryParams){ sqp['superQueryParams']=encodeURI(this.superQueryParams) sqp['superQueryMatchType'] = this.superQueryMatchType } var param = Object.assign(sqp, this.queryParam, this.isorter ,this.filters); param.field = this.getQueryField(); param.pageNo = this.ipagination.current; param.pageSize = this.ipagination.pageSize; return filterObj(param); }, getQueryField() { //TODO 字段权限控制 var str = "id,"; this.columns.forEach(function (value) { str += "," + value.dataIndex; }); return str; }, /* 图片预览 */ getImgView(text){ if(text && text.indexOf(",")>0){ text = text.substring(0,text.indexOf(",")) } return getFileAccessHttpUrl(text) }, /* 文件下载 */ // update--autor:lvdandan-----date:20200630------for：修改下载文件方法名uploadFile改为downloadFile------ downloadFile(text){ if(!text){ this.$message.warning("未知的文件") return; } if(text.indexOf(",")>0){ text = text.substring(0,text.indexOf(",")) } let url = getFileAccessHttpUrl(text) window.open(url); }, initDictConfig(){ }, /** 发起申请 */ SubmitApplication(row) { var params = Object.assign({ dataId: row.id }, '[]'); //variables.variables = formData; //console.log("variables=", this.variables); // 启动流程并将表单数据加入流程变量 console.log("SubmitApplication this.taskForm=",this.taskForm) console.log("SubmitApplication row=",row) definitionStartByOnlineDataId(row.id, this.taskForm.onlineId, this.taskForm.deployId, params).then(res => { console.log("definitionStartByOnlineDataId res=",res); this.$message.success(res.message); }) /** online表单业务流程申请 */ /*this.$router.push({ path: '/flowable/task/record/index', query: { deployId: this.taskForm.deploymentId, procDefId:this.taskForm.procDefId, onlineId: this.taskForm.onlineId, category: this.taskForm.category, businessKey: row.id, finished: true } })*/ }, getSuperFieldList(){ let fieldList=[]; this.superFieldList = fieldList } } } </script> <style scoped> @import '~@assets/less/common.less'; </style>
3、审批流程的显示
下面就是根据后端提供的online表单数据进行显示与处理
//流程过程中有online表单数据，获取online表单配置与数据 if (res.result.hasOwnProperty('onlineConfig')) { this.onlineViewForm.onlineFormData = res.result.onlineConfig; console.log("onlineViewForm.onlineFormData=",this.onlineViewForm.onlineFormData); console.log("this.taskForm=",this.taskForm) var sonlineId = res.result.onlineId getOnlineFormData(sonlineId,this.taskForm.onlineDataId).then(res => { console.log("getOnlineFormData res=",res); if (res.success) { this.onlineViewForm.model = res.result; console.log("onlineViewForm.model=",this.onlineViewForm.model); getOnlineFormItem(sonlineId).then(itemres => {//获取从表相关信息 if (itemres.success) { console.log("getOnlineFormItem itemres=",itemres) this.onlineFormItem.formData = itemres.result if(itemres.result.head.subTableStr != null) { var subTable = itemres.result.head.subTableStr this.onlineFormItem.subTable = subTable.split(",") console.log("this.onlineFormItem.subTable=",this.onlineFormItem.subTable) for (var i=0;i<this.onlineFormItem.subTable.length;i++) { var tablename = this.onlineFormItem.subTable[i] if(this.onlineFormItem.formData.schema.properties.hasOwnProperty(tablename)) { this.onlineFormItem.tableForm.tableName[i] = tablename this.onlineFormItem.tableForm.columns[i] = this.onlineFormItem.formData.schema.properties[tablename].columns this.onlineFormItem.dataSource[i] = this.onlineViewForm.model[tablename] } } console.log("this.onlineFormItem.tableForm=",this.onlineFormItem.tableForm) console.log("this.onlineFormItem.dataSource=",this.onlineFormItem.dataSource) } this.onlineViewForm.disabled = true; this.onlineViewForm.isNew = false; this.onlineViewForm.visible = true; } else { this.$message.error(itemres.message); } }) } }) }
4、效果图
