在参考原文基础上进一步验证实现
1、pox.xml 需要补充
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-util</artifactId>
<version>1.7</version>
</dependency>
2、在测试中 embed 标签接收返回流失败了,我没有测试成功,因此改用直接返回字符串,放到页面中。修改代码如下:
(1)Controller 修改(之前查不到正在执行的流程):
@ResponseBody
@RequestMapping(value="/showImg1")
public String showImg1(String instanceId, HttpServletResponse response) {
String res = null;
/*
* 参数校验
*/
logger.info("查看完整流程图!流程实例ID:{}", instanceId);
if(StringUtils.isBlank(instanceId)) return res;
BpmnModel bpmnModel = null;
/*
* 获取流程实例
*/
HistoricProcessInstance processInstance = historyService.createHistoricProcessInstanceQuery().processInstanceId(instanceId).singleResult();
if(processInstance != null) {
// logger.error("流程实例ID:{}没查询到流程实例!", instanceId);
// return;
// 根据流程对象获取流程对象模型
bpmnModel = repositoryService.getBpmnModel(processInstance.getProcessDefinitionId());
} else {
ProcessInstance pi = runtimeService.createProcessInstanceQuery().processInstanceId(instanceId).singleResult();
bpmnModel = repositoryService.getBpmnModel(pi.getProcessDefinitionId());
}
/*
* 查看已执行的节点集合
* 获取流程历史中已执行节点,并按照节点在流程中执行先后顺序排序
*/
// 构造历史流程查询
HistoricActivityInstanceQuery historyInstanceQuery = historyService.createHistoricActivityInstanceQuery().processInstanceId(instanceId);
// 查询历史节点
List<HistoricActivityInstance> historicActivityInstanceList = historyInstanceQuery.orderByHistoricActivityInstanceStartTime().asc().list();
if(historicActivityInstanceList == null || historicActivityInstanceList.size() == 0) {
logger.info("流程实例ID:{}没有历史节点信息!", instanceId);
outputImg(response, bpmnModel, null, null);
return "";
}
// 已执行的节点ID集合(将historicActivityInstanceList中元素的activityId字段取出封装到executedActivityIdList)
List<String> executedActivityIdList = historicActivityInstanceList.stream().map(item -> item.getActivityId()).collect(Collectors.toList());
/*
* 获取流程走过的线
*/
// 获取流程定义
ProcessDefinitionEntity processDefinition = (ProcessDefinitionEntity) ((RepositoryServiceImpl) repositoryService).getDeployedProcessDefinition(processInstance.getProcessDefinitionId());
List<String> flowIds = ActivitiUtils.getHighLightedFlows(bpmnModel, processDefinition, historicActivityInstanceList);
/*
* 输出图像,并设置高亮
*/
res = outputImg1( bpmnModel, flowIds, executedActivityIdList);
return res;
}
(2)修改返回字符:
/**
* <p>输出图像</p>
* @param response 响应实体
* @param bpmnModel 图像对象
* @param flowIds 已执行的线集合
* @param executedActivityIdList void 已执行的节点ID集合
* @author FRH
* @time 2018年12月10日上午11:23:01
* @version 1.0
*/
private String outputImg1(BpmnModel bpmnModel, List<String> flowIds, List<String> executedActivityIdList) {
String res = null;
InputStream imageStream = null;
ByteArrayOutputStream baos = new ByteArrayOutputStream();
try {
imageStream = processDiagramGenerator.generateDiagram(bpmnModel, executedActivityIdList, flowIds, "宋体", "微软雅黑", "黑体", true, "png");
// 输出资源内容到相应对象
byte[] b = new byte[1024];
int len;
while ((len = imageStream.read(b, 0, 1024)) != -1) {
baos.write(b, 0, len);
}
baos.flush();
res = new String(baos.toByteArray());
}catch(Exception e) {
logger.error("流程图输出异常!", e);
} finally { // 流关闭
StreamUtils.closeInputStream(imageStream);
try {
baos.close();
} catch (Exception e2) {
e2.printStackTrace();
}
}
return res;
}
3、页面 /index.htm 修改
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>首页</title>
<script th:src="@{/static/js/jquery-3.4.1.js}"></script>
<script type="text/javascript">
$(function(){
// 点击菜单
$(".show-page").bind("click", function(){
$(".main-body").html("");
$(".result-div").html("");
var url = $(this).attr("url");
$.ajax({
async : false,
cache : false,
type : 'POST',
url : url,
dataType : "html",
error : function() {
alert('请求失败');
},
success : function(data) {
$(".result-div").html(data);
}
});
});
// 点击我要请假,开启流程
$(".show-instance").bind("click", function(){
$(".main-body").html("");
$(".result-div").html("");
var url = $(this).attr("url");
$.ajax({
async : false,
cache : false,
type : 'POST',
url : url,
dataType : "html",
error : function() {
alert('请求失败');
},
success : function(data) {
$("input[name='instanceId']").val(data);
}
});
});
// 绑定查看流程图
$(".show-img").bind("click", function(){
var instanceId = $("input[name='instanceId']").val();
if(instanceId == "") {
alert("暂无流程!");
return;
}
//var imgHtml = '<embed src="/demo/showImg?instanceId=' + instanceId + '" style="display:block;width:1000px;height:450px" '+
//' type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />';
//$(".result-div").html(imgHtml);
//$('#showEmbed').attr("src", "/demo/showImg?instanceId=" + instanceId );
var _url = "/demo/showImg1?instanceId=" + instanceId;
$.ajax({
async : false,
cache : false,
//type : 'POST',
url : _url,
//dataType : "html",
error : function() {
alert('请求失败');
},
success : function(data) {
//$("#showEmbed").html(data);
$("#showEmbed")[0].innerHTML=data;
}
});
});
// 查看任务
$(".show-task").bind("click", function(){
$.ajax({
async : false,
cache : false,
type : 'GET',
url : "/demo/toShowTask",
data : {"aaabbbccc":"aa"},
dataType : "html",
error : function() {
alert('请求失败');
},
success : function(data) {
$(".result-div").html(data);
}
});
});
});
/**
* 员工提交申请
*/
function toLeave() {
$.ajax({
async : false,
cache : false,
type : 'POST',
url : "/demo/employeeApply",
dataType: "text",
data: $(".employee-leave").serialize(),
error : function() {
alert('请求失败');
},
success : function(data) {
alert(data);
}
});
}
/**
* 上级审核
*/
function higherAudit() {
$.ajax({
async : false,
cache : false,
type : 'POST',
url : "/demo/higherLevelAudit",
dataType: "text",
data: $(".higher-audit").serialize(),
error : function() {
alert('请求失败');
},
success : function(data) {
alert(data);
}
});
}
/**
* 部门经理审核
*/
function managerAudit() {
$.ajax({
async : false,
cache : false,
type : 'POST',
url : "/demo/divisionManagerAudit",
dataType: "text",
data: $(".manager-audit").serialize(),
error : function() {
alert('请求失败');
},
success : function(data) {
alert(data);
}
});
}
/**
* 上级审核
*/
function viewTask(taskId, name) {
var url = "/demo/viewTask";
if(name != "上级审核") {
url = "/demo/viewTaskManager";
}
$.ajax({
async : false,
cache : false,
type : 'POST',
url : url,
data : {"taskId" : taskId},
dataType : "html",
error : function() {
alert('请求失败');
},
success : function(data) {
$(".result-div").html(data);
}
});
}
</script>
</head>
<body>
<!-- 菜单栏 -->
<div class="main-menu">
<button class="show-instance" url="/demo/start">我要请假</button>
<button class="show-page" url="/demo/toLeave">开始填单</button>
<button class="show-img">查看流程图</button>
<button class="show-task">查看任务</button>
</div>
<br/>
流程实例ID:<input type="text" name="instanceId"/>
<br/>
<!-- 操作栏 -->
<div class="main-body">
</div>
<br/>
<!-- 结果栏 -->
<div id="showEmbed" class="result-div">
<!-- <embed id="showEmbed" type="image/svg+xml" style="display:block;width:1000px;height:450px" pluginspage="http://www.adobe.com/svg/viewer/install/" >
</embed> -->
<!-- <iframe style="display:block;width:1000px;height:450px"></iframe> -->
<!-- <object tyle="display:block;width:1000px;height:450px"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" /> -->
<br>
<!-- <img src="/static/leave-process.png"/> -->
</div>
</body>
</html>