<title>机构管理</title>
|
<!--当前位置开始-->
|
<div class="layui-card layadmin-header">
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
<script type="text/html" template lay-done="layui.data.updateMainBreadcrumb();">
|
</script>
|
</div>
|
</div>
|
|
<style>
|
/* 左树 */
|
#organizationTreeBar { padding: 10px 15px; border: 1px solid #e6e6e6; background-color: #f2f2f2; }
|
#organizationTree { border: 1px solid #e6e6e6; border-top: none; padding: 10px 5px; overflow: auto; height: -webkit-calc(100vh - 258px); height: -moz-calc(100vh - 258px); height: calc(100vh - 258px); }
|
.layui-tree-entry .layui-tree-txt { padding: 0 5px; border: 1px transparent solid; text-decoration: none !important; }
|
.layui-tree-entry.ew-tree-click .layui-tree-txt { background-color: #fff3e0; border: 1px #FFE6B0 solid; }
|
/* 右表搜索表单 */
|
#organizationUserTbSearchForm .layui-form-label { box-sizing: border-box !important; width: 90px !important; }
|
#organizationUserTbSearchForm .layui-input-block { margin-left: 90px !important; }
|
/* 主管标识 */
|
td .leader-flag { background: #52c41a; color: #fff; font-size: 12px; line-height: 18px; position: absolute; padding: 0 15px; right: -15px; top: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center; transform-origin: center; }
|
</style>
|
<!-- 正文开始 -->
|
<script type="text/html" template lay-type="Post" lay-url="{{ layui.setter.apiUrl }}Api/SysOrganization/GetIndex" lay-done="layui.data.done(d);">
|
|
<div class="layui-fluid" style="padding-bottom: 0;">
|
<div class="layui-row layui-col-space15">
|
<div class="layui-col-md3">
|
<div class="layui-card">
|
<div class="layui-card-body" style="padding: 10px;">
|
<!-- 树工具栏 -->
|
<div class="layui-form toolbar" id="organizationTreeBar">
|
<button id="organizationAddBtn" class="layui-btn layui-btn-sm icon-btn">
|
<i class="layui-icon"></i>添加
|
</button>
|
<button id="organizationEditBtn" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
|
<i class="layui-icon"></i>修改
|
</button>
|
<button id="organizationDelBtn"
|
class="layui-btn layui-btn-sm layui-btn-danger icon-btn">
|
<i class="layui-icon"></i>删除
|
</button>
|
</div>
|
<!-- 左树 -->
|
<div id="organizationTree"></div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-md9">
|
<div class="layui-card">
|
<div class="layui-card-body" style="padding: 10px;">
|
<!-- 数据表格 -->
|
<table id="organizationUserTable" lay-filter="organizationUserTable"></table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</script>
|
|
<!-- 表格操作列 -->
|
<script type="text/html" id="organizationUserTbBar">
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
|
<a class="layui-btn layui-btn-danger layui-btn-xs"
|
data-dropdown="#userTbDelDrop{{d.LAY_NUM}}" no-shade="true">删除</a>
|
<a class="layui-btn layui-btn-warm layui-btn-xs"
|
data-dropdown="#userOrgTbSetDrop{{d.LAY_NUM}}" no-shade="true">设为主管</a>
|
<div class="dropdown-menu-nav dropdown-popconfirm dropdown-top-right layui-hide"
|
id="userTbDelDrop{{d.LAY_NUM}}"
|
style="max-width: 200px;white-space: normal;min-width: auto;margin-left: 10px;">
|
<div class="dropdown-anchor"></div>
|
<div class="dropdown-popconfirm-title">
|
<i class="layui-icon layui-icon-help"></i>
|
确定要删除{{d.nickName}}吗？
|
</div>
|
<div class="dropdown-popconfirm-btn">
|
<a class="layui-btn layui-btn-primary" btn-cancel>取消</a>
|
<a class="layui-btn layui-btn-normal" lay-event="del">确定</a>
|
</div>
|
</div>
|
<div class="dropdown-menu-nav dropdown-popconfirm dropdown-top-right layui-hide"
|
id="userOrgTbSetDrop{{d.LAY_NUM}}"
|
style="max-width: 200px;white-space: normal;min-width: auto;margin-left: 10px;">
|
<div class="dropdown-anchor"></div>
|
<div class="dropdown-popconfirm-title">
|
<i class="layui-icon layui-icon-help"></i>
|
确定要设为主管吗？
|
</div>
|
<div class="dropdown-popconfirm-btn">
|
<a class="layui-btn layui-btn-primary" btn-cancel>取消</a>
|
<a class="layui-btn layui-btn-normal" lay-event="set">确定</a>
|
</div>
|
</div>
|
</script>
|
|
<script>
|
var indexData;
|
var debug = layui.setter.debug;
|
layui.data.done = function (d) {
|
//开启调试情况下获取接口赋值数据
|
if (debug) { console.log(d); }
|
|
indexData = d.data;
|
layui.use(['index', 'table', 'laydate', 'util', 'tree', 'coredropdown', 'tableX', 'coreHelper', 'treeTable'],
|
function () {
|
var $ = layui.$
|
, admin = layui.admin
|
, table = layui.table
|
, form = layui.form
|
, laydate = layui.laydate
|
, setter = layui.setter
|
, coreHelper = layui.coreHelper
|
, util = layui.util
|
, ztree = layui.ztree
|
, treeTable = layui.treeTable
|
, tableX = layui.tableX
|
, view = layui.view;
|
var tree = layui.tree;
|
var selObj, treeData; // 左树选中数据
|
|
/* 渲染树形 */
|
function renderTree() {
|
coreHelper.Post('Api/SysOrganization/GetPageList', null, function (res) {
|
if (res.code !== 0) {
|
return layer.msg(res.msg, { icon: 2 });
|
}
|
for (var i = 0; i < res.data.length; i++) {
|
res.data[i].title = res.data[i].organizationName;
|
res.data[i].id = res.data[i].id;
|
res.data[i].spread = true;
|
}
|
treeData = layui.treeTable.pidToChildren(res.data, 'id', 'parentId');
|
tree.render({
|
elem: '#organizationTree',
|
onlyIconControl: true,
|
data: treeData,
|
click: function (obj) {
|
selObj = obj;
|
$('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
|
$(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
|
insTb.reload({
|
where: { organizationId: obj.data.id },
|
url: layui.setter.apiUrl + 'Api/SysUser/GetPageList',
|
method: 'post'
|
});
|
}
|
});
|
$('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
|
});
|
}
|
renderTree();
|
|
/* 添加 */
|
$('#organizationAddBtn').click(function () {
|
doCreate(selObj ? selObj.data.parentId : null);
|
});
|
/* 修改 */
|
$('#organizationEditBtn').click(function () {
|
if (!selObj) return layer.msg('未选择机构', { icon: 2, anim: 6 });
|
doEdit(selObj.data)
|
});
|
/* 删除 */
|
$('#organizationDelBtn').click(function () {
|
if (!selObj) return layer.msg('未选择机构', { icon: 2, anim: 6 });
|
console.log(selObj);
|
doDelete(selObj);
|
});
|
//执行创建操作
|
function doCreate(parentId) {
|
coreHelper.Post("Api/SysOrganization/GetCreate", null, function (e) {
|
if (e.code === 0) {
|
admin.popup({
|
shadeClose: false,
|
title: '创建数据',
|
area: ['700px', '350px'],
|
id: 'LAY-popup-SysOrganization-create',
|
success: function (layero, index) {
|
view(this.id).render('system/sysorganization/create', { data: e.data, treeData: treeData, parentId: parentId }).done(function () {
|
//监听提交
|
form.on('submit(LAY-app-SysOrganization-createForm-submit)',
|
function (data) {
|
var field = data.field; //获取提交的字段
|
|
field.deleted = field.deleted == 'on';
|
if (!field.parentId) {
|
field.parentId = 0;
|
}
|
|
if (debug) { console.log(field); } //开启调试返回数据
|
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
coreHelper.Post("Api/SysOrganization/DoCreate", field, function (e) {
|
console.log(e)
|
if (e.code === 0) {
|
renderTree();
|
layer.close(index); //再执行关闭
|
layer.msg(e.msg);
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
});
|
});
|
// 禁止弹窗出现滚动条
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
}
|
});
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
}
|
//执行编辑操作
|
function doEdit(obj) {
|
console.log(obj);
|
coreHelper.Post("Api/SysOrganization/GetEdit", { id: obj.id }, function (e) {
|
if (e.code === 0) {
|
admin.popup({
|
shadeClose: false,
|
title: '编辑数据',
|
area: ['700px', '350px'],
|
id: 'LAY-popup-SysOrganization-edit',
|
success: function (layero, index) {
|
view(this.id).render('system/sysorganization/edit', { data: e.data, treeData: treeData }).done(function () {
|
//监听提交
|
form.on('submit(LAY-app-SysOrganization-editForm-submit)',
|
function (data) {
|
var field = data.field; //获取提交的字段
|
|
field.deleted = field.deleted == 'on';
|
if (!field.parentId) {
|
field.parentId = 0;
|
}
|
if (debug) { console.log(field); } //开启调试返回数据
|
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
coreHelper.Post("Api/SysOrganization/DoEdit", field, function (e) {
|
console.log(e)
|
if (e.code === 0) {
|
renderTree();
|
layer.close(index); //再执行关闭
|
layer.msg(e.msg);
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
});
|
})
|
// 禁止弹窗出现滚动条
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
}
|
});
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
}
|
//执行单个删除
|
function doDelete(obj) {
|
layer.confirm('确定要删除' + obj.data.organizationName + '吗？',
|
function (index) {
|
var loadIndex = layer.load(2);
|
coreHelper.Post("Api/SysOrganization/DoDelete", { id: obj.data.id }, function (res) {
|
if (debug) { console.log(res); } //开启调试返回数据
|
layer.close(loadIndex);
|
if (0 === res.code) {
|
layer.msg(res.msg, { icon: 1 });
|
renderTree();
|
} else {
|
layer.msg(res.msg, { icon: 2, anim: 6 });
|
}
|
});
|
});
|
|
}
|
|
/* 渲染表格 */
|
var insTb = tableX.render({
|
elem: '#organizationUserTable',
|
data: [],
|
height: 'full-185',
|
page: false,
|
toolbar: ['<p>',
|
'<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon"></i>添加用户</button> ',
|
'</p>'].join(''),
|
cellMinWidth: 100,
|
cols: [[
|
{ type: 'numbers', fixed: 'left' },
|
{ field: 'userName', title: '账号', sort: true },
|
{
|
field: 'nickName', title: '用户名', templet: function (d) {
|
if (selObj.data.leaderId === d.id) return d.nickName + '<span class="leader-flag">主管</span>';
|
return d.nickName;
|
}, sort: true, style: 'overflow: hidden;'
|
},
|
//{ field: 'sex', title: '性别', sort: true },
|
{ field: 'phone', title: '手机号', sort: true },
|
{
|
field: 'roleName', title: '角色', templet: function (d) {
|
return d.roles.map(function (item) {
|
return '<span class="layui-badge layui-badge-gray">' + item.roleName + '</span>';
|
}).join(' ');
|
}, sort: true
|
},
|
{
|
field: 'createTime', title: '创建时间', templet: function (d) {
|
return util.toDateString(d.createTime);
|
}, sort: true, width: 160
|
},
|
{
|
title: '操作', toolbar: '#organizationUserTbBar', unresize: true,
|
align: 'center', fixed: 'right', width: 200, minWidth: 200
|
}
|
]],
|
done: function () {
|
var $flag = $('#organizationUserTable+div .leader-flag');
|
$flag.parent().parent().append($flag);
|
}
|
});
|
|
/* 表格工具条点击事件 */
|
table.on('tool(organizationUserTable)', function (obj) {
|
if (obj.event === 'edit') { // 修改
|
doEditUser(obj);
|
} else if (obj.event === 'del') { // 删除
|
doDeleteUser(obj);
|
} else if (obj.event === 'set') { // 设为负责人
|
console.log(selObj);
|
console.log(obj);
|
if (selObj.data.leaderId === obj.data.id) return layer.msg('已是主管', { icon: 1 });
|
var loadIndex = layer.load(2);
|
coreHelper.Post('Api/SysOrganization/DoSetSysOrganizationLeader', {
|
organizationId: selObj.data.id,
|
leaderId: obj.data.id,
|
parentId: selObj.data.parentId
|
}, function (res) {
|
layer.close(loadIndex);
|
if (0 === res.code) {
|
layer.msg(res.msg, { icon: 1 });
|
selObj.data.leaderId = obj.data.id;
|
insTb.reload();
|
} else {
|
layer.msg(res.msg, { icon: 2 });
|
}
|
}, 'put');
|
}
|
});
|
|
/* 表格头工具栏点击事件 */
|
table.on('toolbar(organizationUserTable)', function (obj) {
|
if (obj.event === 'add') { // 添加
|
doCreateUser();
|
}
|
});
|
|
//执行创建操作
|
function doCreateUser() {
|
coreHelper.Post("Api/SysUser/GetCreate", null, function (e) {
|
if (e.code === 0) {
|
admin.popup({
|
shadeClose: false,
|
title: '创建数据',
|
area: ['380px', '450px'],
|
id: 'LAY-popup-SysUser-create',
|
success: function (layero, index) {
|
view(this.id).render('system/sysorganization/createUser', { data: e.data, treeData: treeData }).done(function () {
|
//监听提交
|
form.on('submit(LAY-app-SysUser-createForm-submit)',
|
function (data) {
|
var field = data.field; //获取提交的字段
|
|
field.emailVerified = field.emailVerified == 'on';
|
field.deleted = field.deleted == 'on';
|
|
if (!field.organizationId) {
|
layer.msg("请选择组织机构", { icon: 2 });
|
return false;
|
}
|
|
if (debug) { console.log(field); } //开启调试返回数据
|
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
coreHelper.Post("Api/SysUser/DoCreate", field, function (e) {
|
console.log(e)
|
if (e.code === 0) {
|
insTb.reload();
|
layer.close(index); //再执行关闭
|
layer.msg(e.msg);
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
});
|
});
|
// 禁止弹窗出现滚动条
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
}
|
});
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
}
|
//执行编辑操作
|
function doEditUser(obj) {
|
coreHelper.Post("Api/SysUser/GetEdit", { id: obj.data.id }, function (e) {
|
if (e.code === 0) {
|
admin.popup({
|
shadeClose: false,
|
title: '编辑数据',
|
area: ['380px', '450px'],
|
id: 'LAY-popup-SysUser-edit',
|
success: function (layero, index) {
|
view(this.id).render('system/sysorganization/editUser', { data: e.data, treeData: treeData }).done(function () {
|
//监听提交
|
form.on('submit(LAY-app-SysUser-editForm-submit)',
|
function (data) {
|
var field = data.field; //获取提交的字段
|
|
field.emailVerified = field.emailVerified == 'on';
|
field.deleted = field.deleted == 'on';
|
|
if (!field.organizationId) {
|
layer.msg("请选择组织机构", { icon: 2 });
|
return false;
|
}
|
|
if (debug) { console.log(field); } //开启调试返回数据
|
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
coreHelper.Post("Api/SysUser/DoEdit", field, function (e) {
|
console.log(e)
|
if (e.code === 0) {
|
insTb.reload();
|
layer.close(index); //再执行关闭
|
layer.msg(e.msg);
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
});
|
})
|
// 禁止弹窗出现滚动条
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
}
|
});
|
} else {
|
layer.msg(e.msg);
|
}
|
});
|
}
|
//执行单个删除
|
function doDeleteUser(obj) {
|
coreHelper.Post("Api/SysUser/DoDelete", { id: obj.data.id }, function (e) {
|
if (debug) { console.log(e); } //开启调试返回数据
|
insTb.reload();
|
layer.msg(e.msg);
|
});
|
}
|
|
});
|
};
|
</script>
|
