FoxBPM任务详细信息展现实现

FoxBPM任务详细页面包括：任务信息、流程信息、流程图信息三个功能模块，具体功能介绍如下：

1、任务信息：

任务信息管理，通过rest服务获取任务信息、流程处理信息、任务节点信息。

2、流程信息：

流程信息管理，通过rest服务取流程实例信息，以及流程状态、当前处理人、流程参入者展现。

3、流程图信息：

流程图信息管理，通过rest服务获取流程图数据（png、svg），以及包括（轨迹信息、轨迹运行状态、隐藏状态）操作。

实例任务详细信息showTaskDetailInfor.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>FoxBPM流程门户</title>
<link rel="stylesheet" type="text/css" href="css/taskDetailInfor.css" />
<script src="js/jquery.js"></script>
<script src="js/foxbpmframework.js"></script>
<script src="js/taskInfor.js"></script>
<script src="js/flowInfor.js"></script> 
<script src="js/flowGraphicInfor.js"></script>
<script src="js/flowRunTrackInfor.js"></script>
</head>
<body>
	<br>
	<div class="container process" id="processInfo">
		<div
			class="repository-with-sidebar repo-container new-discussion-timeline">
			<div class="repository-content context-loader-container"
				id="js-repo-pjax-container" data-pjax-container="">
				<div class="issues-listing" >
					<div class="context-loader-container" id="issues-container">
						<div class="issues-listing">
							<div class="js-issues-results" id="show_issue">
								<div class="tab-content clearfix" id="discussion_bucket">
									<!-- 流程信息 -->
									<div class="discussion-sidebar" id="flowInforEle">
									</div>
									<!-- 任务详细信息 -->
									<div class="discussion-timeline js-quote-selection-container" id="taskInforEle">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<br>
	<div class="container process">
		<div id="process">
			<div id="flowRunTrackInforEle" style="display: none;" class="proc_bg"></div>
			<div id="flowGraphicInforEle" class="proc_bg"></div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			var isIELowVer = window.ActiveXObject && ($.browser.msie && $.browser.version < 8.0); 
			//流程信息
			var flowInfor = new FlowInfor({
				 eleId:'flowInforEle',
			    action : _serviceUrl,
				processInstanceId : _processInstanceId
			});
			flowInfor.init(); 
			//流程运行轨迹信息
			var flowRunTrackInfor = new FlowRunTrackInfor({
				eleId:'flowRunTrackInforEle',
				isIELowVer:isIELowVer,
				action : _serviceUrl + 'task/runTrack',
				processInstanceId : _processInstanceId
			});
			flowRunTrackInfor.init();
			//流程图信息
			var flowGraphicInfor = new FlowGraphicInfor({
				eleId:'flowGraphicInforEle',
				isIELowVer : isIELowVer,
				action : _serviceUrl,
				processInstanceId : _processInstanceId,
				runTrackObj:flowRunTrackInfor
			});
			flowGraphicInfor.init();
			//任务信息
		     var taskInfor = new TaskInfor({
		    	eleId:'taskInforEle',
		    	action : _serviceUrl,
				processInstanceId : _processInstanceId,
				processDefinitionKey : _processDefinitionKey,
				flowInforObj:flowInfor,
				flowGraphicInforObj:flowGraphicInfor
			}).init();
		});
	</script>
</body>
</html>

以上html中

taskDetailInfor.css 样式文件；
jquery.js juqery工具；
foxbpmframework.js foxbpm框架工具（请求参数获取、rest服务地址配置等公共特性）；
taskInfor.js 任务信息处理；
flowInfor.js 流程信息处理；
flowGraphicInfor.js 流程图信息处理；
flowRunTrackInfor.js 流程轨迹信息处理；

附件是界面展现效果;

以上是FoxBPM任务详细信息页面展现，关于更多FoxBPM请链接https://github.com/FoxBPM。

FoxBPM任务详细信息展现实现

猜你喜欢