185 lines
7.8 KiB
HTML
185 lines
7.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||
|
|
<head>
|
||
|
|
<base th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort() + #request.getContextPath() + '/'} ">
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="renderer" content="webkit">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/zTree3/css/metroStyle/metroStyle.css"/>
|
||
|
|
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||
|
|
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="layui-fluid layui-anim layui-anim-fadein" style="padding: 0;">
|
||
|
|
<div class="layui-card">
|
||
|
|
<div class="layui-card-body" style="padding: 0px;">
|
||
|
|
<div class="layui-row">
|
||
|
|
<div class="layui-col-xs5">
|
||
|
|
<div class="selector-tree-wrapper">
|
||
|
|
<ul id="leftTree" class="ztree"></ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-col-xs7">
|
||
|
|
<div class="selector-body-wrapper">
|
||
|
|
<div id="selectUsers" class="selector-body-content-user layui-btn-container"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item layui-layout-admin">
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<div class="layui-footer" style="left: 0;">
|
||
|
|
<button type="button" class="layui-btn confirm">确认</button>
|
||
|
|
<button type="button" class="layui-btn layui-btn-primary close">关闭</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||
|
|
<script>
|
||
|
|
layui.config({
|
||
|
|
base: 'assets/layuiadmin/'
|
||
|
|
}).extend({
|
||
|
|
index: 'lib/index'
|
||
|
|
}).use(['index', 'ztree', 'common'], function() {
|
||
|
|
var $ = layui.$;
|
||
|
|
var $win = $(window);
|
||
|
|
var common = layui.common;
|
||
|
|
var selectedUsers = top.dialog.dialogData.selectedUsers;
|
||
|
|
var selectDepartmentUserArray = [];
|
||
|
|
|
||
|
|
function closeBox() {
|
||
|
|
top.dialog.dialogData.selectedDepartmentUsers = selectDepartmentUserArray;
|
||
|
|
top.dialog.dialogData.selectedUsers = null;
|
||
|
|
top.dialog.closeBox();
|
||
|
|
}
|
||
|
|
// 初始化框架
|
||
|
|
function initFrame() {
|
||
|
|
var height = $win.height() - 80;
|
||
|
|
$('.selector-tree-wrapper').css({
|
||
|
|
marginTop: '5px',
|
||
|
|
height: height +'px',
|
||
|
|
border: '1px dotted silver'
|
||
|
|
});
|
||
|
|
$('.selector-body-wrapper').css({
|
||
|
|
marginTop: '5px',
|
||
|
|
height: height +'px',
|
||
|
|
border: '1px dotted silver'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// 初始化数据
|
||
|
|
var initTimeout = null;
|
||
|
|
var isInited = false;
|
||
|
|
function initCheckData(zTree) {
|
||
|
|
top.dialog.dialogData.selectedDepartmentUsers = [];
|
||
|
|
if(isInited) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if(selectedUsers) {
|
||
|
|
if(selectedUsers.length == 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var loadLayerIndex;
|
||
|
|
top.restAjax.post(top.restAjax.path('api/user/listdepartmentuserbyuserdepartmentid', []), {
|
||
|
|
selectedUsers: selectedUsers
|
||
|
|
}, null, function(code, data) {
|
||
|
|
var nodes = zTree.transformToArray(zTree.getNodes());
|
||
|
|
for(var i = 0, node = nodes[i]; node = nodes[i++];) {
|
||
|
|
for(var j = 0, item = data[j]; item = data[j++]; ) {
|
||
|
|
if(node.id == ('u_'+ item.userId) && node.pId == item.departmentId) {
|
||
|
|
zTree.checkNode(node, true, true);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
selectUser(zTree.getCheckedNodes(true));
|
||
|
|
}, function(code, data) {
|
||
|
|
top.dialog.msg(data.msg);
|
||
|
|
}, function() {
|
||
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
|
||
|
|
}, function() {
|
||
|
|
top.dialog.close(loadLayerIndex);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
isInited = true;
|
||
|
|
}
|
||
|
|
// 初始化树
|
||
|
|
function initThree() {
|
||
|
|
var setting = {
|
||
|
|
check: {
|
||
|
|
enable: true
|
||
|
|
},
|
||
|
|
async: {
|
||
|
|
enable: true,
|
||
|
|
autoLoad: false,
|
||
|
|
type: 'get',
|
||
|
|
url: top.restAjax.path('api/department/listztreedepartmentwithuser', []),
|
||
|
|
autoParam:['id'],
|
||
|
|
otherParam:{},
|
||
|
|
dataFilter: function(treeId, parentNode, childNodes) {
|
||
|
|
if (!childNodes) return null;
|
||
|
|
for (var i=0, l=childNodes.length; i<l; i++) {
|
||
|
|
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
|
||
|
|
}
|
||
|
|
return childNodes;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
callback: {
|
||
|
|
onCheck: function(event, treeId, treeNode) {
|
||
|
|
selectUser(zTree.getCheckedNodes(true));
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
onAsyncSuccess: function(event, treeId, treeNode) {
|
||
|
|
if(initTimeout != null) {
|
||
|
|
clearTimeout(initTimeout)
|
||
|
|
}
|
||
|
|
var subNodes = zTree.getNodesByParam('pId', treeNode.id, null);
|
||
|
|
for(var i = 0, item = subNodes[i]; item = subNodes[i++];) {
|
||
|
|
if(item.id.indexOf('u_') < 0) {
|
||
|
|
zTree.expandNode(item, true, false, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
initTimeout = setTimeout(function() {
|
||
|
|
initCheckData(zTree);
|
||
|
|
}, 500);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
view: {
|
||
|
|
fontCss: {'color': 'black'}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var zTree = $.fn.zTree.init($('#leftTree'), setting);
|
||
|
|
zTree.addNodes(null, {id: '0', pId: '-1', name: '根节点', url: 'javascript:void(0);', icon: 'assets/images/tree/tree-department.png', isParent: 'true'});
|
||
|
|
common.refreshTree('leftTree');
|
||
|
|
}
|
||
|
|
initFrame();
|
||
|
|
initThree();
|
||
|
|
// 选择人员
|
||
|
|
function selectUser(checkedNodes) {
|
||
|
|
selectDepartmentUserArray.splice(0, selectDepartmentUserArray.length);
|
||
|
|
$('#selectUsers').empty();
|
||
|
|
for(var i = 0, item = checkedNodes[i]; item = checkedNodes[i++];) {
|
||
|
|
if(item.title && item.title != '') {
|
||
|
|
selectDepartmentUserArray.push({
|
||
|
|
userId: item.id.substring(2, item.id.length),
|
||
|
|
userName: item.name,
|
||
|
|
userTitle: item.title,
|
||
|
|
departmentId: item.pId,
|
||
|
|
});
|
||
|
|
$('#selectUsers').append('<span id="selected_user_'+ item.id +'" class="layui-btn layui-btn-xs">'+ item.title +' </span>');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$('.confirm').on('click', function() {
|
||
|
|
closeBox();
|
||
|
|
});
|
||
|
|
$('.close').on('click', function() {
|
||
|
|
closeBox();
|
||
|
|
})
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|