天天看點
傳回

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>
activiti7 java
上一篇: activiti7---自定義流程圖（springboot項目）1.yml檔案2.pom檔案（主要依賴）3.安全配置類4.流程圖基本資訊類5.流程圖步驟類6.流程的定義與部署7.效果圖
下一篇: Flowable 6.6.0 BPMN使用者指南 - 17 進階用例 - 17.2 與流程解析挂鈎《Flowable 6.6.0 BPMN使用者指南》

繼續閱讀