Flowable6.x导出/查看/跟踪流程图（续）

书接上回

项目源码仓库

无论是待办、已办，亦或是流转中、已结束的流程实例，通过使用JS绘制SVG格式的交互式流程图，与以上篇博文中三种方式相比，在效果上都具有明显优势。
运行效果如下图所示：
运行效果图

整合、改造Flowable中displaymodel页面

从flowable官方发布包获取前端源码

下载官方数据包flowable-6.4.1.zip
从压缩包中解压出flowable-6.4.1\wars下面的flowable-modeler.war
从flowable-modeler.war中解压出WEB-INF\classes\static\display 文件夹下的11个文件，如下图所示：
{% asset_img trac.gif 流程跟踪 %}
在前端vue-element-admin的public下创建display文件夹，将11个文件放入
在前端vue-element-admin的public创建displayModel.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link type="text/css" rel="stylesheet" href="./display/jquery.qtip.min.css" />
    <link type="text/css" rel="stylesheet" href="./display/displaymodel.css" />
    <script type="text/javascript" src="./editor-app/editor-utils.js"></script>
    <script type="text/javascript" src="./jquery_1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery_1.11.0/jquery.cookie.js"></script>
    <script type="text/javascript" src="./display/jquery.qtip.min.js"></script>
    <script type="text/javascript" src="./display/raphael.js"></script>
    <script type="text/javascript" src="./display/bpmn-draw.js"></script>
    <script type="text/javascript" src="./display/bpmn-icons.js"></script>
    <script type="text/javascript" src="./display/Polyline.js"></script>
    <script type="text/javascript" src="./display/displaymodel.js"></script>
  </head>
  <body>
    <div id="bpmnModel" data-model-id="1"></div>
  </body>
</html>

通过vue组件iframe方式，将displaymodel页面嵌入

将Dialog封闭为vue组件

import request from '@/utils/request'
//获取流程办理历史记录
export function fetchFlowLog(data) {
  return request({
    url: '/api/workflow/auth/activiti/task/log',
    method: 'post',
    data
  })
}

流程跟踪组件代码：

<template>
  <div class="app-container" style="background-color: #FFFFFF;">
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" width="80%" height="100%" title="流程跟踪">
      <!-- 此处通过iframe显示流程图 -->
      <div>
        <iframe ref="IFrame" id="map" scrolling="auto" v-bind:src="contents"
          frameborder="0" style="top:0px;left: 0px;right:0px;bottom:0px;width: 100%;height: 300px;"></iframe>
      </div>
      <!-- 此处通过el-table显示流程任务办理日志 -->
      <div>
      <el-table v-loading="loading" :data="mainTableData" border fit style="width: 100%" max-height="500">
        <el-table-column type="index" label="序号" width="70">
        </el-table-column>
        <el-table-column prop="name" label="名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="assignee" label="经办人" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="notes" label="批注" show-overflow-tooltip sortable></el-table-column>
        <el-table-column prop="startTime" label="开始时间" show-overflow-tooltip sortable
          :formatter="(row,column,cellValue) => dateTimeColFormatter(row,column,cellValue)"></el-table-column>
        <el-table-column prop="endTime" label="完成时间" show-overflow-tooltip sortable
          :formatter="(row,column,cellValue) => dateTimeColFormatter(row,column,cellValue)"></el-table-column>
      </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  // 引入获取办理日志数据的方法
  import {
    fetchFlowLog
  } from '@/api/workflow-task'
  export default {
    name: 'iFrame',
    data() {
      return {
        dialogVisible: false,
        contents: "",
        loading: true,
        mainTableData: []
      }
    },
    mounted() {},
    methods: {
      // 设置iframe的src
      setSrc(src){
        this.contents=src
      },
      showDialog() {
        this.dialogVisible = true
      },
      // 装入办理日志
      loadLog(processInstanceId){
        this.fetchProcessLog(processInstanceId)
      },
      async fetchProcessLog(processInstanceId){
        const guidContainer = {
          guid: processInstanceId
        }
        this.loading = true
        const response = await fetchFlowLog(guidContainer)
        this.loading = false
        if (100 !== response.code) {
          this.$message({
            message: response.message,
            type: 'warning'
          })
          return
        }
        const {
          data
        } = response
        this.mainTableData = data
      },
      dateTimeColFormatter(row, column, cellValue) {
        return this.$commonUtils.dateTimeFormat(cellValue)
      },
    }
  }
</script>

以待办页面为例引入vue组件（概略）

<template>
  <div class="app-container background-white">

    <!-- 省略其他代码 -->

    <!-- 此处引入显示流程图和办理日志的子组件 -->
    <IFrame ref="displayComponent" />
  </div>
