<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>智慧管控平台-组织管理</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta content="智慧管控平台" name="keywords">
<meta content="智慧管控平台" name="description">
<!-- bootstrap -->
<link rel="stylesheet" href="../../plug-in/bootstrap/css/bootstrap.min.css">
<!-- layui -->
<link rel="stylesheet" href="../../plug-in/layui/layui.css">
<!-- 图标 -->
<link rel="stylesheet" href="../../plug-in/font-awesome/css/font-awesome.min.css">
<!-- components -->
<link href="../../plug-in/components/components-rounded.min.css" rel="stylesheet" type="text/css">
<!-- pagePlug -->
<link href="../../plug-in/pagePlug/pagePlug.css" rel="stylesheet" type="text/css">
<!-- select -->
<link href="../../plug-in/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css">
<!-- reset -->
<link href="../../css/reset.css" type="text/css" rel="stylesheet">
<!-- common.js -->
<link rel="stylesheet" href="../../css/common.css">
<style>
#tree{
width: 268px;
height: 442px;
overflow-x:auto;
overflow-y:auto;
}
#tree .btn {
color: #000;
}
.modal-header.closed .glyphicon {
top: -18px;
}
.modal-header.closed span {
display: block;
float: right;
}
#tree a.active span{
color: #0681EB;
}
#tree .fa{
color: #0681EB;
}
</style>
<body>
<!-- 右侧内容 -->
<div class="cont-title">
<span class="cont-title-font">Ι</span>组织管理
</div>
<!-- <div class="row"> -->
<div class="col-lg-3 col-md-3">
<div id="tree">
<!--<ul class="treeChild list-unstyled">-->
<!--<a href="javascript:;" class="btn" data-id="1" data-limit="">-->
<!--<i class="fa fa-chevron-down flex"></i> <span>1234</span>-->
<!--<i class="fa fa-plus-circle" onclick="addOrg(this)"></i>-->
<!--</a>-->
<!--<li>-->
<!--<ul class="treeChild list-unstyled">-->
<!--<a href="javascript:;" class="btn" data-id="2" data-limit="">-->
<!--<i class="fa fa-chevron-down flex"></i> <span>1234</span>-->
<!--<i class="fa fa-plus-circle font-blue" onclick="addOrg(this)"></i>-->
<!--</a>-->
<!--<li>-->
<!--<ul class="treeChild list-unstyled">-->
<!--<a href="javascript:;" class="btn" data-id="3" data-limit="">-->
<!--<i class="fa fa-chevron-down flex"></i> <span>1234</span>-->
<!--<i class="fa fa-plus-circle font-blue" onclick="addOrg(this)"></i>-->
<!--</a>-->
<!--</ul>-->
<!--</li>-->
<!--</ul>-->
<!--</li>-->
<!--</ul>-->
</div>
</div>
<div class="col-lg-9 col-md-9" style="border-left: 1px solid #eee;">
<button class="layui-btn layui-btn-sm layui-btn-normal btn-add" onclick="adduser()">添加关联用户</button>
<div class="cont-table">
<div class="div-empty">暂无数据</div>
<div id="tableBox">
<table>
<thead>
<th>
用户账号
</th>
<th>
用户姓名
</th>
<th>
操作
</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- pages -->
<div class="pageBox"></div>
</div>
<!-- </div> -->
<!-- 添加/编辑组织 -->
<div class="modal fade" id="orgModal" tabindex="-1" role="dialog" aria-labelledby="orgModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header closed">
<h4 class="modal-title" id="myModalLabel"></h4>
<span class="glyphicon glyphicon-remove closed" data-dismiss="modal"></span>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="nameInput" class="col-md-3 col-sm-3 control-label">组织名称:</label>
<div class="col-md-8 col-sm-8">
<input type="text" class="form-control" placeholder="请输入名称" id="nameInput">
</div>
</div>
<div class="form-group">
<label for="sortNumInput" class="col-md-3 col-sm-3 control-label">排序号:</label>
<div class="col-md-8 col-sm-8">
<input type="text" class="form-control" placeholder="请输入排序号" id="sortNumInput">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">取消</button>
<button type="button" class="btn blue btnSubmit" onclick="_saveOrg()">保存</button>
</div>
</div>
</div>
</div>
<!-- 添加用户 -->
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header closed">
<h4 class="modal-title">添加用户</h4>
<span class="glyphicon glyphicon-remove closed" data-dismiss="modal"></span>
</div>
<div class="modal-body">
<div class="unship-empty">暂无未配置的用户</div>
<div class="cont-table">
<table id="unshipOrgUsers">
<thead>
<th>
用户账号
</th>
<th>
用户姓名
</th>
<th>
选择添加到组织
</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">取消</button>
<button type="button" class="btn blue btnSubmit" onclick="_AddUserShip()">保存</button>
</div>
</div>
</div>
</div>
<!-- jquery -->
<script type="text/javascript" src="../../plug-in/jquery/jquery-1.10.0.min.js"></script>
<!-- bootstrp -->
<script type="text/javascript" src="../../plug-in/bootstrap/js/bootstrap.min.js"></script>
<!-- layer -->
<!-- <script type="text/javascript" src="plug-in/layer-v3.1.1/layer/layer.js"></script> -->
<!-- <script type="text/javascript" src="plug-in/layui/layui.js"></script> -->
<script type="text/javascript" src="../../plug-in/layui/layui.all.js"></script>
<!-- pagePlug -->
<script type="text/javascript" src="../../plug-in/pagePlug/pagePlug.js"></script>
<!-- select -->
<!--<script type="text/javascript" src="../../../plug-in/bootstrap-select/bootstrap-select.min.js"></script>-->
<!--<script type="text/javascript" src="../../../plug-in/bootstrap-select/defaults-zh_CN.min.js"></script>-->
<!-- server -->
<script type="text/javascript" src="../../js/server.js"></script>
<!-- index -->
<script type="text/javascript" src="../../js/index.js"></script>
<!-- common -->
<script type="text/javascript" src="../../js/common.js"></script>
<!-- checksettings -->
<script type="text/javascript" src="orgsettings.js"></script>
</body>
</html>
/*
*用户管理js
*/
/*
*公共变量
*/
var totalCount;
var totalPages;
var pageNo = 1;
var pageSize;
var orgId = null;
$('#tableBox table').hide();
/*
*组织节点操作
*/
function bindFlex() {
//节点详情
$("#tree").delegate(".treeChild span", "click", function () {
var _id = $(this).parent().attr("data-id");
var limit = $(this).parent().attr("data-limit");
getOrgList(_id,limit);
$(this).parent().find('.fa-chevron-down').addClass("fa-chevron-left").removeClass("fa-chevron-down");
loadTable();
$('#tree a.btn').removeClass('active');
$(this).parent().addClass('active');
});
//折叠
$("#tree").delegate(".flex", "click", function(){
if($(this).hasClass('fa-chevron-left') == false) {
$(this).addClass("fa-chevron-left").removeClass("fa-chevron-down");
var _id = $(this).parent().attr("data-id");
var limit = $(this).parent().attr("data-limit");
getOrgList(_id,limit);
}else{
$(this).removeClass("fa-chevron-left").addClass("fa-chevron-down");
var id = $(this).parent('a').attr("data-id");
$("li[data-id='"+ id + "']").html("");
}
});
}
bindFlex();
/*
*加载加载组织根节点
*/
function initroute(){
var Params = {
id: 0,
limit: false
};
ajaxJson('POST', urls + '/org/listByPid', Params, function(err, rsp) {
if (rsp.code == 200) {
var data = rsp.body;
var innerHtml = '';
for (var i in data) {
innerHtml +=
'<ul class="treeChild list-unstyled">' +
'<a href="javascript:;" class="btn" data-id="' + data[i].id + '" data-limit="' + data[i].limit + '">' +
'<i class="fa fa-chevron-down flex"></i> ' +
'<span>' + data[i].name + '</span> ' +
'<i class="fa fa-edit fa-lg" onclick="editOrg(this)" data-id="' + data[i].id + '"></i> ' +
// '<i class="fa fa-plus-square-o fa-lg" onclick="addOrg(' + data[i].id + "," + data[i].limit + ')"></i> ' +
'<i class="fa fa-plus-square-o fa-lg" onclick="addOrg(this,'+data[i].limit+')" data-id="' + data[i].id + '"></i> ' +
'<i class="fa fa-minus-square-o fa-lg" onclick="delOrg(this)" data-id="' + data[i].id + '"></i>'+
'</a>' +
'<li data-id="' + data[i].id + '"></li>'
'</ul>';
}
$("#tree").html(innerHtml);
$("#tree a:eq(0) span").click();
} else {
layer.msg(rsp.message)
}
}, false);
}
initroute();
/*
*分级加载组织节点
*/
function getOrgList(id, limit){
orgId = id;
/*var Params = {
id: id,
limit: limit
};*/
ajaxJson('POST', urls + '/org/listByPid?id=' + id +'&limit=' + limit, null, function(err, rsp) {
if (rsp.code == 200) {
var data = rsp.body;
var innerHtml = '';
for (var i in data) {
innerHtml +=
'<ul class="treeChild list-unstyled">' +
'<a href="javascript:;" class="btn" data-id="' + data[i].id + '" data-limit="' + data[i].limit + '">' +
'<i class="fa fa-chevron-down flex"></i> ' +
'<span>' + data[i].name + '</span>' +
'<i class="fa fa-edit fa-lg" onclick="editOrg(this)" data-id="' + data[i].id + '"></i>' +
// '<i class="fa fa-plus-square-o fa-lg" onclick="addOrg(' + data[i].id + "," + data[i].limit + ')"></i>' +
'<i class="fa fa-plus-square-o fa-lg" onclick="addOrg(this,'+data[i].limit+')" data-id="' + data[i].id + '"></i> ' +
'<i class="fa fa-minus-square-o fa-lg" onclick="delOrg(this)" data-id="' + data[i].id + '"></i>'+
'</a>' +
'<li data-id="' + data[i].id + '"></li></ul>';
}
$("#tree li[data-id='" + id + "']").html(innerHtml);
} else {
layer.msg(rsp.message)
}
}, false);
}
/*
*加载组织关联用户列表
*/
function listUserShip(pageNo){
var params ={
orgId: orgId,
pageNum: pageNo,
pageSize: 10
};
ajaxJson('POST', urls + '/org/listUserShipPage', JSON.stringify(params), function(err, rsp) {
if (rsp.code == 200) {
var data = rsp.body.datas;
totalCount = rsp.body.total;
pageSize = rsp.body.pageSize;
totalPages = parseInt((totalCount + pageSize - 1) / pageSize);
pageNo = rsp.body.pageNum;
if (!data.length) {
$('#tableBox table').hide();
$('.div-empty').show();
} else {
$('.div-empty').hide();
$('#tableBox table').show();
}
listHtml(data);
} else {
layer.msg(rsp.message)
}
}, false);
}
function listHtml(data) {
var innerHTML = "";
$(data).each(function(i, item) {
$('#tableBox table tbody').empty();
innerHTML += '<tr>' +
'<td>' + (item.username ? item.username : '/') + '</td>' +
'<td>' + (item.name ? item.name : '/') + '</td>' +
'<td>' +
'<button class="layui-btn layui-btn-xs layui-btn-danger btn-del" onclick="deluser(' + item.id + ')"><i class="fa fa-trash"></i> 删除</button>' +
'</td>' +
'</tr>';
});
$('#tableBox table tbody').append(innerHTML);
};
function loadTable(){
listUserShip(1);
$(".pageBox").html('');
pages();
permitOptions(menuId);
}
var parenId, parentLimit = false, isAdd;
function addOrg(e, limit){
isAdd = true;
// parenId = id;
var eId = $(e).attr('data-id');
parenId = eId;
parentLimit = limit;
$("#nameInput").val("");
$("#sortNumInput").val("");
$("#orgModal").modal("show");
$('#myModalLabel').text('添加组织');
}
var eIdParent;
function editOrg(e){
var eId = $(e).attr('data-id');
eIdParent = eId;
isAdd = false;
ajaxJson('POST', urls + '/org/getOrg?id='+eId, '', function(err, rsp) {
console.log('rsp',rsp)
if (rsp.code == 200) {
var data = rsp.body;
parenId = data.parentId;
if(parenId == 0){
parentLimit = false;
}else{
parentLimit = $("#tree a[data-id='" + parenId + "']").attr("data-limit");
}
$("#nameInput").val(data.name);
$("#sortNumInput").val(data.sortNum);
$("#orgModal").modal("show");
$('#myModalLabel').text('编辑组织');
} else {
layer.msg(rsp.message)
}
}, false);
}
function _saveOrg(id){
var name = $("#nameInput").val();
if (!name) {
layer.msg('组织名称不能为空');
return false;
};
var sortNum = $("#sortNumInput").val();
if (!sortNum) {
layer.msg('排序不能为空');
return false;
};
var params = {
name: name,
parentId: parenId,
sortNum : sortNum
};
if(isAdd == true){
apiurl = '/org/add';
}else{
apiurl = '/org/update';
params.id = eIdParent
}
// console.log(params)
ajaxJson('POST', urls + apiurl, JSON.stringify(params), function(err, rsp) {
if (rsp.code == 200) {
if (isAdd == true) {
layer.msg('添加成功！');
} else {
layer.msg('修改成功！');
}
getOrgList(parenId,parentLimit);
$("#orgModal").modal("hide");
} else {
layer.msg(rsp.message)
}
}, false);
}
/*
*删除
*/
function delOrg(e) {
var eId = $(e).attr('data-id');
ajaxJson('POST', urls + '/org/getOrg?id='+eId, '', function(err, rsp) {
if (rsp.code == 200) {
var data = rsp.body;
parenId = data.parentId;
if(parenId == 0){
parentLimit = false;
}else{
parentLimit = $("#tree a[data-id='" + parenId + "']").attr("data-limit");
}
layer.msg('确定要删除吗', {
time: 0,
btn: ['确定', '取消'],
yes: function(index, layero) {
layer.close(index);
ajaxJson('POST', urls + '/org/del?id=' + eId, null , function(err, rsp) {
if (rsp.code == 200) {
layer.msg("删除成功!");
getOrgList(parenId,parentLimit);
} else {
layer.msg(rsp.message);
}
}, true);
}
});
} else {
layer.msg(rsp.message)
}
}, false);
};
var Unship_pageNo = 1;
function adduser(){
var param ={
orgId :orgId,
pageNum: Unship_pageNo,
pageSize: 999
};
ajaxJson('POST', urls + '/user/listUnshipOrgUsers', JSON.stringify(param) , function(err, rsp) {
if (rsp.code == 200) {
var data = rsp.body.datas;
Unship_pageNo = rsp.body.pageNum;
if (!data.length) {
$('#unshipOrgUsers').hide();
$('.unship-empty').show();
} else {
$('.unship-empty').hide();
$('#unshipOrgUsers').show();
}
listUnshipOrgUsersHtml(data);
} else {
layer.msg(rsp.message)
}
}, false);
}
function listUnshipOrgUsersHtml(data) {
var innerHTML = "";
$('#unshipOrgUsers tbody').empty();
$(data).each(function(i, item) {
innerHTML += '<tr>' +
'<td>' + (item.username ? item.username : '/') + '</td>' +
'<td>' + (item.name ? item.name : '/') + '</td>' +
'<td>' +
'<input type="radio" name="userId" value="' + item.id + '">' +
'</td>' +
'</tr>';
});
$('#unshipOrgUsers tbody').append(innerHTML);
$("#userModal").modal("show");
}
function _AddUserShip(){
var uid = $("input[name='userId']:checked").val();
if(uid){
var param = {
orgId : orgId,
userId : uid
};
ajaxJson('POST', urls + '/org/addUserShip', JSON.stringify(param) , function(err, rsp) {
if (rsp.code == 200) {
layer.msg("添加成功");
$("#userModal").modal("hide");
loadTable();
} else {
layer.msg(rsp.message);
}
}, false);
return;
}else{
layer("请选择要添加的用户");
}
}
function deluser(id){
var delParams = {
id: id
};
layer.msg('确定要删除吗', {
time: 0,
btn: ['确定', '取消'],
yes: function(index, layero) {
layer.close(index);
ajaxJson('POST', urls + '/org/delUserShip?id=' + id, null, function(err, rsp) {
if (rsp.code == 200) {
layer.msg("删除成功!");
loadTable();
} else {
layer.msg(rsp.message);
}
}, true);
}
});
}
/*
*表格分页
*/
function pages() {
$.pageInit({
container: '.page', //容器：默认page
setPos: '.pageBox', //放置位置：默认body
totalPages: totalPages, //总页数：必填
totalLists: totalCount, //数据总数：必填
initPage: pageNo, //初始页码：默认1
inputVal: 1, //设置跳转的input值：默认1
//要执行的函数：默认null，必须为fn且返回true则可执行分页，false则不执行
callBack: function(n) {
pageNo = n; //记录当前页数
var flag = true;
listUserShip(n);
return flag;
}
});
};
