书接上回
无论是待办、已办，亦或是流转中、已结束的流程实例，通过使用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个文件，如下图所示：
- 在前端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;
}
总结：通过对flowable源码中bpmnModel绘制功能的整合，可以较好的实现交互式的流程图跟踪展现功能。相较静态图方式展现的流程图，这种实现方式用户交互体验更好，获取信息更加方便，具有明显优势。
项目源码仓库
下一篇将介绍对flowable中模型制作editor-app功能的深度整合。