fixed:role.html
bobi
parent
aa98c0fc57
commit
a4b83c9f1b
|
|
@ -59,10 +59,10 @@
|
|||
bobi
|
||||
</a>
|
||||
<dl id="userInfo" class="layui-nav-child">
|
||||
<dd><a lay-id="u-1" href="javascript:" data-url="pages/user/user.html">个人中心<span
|
||||
<dd><a lay-id="u-1" href="javascript:" data-url="pages/member/user.html">个人中心<span
|
||||
class="layui-badge-dot"></span></a></dd>
|
||||
<dd><a lay-id="u-2" href="javascript:" data-url="pages/user/user-info.html">基本资料</a></dd>
|
||||
<dd><a lay-id="u-3" href="javascript:" data-url="pages/user/changePwd.html">安全设置</a></dd>
|
||||
<dd><a lay-id="u-2" href="javascript:" data-url="pages/member/user-info.html">基本资料</a></dd>
|
||||
<dd><a lay-id="u-3" href="javascript:" data-url="pages/member/changePwd.html">安全设置</a></dd>
|
||||
<dd>
|
||||
<hr/>
|
||||
</dd>
|
||||
|
|
|
|||
|
|
@ -4,20 +4,18 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>添加角色</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/scroll-bar.css">
|
||||
<link rel="stylesheet" href="../../css/sub-page.css">
|
||||
<link rel="stylesheet" href="../../css/sub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="ok-body">
|
||||
<!--面包屑导航区域-->
|
||||
<div class="ok-body-breadcrumb">
|
||||
<span class="layui-breadcrumb">
|
||||
<a><cite>首页</cite></a>
|
||||
<a><cite>常用页面</cite></a>
|
||||
<a><cite>用户列表</cite></a>
|
||||
<a><cite>添加角色</cite></a>
|
||||
</span>
|
||||
<span class="layui-breadcrumb">
|
||||
<a><cite>首页</cite></a>
|
||||
<a><cite>会员管理</cite></a>
|
||||
<a><cite>角色列表</cite></a>
|
||||
<a><cite>添加角色</cite></a>
|
||||
</span>
|
||||
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
</a>
|
||||
|
|
@ -39,7 +37,7 @@
|
|||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">权限</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="authTree"></div>
|
||||
<div id="permissionTree"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
|
|
@ -52,22 +50,33 @@
|
|||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../../lib/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.config({
|
||||
base: 'lib/layui/lay/modules/authtree/'
|
||||
}).extend({
|
||||
authtree: 'authtree',
|
||||
});
|
||||
|
||||
layui.use(['element', 'form', 'jquery'], function () {
|
||||
var element = layui.element;
|
||||
<script type="text/javascript">
|
||||
layui.use(["element", "form", "tree", "okLayer", "okUtils"], function () {
|
||||
var form = layui.form;
|
||||
var $ = layui.jquery;
|
||||
var tree = layui.tree;
|
||||
var okLayer = layui.okLayer;
|
||||
var okUtils = layui.okUtils;
|
||||
|
||||
form.on('submit(add)', function (data) {
|
||||
console.log(data.field);
|
||||
layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
var data = [{"title":"根目录","spread":true,"children":[{"title":"会员管理","spread":true,"children":[{"title":"用户管理","spread":true,"children":[{"title":"添加用户"},{"title":"编辑用户"},{"title":"删除用户"}]},{"title":"角色管理","spread":true,"children":[{"title":"添加角色"},{"title":"编辑角色"},{"title":"删除角色"}]},{"title":"权限管理","spread":true,"children":[{"title":"添加权限"},{"title":"编辑权限"},{"title":"删除权限"}]}]}]}];
|
||||
|
||||
tree.render({
|
||||
elem: "#permissionTree",
|
||||
// data: okUtils.mockApi.permission.list,
|
||||
data: data,
|
||||
showCheckbox: true
|
||||
});
|
||||
|
||||
form.on("submit(add)", function (data) {
|
||||
// TODO 权限节点校验
|
||||
|
||||
// 请求后台
|
||||
okUtils.ajax("/role/add", "post", data.field).done(function (response) {
|
||||
console.log(response)
|
||||
okLayer.msg.greenTick("添加成功", function () {
|
||||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||||
});
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,9 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>编辑角色</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/scroll-bar.css">
|
||||
<link rel="stylesheet" href="../../css/sub-page.css">
|
||||
<link rel="stylesheet" href="../../css/sub.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="ok-body">
|
||||
|
|
@ -39,6 +37,7 @@
|
|||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">权限</label>
|
||||
<div class="layui-input-block">
|
||||
<!-- TODO -->
|
||||
<div id="authTree"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>角色列表</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/scroll-bar.css">
|
||||
<link rel="stylesheet" href="../../css/sub.css">
|
||||
<link rel="stylesheet" href="../../lib/nprogress/nprogress.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="ok-body">
|
||||
|
|
@ -33,153 +30,122 @@
|
|||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<!--工具栏-->
|
||||
<okToolbar>
|
||||
<button class="layui-btn layui-btn-danger" id="batchDel">
|
||||
<i class="layui-icon layui-icon-delete"></i>批量删除
|
||||
</button>
|
||||
<button class="layui-btn" id="addRole">
|
||||
<i class="layui-icon"></i>添加角色
|
||||
</button>
|
||||
<span>共有数据：<i id="countNum"></i> 条</span>
|
||||
</okToolbar>
|
||||
<!--数据表格-->
|
||||
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
|
||||
</div>
|
||||
<!--js逻辑-->
|
||||
<script src="../../lib/layui/layui.js"></script>
|
||||
<script src="../../lib/nprogress/nprogress.js"></script>
|
||||
<script>
|
||||
NProgress.start();
|
||||
window.onload = function () {
|
||||
NProgress.done();
|
||||
}
|
||||
|
||||
layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () {
|
||||
var element = layui.element;
|
||||
layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
|
||||
var table = layui.table;
|
||||
var form = layui.form;
|
||||
var $ = layui.jquery;
|
||||
var laydate = layui.laydate;
|
||||
var okLayer = layui.okLayer;
|
||||
var okUtils = layui.okUtils;
|
||||
|
||||
laydate.render({
|
||||
elem: '#startTime',
|
||||
type: "datetime"
|
||||
});
|
||||
laydate.render({elem: "#startTime", type: "datetime"});
|
||||
laydate.render({elem: "#endTime", type: "datetime"});
|
||||
|
||||
laydate.render({
|
||||
elem: '#endTime',
|
||||
type: "datetime"
|
||||
});
|
||||
|
||||
table.render({
|
||||
elem: '#tableId',
|
||||
url: '../../data/role.json',
|
||||
var roleTable = table.render({
|
||||
elem: "#tableId",
|
||||
url: okUtils.mockApi.role.list,
|
||||
limit: 10,
|
||||
page: true,
|
||||
toolbar: true,
|
||||
toolbar: "#toolbarTpl",
|
||||
size: "sm",
|
||||
cols: [[
|
||||
{type: 'checkbox'},
|
||||
{field: 'id', title: 'ID', width: 80, sort: true},
|
||||
{field: 'name', title: '角色名', width: 100},
|
||||
{field: 'remarks', title: '备注', width: 100},
|
||||
{field: 'createUser', title: '创建者', width: 85},
|
||||
{field: 'createTime', title: '创建时间', width: 200},
|
||||
{title: '操作', width: 200, templet: '#operationTpl', align: 'center'}
|
||||
{type: "checkbox"},
|
||||
{field: "id", title: "ID", width: 80, sort: true},
|
||||
{field: "name", title: "角色名", width: 100},
|
||||
{field: "remarks", title: "备注", width: 100},
|
||||
{field: "createUser", title: "创建者", width: 85},
|
||||
{field: "createTime", title: "创建时间", width: 200},
|
||||
{title: "操作", width: 200, align: "center", templet: "#operationTpl"}
|
||||
]],
|
||||
done: function (res, curr, count) {
|
||||
$("#countNum").text(count);
|
||||
console.log(res, curr, count);
|
||||
}
|
||||
});
|
||||
|
||||
form.on('submit(search)', function () {
|
||||
layer.msg('正在查询，请稍后...');
|
||||
form.on("submit(search)", function () {
|
||||
roleTable.reload({
|
||||
where: data.field,
|
||||
page: {curr: 1}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
table.on('tool(tableFilter)', function (obj) {
|
||||
var data = obj.data;
|
||||
var layEvent = obj.event;
|
||||
if (layEvent === 'edit') {
|
||||
layer.open({
|
||||
title: '编辑角色',
|
||||
type: 2,
|
||||
shade: false,
|
||||
maxmin: true,
|
||||
shade: 0.5,
|
||||
area: ['90%', '90%'],
|
||||
content: 'role-edit.html',
|
||||
zIndex: layer.zIndex,
|
||||
end: function () {
|
||||
$(".layui-laypage-btn")[0].click();
|
||||
}
|
||||
});
|
||||
} else if (layEvent === 'del') {
|
||||
layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
|
||||
layer.msg("操作成功！", {icon: 1, time: 1000});
|
||||
});
|
||||
} else if (layEvent === 'auth') {
|
||||
layer.open({
|
||||
title: '角色授权',
|
||||
type: 2,
|
||||
shade: false,
|
||||
maxmin: true,
|
||||
shade: 0.5,
|
||||
area: ['90%', '90%'],
|
||||
content: 'role-auth.html',
|
||||
zIndex: layer.zIndex,
|
||||
end: function () {
|
||||
$(".layui-laypage-btn")[0].click();
|
||||
}
|
||||
});
|
||||
}
|
||||
table.on("toolbar(tableFilter)", function (obj) {
|
||||
switch (obj.event) {
|
||||
case "add":
|
||||
add();
|
||||
break;
|
||||
case "batchDel":
|
||||
batchDel();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
$("#batchDel").click(function () {
|
||||
layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
|
||||
var checkStatus = table.checkStatus('tableId');
|
||||
var rows = checkStatus.data.length;
|
||||
if (rows > 0) {
|
||||
var idsStr = "";
|
||||
for (var i = 0; i < checkStatus.data.length; i++) {
|
||||
idsStr += checkStatus.data[i].id + ',';
|
||||
}
|
||||
console.log("选择的id-->" + idsStr);
|
||||
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
|
||||
$(".layui-laypage-btn")[0].click();
|
||||
});
|
||||
} else {
|
||||
layer.msg('未选择有效数据', {
|
||||
offset: 't',
|
||||
anim: 6
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
table.on("tool(tableFilter)", function (obj) {
|
||||
var data = obj.data;
|
||||
switch (obj.event) {
|
||||
case "edit":
|
||||
edit(data.id);
|
||||
break;
|
||||
case "del":
|
||||
del(data.id);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
$("#addRole").click(function () {
|
||||
layer.open({
|
||||
title: '添加角色',
|
||||
type: 2,
|
||||
shade: false,
|
||||
maxmin: true,
|
||||
shade: 0.5,
|
||||
anim: 4,
|
||||
area: ['90%', '90%'],
|
||||
content: 'role-add.html',
|
||||
zIndex: layer.zIndex,
|
||||
// skin: 'layui-layer-molv',
|
||||
end: function () {
|
||||
$(".layui-laypage-btn")[0].click();
|
||||
}
|
||||
});
|
||||
})
|
||||
function add () {
|
||||
okLayer.open("添加角色", "role-add.html", "90%", "90%", null, function () {
|
||||
roleTable.reload();
|
||||
})
|
||||
}
|
||||
|
||||
function batchDel () {
|
||||
okLayer.confirm("确定要批量删除吗？", function (index) {
|
||||
layer.close(index);
|
||||
var idsStr = okUtils.table.batchCheck(table);
|
||||
if (idsStr) {
|
||||
okUtils.ajax("/role/batchDel", "post", {idsStr: idsStr}).done(function (response) {
|
||||
console.log(response)
|
||||
okUtils.table.successMsg("批量删除成功");
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function edit (id) {
|
||||
okLayer.open("编辑角色", "role-edit.html?id=" + id, "90%", "90%", null, function () {
|
||||
roleTable.reload();
|
||||
})
|
||||
}
|
||||
|
||||
function del (id) {
|
||||
okLayer.confirm("确定要删除吗？", function () {
|
||||
okUtils.ajax("/user/batchDel", "post", {idsStr: id}).done(function (response) {
|
||||
console.log(response)
|
||||
okUtils.table.successMsg("删除成功");
|
||||
}).fail(function (error) {
|
||||
console.log(error)
|
||||
});
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<!--模板-->
|
||||
<!-- 头工具栏模板 -->
|
||||
<script type="text/html" id="toolbarTpl">
|
||||
<div class="layui-btn-container">
|
||||
<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
|
||||
<div class="layui-inline" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i></div>
|
||||
</div>
|
||||
</script>
|
||||
<!-- 行工具栏模板 -->
|
||||
<script type="text/html" id="operationTpl">
|
||||
<a href="javascript:;" title="授权" lay-event="auth"><i class="iconfont icon-jiaoseshouquan"></i></a>
|
||||
<a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon"></i></a>
|
||||
<a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon"></i></a>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="ok-body-breadcrumb">
|
||||
<span class="layui-breadcrumb">
|
||||
<a><cite>首页</cite></a>
|
||||
<a><cite>常用页面</cite></a>
|
||||
<a><cite>会员管理</cite></a>
|
||||
<a><cite>用户列表</cite></a>
|
||||
</span>
|
||||
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
|
||||
|
|
@ -56,6 +56,7 @@
|
|||
page: true,
|
||||
toolbar: true,
|
||||
toolbar: "#toolbarTpl",
|
||||
size: "sm",
|
||||
cols: [[
|
||||
{type: "checkbox"},
|
||||
{field: "id", title: "ID", width: 80, sort: true},
|
||||
|
|
@ -193,16 +194,21 @@
|
|||
<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon"></i>添加用户</button>
|
||||
</div>
|
||||
</script>
|
||||
<!--模板-->
|
||||
<script type="text/html" id="statusTpl">
|
||||
<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" {{ d.status==0 ? 'checked' : ''}}>
|
||||
</script>
|
||||
<script type="text/html" id="roleTpl">
|
||||
{{ d.role == 0 ? '管理员' : '普通用户 '}}
|
||||
</script>
|
||||
<!-- 行工具栏模板 -->
|
||||
<script type="text/html" id="operationTpl">
|
||||
<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon"></i></a>
|
||||
<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon"></i></a>
|
||||
</script>
|
||||
<!-- 启用|停用模板 -->
|
||||
<script type="text/html" id="statusTpl">
|
||||
{{# if(d.status == 0){ }}
|
||||
<span class="layui-btn layui-btn-normal layui-btn-xs">已启用</span>
|
||||
{{# } else if(d.status == 1) { }}
|
||||
<span class="layui-btn layui-btn-warm layui-btn-xs">已停用</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
<script type="text/html" id="roleTpl">
|
||||
{{ d.role == 0 ? '管理员' : '普通用户 '}}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue