完善部门用户选择
This commit is contained in:
parent
47e0090b1c
commit
510a5027d4
@ -41,6 +41,12 @@ public class CoreManageRouteController {
|
||||
return modelAndView;
|
||||
}
|
||||
|
||||
@GetMapping("list-department-user-select")
|
||||
public ModelAndView listDepartmentUserSelect() {
|
||||
ModelAndView modelAndView = new ModelAndView("core/manage/list-department-user-select");
|
||||
return modelAndView;
|
||||
}
|
||||
|
||||
@GetMapping("save-department-user")
|
||||
public ModelAndView saveDepartmentUser() {
|
||||
ModelAndView modelAndView = new ModelAndView("core/manage/save-department-user");
|
||||
|
||||
@ -0,0 +1,529 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<base th:href="${#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" href="assets/js/vendor/viewer/viewer.min.css">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
<style>
|
||||
.search-item .layui-form-select .layui-input {width: 100%;}
|
||||
.selected-user-box {padding-left: 10px;}
|
||||
.selected-user-box .selected-user-list {border: 1px solid #e6e6e6; height: 100%; overflow-y: auto;}
|
||||
.selected-user-box .selected-user-list .selected-user-item {position: relative;border-bottom: 1px dotted #e6e6e6;}
|
||||
.selected-user-box .selected-user-list .selected-user-item:last-child {border-bottom: none;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar {width: 62px; height: 62px; line-height: 62px; text-align: center; font-size: 31px; font-weight: bold; border-radius: 31px; position: absolute; top: 5px; left: 5px; }
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar-color-0 {background-color: #b4b4c4; color: #fff;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar-color-1 {background-color: #7182e7; color: #fff;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar-color-2 {background-color: #304eff; color: #fff;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar-color-3 {background-color: #ff75ef; color: #fff;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar-color-4 {background-color: #ff7878; color: #fff;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar-color-5 {background-color: #d2d2d2; color: #000;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar-color-6 {background-color: #b8c926; color: #fff;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .avatar-color-7 {background-color: #8d3434; color: #fff;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .info {margin-left: 72px;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .info div {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
|
||||
.selected-user-box .selected-user-list .selected-user-item .remove {position: absolute; top: 25px; right: 5px;}
|
||||
.btn-box {margin-top: 4px; text-align: right}
|
||||
.btn-box button {height: 40px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-anim layui-anim-fadein">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs8">
|
||||
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs3 layui-inline">
|
||||
<input type="hidden" id="departmentId">
|
||||
<input type="text" id="departmentName" class="layui-input search-item" placeholder="选择组织部门">
|
||||
</div>
|
||||
<div class="layui-col-xs3 layui-inline">
|
||||
<input type="hidden" id="roleId">
|
||||
<input type="text" id="roleName" class="layui-input search-item" placeholder="选择角色">
|
||||
</div>
|
||||
<div class="layui-col-xs3 layui-inline">
|
||||
<input type="hidden" id="positionId">
|
||||
<input type="text" id="positionName" class="layui-input search-item" placeholder="选择职位">
|
||||
</div>
|
||||
<div class="layui-col-xs3 layui-inline">
|
||||
<input type="hidden" id="groupId">
|
||||
<input type="text" id="groupName" class="layui-input search-item" placeholder="选择用户组">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row" style="margin-top: 10px">
|
||||
<div class="layui-col-xs3 layui-inline">
|
||||
<input type="text" id="keywords" class="layui-input search-item" placeholder="用户名、昵称">
|
||||
</div>
|
||||
<div class="layui-col-xs3 layui-inline layui-form search-item">
|
||||
<select id="userType" name="userType">
|
||||
<option value="">选择类型</option>
|
||||
<option value="1">系统用户</option>
|
||||
<option value="2">普通用户</option>
|
||||
<option value="3">公共用户</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-xs3 layui-inline layui-form search-item">
|
||||
<select id="userState" name="userState">
|
||||
<option value="">选择状态</option>
|
||||
<option value="0">正常</option>
|
||||
<option value="1">锁定</option>
|
||||
<option value="-1">未审核</option>
|
||||
<option value="-2">审核不通过</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-xs3 layui-btn-group">
|
||||
<button type="button" id="search" class="layui-btn layui-btn-sm">
|
||||
<i class="fa fa-lg fa-search"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
|
||||
</div>
|
||||
<div id="selectedUserBox" class="selected-user-box layui-col-xs4">
|
||||
<div id="selectedUserListBox" class="selected-user-list"></div>
|
||||
</div>
|
||||
<div class="btn-box layui-col-xs4">
|
||||
<div class="layui-btn-group">
|
||||
<button id="clearBtn" class="layui-btn layui-btn-danger"><i class="fa fa-trash" aria-hidden="true"></i> 清空</button>
|
||||
<button id="confirmBtn" class="layui-btn layui-btn-normal"><i class="fa fa-check" aria-hidden="true"></i> 确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/js/common/layui-input-tree.js"></script>
|
||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script th:inline="javascript">
|
||||
layui.config({
|
||||
base: 'assets/layuiadmin/'
|
||||
}).extend({
|
||||
index: 'lib/index'
|
||||
}).use(['index', 'table', 'laydate', 'upload', 'ztree'], function() {
|
||||
var $ = layui.$;
|
||||
var $win = $(window);
|
||||
var table = layui.table;
|
||||
var admin = layui.admin;
|
||||
var layer = layui.layer;
|
||||
var laydate = layui.laydate;
|
||||
var resizeTimeout = null;
|
||||
var layuiInputTree = new LayuiInputTree(layui);
|
||||
var tableUrl = 'api/core/manage/listpage-user';
|
||||
// 已经选择用户列表
|
||||
var isUpdate = false;
|
||||
// 旧的选择的用户
|
||||
var selectedIdArray = top.dialog.dialogData.selectedIdArray ? top.dialog.dialogData.selectedIdArray : [];
|
||||
// 选择的用户列表
|
||||
top.dialog.dialogData.newSelectedArray = null;
|
||||
// 正在选择
|
||||
var selectMap = {};
|
||||
var tableData = [];
|
||||
|
||||
// 刷新已选择的用户列表
|
||||
function reloadSelectedUsersDom() {
|
||||
$('#selectedUserListBox').empty();
|
||||
var doms = '';
|
||||
var index = 0;
|
||||
for(var key in selectMap) {
|
||||
var user = selectMap[key];
|
||||
var dom = `
|
||||
<div class="selected-user-item">
|
||||
<div class="avatar avatar-color-${index % 8}">${user.userName.substring(0, 1)}</div>
|
||||
<div class="info">
|
||||
<div class="userName">${user.userName}</div>
|
||||
<div class="username"><i class="fa fa-user-o"></i> ${user.userUsername}</div>
|
||||
<div class="phone"><i class="fa fa-phone-square"></i> ${user.userPhone ? user.userPhone : '-'}</div>
|
||||
</div>
|
||||
<div class="remove">
|
||||
<button class="layui-btn layui-btn-danger layui-btn-xs remove-selected-btn" data-user-id="${user.userId}">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
doms += dom;
|
||||
index++;
|
||||
}
|
||||
$('#selectedUserListBox').append(doms);
|
||||
}
|
||||
|
||||
// 初始化选择的用户列表
|
||||
function initSelectedUsers() {
|
||||
if(selectedIdArray.length == 0) {
|
||||
return;
|
||||
}
|
||||
top.restAjax.post(top.restAjax.path('api/user/list/ids', []), {
|
||||
ids: selectedIdArray
|
||||
}, null, function(code, data) {
|
||||
$.each(data, function(index, item) {
|
||||
selectMap[item.userId] = item;
|
||||
})
|
||||
reloadSelectedUsersDom();
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
});
|
||||
}
|
||||
initSelectedUsers();
|
||||
|
||||
// 初始化已选择的列表
|
||||
function initSelectMap() {
|
||||
for(var i = 0, item; item = selectedIdArray[i++];) {
|
||||
selectMap[item] = {
|
||||
userId: item
|
||||
}
|
||||
}
|
||||
}
|
||||
initSelectMap();
|
||||
|
||||
// 初始化表格
|
||||
function initTable() {
|
||||
var colsArray = [
|
||||
{type:'checkbox', fixed: 'left'},
|
||||
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
|
||||
{field:'userUsername', width:140, title: '用户名', sort: true, align:'center',
|
||||
templet: function(rowData) {
|
||||
return rowData.userUsername;
|
||||
}
|
||||
},
|
||||
{field:'userName', width:140, title: '昵称', sort: true, align:'center'},
|
||||
{field:'userType', width:90, title: '类型', sort: true, align:'center',
|
||||
templet: function(item) {
|
||||
if(item.userType == 1) {
|
||||
return '<span class="layui-badge layui-bg-green">系统用户</span>';
|
||||
} else if(item.userType == 2) {
|
||||
return '<span class="layui-badge layui-bg-orange">普通用户</span>';
|
||||
} else if(item.userType == 3) {
|
||||
return '<span class="layui-badge layui-bg-gray">公共用户</span>';
|
||||
}
|
||||
return '<span class="layui-badge">类型错误</span>';
|
||||
}
|
||||
},
|
||||
{field:'userState', width:80, title: '状态', sort: true, align:'center',
|
||||
templet: function(item) {
|
||||
var value;
|
||||
switch (item.userState) {
|
||||
case 1:
|
||||
value = '<span class="layui-badge layui-bg-blue">锁定</span>';
|
||||
break;
|
||||
case -1:
|
||||
value = '<span class="layui-badge layui-bg-gray">未审核</span>';
|
||||
break;
|
||||
case -2:
|
||||
value = '<span class="layui-badge">审核不通过</span>';
|
||||
break;
|
||||
default:
|
||||
value = '<span class="layui-badge layui-bg-green">正常</span>';
|
||||
}
|
||||
return value;
|
||||
}
|
||||
},
|
||||
{field:'userPhone', width:140, title: '手机', sort: true, align:'center',
|
||||
templet: function(item) {
|
||||
if(!item.userPhone) {
|
||||
return '-';
|
||||
}
|
||||
return item.userPhone;
|
||||
}
|
||||
},
|
||||
{field:'userEmail', width: 160, title: '邮箱', sort: true, align:'center',
|
||||
templet: function(item) {
|
||||
if(!item.userEmail) {
|
||||
return '-';
|
||||
}
|
||||
return item.userEmail;
|
||||
}
|
||||
},
|
||||
{field:'gmtCreate', width:180, title: '创建时间', align:'center',
|
||||
templet: function(item) {
|
||||
if(!item.gmtCreate) {
|
||||
return '-';
|
||||
}
|
||||
return item.gmtCreate;
|
||||
}
|
||||
},
|
||||
];
|
||||
$.extend(table, {config: {checkName: 'checked'}});
|
||||
table.render({
|
||||
elem: '#dataTable',
|
||||
id: 'dataTable',
|
||||
url: top.restAjax.path(tableUrl, []),
|
||||
width: admin.screen() > 1 ? '100%' : '',
|
||||
height: $win.height() - 100,
|
||||
limit: 20,
|
||||
limits: [20, 40, 60, 80, 100, 200],
|
||||
toolbar: false,
|
||||
request: {
|
||||
pageName: 'page',
|
||||
limitName: 'rows'
|
||||
},
|
||||
cols: [
|
||||
colsArray
|
||||
],
|
||||
page: true,
|
||||
parseData: function(data) {
|
||||
// 默认勾选
|
||||
for(var i = 0, item; item = data.rows[i++];) {
|
||||
if(selectMap[item.userId]) {
|
||||
item.checked = true;
|
||||
// 重新赋值：在打开界面后直接确定关闭页面时回显正常
|
||||
selectMap[item.userId] = item;
|
||||
} else {
|
||||
item.checked = false;
|
||||
}
|
||||
}
|
||||
tableData = data.rows;
|
||||
// 默认勾选
|
||||
|
||||
return {
|
||||
'code': 0,
|
||||
'msg': '',
|
||||
'count': data.total,
|
||||
'data': data.rows
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
// 重载表格
|
||||
function reloadTable(currentPage) {
|
||||
table.reload('dataTable', {
|
||||
where: {
|
||||
keywords: $('#keywords').val(),
|
||||
startTime: $('#startTime').val(),
|
||||
endTime: $('#endTime').val(),
|
||||
userType: $('#userType').val(),
|
||||
userState: $('#userState').val(),
|
||||
departmentId: $('#departmentId').val(),
|
||||
roleId: $('#roleId').val(),
|
||||
positionId: $('#positionId').val(),
|
||||
groupId: $('#groupId').val()
|
||||
},
|
||||
page: {
|
||||
curr: currentPage
|
||||
},
|
||||
});
|
||||
}
|
||||
// 初始化日期
|
||||
function initDate() {
|
||||
// 日期选择
|
||||
laydate.render({
|
||||
elem: '#startTime',
|
||||
format: 'yyyy-MM-dd'
|
||||
});
|
||||
laydate.render({
|
||||
elem: '#endTime',
|
||||
format: 'yyyy-MM-dd'
|
||||
});
|
||||
}
|
||||
// 初始化下拉树
|
||||
function initSelectInputTree() {
|
||||
// 组织机构下拉树
|
||||
layuiInputTree.initSelect({
|
||||
id: 'departmentName',
|
||||
url: 'api/department/listztree',
|
||||
getSelectedData: function() {
|
||||
return {id: $('#departmentId').val(), name: $('#departmentName').val()}
|
||||
},
|
||||
onConfirm: function(zTree, selectedNode) {
|
||||
if(!selectedNode) {
|
||||
$('#departmentId').val('');
|
||||
return;
|
||||
}
|
||||
$('#departmentId').val(selectedNode.id);
|
||||
}
|
||||
})
|
||||
// 角色下拉树选择
|
||||
layuiInputTree.initSelect({
|
||||
id: 'roleName',
|
||||
url: 'api/role/listztree',
|
||||
getSelectedData: function() {
|
||||
return {id: $('#roleId').val(), name: $('#roleName').val()}
|
||||
},
|
||||
onConfirm: function(zTree, selectedNode) {
|
||||
if(!selectedNode) {
|
||||
$('#roleId').val('');
|
||||
return;
|
||||
}
|
||||
$('#roleId').val(selectedNode.id);
|
||||
}
|
||||
})
|
||||
// 职位下拉树选择
|
||||
layuiInputTree.initSelect({
|
||||
id: 'positionName',
|
||||
url: 'api/position/listztree',
|
||||
getSelectedData: function() {
|
||||
return {id: $('#positionId').val(), name: $('#positionName').val()}
|
||||
},
|
||||
onConfirm: function(zTree, selectedNode) {
|
||||
if(!selectedNode) {
|
||||
$('#positionId').val('');
|
||||
return;
|
||||
}
|
||||
$('#positionId').val(selectedNode.id);
|
||||
}
|
||||
})
|
||||
// 用户组下拉树选择
|
||||
layuiInputTree.initSelect({
|
||||
id: 'groupName',
|
||||
url: 'api/group/listztree',
|
||||
getSelectedData: function() {
|
||||
return {id: $('#groupId').val(), name: $('#groupName').val()}
|
||||
},
|
||||
onConfirm: function(zTree, selectedNode) {
|
||||
if(!selectedNode) {
|
||||
$('#groupId').val('');
|
||||
return;
|
||||
}
|
||||
$('#groupId').val(selectedNode.id);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 初始化已选择
|
||||
function initSelectedBox() {
|
||||
$('#selectedUserBox').css('height', ($win.height() - 64) +'px');
|
||||
}
|
||||
initTable();
|
||||
initDate();
|
||||
initSelectInputTree();
|
||||
initSelectedBox();
|
||||
// 事件 - 页面变化
|
||||
$win.on('resize', function() {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(function() {
|
||||
reloadTable();
|
||||
}, 500);
|
||||
});
|
||||
// 事件 - 搜索
|
||||
$(document).on('click', '#search', function() {
|
||||
reloadTable(1);
|
||||
});
|
||||
table.on('tool(dataTable)', function(obj) {
|
||||
var layEvent = obj.event;
|
||||
var data = obj.data;
|
||||
if(layEvent === 'userExpandEvent') {
|
||||
top.dialog.open({
|
||||
url: top.restAjax.path('{userExpand}?userId={userId}', [$('#userExpand').val(), data.userId]),
|
||||
title: '【'+ data.userName +'】拓展属性',
|
||||
width: '60%',
|
||||
height: '80%',
|
||||
onClose: function() {}
|
||||
});
|
||||
} else if(layEvent === 'expandOpitionEvent') {
|
||||
top.dialog.open({
|
||||
url: top.restAjax.path('{userExpandOptionRoute}?userId={userId}', [this.dataset.route, data.userId]),
|
||||
title: '【'+ data.userName +'】'+ this.dataset.title,
|
||||
width: '60%',
|
||||
height: '80%',
|
||||
onClose: function() {}
|
||||
});
|
||||
}
|
||||
});
|
||||
// 事件-排序
|
||||
table.on('sort(dataTable)', function(obj) {
|
||||
table.reload('dataTable', {
|
||||
initSort: obj,
|
||||
where: {
|
||||
sort: obj.field,
|
||||
order: obj.type
|
||||
}
|
||||
});
|
||||
});
|
||||
/**
|
||||
* 清空选择
|
||||
*/
|
||||
function clearSelect() {
|
||||
selectMap = {};
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加选择
|
||||
* @param item
|
||||
*/
|
||||
function addSelect(item) {
|
||||
selectMap[item.userId] = item;
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除选择
|
||||
* @param item
|
||||
*/
|
||||
function removeSelect(item) {
|
||||
delete selectMap[item.userId];
|
||||
}
|
||||
|
||||
// 勾选事件
|
||||
table.on('checkbox(dataTable)', function(obj) {
|
||||
isUpdate = true;
|
||||
if(obj.type === 'all') {
|
||||
if(obj.checked) {
|
||||
// 添加全部
|
||||
for(var i = 0, item; item = tableData[i++];) {
|
||||
addSelect(item);
|
||||
}
|
||||
} else {
|
||||
// 删除全部
|
||||
for(var i = 0, item; item = tableData[i++];) {
|
||||
removeSelect(item);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if(obj.checked) {
|
||||
addSelect(obj.data);
|
||||
} else {
|
||||
removeSelect(obj.data);
|
||||
}
|
||||
}
|
||||
reloadSelectedUsersDom();
|
||||
});
|
||||
|
||||
// 关闭
|
||||
function close() {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
}
|
||||
|
||||
// 选择的用户删除事件
|
||||
$(document).on('click', '.remove-selected-btn', function() {
|
||||
isUpdate = true;
|
||||
var userId = this.dataset.userId;
|
||||
delete selectMap[userId];
|
||||
for(var i = 0, item; item = tableData[i++];) {
|
||||
if(userId === item.userId) {
|
||||
reloadTable();
|
||||
break;
|
||||
}
|
||||
}
|
||||
reloadSelectedUsersDom();
|
||||
})
|
||||
|
||||
// 清空事件
|
||||
$(document).on('click', '#clearBtn', function() {
|
||||
clearSelect();
|
||||
reloadTable();
|
||||
reloadSelectedUsersDom();
|
||||
});
|
||||
|
||||
// 确定事件
|
||||
$(document).on('click', '#confirmBtn', function() {
|
||||
if(isUpdate) {
|
||||
top.dialog.dialogData.newSelectedArray = [];
|
||||
for(var key in selectMap) {
|
||||
top.dialog.dialogData.newSelectedArray.push(selectMap[key]);
|
||||
}
|
||||
}
|
||||
close();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user