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

简介: 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());
            // 获取当前节点表单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、前端部分

表单信息修改如下:

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


相关文章
|
5天前
|
前端开发
nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(三)
nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(三)
12 0
|
5天前
nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(二)
nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(二)
14 0
|
5天前
|
前端开发 对象存储
基于RuoYi-Flowable-Plus的ruoyi-nbcio项目的formdesigner文件上传与回显处理
基于RuoYi-Flowable-Plus的ruoyi-nbcio项目的formdesigner文件上传与回显处理
14 0
|
5天前
|
前端开发 应用服务中间件
ruoyi-nbcio移植过程中的一些问题记录
ruoyi-nbcio移植过程中的一些问题记录
12 0
|
5天前
|
资源调度 前端开发 NoSQL
ruoyi-nbcio版本从RuoYi-Flowable-Plus迁移过程记录
ruoyi-nbcio版本从RuoYi-Flowable-Plus迁移过程记录
10 1
|
5天前
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持formdesigner的本地图片上传与回显的功能实现
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持formdesigner的本地图片上传与回显的功能实现
17 2
|
5天前
|
前端开发 数据库 对象存储
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现(一)
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现(一)
43 0
|
5天前
|
对象存储
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现(二)
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现(二)
25 0
|
5天前
|
前端开发
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(一)
基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持自定义业务表单流程(一)
20 1
|
5天前
nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(一)
nbcio-boot移植到若依ruoyi-nbcio平台里一formdesigner部分(一)
10 0