345 lines
17 KiB
Plaintext
345 lines
17 KiB
Plaintext
<%@page
|
|
import="com.blueland.bpm.engine.core.model.ProcessDefinitionModel"%>
|
|
<%@page import="com.blueland.bpm.engine.config.model.ProcessInfoConfig"%>
|
|
<%@page import="com.blueland.bpm.common.page.*"%>
|
|
<%@page import="com.blueland.bpm.common.util.*"%>
|
|
<%@page import="java.util.*"%>
|
|
<%@ page contentType="text/html;charset=UTF-8"%>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
|
|
<%@ taglib tagdir="/WEB-INF/tags/simpletable" prefix="simpletable"%>
|
|
<%@ include file="/commons/taglibs.jsp"%>
|
|
<%
|
|
String path = request.getContextPath();
|
|
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
|
|
%>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>环节配置</title>
|
|
<%@ include file="/commons/meta.jsp"%>
|
|
<link rel="stylesheet" href="${ctx}/resource/js/plugins/bpmn/css/diagram-js.css" />
|
|
</head>
|
|
<body class="white-page">
|
|
<div class="main-container" id="main-container">
|
|
<input type="hidden" id="processDefId" name ="processDefId" value="${query.processDefId}"/>
|
|
<div class="canvas">
|
|
<div id="js-canvas"></div>
|
|
</div>
|
|
</div>
|
|
<!-- viewer -->
|
|
<script type='text/javascript'src="${ctx}/resource/js/plugins/bpmn/bpmn-navigated-viewer.development.js"></script>
|
|
<script type="text/javascript">
|
|
var height1 = window.parent.document.documentElement.clientHeight;
|
|
var windowHeight = (parseInt(height1)-200)
|
|
var viewer = new BpmnJS({
|
|
container: document.querySelector('#js-canvas'),
|
|
height: windowHeight
|
|
});
|
|
var procDefId,
|
|
processTrace,
|
|
processDetailLogs;
|
|
var arrayActId=[];
|
|
var typeList = ["bpmn:Process","bpmn:SubProcess","label","bpmn:SequenceFlow"]
|
|
$(function(){
|
|
procDefId = $("#processDefId").val();
|
|
getXmlContent()
|
|
|
|
})
|
|
//获取xml数据
|
|
function getXmlContent(){
|
|
var url="${ctx}/procDefModelMgr/showProcessXml.do";
|
|
$.ajax({
|
|
url : url,
|
|
data:{"procDefId":procDefId},
|
|
cache : false,
|
|
async : false,
|
|
type : "POST",
|
|
success : function (data){
|
|
createNewDiagram(data.bpmnXml);
|
|
}
|
|
});
|
|
}
|
|
function createNewDiagram (bpmnXmlStr) {
|
|
viewer.importXML(bpmnXmlStr, function (err) {
|
|
if (err) {
|
|
console.error(err)
|
|
}else{
|
|
var canvas = viewer.get('canvas');
|
|
canvas.zoom('fit-viewport');
|
|
appendHtml();
|
|
dealLine(canvas);
|
|
}
|
|
})
|
|
}
|
|
function hidenDiv(id){
|
|
document.getElementById(id).style="display:none";
|
|
document.querySelectorAll("[signDiv]").forEach(function(item) {
|
|
if(document.getElementById(item.id) !=null){//去掉所有的环节详细数据，防止页面延迟，没有消失显示的详情信息
|
|
document.getElementById(item.id).style="display:none";
|
|
}
|
|
});
|
|
}
|
|
function showLineDiv(id){
|
|
document.getElementById(id).style="display:block";
|
|
}
|
|
function hidenLineDiv(id){
|
|
document.getElementById(id).style="display:none";
|
|
document.querySelectorAll("[lineDiv]").forEach(function(item) {
|
|
if(document.getElementById(item.id) !=null){//去掉所有的环节详细数据，防止页面延迟，没有消失显示的详情信息
|
|
document.getElementById(item.id).style="display:none";
|
|
}
|
|
});
|
|
}
|
|
function showDiv(id){
|
|
document.getElementById(id).style="display:block";
|
|
}
|
|
//拼接环节详细信息
|
|
function appendHtml(){
|
|
var eventBus = viewer.get('eventBus');
|
|
var events = [
|
|
'element.hover',
|
|
'element.out',
|
|
];
|
|
var overlays = viewer.get('overlays');
|
|
events.forEach(function(event) {
|
|
eventBus.on(event, function(e) {
|
|
|
|
var thisNode=document.getElementById('div_'+e.element.id);
|
|
var id = e.element.id.split("_")[0];
|
|
var thisLinkNode=document.getElementById('line_'+id);
|
|
if(!typeList.includes(e.element.type)){
|
|
if(event=='element.hover'){
|
|
dealActHtml(overlays,event,e);
|
|
}
|
|
if(event=='element.out' && thisNode != null){
|
|
document.getElementById('div_'+e.element.id).style="display:none";
|
|
document.querySelectorAll("[signDiv]").forEach(function(item) {
|
|
if(document.getElementById(item.id) !=null){//去掉所有的环节详细数据，防止页面延迟，没有消失显示的详情信息
|
|
document.getElementById(item.id).style="display:none";
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
}else if(e.element.type =='label'){//处理输出线的名称
|
|
var listLine= viewer._getLineName.filter(function(item){//判断这个输出线是否是截取的输出线名称
|
|
return item.id == id;
|
|
})
|
|
if(listLine.length>0){
|
|
if(event=='element.hover'){
|
|
if(thisLinkNode!=null){
|
|
document.getElementById("line_"+id).style="display:block";
|
|
}else{
|
|
appendLineHtml(overlays,event,id);
|
|
}
|
|
|
|
}
|
|
}
|
|
if(event=='element.out'){
|
|
if(document.getElementById('line_'+id) !=null){//去掉输出线的显示
|
|
document.getElementById('line_'+id).style="display:none";
|
|
}
|
|
document.querySelectorAll("[lineDiv]").forEach(function(item) {
|
|
if(document.getElementById(item.id) !=null){//去掉所有的输出线显示
|
|
document.getElementById(item.id).style="display:none";
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
});
|
|
}
|
|
//环节信息
|
|
function dealActHtml(overlays,event,e){
|
|
var html = new Array();
|
|
var thisNode=document.getElementById('div_'+e.element.id);
|
|
var listAct= arrayActId.filter(function(item){//判断这个节点是否
|
|
return item == ('div_'+e.element.id);
|
|
})
|
|
if(listAct.length==0){
|
|
arrayActId.push('div_'+e.element.id);
|
|
}
|
|
if(listAct.length>0){
|
|
if(thisNode!=null){
|
|
document.getElementById('div_'+e.element.id).style="display:block";
|
|
}
|
|
return;
|
|
}
|
|
var id = e.element.id;
|
|
var oldtitle= e.element.name;
|
|
var type = e.element.type;
|
|
html.push('<div class="lchj-set" signDiv="flag" onmouseover="showDiv(\'div_'+e.element.id+'\')" onmouseleave="hidenDiv(\'div_'+e.element.id+'\')" id="div_'+e.element.id+'"><div class="box-head"><span class="title">'+oldtitle+'</span></div><div class="box-body">');
|
|
html.push("<ul class='actDetail_set'>");
|
|
if(type=="bpmn:ServiceTask"){
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/otherTask/editServiceTaskView.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'服务任务设置','980px','600px');\">服务任务设置</a></li>");
|
|
}else if(type=="bpmn:ScriptTask"){
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/otherTask/editScriptTaskView.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'脚本任务设置','980px','600px');\">脚本任务设置</a></li>");
|
|
}else if(type=='bpmn:ReceiveTask'){//接收任务
|
|
html.push("<li><a id='actDefInfo' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/activityInfo/edit.do?activityDefId="+id+"&processDefId=${query.processDefId }");
|
|
html.push("' ,'环节属性设置 当前环节->"+oldtitle+"','980px','600px');\">环节属性设置</a></li>");
|
|
|
|
html.push("<li><a id='actSequenceFlow' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/sequenceFlow/list.do?actId="+id+"&procDefId=${query.processDefId}");
|
|
html.push("' ,'环节输出线设置 当前环节->"+oldtitle+"','980px','600px');\">环节输出线设置</a></li>");
|
|
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/activityInfo/actOperatePowerList.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'环节操作权限设置 当前环节->"+oldtitle+"','980px','600px');\">环节操作权限设置</a></li>");
|
|
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/dataObjectRelation/activityList.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'环节扩展属性设置 当前环节->"+oldtitle+"','980px','600px');\">环节扩展属性设置</a></li>");
|
|
|
|
}else if(type=='bpmn:ManualTask'){//线下任务
|
|
html.push("<li><a id='actDefInfo' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/activityInfo/edit.do?activityDefId="+id+"&processDefId=${query.processDefId }");
|
|
html.push("' ,'环节属性设置 当前环节->"+oldtitle+"','980px','600px');\">环节属性设置</a></li>");
|
|
|
|
}else if(type=="bpmn:CallActivity"){
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/otherTask/editCallActivityView.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'子流程设置','980px','600px');\">子流程设置</a></li>");
|
|
if(id!=""){
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/procDefMgr/callactivityconfig.do?callActivityProcKey="+id+"&isSubProcess=1&sys=${appId}&mAppId=${mAppId}");
|
|
html.push("' ,'关联子流程设置','980px','600px');\">关联子流程设置</a></li>");
|
|
}
|
|
html.push("<li><a id='actSequenceFlow' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/sequenceFlow/list.do?actId="+id+"&procDefId=${query.processDefId}");
|
|
html.push("' ,'环节输出线设置 当前环节->"+oldtitle+"','980px','600px');\">环节输出线设置</a></li>");
|
|
|
|
}else if(type=="bpmn:ExclusiveGateway"){
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/gateway/editGatewayByCd.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'条件网关','980px','600px');\">条件网关设置</a></li>");
|
|
}else if(type=="bpmn:InclusiveGateway"){
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/gateway/editGatewayByIc.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'包容网关','980px','600px');\">包容网关设置</a></li>");
|
|
}else if(type=="bpmn:ParallelGateway"){
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/gateway/editGatewayByIc.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'并行网关','980px','600px');\">并行网关设置</a></li>");
|
|
}else{
|
|
|
|
html.push("<li><a id='actDefInfo' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/activityInfo/edit.do?activityDefId="+id+"&processDefId=${query.processDefId }&sys=${appId}&mAppId=${mAppId}");
|
|
html.push("' ,'环节属性设置 当前环节->"+oldtitle+"','980px','600px');\">环节属性设置</a></li>");
|
|
|
|
html.push("<li><a id='actDefUser' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/setActResource/list.do?actId="+id+"&procDefId=${query.processDefId}");
|
|
html.push("' ,'环节人员设置 当前环节->"+oldtitle+"','980px','600px');\">环节人员设置</a></li>");
|
|
|
|
html.push("<li><a id='actSequenceFlow' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/sequenceFlow/list.do?actId="+id+"&procDefId=${query.processDefId}");
|
|
html.push("' ,'环节输出线设置 当前环节->"+oldtitle+"','980px','600px');\">环节输出线设置</a></li>");
|
|
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/activityInfo/actOperatePowerList.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'环节操作权限设置 当前环节->"+oldtitle+"','980px','600px');\">环节操作权限设置</a></li>");
|
|
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/dataObjectRelation/activityList.do?activityDefId="+id+"&processDefId=${query.processDefId}");
|
|
html.push("' ,'环节扩展属性设置 当前环节->"+oldtitle+"','980px','600px');\">环节扩展属性设置</a></li>");
|
|
|
|
<%-- html.push("<li><a id='actDefRoelOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("<%=MyContants.KSKF_PAHT%>"+"/dev-plateform-web/#/roleFormField?formId=${formId}&procDefKey=${procDefKey}&appId=${appId}&actDefId="+id+"&formCode=${formCode}&modelId=${modelId}&processDefId=${query.processDefId}");
|
|
html.push("' ,'环节表单设置 当前环节->"+oldtitle+"','980px','600px');\">环节表单设置</a></li>"); --%>
|
|
if(e.element.isMulti==true){
|
|
html.push("<li><a id='actDefOperate' href='javascript:void(0)'");
|
|
html.push(" onclick=\"showDiaLog('");
|
|
html.push("${ctx}/actInfo/activityFinishRule/create.do?sourceActId="+id+"&procDefId=${query.processDefId}&sourceActName=" + oldtitle);
|
|
html.push("' ,'环节完成条件设置 当前环节->"+oldtitle+"','980px','600px');\">环节完成条件设置</a></li>");
|
|
}
|
|
}
|
|
html.push('</ul></div>');
|
|
var content = html.join('');
|
|
if(event=='element.hover'){
|
|
overlays.add(e.element.id, 'note', {
|
|
position: {
|
|
bottom: 0,
|
|
right: 0
|
|
},
|
|
html: content
|
|
});
|
|
}
|
|
}
|
|
|
|
function appendLineHtml(overlays,event,id){//拼写输出线名称
|
|
var html = new Array();
|
|
var hash = {};//数组去重
|
|
var lineList = viewer._getLineName.reduce(function(item, next) {
|
|
hash[next.id] ? '' : hash[next.id] = true && item.push(next);
|
|
return item;
|
|
}, []);
|
|
var thisNode=document.getElementById('line_'+id);
|
|
var list= lineList.filter(function(item){//判断这个输出线是否是截取的输出线名称
|
|
return item.id == id;
|
|
})
|
|
var listAct= arrayActId.filter(function(item){//判断这个节点是否
|
|
return item == id;
|
|
})
|
|
if(listAct.length==0){
|
|
arrayActId.push('line_'+id);
|
|
}
|
|
if(thisNode!=null && listAct.length==0){
|
|
document.getElementById('line_'+id).style="display:block";
|
|
return;
|
|
}
|
|
html.push('<div class="lchj-box" lineDiv="flag" onmouseover="showLineDiv(\'line_'+id+'\')" onmouseleave="hidenLineDiv(\'line_'+id+'\')" id="line_'+list[0].id+'"><div class="box-body">'+list[0].name);
|
|
html.push('</div></div>');
|
|
var content = html.join('');
|
|
//alert(list[0].name)
|
|
if(event=='element.hover'){
|
|
overlays.add(id, {
|
|
position: {
|
|
bottom: 0,
|
|
right: 0
|
|
},
|
|
html: content
|
|
});
|
|
}
|
|
}
|
|
//处理线的名称样式
|
|
function dealLine(canvas){
|
|
var hash = {};//数组去重
|
|
var lineList = viewer._getLineId.reduce(function(item, next) {
|
|
hash[next] ? '' : hash[next] = true && item.push(next);
|
|
return item;
|
|
}, []);
|
|
var colorClass = "highlight-label";
|
|
lineList.forEach(function(item){
|
|
canvas.addMarker(item+"_label", colorClass)
|
|
})
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|