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.
456 lines
19 KiB
Plaintext
456 lines
19 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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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"]; //选择的数据.
|
||
|
|
var showCols = "";
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
if (showCols == "")
|
||
|
|
showCols = "No=编号@Name=名称";
|
||
|
|
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);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.loadTree();
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|