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.

338 lines
13 KiB
Plaintext

11 months ago
<!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");
}
//查询选中的部门
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>