增加了部门人员选择V2
This commit is contained in:
parent
5e94446a3a
commit
c7453bd9c6
@ -1,6 +1,7 @@
|
||||
package ink.wgink.interfaces.department;
|
||||
|
||||
import ink.wgink.pojo.ListPage;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentContainUserDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentUserDTO;
|
||||
import ink.wgink.pojo.dtos.user.UserDTO;
|
||||
@ -210,4 +211,12 @@ public interface IDepartmentUserBaseService {
|
||||
* @return
|
||||
*/
|
||||
SuccessResultList<List<UserDTO>> listPageUserByExcludeDepartmentId(List<String> excludeDepartmentIds, ListPage page);
|
||||
|
||||
/**
|
||||
* 获取组织详情（包含本级用户列表与下级部门列表）
|
||||
*
|
||||
* @param departmentId 部门ID
|
||||
* @return
|
||||
*/
|
||||
DepartmentContainUserDTO getDepartmentContainUserAndSubByDepartmentId(String departmentId);
|
||||
}
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
package ink.wgink.pojo.dtos.department;
|
||||
|
||||
import ink.wgink.pojo.dtos.user.UserDTO;
|
||||
import io.swagger.annotations.ApiModel;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* @ClassName: DepartmentWithSubListAndUserListDTO
|
||||
* @Description: 部门类带下级用户列表
|
||||
* @Author: wanggeng
|
||||
* @Date: 2022/5/7 14:40
|
||||
* @Version: 1.0
|
||||
*/
|
||||
@ApiModel
|
||||
public class DepartmentContainUserDTO extends DepartmentDTO {
|
||||
|
||||
private List<UserDTO> users;
|
||||
|
||||
public List<UserDTO> getUsers() {
|
||||
return users == null ? new ArrayList() : users;
|
||||
}
|
||||
|
||||
public void setUsers(List<UserDTO> users) {
|
||||
this.users = users;
|
||||
}
|
||||
|
||||
@Override
|
||||
public String toString() {
|
||||
final StringBuilder sb = new StringBuilder("{");
|
||||
sb.append("\"users\":")
|
||||
.append(users);
|
||||
sb.append('}');
|
||||
return sb.toString();
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@ import ink.wgink.annotation.rpc.rest.RemoteService;
|
||||
import ink.wgink.annotation.rpc.rest.method.RemoteGetMethod;
|
||||
import ink.wgink.annotation.rpc.rest.method.RemotePostMethod;
|
||||
import ink.wgink.annotation.rpc.rest.params.*;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentContainUserDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentUserDTO;
|
||||
import ink.wgink.pojo.dtos.user.UserDTO;
|
||||
@ -85,4 +86,8 @@ public interface IDepartmentUserRemoteService {
|
||||
|
||||
@RemotePostMethod("/listpage-user/exclude-department-ids")
|
||||
SuccessResultList<List<UserDTO>> listPageUserByExcludeDepartmentIds(@RemoteServerParams String userCenter, @RemoteQueryParams("access_token") String accessToken, @RemoteJsonBodyParams IdsVO idsVO, @RemoteQueryParams("page") int page, @RemoteQueryParams("rows") int rows, @RemoteQueryParamsMap Map<String, Object> params);
|
||||
|
||||
@RemotePostMethod("/get-department-contain-user-and-sub/department-id/{departmentId}")
|
||||
DepartmentContainUserDTO getDepartmentContainUserAndSubByDepartmentId(@RemoteServerParams String userCenter, @RemoteQueryParams("access_token") String accessToken, @RemotePathParams("departmentId") String departmentId);
|
||||
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import ink.wgink.login.oauth2.client.remote.department.IDepartmentUserRemoteServ
|
||||
import ink.wgink.login.oauth2.client.service.department.IDepartmentUserService;
|
||||
import ink.wgink.module.oauth2.manager.OAuth2ClientTokenManager;
|
||||
import ink.wgink.pojo.ListPage;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentContainUserDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentSimpleDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentUserDTO;
|
||||
@ -220,4 +221,12 @@ public class DepartmentUserServiceImpl extends DefaultBaseService implements IDe
|
||||
return departmentUserRemoteService.listPageUserByExcludeDepartmentIds(apiPathProperties.getUserCenter(), OAuth2ClientTokenManager.getInstance().getToken().getAccessToken(), idsVO, page.getPage(), page.getRows(), page.getParams());
|
||||
}
|
||||
|
||||
@Override
|
||||
public DepartmentContainUserDTO getDepartmentContainUserAndSubByDepartmentId(String departmentId) {
|
||||
if (StringUtils.isBlank(departmentId)) {
|
||||
return null;
|
||||
}
|
||||
return departmentUserRemoteService.getDepartmentContainUserAndSubByDepartmentId(apiPathProperties.getUserCenter(), OAuth2ClientTokenManager.getInstance().getToken().getAccessToken(), departmentId);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import ink.wgink.common.base.DefaultBaseController;
|
||||
import ink.wgink.exceptions.ParamsException;
|
||||
import ink.wgink.interfaces.consts.ISystemConstant;
|
||||
import ink.wgink.pojo.ListPage;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentContainUserDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentUserDTO;
|
||||
import ink.wgink.pojo.dtos.user.UserDTO;
|
||||
import ink.wgink.pojo.result.ErrorResult;
|
||||
@ -190,4 +191,14 @@ public class DepartmentUserController extends DefaultBaseController {
|
||||
return departmentUserService.listPageUser(page);
|
||||
}
|
||||
|
||||
@ApiOperation(value = "获取组织详情（包含本级用户列表与下级部门列表）", notes = "获取组织详情（包含本级用户列表与下级部门列表）")
|
||||
@ApiImplicitParams({
|
||||
@ApiImplicitParam(name = "departmentId", value = "部门ID", paramType = "path"),
|
||||
})
|
||||
@ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
|
||||
@GetMapping("get-department-contain-user-and-sub/department-id/{departmentId}")
|
||||
public DepartmentContainUserDTO getDepartmentContainUserAndSubByDepartmentId(@PathVariable("departmentId") String departmentId) {
|
||||
return departmentUserService.getDepartmentContainUserAndSubByDepartmentId(departmentId);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import ink.wgink.common.base.DefaultBaseController;
|
||||
import ink.wgink.exceptions.ParamsException;
|
||||
import ink.wgink.interfaces.consts.ISystemConstant;
|
||||
import ink.wgink.pojo.ListPage;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentContainUserDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentUserDTO;
|
||||
import ink.wgink.pojo.dtos.user.UserDTO;
|
||||
@ -222,4 +223,14 @@ public class DepartmentUserResourceController extends DefaultBaseController {
|
||||
return departmentUserService.listPageUser(page);
|
||||
}
|
||||
|
||||
@ApiOperation(value = "获取组织详情（包含本级用户列表与下级部门列表）", notes = "获取组织详情（包含本级用户列表与下级部门列表）")
|
||||
@ApiImplicitParams({
|
||||
@ApiImplicitParam(name = "departmentId", value = "部门ID", paramType = "path"),
|
||||
})
|
||||
@ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
|
||||
@GetMapping("get-department-contain-user-and-sub/department-id/{departmentId}")
|
||||
public DepartmentContainUserDTO getDepartmentContainUserAndSubByDepartmentId(@PathVariable("departmentId") String departmentId) {
|
||||
return departmentUserService.getDepartmentContainUserAndSubByDepartmentId(departmentId);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -9,6 +9,7 @@ import ink.wgink.interfaces.department.IDepartmentUserDeleteAfterHandler;
|
||||
import ink.wgink.interfaces.department.IDepartmentUserSaveAfterHandler;
|
||||
import ink.wgink.interfaces.user.IUserBaseService;
|
||||
import ink.wgink.pojo.ListPage;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentContainUserDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentSimpleDTO;
|
||||
import ink.wgink.pojo.dtos.department.DepartmentUserDTO;
|
||||
@ -536,4 +537,31 @@ public class DepartmentUserServiceImpl extends DefaultBaseService implements IDe
|
||||
page.getParams().put("excludeDepartmentIds", excludeDepartmentIds);
|
||||
return listPageUser(page);
|
||||
}
|
||||
|
||||
@Override
|
||||
public DepartmentContainUserDTO getDepartmentContainUserAndSubByDepartmentId(String departmentId) {
|
||||
// 如果是根节点
|
||||
if (StringUtils.equals(departmentId, ISystemConstant.TREE_BASE_ROOT_ID_VALUE)) {
|
||||
DepartmentContainUserDTO departmentContainUserDTO = new DepartmentContainUserDTO();
|
||||
departmentContainUserDTO.setDepartmentId("0");
|
||||
departmentContainUserDTO.setDepartmentParentId("-1");
|
||||
departmentContainUserDTO.setDepartmentName("根节点");
|
||||
departmentContainUserDTO.setDepartmentCode("");
|
||||
departmentContainUserDTO.setSubDepartments(departmentService.listByParentId(ISystemConstant.TREE_BASE_ROOT_ID_VALUE));
|
||||
return departmentContainUserDTO;
|
||||
}
|
||||
// 不是根节点
|
||||
DepartmentPO departmentPO = departmentService.getPO(departmentId);
|
||||
if (departmentPO == null) {
|
||||
throw new SearchException("部门不存在");
|
||||
}
|
||||
DepartmentContainUserDTO departmentContainUserDTO = new DepartmentContainUserDTO();
|
||||
departmentContainUserDTO.setDepartmentId(departmentPO.getDepartmentId());
|
||||
departmentContainUserDTO.setDepartmentParentId(departmentPO.getDepartmentParentId());
|
||||
departmentContainUserDTO.setDepartmentName(departmentPO.getDepartmentName());
|
||||
departmentContainUserDTO.setDepartmentCode(departmentPO.getDepartmentCode());
|
||||
departmentContainUserDTO.setSubDepartments(departmentService.listByParentId(departmentPO.getDepartmentId()));
|
||||
departmentContainUserDTO.setUsers(listUserByDepartmentId(departmentPO.getDepartmentId()));
|
||||
return departmentContainUserDTO;
|
||||
}
|
||||
}
|
||||
|
||||
@ -200,14 +200,28 @@
|
||||
var checkStatus = table.checkStatus('dataTable');
|
||||
var checkDatas = checkStatus.data;
|
||||
if(layEvent === 'saveEvent') {
|
||||
// top.dialog.open({
|
||||
// url: top.restAjax.path('route/department/user/save-exclude?departmentId={departmentId}', [departmentId]),
|
||||
// title: '添加部门用户',
|
||||
// width: '800px',
|
||||
// height: '500px',
|
||||
// closeBtn: 1,
|
||||
// onClose: function() {
|
||||
// reloadTable();
|
||||
// }
|
||||
// });
|
||||
top.dialog.dialogData.selectedUserIdArray = ['e48e9c4a-995e-4061-abcd-a3c260c11333']
|
||||
top.dialog.open({
|
||||
url: top.restAjax.path('route/department/user/save-exclude?departmentId={departmentId}', [departmentId]),
|
||||
url: top.restAjax.path('route/department/user/select-user-v2?departmentId={departmentId}&selectType=radio', [departmentId]),
|
||||
title: '添加部门用户',
|
||||
width: '800px',
|
||||
width: '500px',
|
||||
height: '500px',
|
||||
closeBtn: 1,
|
||||
onClose: function() {
|
||||
reloadTable();
|
||||
var selectedUserArray = top.dialog.dialogData.selectedUserArray;
|
||||
if(selectedUserArray) {
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if(layEvent === 'removeEvent') {
|
||||
|
||||
@ -12,29 +12,33 @@
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
|
||||
<style>
|
||||
html,body{margin: 0; padding: 0;}
|
||||
.container {padding: 0px;height: 100%;width: 500px;}
|
||||
.container {background-color:#fff; padding: 0px;height: 100%;width: 500px;}
|
||||
.container .top {border-top: 1px;border-right: 1px;border-bottom: 0;border-left: 1px;border-style: solid;border-color: silver;padding: 5px;}
|
||||
.container .top .selected-user {border: 1px dotted silver;line-height: 30px;padding: 5px;overflow: hidden;}
|
||||
.container .top .selected-user .list {width: 498px;height: 60px;overflow-y: scroll;overflow-x: hidden;}
|
||||
.container .center {border: 1px solid silver;height: 40px;overflow: hidden;}
|
||||
.container .center .list {padding: 5px;line-height: 30px;height: 50px;white-space: nowrap;overflow-x: scroll;overflow-y: hidden;}
|
||||
.container .center .list span::after {content: '>';}
|
||||
.container .center .list {padding: 5px 8px;line-height: 30px;height: 50px;white-space: nowrap;overflow-x: scroll;overflow-y: hidden;}
|
||||
.container .center .list span {cursor: pointer;}
|
||||
.container .center .list span::after {content: ' > ';}
|
||||
.container .center .list span:last-child {color: #b7b5b5; cursor: default;}
|
||||
.container .center .list span:last-child::after {content: ''}
|
||||
.container .bottom {font-size: 0;}
|
||||
.container .bottom .left {display: inline-block;width: 198px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 1px;border-style: solid;border-color: silver;overflow: hidden;}
|
||||
.container .bottom .left .list {width: 216px;height: 300px;overflow-y: scroll;overflow-x: hidden;}
|
||||
.container .bottom .left .list div {font-size: 18px;padding: 5px;line-height: 30px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 0;border-style: dotted;border-color: silver;}
|
||||
.container .bottom .left .list div {font-size: 14px;padding: 5px 8px;line-height: 28px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 0;border-style: dotted;border-color: silver; cursor: pointer;}
|
||||
.container .bottom .left .list div:last-child {border-bottom: 0;}
|
||||
.container .bottom .right {display: inline-block;width: 299px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 0px;border-style: solid;border-color: silver;overflow: hidden;}
|
||||
.container .bottom .right .list {width: 316px;height: 300px;overflow-y: scroll;overflow-x: hidden;}
|
||||
.container .bottom .right .list .user-item {padding: 5px;border-bottom: 1px dotted silver;}
|
||||
.container .bottom .right .list .user-item .avatar {display: inline-block;width: 40px;height: 40px;}
|
||||
.container .bottom .right .list .user-item {padding: 5px;border-bottom: 1px dotted silver; cursor: pointer;}
|
||||
.container .bottom .right .list .user-item .avatar {display: inline-block;width: 40px;height: 40px; line-height: 40px; font-size: 20px; border-radius: 20px; text-align: center;}
|
||||
.container .bottom .right .list .user-item .avatar img {width: 100%;height: 100%;}
|
||||
.container .bottom .right .list .user-item .info {display: inline-block;font-size: 14px;line-height: 20px;vertical-align: top;margin-left: 5px;}
|
||||
.container .bottom .right .list .user-item .info div {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 244px;}
|
||||
.container .bottom .right .list .user-item .checked {display: none;}
|
||||
.container .bottom .right .list .active {background: #f1f1f1;position: relative;}
|
||||
.container .bottom .right .list .active .checked {position: absolute;display: block;top: 12px;right: 12px;width: 25px;height: 25px;background: black;}
|
||||
.container .bottom .right .list .active .checked {position: absolute;display: block;top: 12px;right: 12px;width: 25px;height: 25px; font-size: 25px;}
|
||||
.footer {background-color:#fff;position: fixed;bottom: 0;width: 100%;text-align: center;}
|
||||
.footer div {padding: 5px;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -42,79 +46,24 @@
|
||||
<div class="container">
|
||||
<div class="top">
|
||||
<div class="selected-user">
|
||||
<div class="list">
|
||||
<button>asdfasdfasdfasdfasdfasdfasdfasdfas1</button>
|
||||
<button>asdfasdfasdfasdfasdfasdfasdfasdfas1</button>
|
||||
<button>asdfasdfasdfasdfasdfasdfasdfasdfas1</button>
|
||||
<button>asdfasdfasdfasdfasdfasdfasdfasdfas1</button>
|
||||
<button>asdfasdfasdfasdfasdfasdfasdfasdfas1</button>
|
||||
<button>6</button>
|
||||
<button>7</button>
|
||||
<button>8</button>
|
||||
<button>9</button>
|
||||
<button>10</button>
|
||||
</div>
|
||||
<div id="selectedUsers" class="list"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="list">
|
||||
<span>1级部门</span>
|
||||
<span>2级部门</span>
|
||||
<span>3级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
<span>4级部门</span>
|
||||
</div>
|
||||
<div id="selectedDepartments" class="list"></div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="list">
|
||||
<div>1</div>
|
||||
<div>2</div>
|
||||
<div>3</div>
|
||||
<div>4</div>
|
||||
<div>5</div>
|
||||
<div>6</div>
|
||||
<div>7</div>
|
||||
<div>8</div>
|
||||
<div>9</div>
|
||||
<div>10</div>
|
||||
</div>
|
||||
<div id="subDepartments" class="list"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="list">
|
||||
<div class="user-item">
|
||||
<div class="avatar">
|
||||
<img src="123"/>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="username">管理员（admin）</div>
|
||||
<div class="phone">18688888888</div>
|
||||
</div>
|
||||
<div class="checked"></div>
|
||||
</div>
|
||||
<div class="user-item active">
|
||||
<div class="avatar">
|
||||
<img src="123"/>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="username">管理员（admin）</div>
|
||||
<div class="phone">18688888888</div>
|
||||
</div>
|
||||
<div class="checked"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="users" class="list"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="layui-btn-group">
|
||||
<button id="confirmBtn" type="button" class="layui-btn layui-btn-sm">确认</button>
|
||||
<button id="closeBtn" type="button" class="layui-btn layui-btn-primary layui-btn-sm">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -127,56 +76,289 @@
|
||||
}).use(['index'], function() {
|
||||
var $ = layui.$;
|
||||
var $win = $(window);
|
||||
var requestParams = top.restAjax.path(window.location.href);
|
||||
var requestParams = top.restAjax.params(window.location.href);
|
||||
var selectType = requestParams.selectType;
|
||||
selectType = selectType && (selectType === 'checkbox' || selectType === 'radio') ? 'radio' : 'checkbox';
|
||||
|
||||
var departmentRootId = requestParams.departmentRootId;
|
||||
departmentRootId = !departmentRootId ? '0' : departmentRootId;
|
||||
|
||||
var winWidth = window.innerWidth;
|
||||
var winHeight = window.innerHeight;
|
||||
var containerWidth = winWidth +'px';
|
||||
var containerTopSelectedUserListWidth = (winWidth - 2) + 'px';
|
||||
var containerBottomLeftWidth = (winWidth * (2 / 5) - 2) +'px';
|
||||
var containerBottomLeftListWidth = (winWidth * (2 / 5) + 16) +'px';
|
||||
var containerBottomLeftListHeight = (winHeight - 126) +'px';
|
||||
var containerBottomRightWidth = (winWidth * (3 / 5) - 1) +'px';
|
||||
var containerBottomRightListWidth = (winWidth * (3 / 5) + 16) +'px';
|
||||
var containerBottomRightListHeight = (winHeight - 126) +'px';
|
||||
var containerBottomRightListUserItemInfoDivWidth = (winWidth * (3 / 5) - 56) +'px';
|
||||
var selectedUserIdArray = top.dialog.dialogData.selectedUserIdArray;
|
||||
selectedUserIdArray = selectedUserIdArray ? selectedUserIdArray : [];
|
||||
|
||||
// 初始化整体样式
|
||||
function initStyle() {
|
||||
document.querySelectorAll('.container').forEach(function(item) {
|
||||
item.style.width = containerWidth;
|
||||
});
|
||||
document.querySelectorAll('.container .top .selected-user .list').forEach(function(item) {
|
||||
item.style.width = containerTopSelectedUserListWidth;
|
||||
});
|
||||
document.querySelectorAll('.container .bottom .left').forEach(function(item) {
|
||||
item.style.width = containerBottomLeftWidth;
|
||||
});
|
||||
document.querySelectorAll('.container .bottom .left .list').forEach(function(item) {
|
||||
item.style.width = containerBottomLeftListWidth;
|
||||
item.style.height = containerBottomLeftListHeight;
|
||||
});
|
||||
document.querySelectorAll('.container .bottom .right').forEach(function(item) {
|
||||
item.style.width = containerBottomRightWidth;
|
||||
});
|
||||
document.querySelectorAll('.container .bottom .right .list').forEach(function(item) {
|
||||
item.style.width = containerBottomRightListWidth;
|
||||
item.style.height = containerBottomRightListHeight;
|
||||
});
|
||||
// 置空传递的中间参数，关闭处校验null，不处理，点提交时不会为null
|
||||
top.dialog.dialogData.selectedUserArray = null;
|
||||
|
||||
// 常量
|
||||
var Consts = {
|
||||
winWidth: window.innerWidth,
|
||||
winHeight: window.innerHeight,
|
||||
avatarColorArray: [
|
||||
{
|
||||
bgColor: '#b4b4c4',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#7182e7',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#304eff',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#ff75ef',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#ff7878',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#d2d2d2',
|
||||
color: '#000'
|
||||
},
|
||||
{
|
||||
bgColor: '#b8c926',
|
||||
color: '#fff'
|
||||
},
|
||||
{
|
||||
bgColor: '#8d3434',
|
||||
color: '#fff'
|
||||
}
|
||||
]
|
||||
}
|
||||
// 变量
|
||||
var Properties = {
|
||||
containerWidth : Consts.winWidth +'px',
|
||||
containerTopSelectedUserListWidth : (Consts.winWidth - 2) + 'px',
|
||||
containerBottomLeftWidth : (Consts.winWidth * (2 / 5) - 2) +'px',
|
||||
containerBottomLeftListWidth : (Consts.winWidth * (2 / 5) + 16) +'px',
|
||||
containerBottomLeftListHeight : (Consts.winHeight - 166) +'px',
|
||||
containerBottomRightWidth : (Consts.winWidth * (3 / 5) - 1) +'px',
|
||||
containerBottomRightListWidth : (Consts.winWidth * (3 / 5) + 16) +'px',
|
||||
containerBottomRightListHeight : (Consts.winHeight - 166) +'px',
|
||||
containerBottomRightListUserItemInfoDivWidth : (Consts.winWidth * (3 / 5) - 56) +'px',
|
||||
selectedDepartmentArray: [],
|
||||
subDepartmentArray: [],
|
||||
userArray: [],
|
||||
selectedUserArray: [],
|
||||
}
|
||||
// 方法
|
||||
var Methods = {
|
||||
// 初始化整体样式
|
||||
initStyle: function() {
|
||||
document.querySelectorAll('.container').forEach(function(item) {
|
||||
item.style.width = Properties.containerWidth;
|
||||
});
|
||||
document.querySelectorAll('.container .top .selected-user .list').forEach(function(item) {
|
||||
item.style.width = Properties.containerTopSelectedUserListWidth;
|
||||
});
|
||||
document.querySelectorAll('.container .bottom .left').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomLeftWidth;
|
||||
});
|
||||
document.querySelectorAll('.container .bottom .left .list').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomLeftListWidth;
|
||||
item.style.height = Properties.containerBottomLeftListHeight;
|
||||
});
|
||||
document.querySelectorAll('.container .bottom .right').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomRightWidth;
|
||||
});
|
||||
document.querySelectorAll('.container .bottom .right .list').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomRightListWidth;
|
||||
item.style.height = Properties.containerBottomRightListHeight;
|
||||
});
|
||||
},
|
||||
// 初始化用户列表样式
|
||||
initUserListStyle: function() {
|
||||
document.querySelectorAll('.container .bottom .right .list .user-item .info div').forEach(function(item) {
|
||||
item.style.width = Properties.containerBottomRightListUserItemInfoDivWidth;
|
||||
});
|
||||
},
|
||||
// 用户是否被选择
|
||||
getSelectedUserIndex: function (userId) {
|
||||
for(var i = 0; i < Properties.selectedUserArray.length; i++) {
|
||||
var item = Properties.selectedUserArray[i];
|
||||
if(userId === item.userId) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
},
|
||||
// 刷新已选择的用户
|
||||
refreshSelectedUser: function() {
|
||||
var doms = '';
|
||||
for(var i = 0, item; item = Properties.selectedUserArray[i++];) {
|
||||
doms += '<a href="javascript:void(0);" class="layui-btn layui-btn-xs" data-user-id="'+ item.userId +'" >'+ item.userName +' <i class="fa fa-close remove-user" data-user-id="'+ item.userId +'"></i></a>';
|
||||
}
|
||||
$('#selectedUsers').empty();
|
||||
$('#selectedUsers').append(doms);
|
||||
},
|
||||
// 刷新选择的部门
|
||||
refreshSelectedDepartments: function() {
|
||||
var doms = '';
|
||||
for(var i = 0, item; item = Properties.selectedDepartmentArray[i++];) {
|
||||
doms += '<span '+ (i === Properties.selectedDepartmentArray.length ? '' : 'class="selected-department"') +' data-department-id="'+ item.departmentId +'">'+ item.departmentName +'</span>';
|
||||
}
|
||||
$('#selectedDepartments').empty();
|
||||
$('#selectedDepartments').append(doms);
|
||||
},
|
||||
// 刷新下级部门
|
||||
refreshSubDepartments: function() {
|
||||
var doms = '';
|
||||
for(var i = 0, item; item = Properties.subDepartmentArray[i++];) {
|
||||
doms += '<div class="sub-department" data-department-id="'+ item.departmentId +'"><i class="fa fa-university"></i> '+ item.departmentName +'</div>'
|
||||
}
|
||||
$('#subDepartments').empty();
|
||||
$('#subDepartments').append(doms);
|
||||
},
|
||||
// 刷新用户
|
||||
refreshUsers: function() {
|
||||
var doms = '';
|
||||
|
||||
for(var i = 0, item; item = Properties.userArray[i++];) {
|
||||
var color = Consts.avatarColorArray[(i - 1) % Consts.avatarColorArray.length];
|
||||
|
||||
doms += [
|
||||
'<div class="user-item '+ (Methods.getSelectedUserIndex(item.userId) != -1 ? 'active' : '') +'" data-user-id="'+ item.userId +'" data-user-name="'+ item.userName +'">',
|
||||
' <div class="avatar" style="background-color: '+ color.bgColor +'; color: '+ color.color +'">'+ item.userName.substring(0, 1) +'</div>',
|
||||
' <div class="info">',
|
||||
' <div class="username">'+ item.userName +'（'+ item.userUsername +'）</div>',
|
||||
' <div class="phone">'+ item.userPhone +'</div>',
|
||||
' </div>',
|
||||
' <div class="checked"><i class="fa fa-check"></i></div>',
|
||||
'</div>'
|
||||
].join('');
|
||||
}
|
||||
$('#users').empty();
|
||||
$('#users').append(doms);
|
||||
Methods.initUserListStyle();
|
||||
},
|
||||
// 清除选择的部门
|
||||
clearSelectedDepartment: function(departmentId) {
|
||||
for(var i = 0; i < Properties.selectedDepartmentArray.length; i++) {
|
||||
var item = Properties.selectedDepartmentArray[i];
|
||||
if(departmentId === item.departmentId) {
|
||||
Properties.selectedDepartmentArray.splice(i, Properties.selectedDepartmentArray.length - i);
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
close: function() {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
}
|
||||
}
|
||||
// 初始化
|
||||
var Init = {
|
||||
// 初始化选择的用户
|
||||
initSelectedUser: function () {
|
||||
if(selectedUserIdArray.length == 0) {
|
||||
Methods.refreshSelectedUser();
|
||||
return;
|
||||
}
|
||||
top.restAjax.post(top.restAjax.path('api/user/listbyids', []), {
|
||||
ids: selectedUserIdArray
|
||||
}, null, function(code, data) {
|
||||
for(var i = 0, item; item = data[i++];) {
|
||||
var user = {
|
||||
userId: item.userId,
|
||||
userName: item.userName
|
||||
};
|
||||
Properties.selectedUserArray.push(user);
|
||||
Methods.refreshSelectedUser();
|
||||
}
|
||||
}, function(code, data) {
|
||||
top.dialog.msg(data.msg);
|
||||
});
|
||||
},
|
||||
// 刷新部门和用户
|
||||
refreshDepartmentUser: function () {
|
||||
Methods.refreshSelectedDepartments();
|
||||
Methods.refreshSubDepartments();
|
||||
Methods.refreshUsers();
|
||||
},
|
||||
// 初始化部门与部门用户
|
||||
initDepartmentAndUser: function(parentDepartmentId) {
|
||||
var loadLayerIndex;
|
||||
top.restAjax.get(top.restAjax.path('api/department/user/get-department-contain-user-and-sub/department-id/{departmentId}', [parentDepartmentId]), {}, null, function(code, data) {
|
||||
Properties.selectedDepartmentArray.push({
|
||||
departmentId: data.departmentId,
|
||||
departmentName: data.departmentName,
|
||||
departmentCode: data.departmentCode
|
||||
});
|
||||
Properties.subDepartmentArray = data.subDepartments;
|
||||
Properties.userArray = data.users;
|
||||
Init.refreshDepartmentUser();
|
||||
}, 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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化用户列表样式
|
||||
function initUserListStyle() {
|
||||
document.querySelectorAll('.container .bottom .right .list .user-item .info div').forEach(function(item) {
|
||||
item.style.width = containerBottomRightListUserItemInfoDivWidth;
|
||||
});
|
||||
}
|
||||
Methods.initStyle();
|
||||
Methods.initUserListStyle();
|
||||
Init.initSelectedUser();
|
||||
Init.initDepartmentAndUser(departmentRootId);
|
||||
|
||||
|
||||
initStyle();
|
||||
initUserListStyle();
|
||||
$(document).on('click', '.selected-department', function() {
|
||||
var departmentId = this.dataset.departmentId;
|
||||
Methods.clearSelectedDepartment(departmentId);
|
||||
Init.initDepartmentAndUser(departmentId);
|
||||
})
|
||||
// 部门列表点击
|
||||
$(document).on('click', '.sub-department', function() {
|
||||
var departmentId = this.dataset.departmentId;
|
||||
Init.initDepartmentAndUser(departmentId);
|
||||
})
|
||||
// 用户列表点击
|
||||
$(document).on('click', '.user-item', function() {
|
||||
var userId = this.dataset.userId;
|
||||
var userName = this.dataset.userName;
|
||||
if(selectType === 'radio') {
|
||||
// 单选
|
||||
Properties.selectedUserArray = [];
|
||||
Properties.selectedUserArray.push({
|
||||
userId: userId,
|
||||
userName: userName
|
||||
});
|
||||
} else {
|
||||
// 多选
|
||||
var selectedIndex = Methods.getSelectedUserIndex(userId);
|
||||
if(selectedIndex == -1) {
|
||||
// 不存在，添加
|
||||
Properties.selectedUserArray.push({
|
||||
userId: userId,
|
||||
userName: userName
|
||||
});
|
||||
} else {
|
||||
// 存在，移除
|
||||
Properties.selectedUserArray.splice(selectedIndex, 1);
|
||||
}
|
||||
}
|
||||
Methods.refreshSelectedUser();
|
||||
Methods.refreshUsers();
|
||||
})
|
||||
// 移除
|
||||
$(document).on('click', '.remove-user', function() {
|
||||
var userId = this.dataset.userId;
|
||||
var selectedIndex = Methods.getSelectedUserIndex(userId);
|
||||
Properties.selectedUserArray.splice(selectedIndex, 1);
|
||||
Methods.refreshSelectedUser();
|
||||
Methods.refreshUsers();
|
||||
})
|
||||
// 确定
|
||||
$('#confirmBtn').on('click', function(e) {
|
||||
top.dialog.dialogData.selectedUserArray = Properties.selectedUserArray;
|
||||
Methods.close();
|
||||
});
|
||||
// 关闭
|
||||
$('#closeBtn').on('click', function(e) {
|
||||
Methods.close();
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user