hawind/gdoo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

创建版本

Browse Source
This commit is contained in:
hawind
2021-02-22 12:17:00 +08:00
commit af555f49c3
2332 changed files with 369202 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Gdoo/Model/views/step/condition.php
+145
View File
@@ -0,0 +1,145 @@
<form method="post" action="<?php echo url(); ?>" id="conditionform" name="conditionform">
<?php
if (sizeof($steps)):
foreach ($steps as $step):
?>
<div class="panel">
<table id="Condition<?php echo $step->id; ?>Ctrl" class="table table-form table-condensed table-hover">
<thead>
<tr>
<th colspan="7" align="left">转入: <?php echo $step->name; ?></th>
</tr>
<tr>
<th align="center">左括号</th>
<th align="center">字段</th>
<th align="center">条件</th>
<th>值</th>
<th>函数</th>
<th align="center">右括号</th>
<th align="center">逻辑</th>
<th align="center">
<a @click="create();" class="btn btn-xs btn-default"><i class="icon icon-plus"></i></a>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in items">
<td>
<select :name="'condition[<?php echo $step->id; ?>]['+index+'][l]'" v-model="item.l" class="input-sm form-control">
<option value=""></option>
<option value="(">(</option>
</select>
</td>
<td>
<select :name="'condition[<?php echo $step->id; ?>]['+index+'][f]'" v-model="item.f" class="input-sm form-control">
<option value=""></option>
<?php
foreach ($columns as $table => $column):
foreach ($column['data'] as $field):
?>
<?php if ($field['auto'] == 1): ?>
<option value="<?php echo $field['field']; ?>"><?php echo $field['name']; ?></option>
<?php else: ?>
<option value="<?php echo $table; ?>.<?php echo $field['field']; ?>">
<?php if ($column['master'] == 0): ?>[<?php echo $column['name']; ?>]<?php endif; ?>
<?php echo $field['name']; ?>
</option>
<?php endif; ?>
<?php
endforeach;
endforeach;
?>
</select>
</td>
<td>
<select :name="'condition[<?php echo $step->id; ?>]['+index+'][c]'" v-model="item.c" class="input-sm form-control">
<option value=""></option>
<option value="==">等于</option>
<option value="<>">不等于</option>
<option value=">">大于</option>
<option value="<">小于</option>
<option value=">=">大于等于</option>
<option value="<=">小于等于</option>
<!--
<option value="like">包含</option>
<option value="not like">不包含</option>
-->
</select>
</td>
<td>
<input :name="'condition[<?php echo $step->id; ?>]['+index+'][v]'" v-model="item.v" class="input-sm form-control">
</td>
<td>
<select :name="'condition[<?php echo $step->id; ?>]['+index+'][t]'" v-model="item.t" class="input-sm form-control">
<option value=""></option>
<option value="sum">SUM(合计)</option>
<option value="count">COUNT(行数)</option>
</select>
</td>
<td>
<select :name="'condition[<?php echo $step->id; ?>]['+index+'][r]'" v-model="item.r" class="input-sm form-control">
<option value=""></option>
<option value=")">)</option>
</select>
</td>
<td>
<select :name="'condition[<?php echo $step->id; ?>]['+index+'][i]'" v-model="item.i" class="input-sm form-control">
<option value=""></option>
<option value="and">and</option>
<option value="or">or</option>
</select>
</td>
<td align="center">
<a @click="remove(index);" data-condition="delete" class="btn btn-xs btn-default"><i class="icon icon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<?php
endforeach;
endif;
?>
<script type="text/javascript">
<?php foreach ($steps as $step): ?>
var conditionCtrl = {
data() {
return {
items: <?php echo json_encode((array)$condition[$step->id]); ?>
}
},
methods: {
create: function() {
var item = {};
this.items.push(item);
},
remove: function(index) {
this.items.splice(index, 1);
}
}
};
Vue.createApp(conditionCtrl).mount('#Condition<?php echo $step->id; ?>Ctrl');
<?php endforeach; ?>
$('#myform').submit(function () {
var url = $(this).attr('action');
var data = $(this).serialize();
$.post(url, data, function (res) {
if (res.status) {
toastrSuccess(res.data);
} else {
toastrError(res.data);
}
}, 'json');
return false;
});
</script>
<input type="hidden" name="id" value="<?php echo $row->id; ?>">
<input type="hidden" name="model_id" value="<?php echo $model->id; ?>">
</form>
</div>
app/Gdoo/Model/views/step/create.blade.php
+173
View File
@@ -0,0 +1,173 @@
<form method="post" action="{{url()}}" id="mystep" name="mystep">
<div class="panel">
<table class="table table-form">
<tr>
<td align="right" width="10%">节点名称<span class="red">*</span></td>
<td>
<input type="text" id="name" name="name" value="{{$row->name}}" class="form-control input-sm">
</td>
</tr>
@if($row->type != 'start')
<tr>
<td align="right">执行目标</td>
<td>
<select class="form-control input-sm" name="type" id="type">
<!--
<option value="start" @if($row->type == 'start') selected @endif>开始</option>
-->
<option value=""> - </option>
<option value="leader" @if($row->type == 'leader') selected @endif>直属领导</option>
<option value="manager" @if($row->type == 'manager') selected @endif>部门主管</option>
<option value="team1" @if($row->type == 'team1') selected @endif>销售组1级</option>
<option value="team2" @if($row->type == 'team2') selected @endif>销售组2级</option>
<option value="team3" @if($row->type == 'team3') selected @endif>销售组3级</option>
<option value="team4" @if($row->type == 'team4') selected @endif>销售组4级</option>
<option value="team5" @if($row->type == 'team5') selected @endif>销售组5级</option>
<option value="team6" @if($row->type == 'team6') selected @endif>销售组6级</option>
<option value="team7" @if($row->type == 'team7') selected @endif>销售组7级</option>
<option value="team8" @if($row->type == 'team8') selected @endif>销售组8级</option>
<option value="team9" @if($row->type == 'team9') selected @endif>销售组9级</option>
<option value="team10" @if($row->type == 'team10') selected @endif>销售组10级</option>
<option value="user" @if($row->type == 'user') selected @endif>指定办理人</option>
<option value="role" @if($row->type == 'role') selected @endif>指定角色</option>
<option value="created_id" @if($row->type == 'created_id') selected @endif>单据创建人ID</option>
<option value="field" @if($row->type == 'field') selected @endif>指定字段</option>
<option value="position" @if($row->type == 'position') selected @endif>职位</option>
<option value="custom" @if($row->type == 'custom') selected @endif>自定义</option>
</select>
</td>
</tr>
<tr>
<td align="right">执行规则</td>
<td>
<?php $type_value = ($row->type == 'field' ? '' : $row->type_value); ?>
<span id="type_user" class="type" style="display:none;">
{{App\Support\Dialog::user('user','type_value[user]', $type_value, 1, 0)}}
</span>
<span id="type_role" class="type" style="display:none;">
{{App\Support\Dialog::user('role','type_value[role]', $type_value, 1, 0)}}
</span>
<span id="type_field" class="type" style="display:none;">
<select class="form-control input-sm" name="type_value[field]">
@if($columns[$model->table]['fields'])
@foreach($columns[$model->table]['fields'] as $column)
<option value="{{$column->field}}" @if($row->type_value == $column->field) selected @endif>{{$column->name}}</option>
@endforeach
@endif
</select>
</span>
<label class="checkbox-inline m-t-xs">
<input name="select_org" type="checkbox" value="1" @if($row->select_org == 1) checked @endif>允许选择组织中人员
</label>
<div class="m-t-xs">
匹配不到人:
<select class="form-control input-sm input-inline" name="nouser" id="nouser">
<option value="0" @if($row->nouser == 0) selected @endif>由上节点选择执行人</option>
<option value="1" @if($row->nouser == 1) selected @endif>自动跳过</option>
<option value="2" @if($row->nouser == 2) selected @endif>转给指定人</option>
</select>
<span class="nouser" id="nouser_2" style="display:none;">
<span class="form-inline">
{{App\Support\Dialog::user('user','nouser_user_id', $row->nouser_user_id, 0, 0)}}
</span>
</span>
</div>
</td>
</tr>
@endif
<tr>
<td align="right">执行模式</td>
<td>
<select class="form-control input-sm" name="run_mode" id="run_mode">
<option value="1" @if($row->run_mode == 1) selected @endif>单人执行</option>
<option value="2" @if($row->run_mode == 2) selected @endif>多人执行</option>
<option value="3" @if($row->run_mode == 3) selected @endif>全体执行</option>
<option value="4" @if($row->run_mode == 4) selected @endif>竞争执行</option>
</select>
</td>
</tr>
<tr>
<td align="right">节点类型</td>
<td>
<select class="form-control input-sm" name="option" id="option">
<option value="1" @if($row->option == 1) selected @endif>审核</option>
<option value="0" @if($row->option == 0) selected @endif>知会</option>
</select>
</td>
</tr>
<tr>
<td align="right">表单权限</td>
<td>
<select class="form-control input-sm" name="permission_id" id="permission_id">
<option value=""> - </option>
@foreach($permissions as $permission)
<option value="{{$permission['id']}}" @if($row->permission_id == $permission['id']) selected @endif>{{$permission['name']}}</option>
@endforeach
</select>
</td>
</tr>
<tr>
<td align="right">节点提醒</td>
<td>
<label class="checkbox-inline">
<input name="notify[sms]" type="checkbox" id="notify-sms" value="1" @if($row->notify['sms'] == 1) checked @endif>短信
</label>
</td>
</tr>
@if($row->type != 'start')
<tr>
<td align="right">节点退回</td>
<td>
<select class="form-control input-sm" name="back" id="back">
<option value="0" @if($row->back == '0') selected @endif>无</option>
<option value="1" @if($row->back == '1') selected @endif>上一步</option>
</select>
</td>
</tr>
@endif
</table>
</div>
<input type="hidden" name="id" value="{{$row->id}}">
<input type="hidden" name="bill_id" value="{{$bill->id}}">
</form>
<script type="text/javascript">
$(function() {
userType('{{$row->type}}');
nouserType('{{$row->nouser}}');
$('#type').on('change', function() {
userType(this.value);
});
$('#nouser').on('change', function() {
nouserType(this.value);
});
});
function nouserType(value) {
value = value || '';
$('.nouser').hide();
$('#nouser_' + value).show();
}
function userType(type) {
type = type || '';
$('.type').hide().prop('disabled', true);
$('#type_' + type).show().prop('disabled', false);
}
</script>
app/Gdoo/Model/views/step/index.blade.php
+49
View File
@@ -0,0 +1,49 @@
<div class="panel">
@include('query')
<table class="table table-hover b-t" id="table-sortable" url="{{url()}}">
<tr>
<th align="left">节点名称</th>
<th align="left">转入节点</th>
<th align="center">执行目标</th>
<th align="center">节点类型</th>
<th align="center">节点颜色</th>
<th align="center">ID</th>
<th align="center"></th>
</tr>
@foreach($rows as $row)
<tr id="{{$row->id}}">
<td align="left" @if($row->type != "end" && $row->type != "start") class="move" @endif>
@if($row->sn > 1)
<span class="badge badge-bg">{{$row->sn}}</span>
@endif
{{$row->name}}
</td>
<td align="left">
<?php $joins = explode(',', $row->join); ?>
@foreach($joins as $id)
{{$rows[$id]['name']}}
@endforeach
</td>
<td align="center">{{$row->type}}</td>
<td align="center">@if($row->option == 1) 审核 @else 知会 @endif</td>
<td align="center"><span class="label label-{{$row->color}}">{{$row->color}}</span></td>
<td align="center">{{$row->id}}</td>
<td align="center">
@if($row->type != 'end')
<?php $condition = json_decode($row->condition, true); ?>
<a class="option" href="{{url('condition',['model_id'=>$model->id,'id'=>$row->id])}}">条件({{count($condition)}})</a>
<a class="option" href="{{url('create',['model_id'=>$model->id,'id'=>$row->id])}}">编辑</a>
@endif
@if($row->sn > 1)
<a class="option" onclick="app.confirm('{{url('delete',['id'=>$row->id])}}','确定要删除吗？');" href="javascript:;">删除</a>
@endif
</td>
</tr>
@endforeach
</table>
</form>
</div>
app/Gdoo/Model/views/step/index2.blade copy.php
+454
View File
@@ -0,0 +1,454 @@
<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>&nbsp;' + row.name;
if (row.type == 'start') {
title = '<span class="ep"><i class="icon icon-play"></i></span>&nbsp;' + row.name;
} else if(row.type == 'end') {
title = '<span class="ep"><i class="icon icon-stop"></i></span>&nbsp;' + 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>
app/Gdoo/Model/views/step/index2.blade.php
+441
View File
@@ -0,0 +1,441 @@
<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')}}",{bill_id:'{{$bill_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>&nbsp;' + row.name;
if (row.type == 'start') {
title = '<span class="ep"><i class="icon icon-play"></i></span>&nbsp;' + row.name;
} else if(row.type == 'end') {
title = '<span class="ep"><i class="icon icon-stop"></i></span>&nbsp;' + 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, bill_id:'{{$bill_id}}'}, function(res) {
$('#tree').html(res.data).show();
})
}
},
// 删除步骤
deleted:function() {
$.messager.confirm('操作警告','确认要删除该步骤吗?',function(btn) {
if (btn) {
$.post('{{url("delete")}}',{id:nowStepId, bill_id:'{{$bill_id}}'}, function(res) {
if (res.status) {
workStep.init();
toastrSuccess('操作成功');
}
},'json');
}
});
},
// 克隆步骤
clone:function() {
$.messager.confirm('操作警告','确认要克隆该步骤吗?',function(btn) {
if (btn) {
$.post('{{url("add")}}',{id:nowStepId,bill_id:'{{$bill_id}}'},function(data) {
if(data.status) {
workStep.init();
toastrSuccess('操作成功');
}
},'json');
}
});
},
dblClick:function(tab) {
if (nowStepId > 0) {
if(tab == 'base') {
$.dialog({
title:'基本设置',
url:'{{url("create")}}?bill_id={{$bill_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")}}?bill_id={{$bill_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")}}',{bill_id:'{{$bill_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,bill_id:'{{$bill_id}}'},function(result) {
if(result.status) {
toastrSuccess('保存当前视图成功');
}
},'json');
}
}
</script>
<style>
html { overflow: hidden; }
.form-panel-body {
overflow: hidden;
}
.graph-box {
overflow: auto;
width: 100vw;
height: calc(100vh - 48px);
}
.content-body {
margin: 0;
}
.font-thin {
padding: 10px;
padding-bottom: 0;
font-size: 14px;
}
</style>
<div class="form-panel">
<div class="form-panel-header">
<div class="pull-right m-r-sm">
<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>
<a href="javascript:;" onclick="workStep.save();" class="btn btn-sm btn-info"><i class="fa fa-random"></i> 保存连接和视图</a>
<a class="btn btn-sm btn-default" data-toggle="closetab" data-id="flow_step_index2"><i class="fa fa-sign-out"></i> 退出</a>
</div>
<div class="font-thin">
<i class="fa fa-file-text-o"></i> {{$bill['name']}}流程
</div>
</div>
<div class="form-panel-body">
<div class="wrapper-xs graph-box">
<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>
<div class="clearfix"></div>
</div>
</div>
</div>
app/Gdoo/Model/views/step/move.blade.php
+41
View File
@@ -0,0 +1,41 @@
<div class="panel">
<form class="form-horizontal" method="post" action="{{url()}}" id="moveform" name="moveform">
<div class="table-responsive">
<table class="table table-form">
<tr>
<td align="right">工作步骤</td>
<td align="left">
<select id="batch_status" class="form-control input-sm">
<option value=""> - </option>
<option value="0">未发放</option>
<option value="1">已发放</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="15%">主办人</td>
<td align="left">
{{App\Support\Dialog::user('user','user_id', '', 0, 0)}}
</td>
</tr>
<tr>
<td align="right">工作状态</td>
<td align="left">
<select id="batch_status" class="form-control input-sm">
<option value="0">未办理</option>
<option value="1">已办理</option>
<option value="2">全部</option>
</select>
</td>
</tr>
<tr>
<td align="right">描述</td>
<td align="left">
<textarea class="form-control" id="batch_description"></textarea>
</td>
</tr>
</table>
<input type="hidden" name="id" value="{{$row->id}}">
</form>
</div>
</div>