新增APP的人员选择和树结构

This commit is contained in:
wenc000 2020-02-10 00:14:07 +08:00
parent 793d9583f5
commit 01adcf3e24
6 changed files with 618 additions and 1 deletions

View File

@ -0,0 +1,49 @@
package com.cm.common.plugin.oauth.controller.app.apis.department;
import com.alibaba.fastjson.JSONArray;
import com.cm.common.base.AbstractController;
import com.cm.common.constants.ISystemConstant;
import com.cm.common.plugin.oauth.service.department.IDepartmentService;
import com.cm.common.result.ErrorResult;
import io.swagger.annotations.*;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
/**
* When you feel like quitting. Think about why you started
* 当你想要放弃的时候想想当初你为何开始
*
* @ClassName: DepartmentAppController
* @Description: 组织部门管理
* @Author: WangGeng
* @Date: 2020/2/9 12:05 下午
* @Version: 1.0
**/
@Api(tags = ISystemConstant.API_TAGS_APP_PREFIX + "组织部门管理")
@RestController
@RequestMapping(ISystemConstant.APP_PREFIX + "/department")
public class DepartmentAppController extends AbstractController {
@Autowired
private IDepartmentService departmentService;
@ApiOperation(value = "部门人员列表", notes = "部门人员列表接口")
@ApiImplicitParams({
@ApiImplicitParam(name = "id", value = "上级部门ID", paramType = "form")
})
@ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
@GetMapping("listztreedepartmentwithuser")
public JSONArray listZTreeDepartmentWithUser(@RequestParam(required = false) String id) {
String departmentParentId = "0";
if (!StringUtils.isBlank(id)) {
departmentParentId = id;
}
return departmentService.listZTreeDepartmentWithUser(departmentParentId);
}
}

View File

@ -0,0 +1,49 @@
package com.cm.common.plugin.oauth.controller.app.apis.user;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.cm.common.base.AbstractController;
import com.cm.common.constants.ISystemConstant;
import com.cm.common.exception.ParamsException;
import com.cm.common.plugin.oauth.service.user.IUserService;
import com.cm.common.result.ErrorResult;
import io.swagger.annotations.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* When you feel like quitting. Think about why you started
* 当你想要放弃的时候想想当初你为何开始
*
* @ClassName: UserAppController
* @Description: 用户管理
* @Author: WangGeng
* @Date: 2020/2/9 12:07 下午
* @Version: 1.0
**/
@Api(tags = ISystemConstant.API_TAGS_APP_PREFIX + "用户管理")
@RestController
@RequestMapping(ISystemConstant.APP_PREFIX + "/user")
public class UserAppController extends AbstractController {
@Autowired
private IUserService userService;
@ApiOperation(value = "通过用户和部门ID列表获取部门用户列表", notes = "通过用户和部门ID列表获取部门用户列表接口")
@ApiImplicitParams({
@ApiImplicitParam(name = "selectedUsers", value = "用户和部门ID列表", paramType = "body")
})
@ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
@PostMapping("listdepartmentuserbyuserdepartmentid")
public JSONArray listDepartmentUserByUserDepartmentId(@RequestBody JSONObject params) {
JSONArray selectedUsers = params.getJSONArray("selectedUsers");
if (selectedUsers == null || selectedUsers.isEmpty()) {
throw new ParamsException("参数列表不能为空");
}
return userService.listDepartmentUserByUserDepartmentId(params);
}
}

View File

@ -1,4 +1,4 @@
package com.cm.common.plugin.controller.app.file;
package com.cm.common.plugin.controller.app.apis.file;
import com.cm.common.base.AbstractController;
import com.cm.common.constants.ISystemConstant;

View File

