|
|
<!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>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
<link rel="stylesheet" type="text/css" href="../../Portal/icons/font-icons.min.css" />
|
|
|
<script type="text/javascript" src="../../Portal/js/sortjs/Sortable.min.js"></script>
|
|
|
<!--- 引入代码. -->
|
|
|
<script src="../../Scripts/jquery/jquery.min.js"></script>
|
|
|
<script src="../../Scripts/QueryString.js" type="text/javascript"></script>
|
|
|
<script src="../../Scripts/config.js" type="text/javascript"></script>
|
|
|
<script src="../../Comm/Gener.js" type="text/javascript"></script>
|
|
|
<script type="text/javascript" src="../../Portal/js/vue/vue.js"></script>
|
|
|
<script src="../../Scripts/layui/LayuiDialog.js"></script>
|
|
|
<script src="../../Scripts/layui/layui/layui.js"></script>
|
|
|
<link href="../../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
|
|
|
|
|
|
<base target="_self" />
|
|
|
<style>
|
|
|
.method {
|
|
|
width: 98%;
|
|
|
margin: 10px auto;
|
|
|
}
|
|
|
|
|
|
.method .row {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
flex: 0.2;
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
background-color: #FAFAFA;
|
|
|
}
|
|
|
|
|
|
.method .row .item {
|
|
|
box-sizing: border-box;
|
|
|
flex-shrink: 0;
|
|
|
text-align: center;
|
|
|
border-right: 1px solid #eee;
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
|
|
|
.item-num {
|
|
|
width: 10%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.item-nodeid {
|
|
|
width: 10%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.item-other {
|
|
|
width: 40%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.method .row .folder-item {
|
|
|
box-sizing: border-box;
|
|
|
width: 80%;
|
|
|
padding-left: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.wrapper .row {
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
#s-main {
|
|
|
transition: all ease .4s;
|
|
|
margin-top: 50px;
|
|
|
}
|
|
|
|
|
|
.fixed {
|
|
|
position: fixed;
|
|
|
top: 10px;
|
|
|
left: 1%;
|
|
|
width: 98%;
|
|
|
}
|
|
|
|
|
|
[v-cloak] {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.layui-input-block > .layui-form-switch {
|
|
|
margin-top: 0 !important;
|
|
|
}
|
|
|
|
|
|
.method fieldset {
|
|
|
padding: 0px;
|
|
|
margin: 20px 0px 18px;
|
|
|
font-size: 14px;
|
|
|
border: 1px solid #e6e6e6;
|
|
|
}
|
|
|
|
|
|
.method fieldset img {
|
|
|
margin: 10px;
|
|
|
max-width: calc(100% - 20px)
|
|
|
}
|
|
|
|
|
|
.method legend {
|
|
|
margin-left: 20px;
|
|
|
font-size: 15px;
|
|
|
width: auto;
|
|
|
}
|
|
|
|
|
|
.method legend label {
|
|
|
cursor: pointer;
|
|
|
padding: 0 10px;
|
|
|
font-family: "iconfont";
|
|
|
position: relative
|
|
|
}
|
|
|
|
|
|
.method fieldset ul {
|
|
|
padding: 15px;
|
|
|
line-height: 28px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div class="method" id="method" v-cloak=v-cloak>
|
|
|
<div class="row fixed">
|
|
|
<div class="item item-num"><i class="icon-app"></i> 顺序号</div>
|
|
|
<div class="item item-nodeid">从节点ID</div>
|
|
|
<div class="item item-nodeid">到节点ID</div>
|
|
|
<div class="item item-other">名称(顺序支持拖动.)</div>
|
|
|
</div>
|
|
|
<div class="wrapper" id="s-main" ref="child-row">
|
|
|
<div v-for="(flows,index) in flows" :key="index" :data-id="flows.MyPK">
|
|
|
<div class="row item-name-dp" :data-id="flows.MyPK" :data-idx="index">
|
|
|
<div class="item item-num item-index" style="text-align: right;">{{index + 1}}</div>
|
|
|
<div class="item item-nodeid">
|
|
|
<span> <font color="blue">{{flows.Node}}</font></span>
|
|
|
</div>
|
|
|
<div class="item item-nodeid">
|
|
|
<span> <font color="blue">{{flows.ToNode}}</font></span>
|
|
|
</div>
|
|
|
<div class="item item-other">{{flows.Name}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<fieldset id="help">
|
|
|
<legend id="help"><label> 什么是方向条件的优先级?</label></legend>
|
|
|
<ul>
|
|
|
<li>在转向中，如果出现一个以上的路线都成立时时，系统就会按照第一个路线来计算，那一个排列最前面就按照那一个计算。</li>
|
|
|
<li>例如：在demo中002.请假流程，如果一个人员既有基层岗，也有中层岗那么到达基层与中层的路线都会成立，如果设置了方向条件的优先级，系统就会按照优先满足的条件的路线计算。</li>
|
|
|
<li>只有一个方向条件的小于等于1就不能设置。</li>
|
|
|
</ul>
|
|
|
</fieldset>
|
|
|
</div>
|
|
|
<script>
|
|
|
new Vue({
|
|
|
el: '#method',
|
|
|
data: {
|
|
|
flows: [],
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
MoveItem(currentNodeArrStr, currentNodeId) {
|
|
|
|
|
|
//alert(currentNodeArrStr);
|
|
|
//return;
|
|
|
|
|
|
// todo 需要重新实现接口
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_Cond");
|
|
|
handler.AddPara("MyPKs", currentNodeArrStr);
|
|
|
handler.AddPara("FK_Node", GetQueryString("FK_Node"));
|
|
|
|
|
|
var data = handler.DoMethodReturnString("CondPRI_Move");
|
|
|
layer.msg(data);
|
|
|
},
|
|
|
initSortArea: function () {
|
|
|
var _this = this
|
|
|
this.$nextTick(function () {
|
|
|
var childSortableContainers = this.$refs['child-row']
|
|
|
|
|
|
new Sortable(childSortableContainers, {
|
|
|
animation: 150,
|
|
|
dataIdAttr: 'data-id',
|
|
|
ghostClass: 'blue-background-class',
|
|
|
onStart: function ( /**Event*/ evt) {
|
|
|
_this.loadingDialog = layer.msg('正在移动...', {
|
|
|
timeout: 900 * 1000
|
|
|
})
|
|
|
},
|
|
|
onEnd: function (evt) {
|
|
|
/**
|
|
|
* 这里区分两种情况，一种是跨列移动，一种非跨列移动
|
|
|
* 如果跨列移动，可以利用以下四个参数来实现
|
|
|
*
|
|
|
|
|
|
* @param currentNodeArrStr 移入的列的子节点排序
|
|
|
* @param currentNodeId 移入的列的节点id
|
|
|
*
|
|
|
* 假如非跨列，此时被移出的和移入的为同一个，使用前两个参数或者后两个参数都可以实现
|
|
|
*/
|
|
|
layer.close(_this.loadingDialog)
|
|
|
var currentNodeArrStr = Array.from(evt.to.querySelectorAll('div[data-id]')).map(function (item) {
|
|
|
return item.dataset.id
|
|
|
}).join(',')
|
|
|
var currentNodeId = evt.to.dataset.id
|
|
|
// 二级菜单的排序
|
|
|
_this.MoveItem(currentNodeArrStr, currentNodeId)
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
//查询
|
|
|
|
|
|
},
|
|
|
mounted: function () {
|
|
|
|
|
|
// fix firefox bug
|
|
|
document.body.ondrop = function (event) {
|
|
|
event.preventDefault();
|
|
|
event.stopPropagation();
|
|
|
}
|
|
|
//获得数据源.
|
|
|
var fk_flow = GetQueryString("FK_Flow");
|
|
|
var fk_Node = GetQueryString("FK_Node");
|
|
|
|
|
|
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_Cond");
|
|
|
handler.AddUrlData();
|
|
|
|
|
|
var data = handler.DoMethodReturnString("CondPRI_Init");
|
|
|
if (data.indexOf('err@') == 0) {
|
|
|
$("#Msg").html("<font color=red>加载失败:<br>" + data + "</font> .");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (data.indexOf('info@') == 0) {
|
|
|
$("#Msg").html("<font >提示:<br>" + data + "</font> .");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
//转json.
|
|
|
var conds = JSON.parse(data);
|
|
|
console.log(conds);
|
|
|
for (var i = 0; i < conds.length; i++) {
|
|
|
var cond = conds[i];
|
|
|
var nd = new Entity("BP.WF.Template.NodeSimple", cond.ToNode);
|
|
|
cond.Name = nd.Name;
|
|
|
}
|
|
|
this.flows = conds;
|
|
|
|
|
|
this.initSortArea();
|
|
|
layui.use('form', function () {
|
|
|
var form = layui.form;
|
|
|
form.render()
|
|
|
|
|
|
});
|
|
|
var _this = this
|
|
|
setTimeout(function () {
|
|
|
_this.expandAll = true
|
|
|
}, 300)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|