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.
813 lines
33 KiB
Plaintext
813 lines
33 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 src="../Scripts/layui/layui/layui.js"></script>
|
||
|
|
<link href="../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
|
||
|
|
<script type="text/javascript" src="./js/vue/vue.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* 全局 */
|
||
|
|
.layui-row {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flow {
|
||
|
|
/*width: 75%;*/
|
||
|
|
width: 78.5%;
|
||
|
|
margin: 10px 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 {
|
||
|
|
padding:0 20px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
flex-shrink: 0;
|
||
|
|
/*text-align: center;*/
|
||
|
|
border-right: 1px solid #eee;
|
||
|
|
border-bottom: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-title {
|
||
|
|
color: #666666;
|
||
|
|
font-weight: 700;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-name {
|
||
|
|
width: 25%;
|
||
|
|
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;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
/*.fixed {
|
||
|
|
position: fixed;
|
||
|
|
top: 50px;*/
|
||
|
|
/*left: 25%;*/
|
||
|
|
/*width: 75%;
|
||
|
|
}*/
|
||
|
|
/* 左侧菜单栏布局 */
|
||
|
|
.flow_layout {
|
||
|
|
border: 1px solid #1010ce;
|
||
|
|
margin: 10px 10px 0 15px;
|
||
|
|
width: 225px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-treetitle {
|
||
|
|
height: 50px;
|
||
|
|
line-height: 30px;
|
||
|
|
font-size: 16px;
|
||
|
|
padding: 10px 10px 10px 15px;
|
||
|
|
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;
|
||
|
|
display:flex;
|
||
|
|
justify-content:space-between;
|
||
|
|
align-items:center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flow-main {
|
||
|
|
/*border-radius: 5px;*/
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 10px;
|
||
|
|
height: 87%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-newflow {
|
||
|
|
display: flex;
|
||
|
|
height: 50px;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-tree-set-active > .layui-tree-entry .layui-tree-main {
|
||
|
|
color: #000;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
.item-omit {
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
.item-finger {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.search-inp {
|
||
|
|
margin-left: 10px;
|
||
|
|
margin-right: 10px;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.cc-btn-tab {
|
||
|
|
height: 26px;
|
||
|
|
padding: 0 10px;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-left: 10px;
|
||
|
|
line-height: 26px;
|
||
|
|
font-size: 14px;
|
||
|
|
background: #316ee6 !important;
|
||
|
|
border-color: #316ee6 !important;
|
||
|
|
border-radius: 5px;
|
||
|
|
color: #fff !important;
|
||
|
|
}
|
||
|
|
.cc-btn-tab:hover {
|
||
|
|
background: #316ee6 !important;
|
||
|
|
}
|
||
|
|
.left-search{
|
||
|
|
display:flex;
|
||
|
|
align-items:center;
|
||
|
|
|
||
|
|
}
|
||
|
|
.search-font {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
var flows;
|
||
|
|
var flowSortNo;
|
||
|
|
var nameTitle;
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
var webUser = new WebUser();
|
||
|
|
if (webUser.IsAdmin == false) {
|
||
|
|
alert("非管理员用户.");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var sorts = new Entities("BP.WF.Template.FlowSorts");
|
||
|
|
sorts.RetrieveAll();
|
||
|
|
var rootNo = "0";
|
||
|
|
if (webUser.CCBPMRunModel == 1 || webUser.CCBPMRunModel == 2)
|
||
|
|
rootNo = webUser.OrgNo;
|
||
|
|
if (webUser.No == "admin")
|
||
|
|
rootNo = "0";
|
||
|
|
var data = CoverDataToTree(sorts, rootNo);
|
||
|
|
|
||
|
|
tree = layui.tree.render({
|
||
|
|
elem: '#flowSort'
|
||
|
|
, data: data
|
||
|
|
, id: "flowSort"
|
||
|
|
//, edit: ['add', 'update', 'del'] //操作节点的图标
|
||
|
|
, click: function (obj) {
|
||
|
|
flowSortNo = obj.data.id;
|
||
|
|
$("#EditSort").text("属性：" + obj.data.title);
|
||
|
|
nameTitle = obj.data.title;
|
||
|
|
//根据id获取流程集合
|
||
|
|
flows = new Entities("BP.WF.Flows");
|
||
|
|
flows.Retrieve("FK_FlowSort", obj.data.id);
|
||
|
|
console.log(flows);
|
||
|
|
for (var i = 0; i < flows.length; i++) {
|
||
|
|
|
||
|
|
flows[i].FlowDevModel = getFlowDevModelText(flows[i].FlowDevModel)
|
||
|
|
}
|
||
|
|
baseInfo.flows = flows.GetEns().data;
|
||
|
|
baseInfo.SortNo = obj.data.id;
|
||
|
|
//点击时产生节点产生flowSortNo显示
|
||
|
|
$('#NewSortOne').show();
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
baseInfo.bindMenu();
|
||
|
|
//baseInfo.initSortArea();
|
||
|
|
}, 800);
|
||
|
|
// 点击高亮
|
||
|
|
$(".layui-tree-set").removeClass('layui-tree-set-active');
|
||
|
|
obj.elem.addClass('layui-tree-set-active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//默认选中父节点
|
||
|
|
tree.setChecked('flowSort', data[0].id);
|
||
|
|
var parentNodeElem = $('.layui-tree-set[data-id="' + data[0].id + '"]>.layui-tree-entry>.layui-tree-main>.layui-tree-txt');
|
||
|
|
parentNodeElem.click().click();
|
||
|
|
|
||
|
|
var dropdown = layui.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 += "<div class='left-search'>"
|
||
|
|
html += "<li class='search-font'><span style='margin-left: 15px;line-height:25px;'>关键字：</span><div style='width: 190px; border-width: 1px; border-style: solid; background-color: #fff; border-color: #eee; '><input id='searchKey' name='searchKey' type='text' style='margin-left: 5px; height: 23px;border:none;outline:none;' /></div></li>";
|
||
|
|
html += "<li class='cc-btn-tab' id='SearchBtn' onclick=\"SearchEmp(flows)\">搜索</li>";
|
||
|
|
html+= "</div>"
|
||
|
|
html += "<ul class='top-newflow'>";
|
||
|
|
html += "<li id='EditSort' class='flow-menu' onclick=\"topNodeOption(id,flowSortNo,nameTitle)\">属性名称</li>";
|
||
|
|
html += "<li id='NewFlow' class='flow-menu' onclick=\"topNodeOption(id,flowSortNo,nameTitle)\">新建流程</li>";
|
||
|
|
html += "<li id='ImpFlowTemplate' class='flow-menu' onclick=\"topNodeOption(id,flowSortNo,nameTitle)\">导入模版</li>";
|
||
|
|
html += "<li id='NewSortOne' class='flow-menu'>更多操作</li>";
|
||
|
|
html += "</ul>";
|
||
|
|
$("#top-choose").html(html);
|
||
|
|
//一开始隐藏
|
||
|
|
$('#NewSortOne').hide();
|
||
|
|
|
||
|
|
|
||
|
|
//新建目录 新建子集，新建同级
|
||
|
|
dropdown.render({
|
||
|
|
elem: '#NewSortOne', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
|
||
|
|
trigger: 'hover',
|
||
|
|
data: [
|
||
|
|
{ title: '<i class=icon-folder></i> 新建同级', id: "NewSame", Icon: "icon-magnifier-add" },
|
||
|
|
{ title: '<i class=icon-folder></i> 新建子级', id: "NewSort", Icon: "icon-magnifier-add" },
|
||
|
|
{ title: '<i class=icon-folder></i> 删除目录', id: "DeleteSort", Icon: "icon-magnifier-add" },
|
||
|
|
],
|
||
|
|
click: function (data) {
|
||
|
|
topNodeOption(data.id, flowSortNo, nameTitle)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
function getFlowDevModelText(model) {
|
||
|
|
switch (model) {
|
||
|
|
case 0:
|
||
|
|
return "专业模式";
|
||
|
|
case 1:
|
||
|
|
return "极简模式";
|
||
|
|
case 2:
|
||
|
|
return "累加模式";
|
||
|
|
case 3:
|
||
|
|
return "绑定表单库的单表单";
|
||
|
|
case 4:
|
||
|
|
return "绑定表单库的多表单";
|
||
|
|
case 5:
|
||
|
|
return "SDK表单";
|
||
|
|
case 6:
|
||
|
|
return "嵌入式表单";
|
||
|
|
case 7:
|
||
|
|
return "物联网流程";
|
||
|
|
case 8:
|
||
|
|
return "决策树流程";
|
||
|
|
default:
|
||
|
|
return model;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function SearchEmp(flow){
|
||
|
|
var searchKey = $("#searchKey").val();
|
||
|
|
var flows = flow.data.filter(function (item) {
|
||
|
|
return item.No.includes(searchKey)
|
||
|
|
})
|
||
|
|
baseInfo.flows = flows
|
||
|
|
return flows;
|
||
|
|
}
|
||
|
|
function topNodeOption(key, flowSortNo, name, idx) {
|
||
|
|
//获取屏幕的宽
|
||
|
|
var W = document.body.clientWidth - 250;
|
||
|
|
switch (key) {
|
||
|
|
case "EditSort":
|
||
|
|
var url = basePath + "/WF/Comm/EnOnly.htm?EnName=BP.WF.Template.FlowSort&No=" + flowSortNo;
|
||
|
|
OpenLayuiDialog(url, "目录:" + name, W, 100, "r", false);
|
||
|
|
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":
|
||
|
|
url = basePath + "/WF/Admin/AttrFlow/Imp.htm?FK_FlowSort=" + flowSortNo + "&Lang=CH";
|
||
|
|
//window.top.vm.openTab("导入流程模板", url);
|
||
|
|
OpenLayuiDialog(url, "导入流程模板", W, 100, "r", false, false, null, null, function () {
|
||
|
|
//alert(flowSortNo);
|
||
|
|
//关闭窗口执行选中并点击节点
|
||
|
|
tree.setChecked('flowSort', flowSortNo);
|
||
|
|
var nodeElem = $('.layui-tree-set[data-id="' + flowSortNo + '"]>.layui-tree-entry>.layui-tree-main>.layui-tree-txt');
|
||
|
|
nodeElem.click();
|
||
|
|
});
|
||
|
|
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);
|
||
|
|
if (data == undefined || data == '') {
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
layer.msg("创建成功" + value);
|
||
|
|
}
|
||
|
|
setTimeout(function () {
|
||
|
|
window.location.reload();
|
||
|
|
}, 800);
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
case "NewSame":
|
||
|
|
layer.prompt({
|
||
|
|
value: '',
|
||
|
|
title: '新建同级流程类别',
|
||
|
|
}, function (value, index, elem) {
|
||
|
|
layer.close(index);
|
||
|
|
var en = new Entity("BP.WF.Template.FlowSort", flowSortNo);
|
||
|
|
var data = en.DoMethodReturnString("DoCreateSameLevelNodeMy", value);
|
||
|
|
if (data == undefined || data == '') {
|
||
|
|
return;
|
||
|
|
} else {
|
||
|
|
layer.msg("创建成功" + value);
|
||
|
|
}
|
||
|
|
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");
|
||
|
|
OpenLayuiDialog(url, name, W, 100, "r", false, false, null, null, function () {
|
||
|
|
//alert(flowSortNo);
|
||
|
|
//关闭窗口执行选中并点击节点
|
||
|
|
tree.setChecked('flowSort', flowSortNo);
|
||
|
|
var nodeElem = $('.layui-tree-set[data-id="' + flowSortNo + '"]>.layui-tree-entry>.layui-tree-main>.layui-tree-txt');
|
||
|
|
nodeElem.click();
|
||
|
|
});
|
||
|
|
//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="icon-share" style="vertical-align: -1px; margin-right: 2px;"></i>流程</div>
|
||
|
|
<div id="flowSort" class="" style="width: 100%; height: calc(90%); "></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 item-title">编号</div>
|
||
|
|
<div class="item item-other item-title">名称</div>
|
||
|
|
<div class="item item-other item-title">存储表</div>
|
||
|
|
<div class="item item-other item-title">设计类型</div>
|
||
|
|
<div class="item item-other item-title">创建日期</div>
|
||
|
|
<div class="item item-other item-title">创建人</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" @dblclick.stop="Designer(flow.No,flow.Name)">
|
||
|
|
<!--text-align: center-->
|
||
|
|
<div class="item item-name item-name-dp item-omit" style="" :data-no="flow.No" :data-name="flow.Name" :data-idx="idx">
|
||
|
|
<i class="icon-heart" style="margin-right: 8px"></i>
|
||
|
|
<span>{{flow.No}}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item item-other item-omit item-finger" @click.stop="Designer(flow.No,flow.Name)">{{flow.Name}}</div>
|
||
|
|
<div class="item item-other item-omit">{{flow.PTable}}</div>
|
||
|
|
<div class="item item-other item-omit">{{flow.FlowDevModel}}</div>
|
||
|
|
<div class="item item-other item-omit">{{flow.Ver}}</div>
|
||
|
|
<div class="item item-other item-omit">{{flow.Creater}}</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>
|