You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

637 lines
26 KiB
Plaintext

11 months ago
<html>
<head>
<title>流程管理</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./icons/font-icons.min.css">
<link rel="stylesheet" type="text/css" href="./icons/icons.css">
<link rel="stylesheet" type="text/css" href="./layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="./layui/css/customer.css">
<script type="text/javascript" src="./js/sortjs/Sortable.min.js"></script>
<!--- 引入代码. -->
<script src="../Scripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./layui/layui.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 src="../Scripts/layui/LayuiDialog.js"></script>
<script type="text/javascript" src="./js/vue/vue.js"></script>
<style>
/* 全局 */
.layui-row{
box-sizing:border-box;
}
.flow {
/*width: 75%;*/
width: 79%;
margin: 20px 10px 10px 5px;
}
.flow .row {
display: flex;
justify-content: flex-start;
flex: 0.2;
height: 40px;
line-height: 40px;
background-color: #FAFAFA;
}
.flow .row .item {
box-sizing: border-box;
flex-shrink: 0;
text-align: center;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
color: #666666;
font-weight: 700
}
.item-name {
width: 40%;
padding-left: 30px;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.item-other {
width: 15%;
}
.item-index {
background-color: #FAFAFA;
padding-right: 40px;
color: #999999
}
.flow .row .folder-item {
box-sizing: border-box;
width: 76%;
padding-left: 20px;
cursor: pointer;
}
.wrapper .row {
background-color: #fff;
}
#s-main {
transition: all ease .4s;
height:20px;
}
/*.fixed {
position: fixed;
top: 50px;*/
/*left: 25%;*/
/*width: 75%;
}*/
/* 左侧菜单栏布局 */
.flow_layout {
border: 1px solid #1010ce;
margin: 20px 10px 0 15px;
width: 225px;
border-radius:5px;
background:#fff;
}
.menu-treetitle {
height: 50px;
line-height: 30px;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
border-bottom: 1px solid #f0f2f5;
}
.layui-tree {
background: #fff;
padding: 15px;
}
/* 右侧内容区域 */
.top-choose {
/*margin-bottom: 15px;*/
/*border-radius: 5px;*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #fff;
border-bottom: 1px solid #f0f2f5;
}
.flow-main {
/*border-radius: 5px;*/
background-color: #fff;
padding: 10px;
}
.top-newflow {
display: flex;
height: 50px;
align-items: center;
}
.flow-menu {
cursor: pointer;
margin: 0 5px;
height: 26px;
line-height:26px;
border-radius: 5px;
padding: 0 10px;
background-color: #316ee6;
color: #fff;
border-color: #316ee6;
}
.flow-menu:hover {
background: #316ee6;
}
</style>
<script type="text/javascript">
var flows;
$(function () {
var webUser = new WebUser();
if (webUser.IsAdmin == false) {
alert("非管理员用户.");
return;
}
var sorts = new Entities("BP.WF.Template.FlowSorts");
sorts.RetrieveAll();
console.log({...sorts})
var rootNo = "0";
if (webUser.CCBPMRunModel == 1 || webUser.CCBPMRunModel == 2)
rootNo = webUser.OrgNo;
if (webUser.No=="admin" )
rootNo = "0";
var data = CoverDataToTree(sorts, rootNo);
layui.tree.render({
elem: '#flowSort'
, data: data
, id: "flowSort"
//, edit: ['add', 'update', 'del'] //操作节点的图标
, click: function (obj) {
//根据id获取流程集合
flows = new Entities("BP.WF.Flows");
flows.Retrieve("FK_FlowSort", obj.data.id);
baseInfo.flows = flows.GetEns().data;
baseInfo.SortNo = obj.data.id;
setTimeout(function () {
baseInfo.bindMenu();
//baseInfo.initSortArea();
}, 800);
}
});
var dropdown = layui.dropdown
console.log(dropdown);
var topNodeItems = [
{ title: '<i class=icon-plus></i> 新建流程', id: "NewFlow", Icon: "icon-plus" },
{ title: '<i class=icon-star></i> 目录属性', id: "EditSort", Icon: "icon-options" },
{ title: '<i class=icon-folder></i> 新建子级目录', id: "NewSort", Icon: "icon-magnifier-add" },
{ title: '<i class=icon-pencil></i> 修改名称', id: "EditSortName", Icon: "icon-magnifier-add" },
{ title: '<i class=icon-share-alt ></i> 导入流程模版', id: "ImpFlowTemplate", Icon: "icon-plus" },
//{ title: '<i class=icon-share-alt ></i> 批量导出流程模版', id: "BatchExpFlowTemplate", Icon: "icon-plus" },
{ title: '<i class=icon-close></i> 删除目录', id: "DeleteSort", Icon: "icon-close" }
]
dropdown.render({
elem: '.layui-tree-txt',
trigger: 'contextmenu',
data: topNodeItems,
click: function (data) {
topNodeOption(data.id, $(this.elem).parent().parent().parent().data().id, $(this.elem)[0].innerHTML)
}
});
var html = "";
html += "<ul class='top-newflow'>";
html += "<li id='NewFlow' class='flow-menu' onclick=\"topNodeOption(id)\">新建流程</li>";
html += "<li id='ImpFlowTemplate' class='flow-menu' onclick=\"topNodeOption(id)\">导入流程模版</li>";
html += "<li id='EditSort' class='flow-menu' onclick=\"topNodeOption(id)\">目录属性</li>";
html += "</ul>";
$("#top-choose").html(html)
})
function topNodeOption(key, flowSortNo, name, idx) {
switch (key) {
case "EditSort":
var url = basePath + "/WF/Comm/EnOnly.htm?EnName=BP.WF.Template.FlowSort&No=" + flowSortNo;
OpenLayuiDialog(url, "目录:" + name, window.innerWidth * 3 / 2, 70, 'auto', true);
break;
case "EditSortName":
var val = prompt("新名称", name);
if (val == null || val == undefined)
return;
var en = new Entity("BP.WF.Template.FlowSort", flowSortNo);
en.Name = val;
en.Update();
layer.msg("修改成功.");
break;
case "ImpFlowTemplate":
var fk_flowSort = data;
url = basePath +"/WF/Admin/AttrFlow/Imp.htm?FK_FlowSort=" + fk_flowSort + "&Lang=CH";
window.top.vm.openTab("导入流程模板", url);
break;
//case "BatchImpFlowTemplate":
// this.BatchImpFlowTemplate(data);
// break;
//case "BatchExpFlowTemplate":
// this.BatchExpFlowTemplate(data, name);
// break;
case "NewSort":
layer.prompt({
value: '',
title: '新建子级流程类别',
}, function (value, index, elem) {
layer.close(index);
var en = new Entity("BP.WF.Template.FlowSort", flowSortNo);
var data = en.DoMethodReturnString("DoCreateSubNodeMy", value);
layer.msg("创建成功" + data);
setTimeout(function () {
window.location.reload();
}, 800);
});
break;
case "DeleteSort":
if (window.confirm("确定要删除吗?") == false)
return;
var en = new Entity("BP.WF.Template.FlowSort", flowSortNo);
var data = en.Delete();
layer.msg(data);
//如果有错误.
if (data.indexOf("err@") == 0)
return;
setTimeout(function () {
window.location.reload()
}, 2000)
break;
case "NewFlow":
url = basePath + "/WF/Admin/CCBPMDesigner/FlowDevModel/Default.htm?SortNo=" + flowSortNo + "&From=FlowTree.htm&RunModel=1&s=" + Math.random();
url += "&UserNo=" + GetQueryString("UserNo");
url += "&Token=" + GetQueryString("Token");
window.open(url);
break;
default:
layer.alert("没有判断的命令" + key);
break;
}
}
function CoverDataToTree(treeJson, rootNo) {
var appendToTree = function (treeToAppend, o) {
$.each(treeToAppend, function (i, child) {
if (o.id == child.ParentNo)
o.children.push({
"id": child.No,
"title": child.Name,
"spread": true,
"children": []
});
});
$.each(o.children, function (i, o) {
appendToTree(treeJson, o);
});
};
var jsonTree = [];
var jsonchildTree = [];
if (treeJson.length > 0 && typeof rootNo !== "undefined") {
$.each(treeJson, function (i, o) {
if (o.ParentNo == rootNo) {
jsonchildTree.push(o);
jsonTree.push({
"id": o.No,
"title": o.Name,
"spread":true,
"children": []
});
}
});
$.each(jsonTree, function (i, o) {
appendToTree(treeJson, o);
});
}
function _(treeArray) {
$.each(treeArray, function (i, o) {
if ($.isArray(o.children)) {
if (o.children.length == 0) {
o.children = undefined;
} else {
_(o.children);
}
}
});
}
_(jsonTree);
return jsonTree;
}
</script>
</head>
<body style="background-color: #f0f2f5; overflow-y: hidden; ">
<div class="layui-row">
<!--流程类别-->
<div class="layui-col-sm3 layui-col-md3 layui-col-xs3 flow_layout" style="border:1px solid #f5f5ff ">
<div class="menu-treetitle"><i class="fa fa-fw icon-grid" style="vertical-align: -1px;"></i>流程</div>
<div id="flowSort" class="" style="width: 100%; height: calc(100%); "></div>
</div>
<!--流程信息-->
<!--<div id="toolBar">
<button> xxx</button>
<button> xxx</button>
<button> xxx</button>
<button> xxx</button>
</div>-->
<div class="layui-col-sm8 layui-col-md8 layui-col-xs4 flow" id="flow" v-cloak>
<div class="top-choose" id="top-choose"></div>
<div class="flow-main">
<div class="row fixed">
<div class="item item-name">流程名称</div>
<div class="item item-other">实例</div>
<div class="item item-other">运行中</div>
<div class="item item-other">退回</div>
<div class="item item-other">操作</div>
</div>
<div ref="child-row" id="s-main">
<div class="row" v-for="(flow,idx) in flows" :key="idx" :data-pid="SortNo" :data-id="flow.No">
<div class="item item-name item-name-dp" @click.stop="Designer(flow.No,flow.Name)" style="text-align: left" :data-no="flow.No" :data-name="flow.Name" :data-idx="idx">
<i class="icon-heart" style="margin-right: 8px"></i>
<span>{{flow.No}}.{{flow.Name}}</span>
</div>
<div class="item item-other"></div>
<div class="item item-other"></div>
<div class="item item-other"></div>
<div class="item item-other">
<button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs c-btn" :data-name="flow.Name" :data-no="flow.No" :data-idx="idx">
<i class="layui-icon layui-icon-down layui-font-12"></i>流程
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var baseInfo = new Vue({
el: '#flow',
data: {
flows: [],
SortNo:""
},
methods: {
bindMenu: function () {
var _this = this
layui.use('dropdown', function () {
var dropdown = layui.dropdown
var childNodeMenuItems = [
{ title: '<i class=icon-star></i> 流程属性', id: "Attr" },
{ title: '<i class=icon-settings></i> 设计流程', id: "Designer" },
{ title: '<i class=icon-plane></i> 测试容器', id: "Start" },
{ title: '<i class=icon-docs></i> 复制流程', id: "Copy" },
{ title: '<i class=icon-pencil></i> 修改名称', id: "EditFlowName" },
{ title: '<i class=icon-close></i> 删除流程', id: "Delete" }
]
var cRenderOptions = [{
elem: '.item-name-dp',
trigger: 'contextmenu',
data: childNodeMenuItems,
click: function (data, othis) {
_this.childNodeOption(data.id, $(this.elem)[0].dataset.no, $(this.elem)[0].dataset.name, $(this.elem)[0].dataset.idx)
}
}, {
elem: '.c-btn',
trigger: 'click',
data: childNodeMenuItems,
click: function (data, othis) {
_this.childNodeOption(data.id, $(this.elem)[0].dataset.no, $(this.elem)[0].dataset.name, $(this.elem)[0].dataset.idx)
}
}]
layui.dropdown.render(cRenderOptions[0]);
layui.dropdown.render(cRenderOptions[1]);
})
},
//如果w=0 则是100%的宽度.
openLayer: function (uri, name, w, h) {
//console.log(uri, name);
if (w == 0)
w = window.innerWidth;
if (w == undefined)
w = window.innerWidth / 2;
if (h == undefined)
h = window.innerHeight;
layer.open({
type: 2,
title: name,
content: [uri, 'no'],
area: [w + 'px', h + 'px'],
offset: 'rb',
shadeClose: true
})
},
Designer: function (no, name) {
var sid = GetQueryString("Token");
var webUser = new WebUser();
var url = basePath + "/WF/Admin/CCBPMDesigner/Designer.htm?FK_Flow=" + no + "&UserNo=" + webUser.No + "&Token=" + sid + "&OrgNo=" + webUser.OrgNo + "&From=Ver2021";
// window.top.vm.openTab(name, url);
var self = WinOpenFull(url, "xx");
var loop = setInterval(function () {
if (self.closed) {
//管理员登录
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_TestingContainer");
handler.AddPara("Token", GetQueryString("Token"));
handler.AddPara("UserNo", GetQueryString("UserNo"));
handler.DoMethodReturnString("Default_LetAdminerLogin");
clearInterval(loop)
}
}, 1);
},
testFlow: function (no, name) {
var url = basePath + "/WF/Admin/TestingContainer/TestFlow2020.htm?FK_Flow=" + no;
//window.top.vm.fullScreenOpen(url, name);
window.top.vm.openTab(name, url);
// this.openLayer(url, name);
},
flowAttr: function (no, name) {
var url = basePath + "/WF/Comm/En.htm?EnName=BP.WF.Template.FlowExt&No=" + no;
window.top.vm.openTab(name, url);
//this.openLayer(url, name,900);
},
copyFlow: function (no) {
if (window.confirm("确定要执行流程复制吗?") == false)
return;
var flow = new Entity("BP.WF.Flow", no);
var data = flow.DoMethodReturnString("DoCopy");
layer.msg(data);
setTimeout(function () {
window.location.reload();
}, 800);
},
EditFlowName(id, name, idx) {
var val = prompt("新名称", name);
if (val == null || val == undefined)
return;
var en = new Entity("BP.WF.Flow", id);
en.Name = val;
en.Update();
this.flows[idx].Name = val;
//Todo:wanglu , 修改名称.
// $("#" + id).val(val);
// var ctl = $("#" + id);
layer.msg("修改成功.");
},
DeleteFlow: function (no, idx) {
var msg = "提示: 确定要删除该流程吗?";
msg += "\t\n1.如果该流程下有实例,您不能删除。";
msg += "\t\n2.该流程为子流程的时候,被引用也不能删除.";
if (window.confirm(msg) == false)
return;
var load = layer.msg("正在处理,请稍候...", {
icon: 16,
anim: 5
})
//开始执行删除.
var flow = new Entity("BP.WF.Flow", no);
var data = flow.DoMethodReturnString("DoDelete");
layer.msg(data);
if (data.indexOf("err@") == 0)
return;
layer.close(load)
this.flows.splice(idx, 1)
//var leaveItems = this.flowNodes[pidx].children
//this.$set(this.flowNodes[pidx], 'children', leaveItems)
},
childNodeOption: function (key, data, name, idx) {
switch (key) {
case "Attr":
this.flowAttr(data, name);
break;
case "Designer":
this.Designer(data, name);
break;
case "Start":
this.testFlow(data, name);
break;
case "Copy":
this.copyFlow(data);
break;
case "EditFlowName":
this.EditFlowName(data, name,idx);
break;
case "Delete":
this.DeleteFlow(data,idx);
break;
}
},
updateFlow(pastNodeArrStr, pastNodeId, currentNodeArrStr, currentNodeId) {
// todo 需要重新实现接口
return;
// 流程排序..
//console.log(pastNodeArrStr, pastNodeId, currentNodeArrStr, currentNodeId);
// return;
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Portal");
handler.AddPara("SortNo", sortNo); //所在的组编号.
handler.AddPara("EnNos", flowNos); // 流程编号.
var data = handler.DoMethodReturnString("Flows_Move");
layer.msg(data)
},
initSortArea: function () {
var _this = this
this.$nextTick(function () {
var childSortableContainers = this.$refs['child-row']
console.log(childSortableContainers);
for (var i = 0; i < childSortableContainers.length; i++) {
var csc = childSortableContainers[i]
new Sortable(csc, {
group: {
name: 'shared'
},
animation: 150,
dataIdAttr: 'data-id',
ghostClass: 'blue-background-class',
onStart: function ( /**Event*/ evt) {
_this.loadingDialog = layer.msg('正在移动...', {
timeout: 900 * 1000
})
},
onEnd: function (evt) {
/**
* 这里区分两种情况,一种是跨列移动,一种非跨列移动
* 如果跨列移动,可以利用以下四个参数来实现
*
* @param pastNodeArrStr 被移出的列的子节点排序
* @param pastNodeId 被移出的列的节点id
* @param currentNodeArrStr 移入的列的子节点排序
* @param currentNodeId 移入的列的节点id
*
* 假如非跨列,此时被移出的和移入的为同一个,使用前两个参数或者后两个参数都可以实现
*/
layer.close(_this.loadingDialog)
var pastNodeArrStr = Array.from(evt.from.querySelectorAll('div[data-id]')).map(function (item) {
return item.dataset.id
}).join(',')
var pastNodeId = evt.from.dataset.pid
var currentNodeArrStr = Array.from(evt.to.querySelectorAll('div[data-id]')).map(function (item) {
return item.dataset.id
}).join(',')
var currentNodeId = evt.to.dataset.pid
// 二级菜单的排序
_this.updateFlow(pastNodeArrStr, pastNodeId, currentNodeArrStr, currentNodeId)
// 二级菜单的排序
// _this.updateFlow(evt.item.dataset.pid, arr.join(','));
}
})
}
})
}
},
mounted: function () {
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
}
})
</script>
</body>
</html>