|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<title></title>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<script src="../../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
|
|
|
<script src="../../Scripts/vue.js"></script>
|
|
|
<link href="../../../DataUser/Style/ccbpm.css" rel="stylesheet" type="text/css" />
|
|
|
|
|
|
<script language="JavaScript" src="../../Comm/JScript.js" type="text/javascript"></script>
|
|
|
<script type="text/javascript" src="../../Scripts/QueryString.js"></script>
|
|
|
<script type="text/javascript" src="../../Scripts/config.js"></script>
|
|
|
<script type="text/javascript" src="../../Comm/Gener.js"></script>
|
|
|
<script src="../../Scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
|
|
<link href="../../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
|
<link href="../../Scripts/bootstrap/css/font-awesome.css" rel="stylesheet" type="text/css" />
|
|
|
<link href="../../Scripts/element/element.css" rel="stylesheet" />
|
|
|
|
|
|
<script src="../../Scripts/bootstrap/bootstrap-table/src/bootstrap-table.js" type="text/javascript"></script>
|
|
|
<link href="../../Scripts/bootstrap/bootstrap-table/src/bootstrap-table.css" rel="stylesheet" type="text/css" />
|
|
|
<script src="../../Scripts/bootstrap/bootstrap-table/src/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
|
|
|
|
|
|
<script src="../../Scripts/bootstrap/bootstrap-treeview/src/js/bootstrap-treeview.js" type="text/javascript"></script>
|
|
|
<link href="../../Scripts/bootstrap/bootstrap-treeview/src/css/bootstrap-treeview.css" rel="stylesheet" type="text/css" />
|
|
|
<script src="../../Scripts/element/element.js"></script>
|
|
|
<style type="text/css">
|
|
|
.row-margin-top {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
.search-margin {
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
|
|
|
.container-fluid {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
#back_btn {
|
|
|
margin-top: 15px;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
|
|
|
.el-button--primary {
|
|
|
padding: 0 15px;
|
|
|
margin-left: 20px;
|
|
|
margin-bottom: 15px;
|
|
|
height: 25px;
|
|
|
line-height: 25px;
|
|
|
}
|
|
|
|
|
|
label {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.el-tree {
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
|
|
|
.is-leaf::before {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.row{
|
|
|
margin-left:0;
|
|
|
}
|
|
|
.el-tag {
|
|
|
margin: 5px 5px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!--<div class="container-fluid" style=" width:100%;">
|
|
|
<el-button type="primary" click="IsBack()">返回</el-button>
|
|
|
|
|
|
</div>-->
|
|
|
<div class="row row-margin-top" id="app">
|
|
|
<el-button v-if="isBackBtn === 0 " type="primary" @click="IsBack()">返回</el-button>
|
|
|
<el-tag v-for="tag in tags"
|
|
|
:key="tag.id"
|
|
|
closable
|
|
|
:type="tag.type"
|
|
|
@close="handleClose(tag)">
|
|
|
{{tag.name}}
|
|
|
</el-tag>
|
|
|
|
|
|
<el-tree :props="defaultProps"
|
|
|
:load="loadNode"
|
|
|
:data="jsonTree"
|
|
|
lazy
|
|
|
node-key="id"
|
|
|
show-checkbox
|
|
|
ref="tree"
|
|
|
highlight-current
|
|
|
:check-strictly="true"
|
|
|
@check-change="handleCheckChange">
|
|
|
</el-tree>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script type="text/javascript">
|
|
|
new Vue({
|
|
|
el: '#app',
|
|
|
data() {
|
|
|
return {
|
|
|
checkAll: false,
|
|
|
mapExt: null,
|
|
|
defaultProps: {
|
|
|
children: 'children',
|
|
|
label: 'name',
|
|
|
isLeaf: (data, node) => {
|
|
|
if (node.level === 4) {
|
|
|
return true
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
jsonTree: [],
|
|
|
rootNo: null,
|
|
|
child: [],
|
|
|
isBackBtn: '',
|
|
|
tags: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
handleClose(tag) {
|
|
|
var en = new Entity(GetQueryString("Dot2DotEnName"));
|
|
|
en[GetQueryString("AttrOfOneInMM")] = GetPKVal();
|
|
|
en[GetQueryString("AttrOfMInMM")] = tag.id;
|
|
|
en.Delete(GetQueryString("AttrOfOneInMM"), GetPKVal(), GetQueryString("AttrOfMInMM"), tag.id);
|
|
|
//取消选中时如果tags数组中有已经选中的数据，再进行点击取消删除时进项删除该项
|
|
|
var tmp = $.grep(this.tags, function (value) {
|
|
|
return value.id != tag.id;
|
|
|
});
|
|
|
this.tags = tmp;
|
|
|
|
|
|
let chooseRes = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
|
|
|
console.log(chooseRes);
|
|
|
for (var i = 0; i < chooseRes.length; i++) {
|
|
|
if (chooseRes[i] == tag.id) {
|
|
|
this.$refs.tree.setChecked(tag.id, false)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
handleCheckChange(data, checked, z) {
|
|
|
console.log(data);
|
|
|
//console.log(r);
|
|
|
//console.log(z);
|
|
|
let arr = []
|
|
|
let res = this.$refs.tree.getCheckedNodes()
|
|
|
res.forEach((item) => {
|
|
|
arr.push(item.id)
|
|
|
})
|
|
|
var en = new Entity(GetQueryString("Dot2DotEnName"));
|
|
|
en[GetQueryString("AttrOfOneInMM")] = GetPKVal();
|
|
|
en[GetQueryString("AttrOfMInMM")] = data.id;
|
|
|
if (checked == true) {
|
|
|
//判断数据是否存在，如果存在选中时就不再添加，不存在再添加
|
|
|
var flag = false;
|
|
|
for (var i in this.tags) {
|
|
|
if (this.tags[i].id == data.id) {
|
|
|
flag = true;
|
|
|
}
|
|
|
}
|
|
|
if (flag == false) {
|
|
|
this.tags.push({
|
|
|
id: data.id,
|
|
|
name: data.name,
|
|
|
})
|
|
|
}
|
|
|
|
|
|
//选中
|
|
|
en.Save();
|
|
|
} else {
|
|
|
//取消选中时如果tags数组中有已经选中的数据，再进行点击取消删除时进项删除该项
|
|
|
var tmp = $.grep(this.tags, function (value) {
|
|
|
return value.id != data.id;
|
|
|
});
|
|
|
this.tags = tmp;
|
|
|
//取消选中
|
|
|
en.Delete(GetQueryString("AttrOfOneInMM"), GetPKVal(), GetQueryString("AttrOfMInMM"), data.id);
|
|
|
}
|
|
|
},
|
|
|
//判断是否有上一路径;
|
|
|
IsBack() {
|
|
|
this.isBackBtn = GetQueryString("BackBtn"),
|
|
|
console.log(this.isBackBtn);
|
|
|
if (document.referrer.includes("EmpDepts.htm")) {
|
|
|
window.history.go(-1);
|
|
|
} else {
|
|
|
window.history.go(0);
|
|
|
}
|
|
|
},
|
|
|
//懒加载
|
|
|
loadNode(node, resolve) {
|
|
|
if (node.level === 0) {
|
|
|
var roootData = [];
|
|
|
roootData = this.jsonTree.map(key => {
|
|
|
return {
|
|
|
name: key.label,
|
|
|
id: key.id,
|
|
|
children: key.children,
|
|
|
}
|
|
|
})
|
|
|
return resolve(roootData);
|
|
|
}
|
|
|
if (node.level > 3) {
|
|
|
return resolve([]);
|
|
|
}
|
|
|
if (node.level > 0) {
|
|
|
var ens = new Entities(GetQueryString("EnsOfM")); //BP.Port.Depts
|
|
|
ens.Retrieve("ParentNo", node.data.id, "Idx");
|
|
|
this.child = this.creatTreeChildern(ens, node.data.id);
|
|
|
var data = [];
|
|
|
data = this.child.map(item => {
|
|
|
return {
|
|
|
name: item.label,
|
|
|
id: item.id,
|
|
|
children: item.children,
|
|
|
}
|
|
|
})
|
|
|
setTimeout(() => {
|
|
|
resolve(data);
|
|
|
}, 500);
|
|
|
}
|
|
|
|
|
|
},
|
|
|
createJsonToTree(jsonArray, parentNo) {
|
|
|
//获取ParentNo的数据
|
|
|
var items = $.grep(jsonArray, function (obj) {
|
|
|
return obj.No == parentNo;
|
|
|
});
|
|
|
if (items.length != 0) {
|
|
|
this.jsonTree.push({
|
|
|
"id": items[0].No,
|
|
|
"label": items[0].Name,
|
|
|
"children": this.creatTreeChildern(jsonArray, items[0].No),
|
|
|
"state": { checked: checked, disabled: false }
|
|
|
});
|
|
|
} else {
|
|
|
for (var i = 0; i < jsonArray.length; i++) {
|
|
|
var data = jsonArray[i];
|
|
|
if (data.ParentNo.trim() == parentNo) {
|
|
|
var checked = false;
|
|
|
this.jsonTree.push({
|
|
|
"id": data.No,
|
|
|
"label": data.Name,
|
|
|
"children": this.creatTreeChildern(jsonArray, data.No),
|
|
|
"state": { checked: checked, disabled: false }
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
this._(this.jsonTree);
|
|
|
}
|
|
|
}
|
|
|
, _(treeArray) {
|
|
|
$.each(treeArray, function (i, o) {
|
|
|
if ($.isArray(o.children)) {
|
|
|
if (o.children.length == 0) {
|
|
|
o.children = [];
|
|
|
} else {
|
|
|
this._(o.children);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
creatTreeChildern(jsonArray, parentNo) {
|
|
|
var childList = []
|
|
|
for (var i = 0; i < jsonArray.length; i++) {
|
|
|
var data = jsonArray[i];
|
|
|
if (data.ParentNo == parentNo) {
|
|
|
var checked = false;
|
|
|
this.jsonTree.filter((ID) => {
|
|
|
if (ID.id === parentNo) ID.children.push({
|
|
|
"id": data.No,
|
|
|
"label": data.Name,
|
|
|
"children": this.creatTreeChildern(jsonArray, data.No),
|
|
|
"state": { checked: checked, disabled: false }
|
|
|
})
|
|
|
})
|
|
|
childList.push({
|
|
|
"id": data.No,
|
|
|
"label": data.Name,
|
|
|
"children": this.creatTreeChildern(jsonArray, data.No),
|
|
|
"state": { checked: checked, disabled: false }
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return childList;
|
|
|
},
|
|
|
//获取父节点数据
|
|
|
loadTree() {
|
|
|
var webUser = new WebUser()
|
|
|
//global
|
|
|
let global = window;
|
|
|
global.selectedNodes = [];
|
|
|
global.selectedRows = [];
|
|
|
this.rootNo = GetQueryString("RootNo");
|
|
|
if (this.rootNo == "@WebUser.FK_Dept")
|
|
|
this.rootNo = webUser.FK_Dept;
|
|
|
if (webUser.CCBPMRunModel == 2)
|
|
|
this.rootNo = webUser.OrgNo;
|
|
|
if (this.rootNo == null || this.rootNo == "")
|
|
|
this.rootNo = webUser.FK_Dept;
|
|
|
let ens = new Entities(GetQueryString("EnsOfM")); //BP.Port.Depts
|
|
|
ens.Retrieve("ParentNo", 0, "Idx"); // this.rootNo不是根节点
|
|
|
this.createJsonToTree(ens, this.rootNo);
|
|
|
if (ens.length == 0) {
|
|
|
let ParentNo = 'OrgNo';
|
|
|
ens.Retrieve(ParentNo, 0, "Idx");
|
|
|
this.createJsonToTree(ens, this.rootNo);
|
|
|
}
|
|
|
//查询选中的部门
|
|
|
ens = new Entities(GetQueryString("Dot2DotEnName") + "s");
|
|
|
ens.Retrieve(GetQueryString("AttrOfOneInMM"), GetPKVal());
|
|
|
|
|
|
for (var i = 0; i < ens.length; i++) {
|
|
|
var en = ens[i];
|
|
|
this.tags.push({
|
|
|
id: en.FK_Dept,
|
|
|
name: en.FK_DeptText,
|
|
|
})
|
|
|
|
|
|
}
|
|
|
console.log(this.tags);
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
this.loadTree();
|
|
|
},
|
|
|
})
|
|
|
</script>
|
|
|
</html>
|