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。