| | |
| | | <link rel="stylesheet" href="/assets/libs/zTree/css/zTreeStyle/zTreeStyle.css"/> |
| | | <link rel="stylesheet" href="/assets/libs/zTree/css/zTreeStyle/zTreeStyle.css" /> |
| | | <script type="text/javascript" src="/assets/libs/zTree/js/jquery.ztree.all-3.5.min.js"></script> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header"> |
| | | <h2 class="header-title">角色管理</h2> |
| | | <span class="layui-breadcrumb pull-right"> |
| | | <a href="#!console">首页</a> |
| | | <a><cite>角色管理</cite></a> |
| | | <a href="#!console">首页</a> |
| | | <a><cite>角色管理</cite></a> |
| | | </span> |
| | | </div> |
| | | <div class="layui-card-body"> |
| | |
| | | <option value="">-请选择-</option> |
| | | <option value="name">角色名称</option> |
| | | </select>  |
| | | <input id="role-edit-value" class="layui-input search-input" type="text" placeholder="输入关键字"/>  |
| | | <input id="role-edit-value" class="layui-input search-input" type="text" placeholder="按关键字" />  |
| | | <button id="role-btn-search" class="layui-btn icon-btn"><i class="layui-icon"></i>搜索</button> |
| | | <button id="role-btn-add" class="layui-btn icon-btn"><i class="layui-icon"></i>添加</button> |
| | | <button id="role-btn-add" class="layui-btn icon-btn permissions" permissions="saveOrUpdate"><i class="layui-icon"></i>添加</button> |
| | | </div> |
| | | |
| | | <!-- 数据表格 --> |
| | | <table class="layui-table" id="role-table" lay-filter="role-table"></table> |
| | | <table class="layui-hide" id="role-table" lay-filter="role-table"></table> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </form> |
| | | </script> |
| | | |
| | | <!-- 数据权限 表单弹窗 --> |
| | | <script type="text/html" id="role-model-role"> |
| | | <form id="role-form" lay-filter="role-form" class="layui-form model-form"> |
| | | <input name="id" type="hidden"/> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label">角色名</label> |
| | | <div class="layui-input-block"> |
| | | <input name="name" placeholder="请输入角色名" type="text" class="layui-input" maxlength="20" |
| | | lay-verify="required" required/> |
| | | </div> |
| | | </div> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label">Code</label> |
| | | <div class="layui-input-block"> |
| | | <input name="code" placeholder="请输入Code" type="text" class="layui-input" maxlength="20" |
| | | lay-verify="required" required /> |
| | | </div> |
| | | </div> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label">权限范围</label> |
| | | <div class="layui-input-block"> |
| | | <select name="type" lay-filter="role_organization"> |
| | | <option value="">请选择权限</option> |
| | | <option value="1">全部数据权限</option> |
| | | <option value="2">自定义数据权限</option> |
| | | <option value="3">本部门数据权限</option> |
| | | <option value="4">本部门及以下数据权限</option> |
| | | <option value="5">仅本人数据权限</option> |
| | | </select> |
| | | </div> |
| | | </div> |
| | | <div class="layui-form-item" id="tree"> |
| | | <!-- <label class="layui-form-label">数据权限</label> --> |
| | | <!-- <div id="orgParentId-tree" class="demo-tree demo-tree-box"></div> --> |
| | | <ul id="treeMenu-role" class="ztree" style="padding: 25px 0px 20px 60px;"></ul> |
| | | </div> |
| | | <div class="layui-form-item model-form-footer"> |
| | | <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button> |
| | | <button class="layui-btn" lay-filter="role-form-submit-role" lay-submit>保存</button> |
| | | </div> |
| | | </form> |
| | | </script> |
| | | |
| | | <!-- 表格操作列 --> |
| | | <script type="text/html" id="role-table-bar"> |
| | | <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a> |
| | | <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> |
| | | <a class="layui-btn layui-btn-xs" lay-event="auth">权限分配</a> |
| | | <a class="layui-btn layui-btn-primary layui-btn-xs permissions" permissions="updateEnabled" lay-event="edit">修改</a> |
| | | <a class="layui-btn layui-btn-danger layui-btn-xs permissions" permissions="role-del" lay-event="del">删除</a> |
| | | <a class="layui-btn layui-btn-xs permissions" permissions="menus-granted" lay-event="auth">权限分配</a> |
| | | <a class="layui-btn layui-btn-xs permissions" permissions="sysroleorganization" lay-event="auth_role">分配数据权限</a> |
| | | </script> |
| | | |
| | | <!-- 表格状态列 --> |
| | |
| | | </script> |
| | | |
| | | <script> |
| | | layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects'], function () { |
| | | layui.use(['form', 'table', 'util', 'config', 'tree', 'admin', 'formSelects'], function () { |
| | | var form = layui.form; |
| | | var table = layui.table; |
| | | var config = layui.config; |
| | |
| | | var util = layui.util; |
| | | var admin = layui.admin; |
| | | var formSelects = layui.formSelects; |
| | | var clientsAll =null; |
| | | //树形插件 |
| | | var tree = layui.tree; |
| | | var layer = layui.layer |
| | | , $ = layui.jquery; |
| | | //常量 |
| | | var clientsAll = null; |
| | | |
| | | //渲染表格 |
| | | table.render({ |
| | | elem: '#role-table', |
| | | url: config.base_server + 'api-user/roles', |
| | | headers:{'Authorization': 'Bearer ' + config.getToken().access_token}, |
| | | headers: { 'Authorization': 'Bearer ' + config.getToken().access_token }, |
| | | page: true, |
| | | cellMinWidth: 80, |
| | | cols: [[ |
| | | {type: 'numbers'}, |
| | | {field: 'id', sort: true, title: 'ID',width: 80}, |
| | | {field: 'name', sort: true, title: '角色名'}, |
| | | {field: 'code', sort: true, title: 'Code'}, |
| | | {field: 'tenantId', sort: true, title: '应用标识'}, |
| | | { |
| | | field: 'createTime', sort: true, templet: function (d) { |
| | | return util.toDateString(d.createTime); |
| | | }, title: '创建时间' |
| | | }, |
| | | {field: 'enabled', width: 100,sort: true, templet: '#role-tpl-state', title: '状态'}, |
| | | {align: 'center', toolbar: '#role-table-bar', title: '操作',width: 250} |
| | | ]] |
| | | { field: 'name', sort: true, title: '角色名' }, |
| | | { field: 'code', sort: true, title: 'Code' }, |
| | | { field: 'tenantId', sort: true, title: '应用标识' }, |
| | | // { |
| | | // field: 'createTime', sort: true, templet: function (d) { |
| | | // return util.toDateString(d.createTime); |
| | | // }, title: '创建时间' |
| | | // }, |
| | | { field: 'createTime', width: 250, sort: true, title: '创建时间', templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy/MM/dd HH:mm')}}</div>" }, |
| | | { field: 'enabled', width: 100, sort: true, templet: '#role-tpl-state', title: '状态' }, |
| | | { align: 'center', toolbar: '#role-table-bar', title: '操作', width: 320 } |
| | | ]], |
| | | done:function(res){ |
| | | permissionsInput(res,config); |
| | | } |
| | | }); |
| | | |
| | | // 获取应用列表 |
| | |
| | | layer.closeAll('loading'); |
| | | if (0 === data.code) { |
| | | let selected = false; |
| | | clientsAll=data.data; |
| | | $.each(data.data,function(index,item){ |
| | | clientsAll = data.data; |
| | | $.each(data.data, function (index, item) { |
| | | if (config.clientId === item.clientId) { |
| | | selected = true; |
| | | } else { |
| | |
| | | }) |
| | | form.render(); |
| | | } else { |
| | | layer.msg(data.msg, {icon: 2, time: 500}); |
| | | layer.msg(data.msg, { icon: 2, time: 2000 }); |
| | | } |
| | | }, 'GET'); |
| | | |
| | |
| | | |
| | | // 表单提交事件 |
| | | form.on('submit(role-form-submit)', function (data) { |
| | | data.field.tenantId=$('#role_clients_add').val(); |
| | | data.field.tenantId = $('#role_clients_add').val(); |
| | | let tenantId = $('#role_clients_add').val(); |
| | | layer.load(2); |
| | | admin.req('api-user/roles/saveOrUpdate?tenantId='+tenantId, JSON.stringify(data.field), function (data) { |
| | | admin.req('api-user/roles/saveOrUpdate?tenantId=' + tenantId, JSON.stringify(data.field), function (data) { |
| | | layer.closeAll('loading'); |
| | | // console.log(data); |
| | | if (data.code === 0) { |
| | | layer.msg(data.msg, {icon: 1, time: 500}); |
| | | layer.msg(data.msg, { icon: 1, time: 2000 }); |
| | | table.reload('role-table'); |
| | | layer.closeAll('page'); |
| | | } else { |
| | | layer.msg(data.msg, {icon: 2, time: 500}); |
| | | layer.msg(data.msg, { icon: 2, time: 2000 }); |
| | | } |
| | | }, $('#role-form').attr('method')); |
| | | return false; |
| | | }); |
| | | // 表单提交事件 |
| | | form.on('submit(role-form-submit-role)', function (data) { |
| | | var array=new Array(); |
| | | var treeObj = $.fn.zTree.getZTreeObj('treeMenu-role'); |
| | | var nodes = treeObj.getCheckedNodes(true); |
| | | $.each(nodes,function(i,item){ |
| | | if(!item.children){ |
| | | array.push(item.id); |
| | | } |
| | | }) |
| | | if(array.length>0){ |
| | | data.field.orgIds=array |
| | | } |
| | | data.field.roleId= data.field.id |
| | | layer.load(2); |
| | | admin.req('api-user/sysroleorganization', JSON.stringify(data.field), function (data) { |
| | | layer.closeAll('loading'); |
| | | if (data.code === 0) { |
| | | layer.msg(data.msg, { icon: 1, time: 2000 }); |
| | | table.reload('role-table'); |
| | | layer.closeAll('page'); |
| | | } else { |
| | | layer.msg(data.msg, { icon: 2, time: 2000 }); |
| | | } |
| | | }, $('#role-form').attr('method')); |
| | | layer.closeAll('page'); |
| | | return false; |
| | | }); |
| | | |
| | |
| | | } else if (obj.event === 'del') { //删除 |
| | | doDelete(obj); |
| | | } else if (obj.event === 'auth') { // 权限分配 |
| | | showMenuDialog(obj.data.id,obj.data.tenantId); |
| | | showMenuDialog(obj.data.id, obj.data.tenantId); |
| | | } else if (obj.event === 'auth_role') { |
| | | showEditModelRole(data);//分配数据权限 |
| | | } |
| | | }); |
| | | |
| | |
| | | }, function (data) { |
| | | layer.closeAll('loading'); |
| | | if (data.code == 0) { |
| | | layer.msg(data.msg, {icon: 1, time: 500}); |
| | | layer.msg(data.msg, { icon: 1, time: 2000 }); |
| | | } else { |
| | | layer.msg(data.msg, {icon: 2, time: 500}); |
| | | layer.msg(data.msg, { icon: 2, time: 2000 }); |
| | | $(obj.elem).prop('checked', !obj.elem.checked); |
| | | form.render('checkbox'); |
| | | } |
| | |
| | | $('#role-btn-search').click(function () { |
| | | var key = $('#role-search-key').val(); |
| | | var value = $('#role-edit-value').val(); |
| | | table.reload('role-table', {where: {searchKey: key, searchValue: value}}); |
| | | table.reload('role-table', { where: { searchKey: key, searchValue: value } }); |
| | | }); |
| | | |
| | | var getData = function () { |
| | | admin.req('api-user/sysroleorganization/getTree', { is_del: 0 }, function (data) { |
| | | layer.closeAll('loading'); |
| | | var data1 = [{ |
| | | name: '常用文件夹', |
| | | id: 1, |
| | | children: [ |
| | | { name: '所有未读', id: 11 }, |
| | | { name: '置顶邮件', id: 12 }, |
| | | { name: '标签邮件', id: 13 }] |
| | | }]; |
| | | if (0 === data.code) { |
| | | var setting = { |
| | | check: { enable: true }, |
| | | data: { |
| | | simpleData: { |
| | | enable: true |
| | | } |
| | | } |
| | | }; |
| | | $.fn.zTree.init($('#treeMenu-role'), setting, data.data); |
| | | layer.closeAll('loading'); |
| | | |
| | | } else { |
| | | layer.msg(data.msg, { icon: 2, time: 2000 }); |
| | | } |
| | | }, 'get'); |
| | | } |
| | | // 显示编辑弹窗 |
| | | var showEditModel = function (data) { |
| | | layer.open({ |
| | |
| | | $('#role-form')[0].reset(); |
| | | $('#role-form').attr('method', 'POST'); |
| | | if (data) { |
| | | $("input[name='code']").attr('disabled',true); |
| | | $("input[name='code']").attr('class',"layui-input layui-disabled"); |
| | | $("input[name='code']").attr('disabled', true); |
| | | $("input[name='code']").attr('class', "layui-input layui-disabled"); |
| | | let selected = false; |
| | | $.each(clientsAll,function(index,item){ |
| | | $.each(clientsAll, function (index, item) { |
| | | if (data.tenantId === item.clientId) { |
| | | selected = true; |
| | | } else { |
| | |
| | | //往下拉菜单里添加元素 |
| | | $('#role_clients_add').append(new Option(item.clientName, item.clientId, false, selected)); |
| | | }) |
| | | $('#role_clients_add').attr('disabled',true); |
| | | $('#role_clients_add').attr('disabled', true); |
| | | form.render(); |
| | | form.val('role-form', data); |
| | | $('#role-form').attr('method', 'POST'); |
| | | } |
| | | else{ |
| | | $.each(clientsAll,function(index,item){ |
| | | else { |
| | | $.each(clientsAll, function (index, item) { |
| | | //往下拉菜单里添加元素 |
| | | $('#role_clients_add').append(new Option(item.clientName, item.clientId)); |
| | | }) |
| | | $('#role_clients_add').attr('disabled',false); |
| | | $('#role_clients_add').attr('disabled', false); |
| | | form.render(); |
| | | $('#role-form').attr('method', 'POST'); |
| | | } |
| | | } |
| | | }); |
| | | }; |
| | | //数据权限的点击事件 |
| | | form.on('select(role_organization)', function (data) { |
| | | if (data.value == 2) { |
| | | $("#tree").show(); |
| | | }else{ |
| | | $("#tree").hide(); |
| | | } |
| | | }); |
| | | // 显示分配数据权限弹窗 |
| | | var showEditModelRole = function (data) { |
| | | layer.open({ |
| | | type: 1, |
| | | title: "分配数据权限", |
| | | area: '450px', |
| | | offset: '120px', |
| | | content: $('#role-model-role').html(), |
| | | success: function () { |
| | | $('#role-form')[0].reset(); |
| | | $('#role-form').attr('method', 'POST'); |
| | | if (data) { |
| | | getData(); |
| | | if(data.type!=2){ |
| | | $("#tree").hide(); |
| | | } |
| | | form.render(); |
| | | form.val('role-form', data); |
| | | } |
| | | |
| | | } |
| | | }); |
| | | }; |
| | | // 删除 |
| | | var doDelete = function (obj) { |
| | | layer.confirm('确定要删除吗?', function (i) { |
| | | let tenantId = $('#role_clients').val(); |
| | | layer.close(i); |
| | | layer.load(2); |
| | | admin.req('api-user/roles/' + obj.data.id+'?tenantId='+tenantId, {}, function (data) { |
| | | admin.req('api-user/roles/' + obj.data.id + '?tenantId=' + tenantId, {}, function (data) { |
| | | layer.closeAll('loading'); |
| | | if (data.code === 0) { |
| | | layer.msg(data.msg, {icon: 1, time: 500}); |
| | | layer.msg(data.msg, { icon: 1, time: 2000 }); |
| | | obj.del(); |
| | | } else { |
| | | layer.msg(data.msg, {icon: 2, time: 500}); |
| | | layer.msg(data.msg, { icon: 2, time: 2000 }); |
| | | } |
| | | }, 'DELETE'); |
| | | }); |
| | |
| | | |
| | | |
| | | // 菜单管理 |
| | | var showMenuDialog = function (roleId,tenantId) { |
| | | var showMenuDialog = function (roleId, tenantId) { |
| | | // let tenantId = $('#role_clients').val(); |
| | | layer.open({ |
| | | type: 1, |
| | |
| | | $(layero).children('.layui-layer-content').css('overflow-y', 'auto'); |
| | | layer.load(2); |
| | | var setting = { |
| | | check: {enable: true}, |
| | | check: { enable: true }, |
| | | data: { |
| | | simpleData: { |
| | | enable: true |
| | | } |
| | | } |
| | | }; |
| | | admin.req('api-user/menus/'+roleId+'/menus', {tenantId: tenantId}, function (data) { |
| | | admin.req('api-user/menus/' + roleId + '/menus', { tenantId: tenantId }, function (data) { |
| | | if (data.code === 0) { |
| | | $.fn.zTree.init($('#treeMenu'), setting, data.data); |
| | | layer.closeAll('loading'); |
| | |
| | | data.roleId = roleId; |
| | | data.menuIds = ids; |
| | | |
| | | admin.req('api-user/menus/granted?tenantId='+tenantId, JSON.stringify(data) , function (data) { |
| | | admin.req('api-user/menus/granted?tenantId=' + tenantId, JSON.stringify(data), function (data) { |
| | | layer.closeAll('loading'); |
| | | if (0 == data.code) { |
| | | layer.msg(data.msg, {icon: 1, time: 500}); |
| | | layer.msg(data.msg, { icon: 1, time: 2000 }); |
| | | layer.close(index); |
| | | } else { |
| | | layer.msg(data.msg, {icon: 2, time: 500}); |
| | | layer.msg(data.msg, { icon: 2, time: 2000 }); |
| | | } |
| | | }, 'POST'); |
| | | } |
| | |
| | | } |
| | | |
| | | // 应用下来框点击事件 |
| | | form.on('select(role_clients)', function(data){ |
| | | table.reload('role-table', {where: {tenantId: data.value}}); |
| | | form.on('select(role_clients)', function (data) { |
| | | table.reload('role-table', { where: { tenantId: data.value } }); |
| | | }); |
| | | }); |
| | | |