<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
|
<%
|
String path = request.getContextPath();
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
|
+ path + "/";
|
%>
|
|
<!DOCTYPE HTML>
|
<html>
|
<head>
|
<base href="<%=basePath%>">
|
<title>流程设计器</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<link href="static/plugins/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css"/>
|
<link href="static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
|
<link rel="stylesheet" href="static/plugins/layer/skin/default/layer.css" type="text/css">
|
<script src='static/plugins/jquery/jquery.min.js'></script>
|
<script src='static/plugins/jquery-easyui/jquery.easyui.min.js'></script>
|
<script src='static/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js'></script>
|
<script src='static/plugins/raphael.js'></script>
|
|
<!-- 弹窗加载组件 -->
|
<script type="text/javascript" src="static/plugins/layer/layer.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/spin.js"></script>
|
<script type="text/javascript" src="static/plugins/spinjs/jquery.spin.js"></script>
|
<script type="text/javascript" src="static/plugins/jquery.blockUI.js"></script>
|
|
<!-- wcp组件 -->
|
<script type="text/javascript" src="static/wcp/scripts/wcp.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.layer.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.blockUI.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.spin.js"></script>
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.jquery.js"></script>
|
|
<!--[if lt IE 9]>
|
<script type="text/javascript" src="static/plugins/json2.js"></script>
|
<![endif]-->
|
<script type="text/javascript" src="static/wcp/scripts/libs/wcp.infoPicker.js"></script>
|
|
<style>
|
html, body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, form, input,
|
textarea, select, table, th, td, pre {
|
margin: 0px;
|
padding: 0px;
|
}
|
|
body {
|
font-size: 14px;
|
font-family: "SimSun";
|
}
|
|
i, em {
|
font-style: normal;
|
}
|
|
li {
|
list-style: none;
|
}
|
|
a {
|
text-decoration: none;
|
color: #333;
|
}
|
|
img {
|
border: none;
|
vertical-align: top;
|
}
|
|
table {
|
border-collapse: collapse;
|
}
|
|
textarea {
|
resize: none;
|
overflow: auto;
|
}
|
|
.hide {
|
display: none;
|
}
|
|
*:focus {
|
outline: none;
|
}
|
|
.clear {
|
*zoom: 1;
|
}
|
|
.clear:after {
|
content: "";
|
display: block;
|
clear: both;
|
}
|
|
input[type=radio], input[type=checkbox] {
|
vertical-align: middle;
|
}
|
|
html, body {
|
height: 100%;
|
}
|
|
.designtop {
|
background: #3c8dbd url(static/images/flow/topbg.jpg) center top no-repeat;
|
height: 46px;
|
line-height: 46px;
|
box-shadow: 0px 3px 6px #bfbfbf;
|
padding: 0 10px;
|
/*position: absolute;
|
left: 0px;
|
top: 0px;
|
width: 100%;
|
z-index: 20;*/
|
}
|
|
.designtop .designname {
|
float: left;
|
color: #fff;
|
font-size: 14px;
|
font-weight: bold;
|
background: url(static/images/flow/icon.png) left center no-repeat;
|
padding-left: 20px;
|
}
|
|
.designtop .btns {
|
float: left;
|
margin-left: 88px;
|
color: #fff;
|
}
|
|
.designtop .btns p {
|
height: 46px;
|
line-height: 46px;
|
font-size: 14px;
|
cursor: pointer;
|
float: left;
|
padding: 0 12px;
|
background: url(static/images/flow/top_lines.png) right center no-repeat;
|
}
|
|
.designtop .btns p:hover {
|
background: #4fb6ee;
|
}
|
|
.designtop .btns p i {
|
float: left;
|
width: 16px;
|
height: 46px;
|
margin: 0 6px 0 0;
|
}
|
|
.i_save {
|
background: url(static/images/flow/i_save.png) 0 15px no-repeat;
|
}
|
|
.i_pointadd {
|
background: url(static/images/flow/i_pointadd.png) 0 15px no-repeat;
|
}
|
|
.i_pointremove {
|
background: url(static/images/flow/i_pointremove.png) 0 15px no-repeat;
|
}
|
|
.i_zoomin {
|
background: url(static/images/flow/i_zoomin.png) 0 15px no-repeat;
|
}
|
|
.i_zoomout {
|
background: url(static/images/flow/i_zoomout.png) 0 15px no-repeat;
|
}
|
|
.i_clear {
|
background: url(static/images/flow/i_clear.png) 0 15px no-repeat;
|
}
|
|
.tool {
|
position: absolute;
|
width: 124px;
|
left: 10px;
|
top: 56px;
|
background: #222c32;
|
z-index: 10;
|
color: #fff;
|
padding: 4px 12px 8px 12px;
|
}
|
|
.tool h5 {
|
font-size: 14px;
|
text-align: center;
|
line-height: 40px;
|
height: 40px;
|
border-bottom: 1px solid #464e53;
|
margin-bottom: 12px;
|
}
|
|
.list {
|
position: relative;
|
}
|
|
.i_start {
|
background: url('static/images/flow/start.png') no-repeat;
|
}
|
|
.i_userTask {
|
background: url('static/images/flow/usertask.png') no-repeat;
|
}
|
|
.i_exclusiveGateway {
|
background: url('static/images/flow/exclusive.png') no-repeat;
|
}
|
|
.i_parallelGateway {
|
background: url('static/images/flow/parallel.png') no-repeat;
|
}
|
|
.i_inclusiveGateway {
|
background: url('static/images/flow/inclusive.png') no-repeat;
|
}
|
|
.i_subProcess {
|
background: url('static/images/flow/subprocess.png') no-repeat;
|
}
|
|
.i_end {
|
background: url('static/images/flow/end.png') no-repeat;
|
}
|
|
.item {
|
height: 36px;
|
line-height: 36px;
|
font-size: 14px;
|
cursor: pointer;
|
width: 94px;
|
padding-left: 6px;
|
background: #222c32;
|
}
|
|
.item i {
|
display: inline-block;
|
width: 14px;
|
height: 14px;
|
margin-right: 6px;
|
vertical-align: -2px;
|
}
|
|
.right {
|
position: absolute;
|
left: -100px;
|
top: -100px;
|
z-index: 20;
|
border: 1px dotted #eee;
|
}
|
|
.right div {
|
width: 20px;
|
height: 20px;
|
padding: 2px;
|
cursor: pointer;
|
background: #d6e9f4;
|
opacity: 0.5;
|
}
|
|
.right div:hover {
|
opacity: 1;
|
}
|
|
.delete {
|
margin-bottom: 1px;
|
}
|
|
.edit {
|
margin: 1px 0px;
|
}
|
|
.sequence {
|
margin-top: 1px;
|
}
|
|
.border_move {
|
position: absolute;
|
border: 1px dotted #000000;
|
z-index: -1;
|
}
|
|
.centerline {
|
position: absolute;
|
display: none;
|
width: 2px;
|
top: 56px;
|
background: url("static/images/flow/dotted.png");
|
height: 100%;
|
}
|
|
.centerline2 {
|
position: absolute;
|
display: none;
|
height: 2px;
|
left: 100px;
|
background: url("static/images/flow/dotted2.png");
|
width: 100%;
|
}
|
|
.taskinput {
|
position: absolute;
|
left: -100px;
|
top: -100px;
|
z-index: 30;
|
}
|
|
.taskinput input {
|
text-align: center;
|
width: 98%;
|
margin-left: 2px;
|
}
|
|
.resizehandle1 {
|
position: absolute;
|
background: url("static/images/flow/nw-handle-dark.gif") no-repeat;
|
width: 10px;
|
height: 10px;
|
cursor: nw-resize;
|
}
|
|
.resizehandle4 {
|
position: absolute;
|
background: url("static/images/flow/se-handle-dark.gif") no-repeat;
|
width: 10px;
|
height: 10px;
|
cursor: se-resize;
|
}
|
</style>
|
</head>
|
|
<body style="background:#ddd;">
|
<div id="designbox" style="position: relative; height:100%; background:#ddd;">
|
<div class="designtop">
|
<h4 class="designname">${flowDefinition.flowName }-设计区</h4>
|
<div class="btns">
|
<p onclick="saveFlow();">
|
<i class="i_save"></i>
|
保存
|
</p>
|
<p onclick="addLineCircle(this);">
|
<i class="i_pointadd"></i>
|
添加点
|
</p>
|
<p onclick="subtractLineCircle(this);">
|
<i class="i_pointremove"></i>
|
减少点
|
</p>
|
<p onclick="paperZoomin();">
|
<i class="i_zoomin"></i>
|
放大画布
|
</p>
|
<p onclick="paperZoomout();">
|
<i class="i_zoomout"></i>
|
缩小画布
|
</p>
|
<p onclick="paperClear();">
|
<i class="i_clear"></i>
|
清除所有
|
</p>
|
</div>
|
</div>
|
<div class="tool">
|
<h5>工具箱</h5>
|
<ul class="list">
|
<li class="item" id="start">
|
<i class="i_start"></i>
|
开始
|
</li>
|
<li class="item" id="userTask">
|
<i class="i_userTask"></i>
|
任务节点
|
</li>
|
<li class="item" id="exclusiveGateway">
|
<i class="i_exclusiveGateway"></i>
|
排他网关
|
</li>
|
<li class="item" id="parallelGateway">
|
<i class="i_parallelGateway"></i>
|
并行网关
|
</li>
|
<li class="item" id="inclusiveGateway">
|
<i class="i_inclusiveGateway"></i>
|
包容网关
|
</li>
|
<li class="item" id="subProcess">
|
<i class="i_subProcess"></i>
|
子流程
|
</li>
|
<li class="item" id="end">
|
<i class="i_end"></i>
|
结束
|
</li>
|
</ul>
|
</div>
|
<div id="containerWrap" style="overflow:auto;">
|
<div id="container" style="background:#fff;"></div>
|
</div>
|
<div class="right" title="小菜单">
|
<div class="delete" onclick="flowDesigner.removeElement(this);">
|
<img src="static/images/flow/delete.png"/>
|
</div>
|
<div class="edit" onclick="getEditUrl(this);">
|
<img src="static/images/flow/edit.png"/>
|
</div>
|
<div class="sequence">
|
<img src="static/images/flow/sequenceflow.png"/>
|
</div>
|
</div>
|
<div class="taskinput">
|
<input type="text"/>
|
</div>
|
</div>
|
<input type="hidden" id="hide_node" value=""/>
|
<input type="hidden" id="hide_userTaskList" value=""/>
|
</body>
|
<script src='static/scripts/workflow/config.js'></script>
|
<script src='static/scripts/workflow/flowDesigner.js'></script>
|
<script>
|
var flowDesigner = null;
|
var pwidth = 1000;
|
var pheight = 600;
|
|
$(function () {
|
$("#container").width(pwidth);
|
$("#containerWrap").height($(window).height() - 46);
|
|
//加载流程节点
|
loadFlow();
|
|
$(window).resize(function () {
|
$("#containerWrap").height($(window).height() - 46);
|
});
|
|
$('.list .item').draggable({
|
revert: true,
|
proxy: 'clone',
|
onStartDrag: function (e) {
|
},
|
onDrag: function (e) {
|
},
|
onStopDrag: function (e) { //clientX，pageY
|
|
if (e.clientX < (124 + 10)) { //不能落在菜单下面
|
return false;
|
}
|
var target = e.target;
|
var scroll = getScroll();
|
|
switch (target.id) {
|
case "start": //圆形
|
flowDesigner.addElement({
|
"type": target.id,
|
"cx": e.clientX - 0 + scroll.left,
|
"cy": e.clientY - flowDesigner._DEFALUTS_.dy + scroll.top,
|
"r": 15
|
})
|
break;
|
case "userTask": //长方形
|
//0,56是布局的起点位置,50是方块宽度的一半，40是方块的高度的一半
|
flowDesigner.addElement({
|
"type": target.id,
|
"x": e.clientX - 50 - 0 + scroll.left,
|
"y": e.clientY - flowDesigner._DEFALUTS_.dy - 40 + scroll.top,
|
"w": 100,
|
"h": 80
|
});
|
break;
|
case "end": //加粗圆形
|
flowDesigner.addElement({
|
"type": target.id,
|
"cx": e.clientX - 0 + scroll.left,
|
"cy": e.clientY - flowDesigner._DEFALUTS_.dy + scroll.top,
|
"r": 15
|
});
|
break;
|
case "exclusiveGateway":
|
flowDesigner.addElement({
|
"type": "gateway",
|
"detail": target.id,
|
"cx": e.clientX - 1 + scroll.left,
|
"cy": e.clientY - flowDesigner._DEFALUTS_.dy + scroll.top,
|
"r": 21
|
});
|
break;
|
case "parallelGateway":
|
flowDesigner.addElement({
|
"type": "gateway",
|
"detail": target.id,
|
"cx": e.clientX - 1 + scroll.left,
|
"cy": e.clientY - flowDesigner._DEFALUTS_.dy + scroll.top,
|
"r": 21
|
});
|
break;
|
case "inclusiveGateway":
|
flowDesigner.addElement({
|
"type": "gateway",
|
"detail": target.id,
|
"cx": e.clientX - 1 + scroll.left,
|
"cy": e.clientY - flowDesigner._DEFALUTS_.dy + scroll.top,
|
"r": 21
|
});
|
break;
|
case "subProcess":
|
flowDesigner.addElement({
|
"type": target.id,
|
"x": e.clientX - 175 - 1 + scroll.left,
|
"y": e.clientY - flowDesigner._DEFALUTS_.dy - 100 + scroll.top,
|
"w": 350,
|
"h": 200
|
});
|
break;
|
}
|
|
return false;
|
}
|
});
|
|
//线段创建
|
var startNode = null;
|
var id = "";
|
$('.sequence').draggable({
|
revert: true,
|
proxy: 'clone',
|
|
onStartDrag: function (e) {
|
id = $(this).attr("tempid");
|
startNode = flowDesigner.FindElementById(id);
|
},
|
onDrag: function (e) {
|
var scroll = getScroll();
|
flowDesigner.lineFootholdDraging(startNode, e.clientX - 1 + scroll.left, e.clientY - flowDesigner._DEFALUTS_.dy + scroll.top);
|
},
|
onStopDrag: function (e) {
|
var scroll = getScroll();
|
var dropx = e.clientX - 1 + scroll.left;
|
var dropy = e.clientY - flowDesigner._DEFALUTS_.dy + scroll.top;
|
var dropElem = flowDesigner.lineFoothold(startNode, dropx, dropy); //得到目标的node
|
|
if (dropElem != null) {
|
|
dropElem.elementbox.attr({"stroke": "#000000", "stroke-width": 0.5})
|
} else {
|
return false;
|
}
|
var findExistEnd = false;
|
$.each(startNode.lineout, function (index, line) {
|
if (line.nodeend.id == dropElem.id) {
|
findExistEnd = true;
|
$.messager.alert("画线-提示", "指向节点(" + dropElem.getText() + ")的线段已存在!");
|
|
return false;
|
}
|
|
})
|
if (findExistEnd) {
|
return false;
|
}
|
|
switch (dropElem.type) {
|
case "subProcess":
|
|
case "userTask":
|
|
if (dropElem.id != id) {
|
var point1 = flowDesigner.getStartPosXY(startNode, dropElem);
|
var point2 = flowDesigner.getArrowPosXY(startNode, dropElem); //得到箭头节点
|
var self = false;
|
} else {
|
//到自身
|
point1 = {"x": dropElem.x + dropElem.w / 2, "y": dropElem.y + dropElem.h};
|
point2 = {"x": dropElem.x, "y": dropElem.y + dropElem.h / 2};
|
self = true;
|
}
|
|
break;
|
case "end":
|
var point1 = flowDesigner.getStartPosXY(startNode, dropElem);
|
var point2 = flowDesigner.getCircleArrowPosXY(startNode, dropElem); //得到箭头节点
|
self = false;
|
break;
|
case "gateway":
|
if (dropElem.id != id) {
|
var point1 = flowDesigner.getStartPosXY(startNode, dropElem);
|
var point2 = flowDesigner.getGatewayArrowPosXY(startNode, dropElem);//得到箭头节点
|
self = false;
|
} else {
|
return false;
|
|
}
|
break;
|
|
}
|
|
//画线
|
|
if (point2 && point1) {
|
// flowDesigner.addElement({ "type": "line", "nodestart":startNode, "nodeend":dropElem,"x1":startNode.centerpoint[0],"y1":startNode.centerpoint[1],"x2":point2.x,"y2":point2.y,"self":self});
|
|
flowDesigner.addElement({
|
"type": "line",
|
"nodestart": startNode,
|
"nodeend": dropElem,
|
"x1": point1.x,
|
"y1": point1.y,
|
"x2": point2.x,
|
"y2": point2.y,
|
"self": self
|
});
|
} else if (point1 == false) {
|
$.messager.alert("画线-提示", "线段起始点找不到！请微微移动下节点！");
|
return;
|
|
} else if (point2 == false) {
|
$.messager.alert("画线-提示", "线段终点找不到！请微微移动下节点！");
|
}
|
|
}
|
});
|
|
$('#container').droppable({});
|
})
|
|
//清除画布所有内容
|
function paperClear() {
|
flowDesigner.clear();
|
}
|
|
//放大画布
|
function paperZoomin() {
|
flowDesigner.zoomin();
|
}
|
|
//缩小画布
|
function paperZoomout() {
|
flowDesigner.zoomout();
|
}
|
|
//加点
|
function addLineCircle(obj) {
|
var status = flowDesigner.setAddPointStatus();
|
if (status) {
|
$(obj).css("border-bottom", "4px solid #54e748");
|
$("#container").css("cursor", "pointer");
|
} else {
|
$(obj).css("border-bottom", "none");
|
$("#container").css("cursor", "default");
|
}
|
}
|
|
//减点
|
function subtractLineCircle(obj) {
|
var status = flowDesigner.setSubtractPointStatus();
|
if (status) {
|
$(obj).css("border-bottom", "4px solid #fef04f");
|
$("#container").css("cursor", "pointer");
|
} else {
|
$(obj).css("border-bottom", "none");
|
$("#container").css("cursor", "default");
|
}
|
}
|
|
function getEditUrl(obj) { //编辑
|
var tempid = $(obj).closest(".right").attr("tempid");
|
var node = flowDesigner.FindElementById(tempid);
|
var arr = tempid.split("_");
|
var url = "";
|
var width = "1000px";
|
var height = "600px";
|
switch (arr[0]) {
|
case "start":
|
url = "config/flowDefinition/startEdit";
|
var startNode = {
|
"id": node.id,
|
"text": node.getText()
|
};
|
$("#hide_node").val(JSON.stringify(startNode));
|
//width = "700px";
|
//height = "400px";
|
break;
|
case "userTask":
|
url = "config/flowDefinition/userTaskEdit?flowId=${flowDefinition.flowId}&moduleId=${flowDefinition.moduleId}&formId=${flowDefinition.formId}";
|
var userTaskNode = {
|
"id": node.id,
|
"text": node.getText(),
|
"content": node.content
|
};
|
console.log(userTaskNode);
|
$("#hide_node").val(JSON.stringify(userTaskNode));
|
|
var userTaskList = flowDesigner.findAllNodeByType("userTask");
|
//排除自己
|
$.each(userTaskList, function (index, elem) {
|
if (elem.id == node.id) {
|
userTaskList.splice(index, 1);
|
return false;
|
}
|
});
|
$("#hide_userTaskList").val(JSON.stringify(userTaskList));
|
width = "1100px";
|
break;
|
case "end":
|
url = "config/flowDefinition/endEdit";
|
var endNode = {
|
"id": node.id,
|
"text": node.getText()
|
};
|
$("#hide_node").val(JSON.stringify(endNode));
|
//width = "700px";
|
//height = "400px";
|
break;
|
case "line":
|
url = "config/flowDefinition/lineEdit";
|
var startNodeName = node.nodestart ? node.nodestart.getText() : "";
|
var endNodeName = node.nodeend ? node.nodeend.getText() : "";
|
|
var line = {
|
"id": node.id,
|
"text": node.getText(),
|
"content": node.content,
|
"startNodeName": startNodeName,
|
"endNodeName": endNodeName
|
};
|
|
$("#hide_node").val(JSON.stringify(line));
|
width = "700px";
|
height = "460px";
|
break;
|
case "exclusiveGateway":
|
case "parallelGateway":
|
case "inclusiveGateway":
|
url = "config/flowDefinition/gatewayEdit";
|
var gatewayNode = {
|
"id": node.id,
|
"text": node.getText(),
|
"detail": node.detail
|
};
|
|
$("#hide_node").val(JSON.stringify(gatewayNode));
|
//width = "700px";
|
//height = "400px";
|
break;
|
case "subProcess":
|
url = "config/flowDefinition/subProcessEdit";
|
break;
|
}
|
// var win=window.open(url);
|
// win.document.write("<div>"+tempid+"</div>");
|
layer.open({
|
title: tempid + "设置",
|
type: 2,
|
area: [width, height],
|
fixed: false, //不固定
|
content: url
|
});
|
}
|
|
function getScroll() {
|
var scrolltop = $("#designbox").scrollTop();
|
var scrollleft = $("#designbox").scrollLeft();
|
|
return {
|
"top": scrolltop,
|
"left": scrollleft
|
};
|
}
|
|
//保存流程
|
function saveFlow() {
|
console.log("所有节点", flowDesigner.allnodes);
|
console.log("所有线条", flowDesigner.alllines);
|
|
var designObj = new Object();
|
designObj.width = flowDesigner._DEFALUTS_.width;
|
designObj.height = flowDesigner._DEFALUTS_.height;
|
|
var shape = [];
|
//1.循环节点，形成shape的子元素
|
$.each(flowDesigner.allnodes, function (index, elem) {
|
|
var sh = {};
|
switch (elem.type) {
|
case "start":
|
sh["type"] = "start";
|
sh["id"] = elem.id;
|
sh["text"] = elem.getText();
|
sh["cx"] = elem.cx;
|
sh["cy"] = elem.cy;
|
sh["parentElem"] = elem.parentElem != null ? elem.parentElem.id : null;
|
sh["content"] = elem.content;
|
break;
|
case "end":
|
sh["type"] = "end";
|
sh["id"] = elem.id;
|
sh["text"] = elem.getText();
|
sh["cx"] = elem.cx;
|
sh["cy"] = elem.cy;
|
sh["parentElem"] = elem.parentElem != null ? elem.parentElem.id : null;
|
sh["content"] = elem.content;
|
break;
|
case "userTask":
|
sh["type"] = "userTask";
|
sh["id"] = elem.id;
|
sh["text"] = elem.getText();
|
sh["x"] = elem.x;
|
sh["y"] = elem.y;
|
sh["w"] = elem.w;
|
sh["h"] = elem.h;
|
sh["parentElem"] = elem.parentElem != null ? elem.parentElem.id : null;
|
sh["content"] = elem.content;
|
break;
|
case "gateway":
|
sh["type"] = "gateway";
|
sh["id"] = elem.id;
|
sh["text"] = elem.getText();
|
sh["cx"] = elem.cx;
|
sh["cy"] = elem.cy;
|
sh["detail"] = elem.detail;
|
sh["parentElem"] = elem.parentElem != null ? elem.parentElem.id : null;
|
sh["content"] = elem.content;
|
break;
|
case "subProcess":
|
sh["type"] = "subProcess";
|
sh["id"] = elem.id;
|
sh["text"] = elem.getText();
|
sh["x"] = elem.x;
|
sh["y"] = elem.y;
|
sh["w"] = elem.w;
|
sh["h"] = elem.h;
|
sh["content"] = elem.content;
|
|
break;
|
}
|
shape.push(sh);
|
})
|
|
//2.循环线段，形成shape的子元素
|
$.each(flowDesigner.alllines, function (index, elem) {
|
var shline = {};
|
shline["type"] = "line";
|
shline["id"] = elem.id;
|
shline["text"] = elem.getText();
|
shline["linestr"] = elem.linestr;
|
shline["x1"] = elem.x1;
|
shline["y1"] = elem.y1;
|
shline["x2"] = elem.x2;
|
shline["y2"] = elem.y2;
|
shline["self"] = elem.self;
|
shline["nodestart"] = elem.nodestart != null ? elem.nodestart.id : null;
|
shline["nodeend"] = elem.nodeend != null ? elem.nodeend.id : null;
|
shline["content"] = elem.content;
|
shape.push(shline);
|
});
|
|
designObj.shapes = shape;
|
|
var obj = new Object();
|
obj.flowId = "${flowDefinition.flowId}";
|
obj.definitionJson = JSON.stringify(designObj);
|
|
wcp.ui.setBusy("body", wcp.ajax({
|
url: "config/flowDefinition/saveFlow",
|
data: JSON.stringify(obj),
|
}).done(function (result) {
|
top.wcp.notify.success("保存成功！");
|
}));
|
}
|
|
//加载已有的flow
|
function loadFlow() {
|
var designObj = ${flowDefinition.definitionJson};
|
|
if (designObj.width) {
|
pwidth = designObj.width;
|
}
|
if (designObj.height) {
|
pheight = designObj.height;
|
}
|
|
flowDesigner = new FlowDesigner({
|
"id": "container",
|
"width": pwidth,
|
"height": pheight
|
});
|
|
//1.循环建立节点和线段
|
if (designObj.shapes) {
|
$.each(designObj.shapes, function (index, elem) {
|
switch (elem.type) {
|
case "start":
|
var start = flowDesigner.addElement({
|
"type": "start",
|
"cx": elem.cx,
|
"cy": elem.cy,
|
"r": 15,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"parentElem": elem.parentElem
|
});
|
start.content = elem.content || {};
|
|
break;
|
case "userTask":
|
var userTask = flowDesigner.addElement({
|
"type": "userTask",
|
"x": elem.x,
|
"y": elem.y,
|
"w": elem.w,
|
"h": elem.h,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"parentElem": elem.parentElem
|
});
|
userTask.content = elem.content || {};
|
break;
|
case "gateway":
|
var gateway = flowDesigner.addElement({
|
"type": "gateway",
|
"detail": elem.detail,
|
"cx": elem.cx,
|
"cy": elem.cy,
|
"r": 21,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"parentElem": elem.parentElem
|
});
|
gateway.content = elem.content || {};
|
break;
|
case "subProcess":
|
var subProcess = flowDesigner.addElement({
|
"type": "subProcess",
|
"x": elem.x,
|
"y": elem.y,
|
"w": elem.w,
|
"h": elem.h,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text
|
});
|
subProcess.content = elem.content || {};
|
break;
|
case "end":
|
var end = flowDesigner.addElement({
|
"type": "end",
|
"cx": elem.cx,
|
"cy": elem.cy,
|
"r": 15,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"parentElem": elem.parentElem
|
});
|
end.content = elem.content || {};
|
break;
|
case "line": //前提是节点必须先完成,并且能把节点上的线也添加好
|
var startNode = flowDesigner.FindElementById(elem.nodestart);
|
var endNode = flowDesigner.FindElementById(elem.nodeend);
|
var linetype = 0;
|
if (elem.content && elem.content.nodeType) {
|
linetype = elem.content.nodeType;
|
}
|
var line = flowDesigner.addElement({
|
"type": "line",
|
"nodestart": startNode,
|
"nodeend": endNode,
|
"x1": elem.x1,
|
"y1": elem.y1,
|
"x2": elem.x2,
|
"y2": elem.y2,
|
"id": elem.id,
|
"isLoad": true,
|
"text": elem.text,
|
"linestr": elem.linestr,
|
"self": elem.self,
|
"linetype": linetype
|
});
|
line.content = elem.content || {};
|
break;
|
}
|
})
|
|
//2.循环节点添加父节点的实例,父节点添加子节点
|
$.each(flowDesigner.allnodes, function (index, elem) {
|
switch (elem.type) {
|
case "start":
|
case "userTask":
|
case "end":
|
if (elem.parentElemStr) {
|
var parentNode = flowDesigner.FindElementById(elem.parentElemStr);
|
elem.parentElem = parentNode;
|
parentNode.subElement.push(elem);
|
}
|
break;
|
|
}
|
})
|
}
|
|
//去掉加载后所有元素的选中状态
|
flowDesigner.allUnSelect();
|
|
}
|
|
//开始节点编辑后刷新
|
function resetStartNode(index) {
|
var nodestr = $("#hide_node").val();
|
var node = JSON.parse(nodestr);
|
var start = flowDesigner.FindElementById(node.id);
|
$(".taskinput input").val(node.text);
|
start.setText(node.id);
|
layer.close(index);
|
}
|
|
//结束节点编辑后刷新
|
function resetEndNode(index) {
|
var nodestr = $("#hide_node").val();
|
var node = JSON.parse(nodestr);
|
var end = flowDesigner.FindElementById(node.id);
|
$(".taskinput input").val(node.text);
|
end.setText(node.id);
|
layer.close(index);
|
}
|
|
//网关节点编辑后刷新
|
function resetGatewayNode(index) {
|
var nodestr = $("#hide_node").val();
|
var node = JSON.parse(nodestr);
|
var gateway = flowDesigner.FindElementById(node.id);
|
$(".taskinput input").val(node.text);
|
gateway.setText(node.id);
|
layer.close(index);
|
}
|
|
function resetLineNode(index) {
|
var nodestr = $("#hide_node").val();
|
var node = JSON.parse(nodestr);
|
var line = flowDesigner.FindElementById(node.id);
|
$(".taskinput input").val(node.text);
|
if (node.text == "") {
|
line.setNullText();
|
}
|
line.setText(node.id);
|
// for(var prop in node){
|
// line.content[prop]=node[prop];
|
// }
|
line.content = node.content;
|
|
line.recalculatePath();
|
|
layer.close(index);
|
}
|
|
//任务节点
|
function resetUserTask(index) {
|
var nodestr = $("#hide_node").val();
|
var node = JSON.parse(nodestr);
|
var userTask = flowDesigner.FindElementById(node.id);
|
$(".taskinput input").val(node.text);
|
userTask.setText(node.id);
|
userTask.content = node.content;
|
//console.log(node.content);
|
layer.close(index);
|
|
}
|
|
function closeWin(index) {
|
layer.close(index);
|
}
|
</script>
|
</html>
|
