nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分（四）

到目前为止，虽然基础的formdesigner部分已经完成，但流程用formdesigner提交与审批过程中的显示还有问题。

1、后端部分

其中FormConf修改如下：

package com.ruoyi.flowable.core;import lombok.Data;import java.util.List;
import java.util.Map;/*** 表单属性类** @author KonBAI* @createTime 2022/8/6 18:54*/
@Data
public class FormConf {/*** 标题*/private String title;/*** 表单列表*/private List<Map<String, Object>> list;/*** 表单配置名*/private Map<String, Object> config;/*** 表单列表实际值*/private Map<String, Object> formValues;}

获取流程历史信息修改如下：

/*** 获取历史流程表单信息*/private List<FormConf> processFormList(BpmnModel bpmnModel, HistoricProcessInstance historicProcIns) {List<FormConf> procFormList = new ArrayList<>();List<HistoricActivityInstance> activityInstanceList = historyService.createHistoricActivityInstanceQuery().processInstanceId(historicProcIns.getId()).finished().activityTypes(CollUtil.newHashSet(BpmnXMLConstants.ELEMENT_EVENT_START, BpmnXMLConstants.ELEMENT_TASK_USER)).orderByHistoricActivityInstanceStartTime().asc().list();List<String> processFormKeys = new ArrayList<>();for (HistoricActivityInstance activityInstance : activityInstanceList) {// 获取当前节点流程元素信息FlowElement flowElement = ModelUtils.getFlowElementById(bpmnModel, activityInstance.getActivityId());// 获取当前节点表单KeyString formKey = ModelUtils.getFormKey(flowElement);if (formKey == null) {continue;}boolean localScope = Convert.toBool(ModelUtils.getElementAttributeValue(flowElement, ProcessConstants.PROCESS_FORM_LOCAL_SCOPE), false);Map<String, Object> variables;if (localScope) {// 查询任务节点参数，并转换成Mapvariables = historyService.createHistoricVariableInstanceQuery().processInstanceId(historicProcIns.getId()).taskId(activityInstance.getTaskId()).list().stream().collect(Collectors.toMap(HistoricVariableInstance::getVariableName, HistoricVariableInstance::getValue));} else {if (processFormKeys.contains(formKey)) {continue;}variables = historicProcIns.getProcessVariables();processFormKeys.add(formKey);}  Map<String, Object> formvariables = new HashedMap<String, Object>();//遍历Mapif(variables.containsKey("variables")) {formvariables = (Map<String, Object>)((Map<String, Object>) variables.get("variables")).get("formValue");}// 非节点表单此处查询结果可能有多条，只获取第一条信息List<WfDeployFormVo> formInfoList = deployFormMapper.selectVoList(new LambdaQueryWrapper<WfDeployForm>().eq(WfDeployForm::getDeployId, historicProcIns.getDeploymentId()).eq(WfDeployForm::getFormKey, formKey).eq(localScope, WfDeployForm::getNodeKey, flowElement.getId()));//@update by Brath：避免空集合导致的NULL空指针WfDeployFormVo formInfo = formInfoList.stream().findFirst().orElse(null);if (ObjectUtil.isNotNull(formInfo)) {// 旧数据 formInfo.getFormName() 为 nullString formName = Optional.ofNullable(formInfo.getFormName()).orElse(StringUtils.EMPTY);String title = localScope ? formName.concat("(" + flowElement.getName() + ")") : formName;FormConf formConf = JsonUtils.parseObject(formInfo.getContent(), FormConf.class);if (null != formConf) {//ProcessFormUtils.fillFormData(formConf, variables);formConf.setTitle(title);formConf.setFormValues(formvariables);procFormList.add(formConf);}}}return procFormList;}

2、前端部分

表单信息修改如下：

<el-tab-pane label="表单信息" name="form"><div v-if="formOpen"><!--<el-card class="box-card" shadow="never" v-for="(formInfo, index) in processFormList" :key="index"><div slot="header" class="clearfix"><span>{{ formInfo.title }}</span></div><el-col :span="20" :offset="2"><parser :form-conf="formInfo"/></el-col></el-card>--><el-card class="box-card" shadow="never" v-for="(formInfo, index) in formViewData" :key="index"><!--<div slot="header" class="clearfix"><span>{{ formInfo.title }}</span></div>--><!--流程处理表单模块--><el-col :span="20" :offset="2"><!-- <parser :form-conf="formInfo"/> --><form-viewer ref="formViewer" v-model="formVal[index]" :buildData="formInfo" /></el-col></el-card></div></el-tab-pane >

流程详细信息修改如下：

getProcessDetails(procInsId, taskId) {const params = {procInsId: procInsId, taskId: taskId}detailProcess(params).then(res => {console.log("detailProcess res=",res);const data = res.data;this.xmlData = data.bpmnXml;this.processFormList = data.processFormList;this.processFormList.forEach((item, index) => {this.formVal[index] = JSON.stringify(item.formValues);this.formViewData[index] = JSON.stringify(item);});this.taskFormOpen = data.existTaskForm;if (this.taskFormOpen) {this.taskFormData = data.taskFormData;}this.historyProcNodeList = data.historyProcNodeList;this.finishedInfo = data.flowViewer;this.formOpen = true})},

3、效果图如下：