@ -0,0 +1,37 @@
package com.cm.common.plugin.controller.app.routes.tree;
import com.cm.common.constants.ISystemConstant;
import io.swagger.annotations.Api;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
/**
* When you feel like quitting. Think about why you started
* 当你想要放弃的时候想想当初你为何开始
*
* @ClassName: TreeAppRouteController
* @Description: APP树结构
* @Author: WangGeng
* @Date: 2020/2/9 11:58 上午
* @Version: 1.0
**/
@Api(tags = ISystemConstant.API_TAGS_APP_ROUTE_PREFIX + "动态表单页面接口")
@Controller
@RequestMapping(ISystemConstant.APP_ROUTE_PREFIX + "/tree")
public class TreeAppRouteController {
@GetMapping("treerelease/v2")
public ModelAndView treeV2() {
ModelAndView mv = new ModelAndView("tree/app/tree-v2");
return mv;
}
@GetMapping("treeuserrelease")
public ModelAndView treeUser() {
ModelAndView mv = new ModelAndView("tree/app/tree-user");
return mv;
}
}

View File

@ -0,0 +1,196 @@
<!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">
<style>
.ztree * {font-size: 16px;}
.layui-btn-xs {font-size: 16px;}
</style>
</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', 'mobile', 'ztree', 'restajax', 'common'], function() {
var $ = layui.$;
var $win = $(window);
var layer = layui.mobile.layer;
var restAjax = layui.restajax;
var common = layui.common;
var selectedUsers = top.dialog.dialogData.selectedUsers;
var selectDepartmentUserArray = [];
function closeBox() {
top.dialog.dialogData.selectedUsers = null;
top.layer.closeAll();
}
// 初始化框架
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 - 10) +'px',
border: '1px dotted silver'
});
}
// 初始化数据
var initTimeout = null;
var isInited = false;
function initCheckData(zTree) {
if(isInited) {
return;
}
if(selectedUsers) {
if(selectedUsers.length == 0) {
return;
}
var loadLayerIndex;
restAjax.post(restAjax.path('app/user/listdepartmentuserbyuserdepartmentidrelease', []), {
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) {
layer.open({content: data.msg, skin: 'msg', time: 2});
}, function() {
loadLayerIndex = layer.open({type: 2, content: '加载中...'});
}, function() {
layer.close(loadLayerIndex);
});
}
isInited = true;
}
// 初始化树
function initThree() {
var setting = {
check: {
enable: true
},
async: {
enable: true,
autoLoad: false,
type: 'get',
url: restAjax.path('app/department/listztreedepartmentwithuserrelease', []),
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: {
onClick: function(event, treeId, treeNode) {
if(treeNode.checked) {
zTree.checkNode(treeNode, false, true);
} else {
zTree.checkNode(treeNode, true, true);
}
selectUser(zTree.getCheckedNodes(true));
},
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>');
}
}
top.dialog.dialogData.selectedDepartmentUsers = selectDepartmentUserArray;
}
$('.confirm').on('click', function() {
closeBox();
});
$('.close').on('click', function() {
closeBox();
})
});
</script>
</body>
</html>

View File

