You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
466 lines
17 KiB
466 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<!--#include file="/widget/head.html"-->
|
|
|
|
</head>
|
|
<body class="layui-layout-body" layadmin-themealias="default">
|
|
|
|
<div id="wrapper">
|
|
<!--#include file="/widget/nav.html"-->
|
|
<div id="page-wrapper" class="layui-body layadmin-tabsbody-item layui-show layui-fluid layui-row layui-col-space15">
|
|
<div class="layui-card">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<h2 class="page-header">角色管理</h2>
|
|
</div>
|
|
</div>
|
|
<div class="row container " style="margin-left: 15px">
|
|
|
|
<div class="layui-form layui-row layui-col-space16">
|
|
<div class="layui-col-md4">
|
|
<div class="layui-input-wrap">
|
|
<div class="layui-input-prefix">
|
|
<i class="layui-icon layui-icon-username">角色名</i>
|
|
</div>
|
|
<input type="text" name="roleName" id="roleName" value="" placeholder="角色名" class="layui-input" lay-affix="clear">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-col-md4">
|
|
<div class="layui-input-prefix">
|
|
<i class="layui-icon layui-icon-account">`</i>
|
|
</div>
|
|
<div class="layui-btn-container layui-col-xs12">
|
|
<button class="layui-btn" lay-submit lay-filter="demo-table-search" onclick="Search()">
|
|
立刻查询
|
|
</button>
|
|
<button class="layui-btn" lay-submit lay-filter="demo-table-search" onclick="CreateRole()">
|
|
创建角色
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row table-responsive" id="form" style="width:90%">
|
|
<table class="table table-striped table-bordered table-hover inline" lay-filter="hero_table"
|
|
id="hero_table"></table>
|
|
<div id="test1"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/html" id="barDemo">
|
|
<div class="layui-clear-space">
|
|
<a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="delete">删除</a>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/html" id="editBt">
|
|
<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
|
|
</script>
|
|
|
|
<div style="display: none; padding: 10px;" id="menuPermission">
|
|
|
|
<div style="width:100%;">
|
|
<div class="layui-label"><label>拥有菜单</label></div>
|
|
<div id="menu-tree" class="menu-tree"></div>
|
|
</div>
|
|
|
|
<div style="width:100%;margin-top: 3px">
|
|
<div class="layui-label"><label>拥有权限</label></div>
|
|
<div id="permission-tree" class="permission-tree"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--#include file="/widget/tail.html"-->
|
|
<script type="text/javascript">
|
|
|
|
function Search() {
|
|
Select_data(1, 200, 0)
|
|
}
|
|
|
|
function ini_page(data) {
|
|
layui.laypage.render({
|
|
elem: 'test1',
|
|
count: data.count,
|
|
limits: [10, 20, 30, 40, 50, 80, 100],
|
|
limit: 20,
|
|
layout: ["count", "prev", "page", "next", "limit", "skip"],
|
|
jump: function (obj, first) {
|
|
if (!first) {
|
|
Select_data(obj.curr, obj.limit, 0);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function inihero_table(data, limit) {
|
|
m_limit = limit;
|
|
console.info(data);
|
|
herotable = layui.table.render({
|
|
elem: '#hero_table',
|
|
page: false,
|
|
data: data,
|
|
width: 900,
|
|
height: 500,
|
|
autoSort: true,
|
|
limit: limit,
|
|
cols: [[
|
|
{field: 'Id', title: 'ID', sort: true, width: 100},
|
|
{field: 'Name', title: '角色名称', sort: true, width: 200},
|
|
{field: 'menus', title: '拥有菜单', sort: true, width: 200, templet:function (d){
|
|
if(d.Name == 'Administrator'){
|
|
return '';
|
|
}
|
|
return $("#editBt").html()
|
|
}},
|
|
{field: 'Permission', title: '拥有权限', sort: true, width: 200, templet: function (d){
|
|
if(d.Name == 'Administrator'){
|
|
return '';
|
|
}
|
|
return $("#editBt").html()
|
|
}},
|
|
{fixed: 'right', title: '操作', width: 134, minWidth: 125, templet:function (d) {
|
|
if(d.Name == 'Administrator'){
|
|
return '';
|
|
}
|
|
return $("#barDemo").html()
|
|
} }
|
|
]],
|
|
});
|
|
|
|
}
|
|
|
|
layui.table.on('tool(hero_table)', function (obj) {
|
|
var id = obj.data.Id;
|
|
var name = obj.data.Name;
|
|
console.dir(name)
|
|
if (obj.event == "edit") {
|
|
let haveMenus=obj.data.Menus.split(",");
|
|
let havePermissions=obj.data.Permissions.split(",");
|
|
InitMenu(haveMenus)
|
|
InitPermissions(havePermissions);
|
|
layer.open({
|
|
type: 1,
|
|
offset: 'auto',
|
|
id: 'layerDemoAuto',//防止重复弹出,
|
|
content: $('#menuPermission'),
|
|
btn: ['保存', '关闭'],
|
|
btnAlign: 'c',
|
|
shade: 0, //不显示遮罩
|
|
yes: function () {
|
|
debugger
|
|
let menuIds = [];
|
|
let permissionIds=[];
|
|
let checkedMenuNodes = layui.tree.getChecked('menu-id-1');
|
|
for (const checkedMenuNodesKey in checkedMenuNodes) {
|
|
let menu = checkedMenuNodes[checkedMenuNodesKey];
|
|
menuIds.push(menu.id);
|
|
permissionIds.push(menu.permission);
|
|
for (const menuKey in menu.children) {
|
|
let subMenu = menu.children[menuKey];
|
|
menuIds.push(subMenu.id);
|
|
permissionIds.push(subMenu.permission);
|
|
}
|
|
}
|
|
console.dir(menuIds);
|
|
var checkedPremissionNodes = layui.tree.getChecked('permission-id-1');
|
|
for (const checkedPremissionNodesKey in checkedPremissionNodes) {
|
|
let ps=checkedPremissionNodes[checkedPremissionNodesKey];
|
|
permissionIds.push(ps.id);
|
|
for (const menuKey in ps.children) {
|
|
let sp = ps.children[menuKey];
|
|
permissionIds.push(sp.id);
|
|
}
|
|
}
|
|
let uniqueArray = [...new Set(permissionIds)];
|
|
$.get(Page.SvrIp + "/api/update_role",
|
|
{
|
|
token: cookie.get("token"),
|
|
id:id,
|
|
name:name,
|
|
menus:menuIds.join(","),
|
|
permissions:uniqueArray.join(","),
|
|
|
|
}
|
|
, function (d) {
|
|
window.location.reload();
|
|
});
|
|
|
|
layer.closeAll();
|
|
$("#menuPermission").hide();
|
|
//update menu and permissions
|
|
},
|
|
btn2: function () {
|
|
layer.closeAll();
|
|
$("#menuPermission").hide();
|
|
},
|
|
end: function () {
|
|
layer.closeAll();
|
|
$("#menuPermission").hide();
|
|
}
|
|
});
|
|
}
|
|
|
|
if(obj.event=="delete"){
|
|
layer.msg('确定要删除?', {
|
|
time: 200000, //20s后自动关闭
|
|
btn: ['删除', '再想想'],
|
|
yes: function(index, layero){
|
|
DeleteRole(id)
|
|
layer.msg('删除');
|
|
window.location.reload();
|
|
},
|
|
btn2:function(index, layero){
|
|
layer.msg('再想想');
|
|
},
|
|
|
|
});
|
|
}
|
|
});
|
|
|
|
function DeleteRole(roleId){
|
|
$.get(Page.SvrIp + "/api/delete_role", {token: cookie.get("token"),roleId:roleId},
|
|
function (d) {
|
|
|
|
});
|
|
}
|
|
function InitMenu(haveMenu){
|
|
layui.use(function () {
|
|
var tree = layui.tree;
|
|
var layer = layui.layer;
|
|
var util = layui.util;
|
|
let data = [];
|
|
for (const menusKey in menus) {
|
|
let menu = menus[menusKey];
|
|
let subMenus = menu.subMenus;
|
|
let subData = [];
|
|
for (const subMenusKey in subMenus) {
|
|
let subMenu = subMenus[subMenusKey];
|
|
let subItem = {
|
|
title: subMenu.Name,
|
|
id: subMenu.MenuId,
|
|
field: 'menu' + subMenu.MenuId,
|
|
checked: haveMenu.includes(subMenu.MenuId.toString()),
|
|
spread: true,
|
|
permission:subMenu.Permission,
|
|
|
|
}
|
|
subData.push(subItem)
|
|
}
|
|
let item = {
|
|
title: menu.Name,
|
|
id: menu.MenuId,
|
|
field: 'menu' + menu.MenuId,
|
|
checked: haveMenu.includes(menu.MenuId.toString()),
|
|
spread: true,
|
|
children: subData,
|
|
permission:menu.Permission,
|
|
|
|
}
|
|
data.push(item)
|
|
}
|
|
// 渲染
|
|
tree.render({
|
|
elem: '#menu-tree',
|
|
data: data,
|
|
showCheckbox: true, // 是否显示复选框
|
|
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
|
|
checkChirld:false,
|
|
id: 'menu-id-1',
|
|
edit: false,
|
|
click: function (obj) {
|
|
var data = obj.data; //获取当前点击的节点数据
|
|
console.dir('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
|
|
},
|
|
operate: function (obj) {
|
|
var type = obj.type; // 得到操作类型：add、edit、del
|
|
var data = obj.data; // 得到当前节点的数据
|
|
var elem = obj.elem; // 得到当前节点元素
|
|
var id = data.id; // 得到节点索引
|
|
if (type === 'update') { // 修改节点
|
|
layer.msg('<br>更新节点数据：' + JSON.stringify(data));
|
|
console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的内容
|
|
} else if (type === 'del') { // 删除节点
|
|
console.dir('<br>删除节点数据：' + JSON.stringify(data));
|
|
}
|
|
}
|
|
});
|
|
// 按钮事件
|
|
util.event('lay-on', {
|
|
getChecked: function (othis) {
|
|
var checkedData = tree.getChecked('menu-id-1'); // 获取选中节点的数据
|
|
|
|
layer.alert(JSON.stringify(checkedData), {shade: 0});
|
|
console.log(checkedData);
|
|
},
|
|
setChecked: function () {
|
|
tree.setChecked('menu-id-1', [12, 16]); // 勾选对应 id 值的节点
|
|
},
|
|
reload: function () {
|
|
tree.reload('menu-id-1', {}); // 重载实例
|
|
}
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
function InitPermissions(havePermissions){
|
|
layui.use(function () {
|
|
var tree = layui.tree;
|
|
var layer = layui.layer;
|
|
var util = layui.util;
|
|
let data = [];
|
|
for (const menusKey in permissions) {
|
|
let menu = permissions[menusKey];
|
|
let subMenus = menu.SubPermissions;
|
|
let subData = [];
|
|
for (const subMenusKey in subMenus) {
|
|
let subPermission = subMenus[subMenusKey];
|
|
let subItem = {
|
|
title: subPermission.Name,
|
|
id: subPermission.Id,
|
|
field: 'permission_' + subPermission.Id,
|
|
checked: havePermissions.includes(subPermission.Id.toString()),
|
|
spread: true,
|
|
}
|
|
subData.push(subItem)
|
|
}
|
|
let item = {
|
|
title: menu.Name,
|
|
id: menu.Id,
|
|
field: 'permission_' + menu.Id,
|
|
checked: havePermissions.includes(menu.Id.toString()),
|
|
spread: true,
|
|
children: subData,
|
|
|
|
}
|
|
data.push(item)
|
|
}
|
|
// 渲染
|
|
tree.render({
|
|
elem: '#permission-tree',
|
|
data: data,
|
|
showCheckbox: true, // 是否显示复选框
|
|
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
|
|
id: 'permission-id-1',
|
|
edit: false,
|
|
click: function (obj) {
|
|
var data = obj.data; //获取当前点击的节点数据
|
|
layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
|
|
},
|
|
operate: function (obj) {
|
|
var type = obj.type; // 得到操作类型：add、edit、del
|
|
var data = obj.data; // 得到当前节点的数据
|
|
var elem = obj.elem; // 得到当前节点元素
|
|
var id = data.id; // 得到节点索引
|
|
if (type === 'update') { // 修改节点
|
|
layer.msg('<br>更新节点数据：' + JSON.stringify(data));
|
|
console.log(elem.find('.layui-tree-txt').html()); // 得到修改后的内容
|
|
} else if (type === 'del') { // 删除节点
|
|
layer.msg('<br>删除节点数据：' + JSON.stringify(data));
|
|
}
|
|
}
|
|
});
|
|
// 按钮事件
|
|
util.event('lay-on', {
|
|
getChecked: function (othis) {
|
|
var checkedData = tree.getChecked('permission-id-1'); // 获取选中节点的数据
|
|
|
|
layer.alert(JSON.stringify(checkedData), {shade: 0});
|
|
console.log(checkedData);
|
|
},
|
|
setChecked: function () {
|
|
tree.setChecked('permission-id-1', [12, 16,101,102]); // 勾选对应 id 值的节点
|
|
},
|
|
reload: function () {
|
|
tree.reload('permission-id-1', {}); // 重载实例
|
|
}
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
function Select_data(page, limit, first) {
|
|
var roleName=$("#roleName").val();
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: Page.SvrIp + "/api/all_role",
|
|
data: {
|
|
token: cookie.get("token"),
|
|
roleName:roleName,
|
|
},
|
|
dataType: "json",
|
|
beforeSend: function () {
|
|
layer.load(1, {shade: [0.8, '#393D49']});
|
|
},
|
|
complete: function () {
|
|
layer.closeAll('loading');
|
|
},
|
|
success: function (d) {
|
|
exchange_data = d.data;
|
|
inihero_table(exchange_data, limit);
|
|
if (first === 1) {
|
|
ini_page(d);
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
$(function () {
|
|
Select_data(1, 20, 1);
|
|
Load_menus();
|
|
Load_Permission();
|
|
});
|
|
|
|
|
|
var menus;
|
|
var permissions;
|
|
|
|
function Load_menus() {
|
|
$.get(Page.SvrIp + "/api/menus_manager",
|
|
{token: cookie.get("token")}
|
|
, function (d) {
|
|
menus = d.data;
|
|
});
|
|
}
|
|
|
|
function Load_Permission() {
|
|
$.get(Page.SvrIp + "/api/all_permission",
|
|
{token: cookie.get("token")}
|
|
, function (d) {
|
|
permissions = d.data;
|
|
});
|
|
}
|
|
|
|
function CreateRole(){
|
|
layer.prompt({title: '创建角色', formType: 0}, function(pass, index){
|
|
layer.close(index);
|
|
if(pass==""){
|
|
layer.msg("请输入名称")
|
|
return;
|
|
}
|
|
$.get(Page.SvrIp + "/api/create_role",
|
|
{token: cookie.get("token"),name:pass}
|
|
, function (d) {
|
|
window.location.reload();
|
|
});
|
|
});
|
|
|
|
}
|
|
</script>
|
|
<script src="../js/coupon.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|