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.

484 lines
20 KiB
Plaintext

<!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;
}
.newBtn {
display: inline-block;
padding: 1px 4px;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.main_content {
display: flex;
justify-content: space-between;
}
.Right_table {
display: flex;
flex-direction: column;
justify-content: start;
width: 57.333%;
height: 80vh;
margin: 0px 5%;
}
.el-input {
width: 75%;
margin: 10px 0 10px 15px;
}
.el-input__inner {
width: 100%;
}
.search_content {
padding: 0 20px;
height: 30px;
line-height: 30px;
margin-left: 15px;
font-size: 13px;
}
.top_text {
width: 25%;
}
.choose_content {
text-align: right;
}
.el-tree {
width: 33.33%
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
color: #FFFFFF;
background-color: #428bca;
font-weight:700;
}
.el-table .el-table__cell{
padding:5px 0;
}
.el-button--text {
font-size: 16px;
}
</style>
</head>
<body>
<div id="app">
<div style="display: flex; align-items: center;">
<el-input v-model="searchValue" placeholder="请输入内容"></el-input>
<el-button type="primary" size="mini" @click="doFilter" class="search_content" >搜索</el-button>
</div>
<div class="main_content">
<el-tree :props="defaultProps"
:load="loadNode"
:data="jsonTree"
lazy
node-key="id"
ref="tree"
highlight-current
@node-click="handleNodeClick">
</el-tree>
<div class="Right_table">
<el-table :data="tableData"
height="250"
border
style="width: 100%"
@select="handleSelectionChange">
<el-table-column type="selection"
style="width:3%">
</el-table-column>
<el-table-column v-for="(head,index) in searchTableColumns"
:key="head.field"
:label="head.title"
:prop="head.field"
style="width:32%">
</el-table-column>
</el-table>
<el-table :data="selectedRows"
height="250"
border
style="width: 100%;margin-top:20px;">
<el-table-column v-for="(head,index) in chooseTableColumns"
:key="head.field"
:label="head.title"
:prop="head.field"
style="width:25%">
</el-table-column>
<el-table-column :render-header="(h, obj) => renderHeader(h, obj, '你的参数')" style="width:25%">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, scope.row)"
type="text"
size="small">
<i class="el-icon-delete"></i>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
searchValue: "",
checkAll: false,
mapExt: null,
defaultProps: {
children: 'children',
label: 'name',
isLeaf: 'leaf'
},
jsonTree: [],
rootNo: null,
child: [],
searchTableColumns: [],
chooseTableColumns: [],
isBackBtn: '',
IsEnsOfMExitParentNo: 1,
tags: [],
tableData: [],
selectedRows: []
};
},
methods: {
//获取当前节点再次进行渲染
handleNodeClick(data) {
var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
hander.AddUrlData();
hander.AddPara("Key", data.id);
var json = hander.DoMethodReturnJSON("BranchesAndLeaf_SearchByNodeID");
this.tableData = json;
},
//搜索
doFilter() {
this.tableData = this.tableData.filter(item => {
return item.No.includes(this.searchValue)
})
},
//删除行数据
deleteRow(index, rows) {
console.log(index);
console.log(rows);
var tmp = $.grep(this.selectedRows, function (value) {
return value.No != rows.No;
});
this.selectedRows = tmp;
this.Delete(rows.No);
},
//删除
Delete(no) {
var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
hander.AddUrlData();
hander.AddPara("Key", no);
var msg = hander.DoMethodReturnString("BranchesAndLeaf_Delete");
if (msg.indexOf('err@') == 0)
alert(msg);
},
//保存
Savcceval(val) {
var dot2DotEnName = GetQueryString("Dot2DotEnName");
var attrOfOneInMM = GetQueryString("AttrOfOneInMM");
var attrOfMInMM = GetQueryString("AttrOfMInMM");
var mm = new Entity(dot2DotEnName);
mm[attrOfOneInMM] = GetPKVal();
mm[attrOfMInMM] = val;
if (mm.Update() == 0) {
mm.Insert();
}
},
//多选框操作
handleSelectionChange(val, row) {
console.log(val);
console.log(row);
if (val.length > 0) {
this.selectedRows.push(row)
this.Savcceval(row.No);
} else {
var tmp = $.grep(this.selectedRows, function (value) {
return value.No != row.No;
});
this.selectedRows = tmp;
this.Delete(row.No);
}
},
// 自定义表头
renderHeader(h, { column, $index }, type) {
console.log('列表加载就会触发', h, { column, $index }, type)
let that = this
// 逻辑是 h() 括号里包裹标签 第一个参数是标签名 第二个是属性 第三个是标签内容 如果是多个标签需要包裹数组
return h(
'div', [
// 列名称
h('span', column.label),
// 名称
h('div', '操作')
],
)
},
//懒加载
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 && this.IsEnsOfMExitParentNo == 1) {
var handler = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity")
handler.AddPara("RootNo", node.data.id);
handler.AddPara("DefaultGroupAttrKey", GetQueryString("DefaultGroupAttrKey"));
handler.AddPara("EnsOfM", GetQueryString("EnsOfM"));
var json = handler.DoMethodReturnJSON("BranchesAndLeaf_GetTreesByParentNo");
console.log(json);
if (json.length > 0) {
this.child = this.creatTreeChildern(json, node.data.id);
var data = [];
data = this.child.map(item => {
return {
name: item.label,
id: item.id,
children: item.children,
}
})
setTimeout(() => {
resolve(data);
}, 500);
console.log(json.length);
var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
hander.AddUrlData();
hander.AddPara("Key", node.data.id);
var json = hander.DoMethodReturnJSON("BranchesAndLeaf_SearchByNodeID");
this.tableData = json;
} else {
//查询人员
var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
hander.AddUrlData();
hander.AddPara("Key", node.data.id);
var json = hander.DoMethodReturnJSON("BranchesAndLeaf_SearchByNodeID");
this.tableData = json;
console.log(this.tableData);
resolve([]);
}
}
},
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) {
for (var i = 0; i < treeArray.length; i++) {
var o = treeArray[i];
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;
},
isLegalName(name) {
if (!name) {
return false;
}
return name.match(/^[a-zA-Z\$_][a-zA-Z\d\$_]*$/);
},
//获取父节点数据
loadTree() {
this.rootNo = GetQueryString("RootNo");
if (this.rootNo == null || this.rootNo == undefined || this.rootNo == "")
this.rootNo = "0";
//获得数据.
var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
hander.AddUrlData();
var data = hander.DoMethodReturnJSON("BranchesAndLeaf_Init");
var dbTrees = data["DBTrees"]; //左边的树.
this.selectedRows = data["DBMMs"]; //选择的数据.
if (data["Base_Info"] != undefined) {
IsEnsOfMExitParentNo = data["Base_Info"][0].IsExitParentNo;
if (data["Base_Info"][0].ExtShowCols != undefined && data["Base_Info"][0].ExtShowCols != "")
showCols = data["Base_Info"][0].ExtShowCols;
}
this.createJsonToTree(dbTrees, this.rootNo);
//显示列的中文名称.
var tmp = showCols.split("@");
for (var i = 0; i < tmp.length; i++) {
var o = tmp[i];
if (o == '')
continue;
var exp = o.split("=");
var field;
var title;
if (exp.length == 1) {
field = title = exp[0];
} else if (exp.length == 2) {
field = exp[0];
title = exp[1];
}
if (!this.isLegalName(field)) {
return true;
}
if (field == GetQueryString("DefaultGroupAttrKey"))
field = field + "Text";
this.searchTableColumns.push({
field: field,
title: title
});
this.chooseTableColumns.push({
field: field,
title: title
});
}
console.log(this.searchTableColumns);
//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.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>
</body>
</html>