Activiti7工作流+SpringBoot

在参考原文基础上进一步验证实现

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值