455 lines
16 KiB
PHP
455 lines
16 KiB
PHP
<script src="{{$asset_url}}/vendor/jquery.plumb.min.js" type="text/javascript"></script>
|
||
|
||
<script type="text/javascript">
|
||
var intervalTimer = null;
|
||
var nowStepId = null;
|
||
var normalStepSelector = ".wf-step:not(.wf-step-end)";
|
||
// var normalStepSelector = ".wf-step:not(.wf-step-start,.wf-step-end)";
|
||
|
||
// 判断连接器是否指向了自己
|
||
var isConnectToSelf = function(param) {
|
||
return param.sourceId === param.targetId
|
||
},
|
||
isFromStartToEnd = function(param) {
|
||
return param.sourceId === "step_1" && param.targetId === "step_0"
|
||
},
|
||
// 判断连接步骤是否重复
|
||
stepIsRepeat = function(param){
|
||
// 获取同一scope下的链接器，判断当前链接是否有重复
|
||
var cnts = jsPlumb.getConnections(param.scope);
|
||
if(cnts.length > 0) {
|
||
for(var i = 0, len = cnts.length; i < len; i++) {
|
||
// 如果有链接器 sourceId 及 targetId 都相等，那大概也许可能就相等了。
|
||
if(param.sourceId === cnts[i].sourceId && param.targetId === cnts[i].targetId) {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
return false;
|
||
};
|
||
|
||
// 连接前的事件
|
||
var beforeDropHandler = function(param) {
|
||
|
||
if (isConnectToSelf(param)) {
|
||
toastrError('连接点不能是自己。');
|
||
return false;
|
||
}
|
||
// 连接步骤是否重复
|
||
if (stepIsRepeat(param)) {
|
||
toastrError('连接点已经存在。');
|
||
return false;
|
||
}
|
||
// 连接步骤是结束
|
||
if (isFromStartToEnd(param)) {
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
$(document).ready(function()
|
||
{
|
||
// 获取步骤图
|
||
workStep.init();
|
||
|
||
$('#graph').contextmenu({'target':'#graph-menu'});
|
||
|
||
// 阻止非空白处的右键事件，不出现菜单
|
||
//$container.on("contextmenu", "*", function(evt) {
|
||
//evt.stopPropagation();
|
||
//});
|
||
|
||
// 点击或双击事件,这里进行了一个单击事件延迟，因为同时绑定了双击事件
|
||
$("#rows").on('click', 'div', function() {
|
||
clearTimeout(intervalTimer);
|
||
intervalTimer = setTimeout(function() {
|
||
workStep.click();
|
||
},300);
|
||
|
||
}).on('dblclick', 'div', function(e) {
|
||
nowStepId = $(e.target).attr('step_id');
|
||
clearTimeout(intervalTimer);
|
||
workStep.dblClick('base');
|
||
});
|
||
});
|
||
|
||
var workStep = {
|
||
|
||
init:function() {
|
||
|
||
jsPlumb.reset();
|
||
|
||
jsPlumb.bind("beforeDrop", beforeDropHandler);
|
||
|
||
$.post("{{url('index2')}}",{model_id:'{{$model_id}}'},function(res)
|
||
{
|
||
$('#rows').empty();
|
||
var nLastStepId = 0;
|
||
|
||
if(res.status == true) {
|
||
jsPlumb.importDefaults({
|
||
DragOptions:{cursor:'pointer'},
|
||
ConnectionOverlays:[
|
||
["Arrow",{location:1,id:"arrow",width:10,length:8}]
|
||
],
|
||
Anchor:'Continuous',
|
||
Endpoint :"Blank",
|
||
EndpointStyle:{radius:3,strokeStyle:'#1e8151'},
|
||
HoverPaintStyle:{radius:3,strokeStyle:'#999'},
|
||
ConnectorZIndex:5,
|
||
HoverPaintStyle:workStep.connectorHoverStyle
|
||
});
|
||
|
||
if(!$.support.leadingWhitespace) {
|
||
// ie9以下，用VML画图
|
||
jsPlumb.setRenderMode(jsPlumb.VML);
|
||
} else {
|
||
// 其他浏览器用SVG
|
||
jsPlumb.setRenderMode(jsPlumb.SVG);
|
||
}
|
||
|
||
// 第一次循环，生成页面元素div
|
||
var left = 20;
|
||
var top = 20;
|
||
|
||
var rows = res.data;
|
||
var setd = {};
|
||
|
||
$.each(rows, function(id, row) {
|
||
var title = '<span class="ep">' + (row.option == 1 ? '审核' : '知会') + '</span> ' + row.name;
|
||
if (row.type == 'start') {
|
||
title = '<span class="ep"><i class="icon icon-play"></i></span> ' + row.name;
|
||
} else if(row.type == 'end') {
|
||
title = '<span class="ep"><i class="icon icon-stop"></i></span> ' + row.name;
|
||
}
|
||
|
||
var css = 'wf-step';
|
||
if (row.type == 'start') {
|
||
css = 'wf-step wf-step-start';
|
||
} else if(row.type == 'end') {
|
||
css = 'wf-step wf-step-end';
|
||
}
|
||
|
||
var nodeDiv = document.createElement('div');
|
||
var $node = $(nodeDiv);
|
||
|
||
$node.attr("id", "step_" + row.id)
|
||
.attr("join", row.join)
|
||
.attr("step_id", row.id)
|
||
.css({"left":row.left+'px',"top":row.top+'px',"cursor":"move"})
|
||
.addClass(css)
|
||
.html(title);
|
||
|
||
/*
|
||
$(normalStepSelector).on('mousedown', function(e) {
|
||
|
||
//if(row.number > 0) {
|
||
nowStepId = $(e.target).attr('step_id');
|
||
// $(this).contextmenu({'target':'#step-menu'});
|
||
//}
|
||
//e.stopPropagation();
|
||
});
|
||
*/
|
||
|
||
$("#rows").append($node);
|
||
|
||
// 索引变量
|
||
nLastStepId++;
|
||
|
||
});
|
||
|
||
// 绑定右键操作菜单
|
||
$(normalStepSelector).on('mousedown', function(e) {
|
||
nowStepId = $(e.target).attr('step_id');
|
||
$(this).contextmenu({'target':'#step-menu'});
|
||
// e.stopPropagation();
|
||
});
|
||
|
||
// 使之可拖动
|
||
jsPlumb.draggable($(".wf-step"));
|
||
|
||
$(".ep").each(function(i,e) {
|
||
var p = $(e).parent();
|
||
jsPlumb.makeSource($(e), {
|
||
parent:p,
|
||
anchor:"Continuous",
|
||
endpoint:"Blank",
|
||
paintStyle:{
|
||
strokeStyle:"#3399cc",
|
||
fillStyle:"transparent",
|
||
radius:2,
|
||
lineWidth:2
|
||
},
|
||
// stub 线条弯曲角度 gap 距离节点位置 cornerRadius 线条圆角
|
||
connector:["Flowchart",{stub:[10, 30], gap:0, cornerRadius:3, alwaysRespectStubs:true}],
|
||
connectorStyle:workStep.connectorPaintStyle,
|
||
hoverPaintStyle:workStep.endpointHoverStyle,
|
||
connectorHoverStyle:workStep.connectorHoverStyle,
|
||
dragOptions:{},
|
||
maxConnections:-1
|
||
});
|
||
});
|
||
|
||
// 绑定删除确认操作
|
||
jsPlumb.bind("click", function(e) {
|
||
jsPlumb.detach(e);
|
||
});
|
||
|
||
// 连接关联的步骤
|
||
$('.wf-step').each(function(i) {
|
||
var id = $(this).attr('id');
|
||
var join = $(this).attr('join') || '';
|
||
var joinArray = join.split(",");
|
||
$.each(joinArray,function(j, n) {
|
||
if(n > 0) {
|
||
jsPlumb.connect({source:id, target:"step_"+n});
|
||
}
|
||
})
|
||
});
|
||
|
||
jsPlumb.makeTarget($('.wf-step'), {
|
||
dropOptions: {hoverClass:"dragHover", activeClass:"active"},
|
||
anchor: "Continuous",
|
||
maxConnections: 5
|
||
});
|
||
}
|
||
},'json');
|
||
},
|
||
connectorPaintStyle:{
|
||
lineWidth:2,
|
||
strokeStyle:"#3399cc",
|
||
joinstyle:"round",
|
||
outlineColor:"white",
|
||
dashstyle:"0",
|
||
outlineWidth:2
|
||
},
|
||
connectorHoverStyle:{
|
||
lineWidth:2,
|
||
strokeStyle:"#999999",
|
||
outlineWidth:2,
|
||
dashstyle:"4 1",
|
||
outlineColor:"white"
|
||
},
|
||
endpointHoverStyle:{
|
||
strokeStyle:"#216477"
|
||
},
|
||
// 清空所有连接
|
||
clear:function() {
|
||
jsPlumb.detachEveryConnection();
|
||
jsPlumb.deleteEveryEndpoint();
|
||
},
|
||
// 单击事件
|
||
click:function() {
|
||
if (nowStepId > 0) {
|
||
$('#tree').hide();
|
||
$.post('{{url("show")}}',{id:nowStepId, model_id:'{{$model_id}}'}, function(res) {
|
||
$('#tree').html(res.data).show();
|
||
})
|
||
}
|
||
},
|
||
// 删除步骤
|
||
deleted:function() {
|
||
$.messager.confirm('操作警告','确认要删除该步骤吗?',function(btn) {
|
||
if (btn) {
|
||
$.post('{{url("delete")}}',{id:nowStepId, model_id:'{{$model_id}}'}, function(res) {
|
||
if (res.status) {
|
||
workStep.init();
|
||
toastrSuccess('操作成功');
|
||
}
|
||
},'json');
|
||
}
|
||
|
||
});
|
||
},
|
||
// 克隆步骤
|
||
clone:function() {
|
||
$.messager.confirm('操作警告','确认要克隆该步骤吗?',function(btn) {
|
||
if (btn) {
|
||
$.post('{{url("add")}}',{id:nowStepId,model_id:'{{$model_id}}'},function(data) {
|
||
if(data.status) {
|
||
workStep.init();
|
||
toastrSuccess('操作成功');
|
||
}
|
||
},'json');
|
||
}
|
||
});
|
||
},
|
||
dblClick:function(tab) {
|
||
if (nowStepId > 0) {
|
||
if(tab == 'base') {
|
||
$.dialog({
|
||
title:'基本设置',
|
||
url:'{{url("create")}}?model_id={{$model_id}}&id='+nowStepId+'&tab='+tab,
|
||
dialogClass: 'modal-lg',
|
||
buttons:[{
|
||
class: 'btn-info',
|
||
text:'<i class="fa fa-check-circle"></i> 提交',
|
||
click: function() {
|
||
var formData = $('#mystep').serialize();
|
||
$.post('{{url("create")}}', formData, function(res) {
|
||
if (res.status) {
|
||
workStep.init();
|
||
toastrSuccess('保存当前视图成功');
|
||
}
|
||
},'json');
|
||
$(this).dialog("close");
|
||
}
|
||
},{
|
||
text:'<i class="fa fa-times"></i> 取消',
|
||
click: function() {
|
||
$(this).dialog("close");
|
||
}
|
||
}]
|
||
});
|
||
}
|
||
if (tab == 'condition') {
|
||
$.dialog({
|
||
title:'条件设置',
|
||
url:'{{url("condition")}}?model_id={{$model_id}}&id='+nowStepId+'&tab='+tab,
|
||
dialogClass: 'modal-lg',
|
||
buttons:[{
|
||
class: 'btn-info',
|
||
text:'<i class="fa fa-check-circle"></i> 提交',
|
||
click: function() {
|
||
var formData = $('#conditionform').serialize();
|
||
$.post('{{url("condition")}}', formData, function(res) {
|
||
if (res.status) {
|
||
workStep.init();
|
||
toastrSuccess('保存当前视图成功');
|
||
}
|
||
},'json');
|
||
$(this).dialog("close");
|
||
}
|
||
},{
|
||
text:'<i class="fa fa-times"></i> 取消',
|
||
click: function() {
|
||
$(this).dialog("close");
|
||
}
|
||
}]
|
||
});
|
||
}
|
||
}
|
||
},
|
||
add:function() {
|
||
$.post('{{url("add")}}',{model_id:'{{$model_id}}'},function(res) {
|
||
if (res.status) {
|
||
workStep.init();
|
||
toastrSuccess('操作成功');
|
||
}
|
||
},'json');
|
||
},
|
||
save:function() {
|
||
var join = [],position = [];
|
||
var rows = jsPlumb.getConnections();
|
||
|
||
if (rows.length == 0) {
|
||
toastrError('请先建立连接');
|
||
return;
|
||
}
|
||
|
||
for (var i = 0; i < rows.length; i++) {
|
||
var sourceId = rows[i].sourceId.substring(5);
|
||
var targetId = rows[i].targetId.substring(5);
|
||
join[i] = {id:sourceId,target:targetId};
|
||
}
|
||
|
||
$('#rows div').each(function(i) {
|
||
if(this.id.substring(0,5) == 'step_') {
|
||
var stepId = this.id.substring(5);
|
||
var left = $(this).css('left');
|
||
var top = $(this).css('top');
|
||
position[i] = {'id':stepId,'posX':left,'posY':top};
|
||
}
|
||
});
|
||
|
||
$.post('{{url("save")}}', {join:join,position:position,model_id:'{{$model_id}}'},function(result) {
|
||
if(result.status) {
|
||
toastrSuccess('保存当前视图成功');
|
||
}
|
||
},'json');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content-body {
|
||
margin: 0;
|
||
}
|
||
.col-sm-10 {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
.col-sm-2 {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
}
|
||
</style>
|
||
|
||
<div class="panel">
|
||
|
||
<div class="panel-header">
|
||
<a class="btn btn-sm btn-info" onclick="workStep.add();" href="javascript:;">新建步骤</a>
|
||
<a class="btn btn-sm btn-default" onclick="workStep.init();" href="javascript:;">重新加载</a>
|
||
<a href="javascript:;" onclick="workStep.clear();" class="btn btn-sm btn-default"><i class="fa fa-ban"></i> 清空连接</a>
|
||
</div>
|
||
|
||
<div class="panel-body">
|
||
<div class="m-t-sm">
|
||
<div class="col-sm-10 m-b">
|
||
<div class="graph" id="graph" data-toggle="context" data-target="#graph-menu">
|
||
<div id="rows"></div>
|
||
</div>
|
||
|
||
<div id="graph-menu">
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.add();" href="javascript:;">新建步骤</a></li>
|
||
<li role="presentation" class="divider"></li>
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.save();" href="javascript:;">保存视图</a></li>
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.init();" href="javascript:;">重新加载</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="step-menu">
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.dblClick('base');" href="javascript:;">基本设置</a></li>
|
||
<!--
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.dblClick('handle');" href="javascript:;">经办权限</a></li>
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.dblClick('field');" href="javascript:;">表单字段</a></li>
|
||
-->
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.dblClick('condition');" href="javascript:;">条件设置</a></li>
|
||
<li role="presentation" class="divider"></li>
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.clone();" href="javascript:;">克隆该步骤</a></li>
|
||
<li role="presentation"><a role="menuitem" onclick="workStep.deleted();" href="javascript:;">删除该步骤</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="col-sm-2">
|
||
|
||
<div class="panel panel-default">
|
||
<div class="panel-heading">基本信息</div>
|
||
<div class="panel-body">
|
||
<div id="tree"></div>
|
||
</div>
|
||
<div class="panel-heading b-t">表单字段</div>
|
||
<div class="panel-body">
|
||
<div id="tree"></div>
|
||
</div>
|
||
<div class="panel-heading b-t">办理人员</div>
|
||
<div class="panel-body">
|
||
<div id="tree"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="m-b">
|
||
<a href="javascript:;" onclick="workStep.save();" class="btn btn-lg btn-block btn-info"><i class="fa fa-random"></i> 保存连接和视图</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|