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

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

1、后端部分

其中FormConf修改如下：

java 复制代码

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;
    
}

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

java 复制代码

/**
     * 获取历史流程表单信息
     */
    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());
            // 获取当前节点表单Key
            String 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) {
                // 查询任务节点参数，并转换成Map
                variables = 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>();
            //遍历Map
            if(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() 为 null
                String 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、前端部分

表单信息修改如下：

javascript 复制代码

<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 >

流程详细信息修改如下：

javascript 复制代码

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、效果图如下：