</template>
<script>
  // 此处引入显示流程图和办理日志的子组件
  // 其他代码省略
  import IFrame from '@/views/.../flowLog'
  export default {
    name: 'todoList',
    components: {
      IFrame
    },
    data() {
      return {},
    },
    methods: {
      // 调用子组件，显示流程图和办理日志
      handleDisplay(row) {
        this.$nextTick(() => {
          //设置iframe的src
          this.$refs.displayComponent.setSrc("/displayModel.html?processInstanceId=" + row.processInstanceId +
            "&nocaching=" +
            new Date().getTime())
          //装入办理日志
          this.$refs.displayComponent.loadLog(row.processInstanceId)
          //显示dialog
          this.$refs.displayComponent.showDialog()
        })
      },
    }
  }
</script>
<style>
</style>

改造display

改造displaymodel.js中_showTip(htmlNode, element)方法，优化鼠标悬浮在任务上时Tip显示内容

function _showTip(htmlNode, element) {
  var documentation = undefined;
  if (customActivityToolTips) {
    if (customActivityToolTips[element.name]) {
      documentation = customActivityToolTips[element.name];
    } else if (customActivityToolTips[element.id]) {
      documentation = customActivityToolTips[element.id];
    } else {
      documentation = ''; // Show nothing if custom tool tips are enabled
    }
  }
  if (documentation === undefined) {
    var documentation = undefined;
    if (element.type === 'UserTask') { //仅用户任务显示tip
      documentation = "<div style=\"padding: 0px; \">";
      if (!element.completed) {
        element.endTime = '';
      }
      if (!element.completed && !element.current) {
        element.startTime = '';
      }
      if (element.startTime) {
        documentation = documentation +
          "<div style=\"font-size:9px;height:13px;line-height:10px;border-bottom:0px solid #D3D3D3;white-space:nowrap\">" +
          "<span style=\"font-weight:bold\">开始时间:</span><span style=\"margin-left:10px\">" + element.startTime +
          "</span></div>"
      }
      if (element.endTime) {
        documentation = documentation +
          "<div style=\"font-size:9px;height:13px;line-height:10px;border-bottom:0px solid #D3D3D3;white-space:nowrap\">" +
          "<span style=\"font-weight:bold\">结束时间:</span><span style=\"margin-left:10px\">" + element.endTime +
          "</span></div>";
      }
      if (element.assignee) {
        documentation = documentation +
          "<div style=\"font-size:9px;height:13px;line-height:10px;border-bottom:0px solid #D3D3D3;white-space:nowrap\">" +
          "<span style=\"font-weight:bold\">办理人员:</span><span style=\"margin-left:10px\">" + element.assignee +
          "</span></div>";
      }
      if (element.comments) {
        documentation = documentation +
          "<div style=\"font-size:9px;height:13px;line-height:10px;border-bottom:0px solid #D3D3D3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\">" +
          "<span style=\"font-weight:bold\">办理批注:</span><span style=\"margin-left:10px\">" + element.comments +
          "</span></div>";
      }
      documentation = documentation + "</div>";
    }

改造displaymodel.js中获取参数processInstanceId的代码

var processInstanceId = EDITOR.UTIL.getParameterByName('processInstanceId');

此处使用了flowable源码中EDITOR工具中getParameterByName方法，代码片断如下：

var EDITOR = EDITOR || {};
EDITOR.UTIL = {
    getParameterByName: function (name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    },
};

改造displaymodel.js，添加获取令牌功能，通过令牌，可实现授权访问流程图的要求。

var token = 'Bearer' + $.cookie("Admin-Token");

读取cookie中的令牌。

改造displaymodel.js的访问后台流程图数据服务的功能

var modelUrl = 'http://网关IP:网关端口/api/workflow/auth/activiti/task/process/instances';
var processInstanceId = EDITOR.UTIL.getParameterByName('processInstanceId');
var token = 'Bearer' + $.cookie("Admin-Token");
var request = jQuery.ajax({
  type: 'get',
  beforeSend: function(xhr) {
    xhr.setRequestHeader('X-Token', token);
  },
  url: modelUrl + '?processInstanceId=' + processInstanceId + '&nocaching=' + new Date().getTime()
});

后台代码（为前台准备数据）

流程图数据获取源码

@Service
public class RuntimeDisplayJsonClientResourceImpl implements RuntimeDisplayJsonClientResource {
    @Autowired
    protected RepositoryService repositoryService;
    @Autowired
    protected RuntimeService runtimeService;
    @Autowired
    protected HistoryService historyService;
    @Autowired
    protected ManagementService managementService;
    protected ObjectMapper objectMapper = new ObjectMapper();
    protected List<String> eventElementTypes = new ArrayList<String>();
    protected Map<String, InfoMapper> propertyMappers = new HashMap<String, InfoMapper>();
    @Override
    public JsonNode getModelJSON(String processInstanceId) throws Exception {
        String processDefinitionId="";
        /** 先取流转中的流程实例 **/
        ProcessInstance processInstance = runtimeService.createProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
        if (processInstance == null) {
            /** 如果流程已结束，就取历史流程实例 **/
            HistoricProcessInstance historicProcessInstance = historyService.createHistoricProcessInstanceQuery().processInstanceId(processInstanceId).singleResult();
            if(historicProcessInstance == null) {
                throw new Exception("No process instance found with id " + processInstanceId);
            }else{
                processDefinitionId = historicProcessInstance.getProcessDefinitionId();
            }
        }else{
            processDefinitionId = processInstance.getProcessDefinitionId();
        }
        BpmnModel pojoModel = repositoryService.getBpmnModel(processDefinitionId);
        if (pojoModel == null || pojoModel.getLocationMap().isEmpty()) {
            throw new Exception("流程定义未找到：id " + processDefinitionId);
        }
        List<HistoricActivityInstance> activityInstances = historyService.createHistoricActivityInstanceQuery().processInstanceId(processInstanceId).orderByHistoricActivityInstanceStartTime().asc().list();
        Map<String, TaskBO> taskInfo = this.getTaskInfo(activityInstances);
        Set<String> completedActivityInstances = new HashSet<String>();
        Set<String> currentElements = new HashSet<String>();
        if (CollectionUtils.isNotEmpty(activityInstances)) {
            for (HistoricActivityInstance activityInstance : activityInstances) {
                if (activityInstance.getEndTime() != null) {
                    completedActivityInstances.add(activityInstance.getActivityId());
                } else {
                    currentElements.add(activityInstance.getActivityId());
                }
            }
        }
        List<Job> jobs = managementService.createJobQuery().processInstanceId(processInstanceId).list();
        if (CollectionUtils.isNotEmpty(jobs)) {
            List<Execution> executions = runtimeService.createExecutionQuery().processInstanceId(processInstanceId).list();
            Map<String, Execution> executionMap = new HashMap<String, Execution>();
            for (Execution execution : executions) {
                executionMap.put(execution.getId(), execution);
            }
            for (Job job : jobs) {
                if (executionMap.containsKey(job.getExecutionId())) {
                    currentElements.add(executionMap.get(job.getExecutionId()).getActivityId());
                }
            }
        }
        // 收集已完成的 flows
        List<String> completedFlows = gatherCompletedFlows(completedActivityInstances, currentElements, pojoModel);
        Set<String> completedElements = new HashSet<String>(completedActivityInstances);
        completedElements.addAll(completedFlows);
        ObjectNode displayNode = processProcessElements(pojoModel, completedElements, currentElements,taskInfo);
        if (completedActivityInstances != null) {
            ArrayNode completedActivities = displayNode.putArray("completedActivities");
            for (String completed : completedActivityInstances) {
                completedActivities.add(completed);
            }
        }
        if (currentElements != null) {
            ArrayNode currentActivities = displayNode.putArray("currentActivities");
            for (String current : currentElements) {
                currentActivities.add(current);
            }
        }
        if (completedFlows != null) {
            ArrayNode completedSequenceFlows = displayNode.putArray("completedSequenceFlows");
            for (String current : completedFlows) {
                completedSequenceFlows.add(current);
            }
        }
        return displayNode;
    }
}

办理日志数据获取方法源码

    @Override
    public ResultDTO getLog(String processInstanceId) throws Exception {
        List<HistoricActivityInstance> activityInstances = historyService.createHistoricActivityInstanceQuery().processInstanceId(processInstanceId).orderByHistoricActivityInstanceStartTime().asc().orderByHistoricActivityInstanceEndTime().asc().list();
        List<TaskBO> taskBOList = new ArrayList<>();
        for(HistoricActivityInstance historicActivityInstance:activityInstances){
            if(!"userTask".equals(historicActivityInstance.getActivityType()) && !"startEvent".equals(historicActivityInstance.getActivityType()) && !"endEvent".equals(historicActivityInstance.getActivityType())){
                continue;
            }
            TaskBO taskBO = new TaskBO();
            taskBO.setStartTime(historicActivityInstance.getStartTime());
            taskBO.setEndTime(historicActivityInstance.getEndTime());
            String assignee=historicActivityInstance.getAssignee();
            taskBO.setAssignee(WorkflowTool.getHumanAssignee(assignee));
            taskBO.setName(historicActivityInstance.getActivityName());
            if(org.apache.commons.lang3.StringUtils.isNotBlank(historicActivityInstance.getTaskId())){
                List<Comment> commList = taskService.getTaskComments(historicActivityInstance.getTaskId());
                String msg = StringTool.join("；",commList,"fullMessage");
                taskBO.setNotes(msg);
            }
            if("startEvent".equals(historicActivityInstance.getActivityType())){
                String initiator = flowableUtis.getInitiatorByProcessInstanceId(historicActivityInstance.getProcessInstanceId());
                String initatorHuman = WorkflowTool.getHumanAssignee(initiator);
                taskBO.setAssignee(initatorHuman);
                taskBO.setNotes("提交");
            }
            if("endEvent".equals(historicActivityInstance.getActivityType())){
                taskBO.setAssignee("系统");
                taskBO.setNotes("完成");
            }
            taskBOList.add(taskBO);
        }
        return ResultDTO.success(taskBOList);
    }

相关bean对象定义

@Data
public class TaskBO {
    private String assignee;
    private Date startTime;
    private Date endTime;
    private String notes;
    private String name;
}