@ -0,0 +1,286 @@
<!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" 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">
<link rel="stylesheet" href="assets/layuiadmin/style/common.css" media="all">
<style>
.layui-btn+.layui-btn {margin: 0}
.selected-node {margin-right: 10px !important;}
.selected-node:last-child {margin: 0 !important;}
.ztree * {font-size: 16px;}
.layui-btn-xs {font-size: 16px;}
</style>
</head>
<body>
<div class="layui-card" style="height:100%;margin-bottom:0;">
<div class="layui-card-body">
<fieldset class="layui-elem-field">
<div class="layui-field-box" style="height: 100px; overflow: auto;">
<div id="selectNodes" class="tree-nodes-wrap"></div>
</div>
</fieldset>
<div id="treeWrap" class="tree-wrap">
<ul id="ztree" class="ztree"></ul>
</div>
<div class="layui-form-item layui-layout-admin">
<div class="layui-footer" style="left: 0;">
<button type="button" class="layui-btn" id="submitForm">确定</button>
<button type="button" class="layui-btn layui-btn-primary" id="closeBox">关闭</button>
</div>
</div>
</div>
</div>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'ztree', 'common'], function() {
var $ = layui.$;
var common = layui.common;
var selectTree = top.dialog.dialogTreeData;
var zTree;
var defaultNodes = selectTree.selectedNodes;
var selectedNodes = [];
$('#treeWrap').css({
height: $(window).height() - 205,
overflow: 'auto'
});
function initNodes() {
for(var i = 0; i < defaultNodes.length; i++) {
var item = defaultNodes[i];
if(typeof(item[selectTree.primaryKey]) != 'undefined' && item[selectTree.primaryKey] != null && item[selectTree.primaryKey] != '') {
selectedNodes.push(item);
} else {
defaultNodes.splice(i, 1);
i--;
}
}
}
initNodes();
// 删除选中的节点
function removeSelectNodes(nodeId) {
for(var i = 0; i < selectedNodes.length; i++) {
var item = selectedNodes[i];
if(nodeId == item[selectTree.primaryKey]) {
$('#selectNode_'+ nodeId).remove();
selectedNodes.splice(i, 1);
}
}
// 清空树选中状态
if(selectTree.check.enable) {
var nodes = zTree.getCheckedNodes(true);
for(var i = 0, item = nodes[i]; item = nodes[i++];) {
if(nodeId == item[selectTree.primaryKey]) {
zTree.checkNode(item, false, true);
break;
}
}
}
}
$(document.body).on('click', '.item-close', function() {
removeSelectNodes(this.dataset.id);
});
// 初始化选中的节点
function showSelectNodes() {
$('#selectNodes').empty();
for(var i = 0; i < selectedNodes.length; i++) {
var item = selectedNodes[i];
if(typeof(item[selectTree.primaryKey]) == 'undefined' || item[selectTree.primaryKey] == null || item[selectTree.primaryKey] == '') {
selectedNodes.splice(i, 1);
i--;
continue;
}
$('#selectNodes').append('<span id="selectNode_'+ item[selectTree.primaryKey] +'" class="layui-btn layui-btn-xs selected-node">'+ item.name +'</span>')
}
}
// 初始化节点
function initSelectNodes() {
showSelectNodes();
var nodes = zTree.getNodes();
for(var i = 0, item = nodes[i]; item = nodes[i++];) {
for(var j = 0, node = selectedNodes[j]; node = selectedNodes[j++];) {
if(item[selectTree.primaryKey] == node[selectTree.primaryKey]) {
zTree.checkNode(item, true, true);
break;
}
}
}
}
// 节点是否已经选择
function isNodeSelect(nodeId) {
for(var i = 0, item = selectedNodes[i]; item = selectedNodes[i++];) {
if(nodeId == item[selectTree.primaryKey]) {
return true;
}
}
return false;
}
$(function() {
var apiUri = selectTree.apiUri;
var isHttp = /^http:\/\/|^https:\/\/.*/i.test(apiUri);
var otherParams = selectTree.otherParams;
var requestUrl;
var requestMethod;
var autoLoad = false;
if(isHttp) {
requestMethod = 'post';
requestUrl = top.restAjax.path('api/tree/listtree/{resultType}', [selectTree.resultType]);
otherParams.apiUri = selectTree.apiUri;
otherParams.method = selectTree.method;
if(selectTree.defaultParams != null) {
for(var i in selectTree.defaultParams) {
otherParams['defaultKeyAndValue_'+ i] = selectTree.defaultParams[i];
}
}
} else {
requestUrl = apiUri;
requestMethod = selectTree.method;
if(selectTree.defaultParams != null) {
for (var i in selectTree.defaultParams) {
otherParams[i] = selectTree.defaultParams[i];
}
}
}
// 根节点不存在自动加载
if(typeof(selectTree.rootNode) == 'undefined' || selectTree.rootNode == null) {
autoLoad = true;
}
var setting = {
async: {
autoLoad: autoLoad,
url: requestUrl,
autoParam: selectTree.autoParams,
enable: true,
type: requestMethod,
otherParam: otherParams,
dataFilter: selectTree.dataFilter
},
data: {
key: {
checked: selectTree.data.checked,
children: selectTree.data.children,
isParent: selectTree.data.isParent,
name: selectTree.data.name,
title: selectTree.data.title
},
},
check: selectTree.check,
callback: {
onClick: function(event, treeId, treeNode) {
if(!selectTree.check.enable) {
if(treeNode[selectTree.primaryKey] == '0') {
selectedNodes.splice(0, 1);
} else {
if(selectedNodes.length == 0) {
selectedNodes.push(treeNode);
} else {
selectedNodes.splice(0, 1, treeNode);
}
}
showSelectNodes();
} else {
if(treeNode.checked) {
zTree.checkNode(treeNode, false, true);
} else {
zTree.checkNode(treeNode, true, true);
}
if(!isNodeSelect(treeNode[selectTree.primaryKey])) {
if(treeNode[selectTree.primaryKey] == '0') {
zTree.checkNode(treeNode, false, true);
return;
} else {
selectedNodes.push(treeNode);
}
showSelectNodes();
} else {
removeSelectNodes(treeNode[selectTree.primaryKey]);
}
}
},
onAsyncSuccess: function(event, treeId, treeNode, msg) {
var nodes = zTree.getNodes();
if(nodes.length == 0) {
top.dialog.msg('暂无数据');
return;
}
// 自动打钩
if(selectTree.check.enable) {
if(typeof(treeNode) != 'undefined') {
var childNodes = treeNode[selectTree.data.children];
if(typeof(childNodes) != 'undefined' && childNodes != null && childNodes.length > 0) {
for(var i = 0, item = childNodes[i]; item = childNodes[i++];) {
for(var j = 0, selectedNode = selectedNodes[j]; selectedNode = selectedNodes[j++];) {
if(item[selectTree.primaryKey] == selectedNode[selectTree.primaryKey]) {
zTree.checkNode(item, true, true);
break;
}
}
}
}
} else {
var rootNodes = zTree.getNodesByFilter(function (node) { return node.level == 0 });
for(var i = 0, item = rootNodes[i]; item = rootNodes[i++];) {
for(var j = 0, selectedNode = selectedNodes[j]; selectedNode = selectedNodes[j++];) {
if(item[selectTree.primaryKey] == selectedNode[selectTree.primaryKey]) {
zTree.checkNode(item, true, true);
break;
}
}
}
}
}
},
}
};
zTree = $.fn.zTree.init($("#ztree"), setting);
if(typeof(selectTree.rootNode) != 'undefined' && selectTree.rootNode != null) {
if(typeof(selectTree.rootNode[selectTree.primaryKey]) != 'undefined' && selectTree.rootNode[selectTree.primaryKey] != null && selectTree.rootNode[selectTree.primaryKey] != '') {
zTree.addNodes(null, selectTree.rootNode);
}
} else {
if(!autoLoad) {
var rootNode = {pId: '-1', name: '根节点', url: 'javascript:;', isParent: 'true'};
rootNode[selectTree.primaryKey] = '0';
zTree.addNodes(null, rootNode);
}
}
common.refreshTree('ztree');
initSelectNodes();
}, function(code, data) {
top.dialog.msg(data.msg);
}, function() {
layerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
}, function() {
top.dialog.close(layerIndex);
});
function closeBox() {
top.dialog.closeBox();
}
function submitForm() {
top.dialog.dialogTreeData.selectedNodes = selectedNodes;
closeBox();
}
$('#submitForm').on('click', function() {
submitForm();
});
$('#closeBox').on('click', function() {
closeBox();
});
});
</script>
</body>
</html>