root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

del:面包屑导航

master
bobi 2019-11-03 19:49:06 +08:00
parent b2459fb803
commit 569e0076a5
12 changed files with 694 additions and 758 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/common.css
View File

@ -3,13 +3,8 @@
[v-cloak]{display:none!important}
.ok-body{padding:10px}
/*面包屑导航*/
.ok-body-breadcrumb{position:relative;line-height:39px;height:32px;border-bottom:1px solid #e5e5e5}
.ok-body-breadcrumb .layui-btn{line-height:2.4em;margin-top:3px;float:right}
.ok-body-breadcrumb .layui-btn .layui-icon{line-height:32px}
/*多条件搜索框*/
.ok-search{margin-top:15px}
/*.ok-search{margin-top:15px}*/
.ok-search .layui-input{width:190px;padding-left:10px;margin-left:10px;float:left}
.ok-search .layui-input:first-child{margin-left:0}
.ok-search .layui-btn{margin-left:10px}

74
lib/layui/lay/okmodules/okLayer.js
View File

@ -37,44 +37,42 @@ layui.define(["layer"], function (exports) {
/**
* msg()函数二次封装
*/
msg: {
// msg弹窗默认消失时间
time: 1000,
// 绿色勾
greenTick: function (content, callbackFunction) {
let options = {icon: 1, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 红色叉
redCross: function (content, callbackFunction) {
let options = {icon: 2, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 黄色问号
yellowQuestion: function (content, callbackFunction) {
let options = {icon: 3, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 灰色锁
grayLock: function (content, callbackFunction) {
let options = {icon: 4, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 红色哭脸
redCry: function (content, callbackFunction) {
let options = {icon: 5, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 绿色笑脸
greenLaugh: function (content, callbackFunction) {
let options = {icon: 6, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 黄色感叹号
yellowSigh: function (content, callbackFunction) {
let options = {icon: 7, time: okLayer.msg.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
}
// msg弹窗默认消失时间
time: 1000,
// 绿色勾
greenTickMsg: function (content, callbackFunction) {
let options = {icon: 1, time: okLayer.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 红色叉
redCrossMsg: function (content, callbackFunction) {
let options = {icon: 2, time: okLayer.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 黄色问号
yellowQuestionMsg: function (content, callbackFunction) {
let options = {icon: 3, time: okLayer.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 灰色锁
grayLockMsg: function (content, callbackFunction) {
let options = {icon: 4, time: okLayer.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 红色哭脸
redCryMsg: function (content, callbackFunction) {
let options = {icon: 5, time: okLayer.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 绿色笑脸
greenLaughMsg: function (content, callbackFunction) {
let options = {icon: 6, time: okLayer.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
// 黄色感叹号
yellowSighMsg: function (content, callbackFunction) {
let options = {icon: 7, time: okLayer.time, anim: okLayer.animChoose()};
layer.msg(content, options, callbackFunction);
},
/**
* 皮肤选择

4
lib/layui/lay/okmodules/okMock.js
View File

@ -5,6 +5,10 @@ layui.define([], function (exprots) {
login: "https://www.easy-mock.com/mock/5d5d0dd46cfcbd1b8627bf1d/ok-admin-v2.0/login",
bsgrid: "http://rap2api.taobao.org/app/mock/233041/bsgrid",
datatables: "http://rap2api.taobao.org/app/mock/233041/datatables",
listUser: "http://rap2api.taobao.org/app/mock/233041/user/listUser",
listRole: "http://rap2api.taobao.org/app/mock/233041/role/listRole",
menu: {
list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/menu/list"
},

52
lib/layui/lay/okmodules/okUtils.js
View File

@ -74,36 +74,34 @@ layui.define(["layer"], function (exprots) {
});
return deferred.promise();
},
table: {
/**
* 主要用于针对表格批量操作操作之前的检查
* @param table
* @returns {string}
*/
batchCheck: function (table) {
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 + ",";
}
return idsStr;
} else {
layer.msg("未选择有效数据", {offset: "t", anim: 6});
/**
* 主要用于针对表格批量操作操作之前的检查
* @param table
* @returns {string}
*/
tableBatchCheck: function (table) {
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 + ",";
}
},
/**
* 在表格页面操作成功后弹窗提示
* @param content
*/
successMsg: function (content) {
layer.msg(content, {icon: 1, time: 1000}, function () {
// 刷新当前页table数据
$(".layui-laypage-btn")[0].click();
});
return idsStr;
} else {
layer.msg("未选择有效数据", {offset: "t", anim: 6});
}
},
/**
* 在表格页面操作成功后弹窗提示
* @param content
*/
tableSuccessMsg: function (content) {
layer.msg(content, {icon: 1, time: 1000}, function () {
// 刷新当前页table数据
$(".layui-laypage-btn")[0].click();
});
},
/**
* 获取父窗体的okTab
* @returns {string}

196
pages/member/permission.html
View File

@ -7,112 +7,112 @@
<link rel="stylesheet" href="../../css/oksub.css">
</head>
<body class="ok-body-scroll">
<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>
</span>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
&lt;!&ndash;模糊搜索区域&ndash;&gt;
<div class="layui-row">
<form class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
<input class="layui-input" placeholder="请输入权限名" autocomplete="off">
<button class="layui-btn" lay-submit="" lay-filter="search">
<i class="layui-icon layui-icon-search"></i>
</button>
</form>
</div>-->
<div class="layui-row">
<div class="layui-col-md3">
<div id="permissionTree"></div>
<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>
</span>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
<div class="layui-col-md9">
<table class="layui-hide" id="permissionTable" lay-filter="tableFilter"></table>
&lt;!&ndash;模糊搜索区域&ndash;&gt;
<div class="layui-row">
<form class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
<input class="layui-input" placeholder="请输入权限名" autocomplete="off">
<button class="layui-btn" lay-submit="" lay-filter="search">
<i class="layui-icon layui-icon-search"></i>
</button>
</form>
</div>-->
<div class="layui-row">
<div class="layui-col-md3">
<div id="permissionTree"></div>
</div>
<div class="layui-col-md9">
<table class="layui-hide" id="permissionTable" lay-filter="tableFilter"></table>
</div>
</div>
</div>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["element", "table", "laydate", "tree", "okUtils", "okMock"], function () {
let table = layui.table;
let laydate = layui.laydate;
let tree = layui.tree;
let okUtils = layui.okUtils;
let okMock = layui.okMock;
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["element", "table", "laydate", "tree", "okUtils", "okMock"], function () {
let table = layui.table;
let laydate = layui.laydate;
let tree = layui.tree;
let okUtils = layui.okUtils;
let okMock = layui.okMock;
laydate.render({elem: '#startTime', type: "datetime"});
laydate.render({elem: '#endTime', type: "datetime"});
laydate.render({elem: '#startTime', type: "datetime"});
laydate.render({elem: '#endTime', type: "datetime"});
function initPermissionTree() {
okUtils.ajax("/permission/tree", "get", null, true).done(function (response) {
tree.render({
elem: '#permissionTree',
data: response.data,
showCheckbox: true,
id: 'demoId1',
isJump: true,
click: function(obj){
var data = obj.data;
layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
function initPermissionTree() {
okUtils.ajax("/permission/tree", "get", null, true).done(function (response) {
tree.render({
elem: '#permissionTree',
data: response.data,
showCheckbox: true,
id: 'demoId1',
isJump: true,
click: function (obj) {
var data = obj.data;
layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
}
});
initPermissionTable();
}).fail(function (error) {
console.log(error)
});
}
function initPermissionTable() {
table.render({
elem: '#permissionTable',
url: okMock.api.permission.list,
limit: 20,
page: true,
size: "sm",
cols: [[
{field: "id", title: "ID", width: 170, sort: true, fixed: "left"},
{field: "name", title: "权限名称", width: 100},
{field: "permit", title: "权限标识", width: 150},
{field: "url", title: "权限路径", width: 150},
{field: "parentName", title: "父菜单", width: 100},
{field: "type", title: "类型", width: 100, templet: "#typeTpl"},
{field: "createTime", title: "创建时间", width: 150},
{field: "updateTime", title: "创建时间", width: 150},
{title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
]],
done: function (res, curr, count) {
console.info(res, curr, count);
}
});
}
initPermissionTable();
}).fail(function (error) {
console.log(error)
});
}
initPermissionTree();
});
</script>
<!--行工具栏模板-->
<script type="text/html" id="operationTpl">
<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
function initPermissionTable() {
table.render({
elem: '#permissionTable',
url: okMock.api.permission.list,
limit: 20,
page: true,
size: "sm",
cols: [[
{field: "id", title: "ID", width: 170, sort: true, fixed: "left"},
{field: "name", title: "权限名称", width: 100},
{field: "permit", title: "权限标识", width: 150},
{field: "url", title: "权限路径", width: 150},
{field: "parentName", title: "父菜单", width: 100},
{field: "type", title: "类型", width: 100, templet: "#typeTpl"},
{field: "createTime", title: "创建时间", width: 150},
{field: "updateTime", title: "创建时间", width: 150},
{title: "操作", width: 100, templet: "#operationTpl", align: "center", fixed: "right"}
]],
done: function (res, curr, count) {
console.info(res, curr, count);
}
});
}
initPermissionTree();
});
</script>
<!--行工具栏模板-->
<script type="text/html" id="operationTpl">
<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
<script type="text/html" id="typeTpl">
{{# if(d.type == 0){ }}
<span class="layui-btn layui-btn-normal layui-btn-xs">目录</span>
{{# } else if(d.type == 1){ }}
<span class="layui-btn layui-btn-warm layui-btn-xs">菜单</span>
{{# } else if(d.type == 2) { }}
<span class="layui-btn layui-btn-danger layui-btn-xs">按钮</span>
{{# } }}
</script>
<script type="text/html" id="typeTpl">
{{# if(d.type == 0){ }}
<span class="layui-btn layui-btn-normal layui-btn-xs">目录</span>
{{# } else if(d.type == 1){ }}
<span class="layui-btn layui-btn-warm layui-btn-xs">菜单</span>
{{# } else if(d.type == 2) { }}
<span class="layui-btn layui-btn-danger layui-btn-xs">按钮</span>
{{# } }}
</script>
</body>
</html>

150
pages/member/role-add.html
View File

@ -7,80 +7,88 @@
<link rel="stylesheet" href="../../css/oksub.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>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
<div class="ok-body">
<!--form表单-->
<form class="layui-form layui-form-pane ok-form">
<div class="layui-form-item">
<label class="layui-form-label">角色名</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remarks" placeholder="请输入备注" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限</label>
<div class="layui-input-block">
<div id="permissionTree"></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--form表单-->
<form class="layui-form layui-form-pane ok-form">
<div class="layui-form-item">
<label class="layui-form-label">角色名</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remarks" placeholder="请输入备注" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限</label>
<div class="layui-input-block">
<div id="permissionTree"></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(["element", "form", "tree", "okLayer", "okUtils"], function () {
var form = layui.form;
var tree = layui.tree;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(["element", "form", "tree", "okLayer", "okUtils"], function () {
let form = layui.form;
let tree = layui.tree;
let okLayer = layui.okLayer;
let okUtils = layui.okUtils;
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":"删除权限"}]}]}]}];
let 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)
tree.render({
elem: "#permissionTree",
// data: okUtils.mockApi.permission.list,
data: data,
showCheckbox: true
});
return false;
});
})
</script>
form.on("submit(add)", function (data) {
// TODO 权限节点校验
// 请求后台
okUtils.ajax("/role/addRole", "post", data.field, true).done(function (response) {
console.log(response);
okLayer.greenTickMsg("添加成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
});
return false;
});
})
</script>
</body>
</html>

79
pages/member/role-auth.html
View File

@ -5,55 +5,42 @@
<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/oksub.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>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
<!--form表单-->
<form class="layui-form layui-form-pane ok-form">
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="auth">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<div class="ok-body">
<!--form表单-->
<form class="layui-form layui-form-pane ok-form">
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="auth">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: 'lib/layui/lay/modules/authtree/'
}).extend({
authtree: 'authtree',
});
layui.use(['element', 'jquery', 'form'], function () {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
form.on('submit(auth)', function (data) {
console.log(data.field);
layer.msg("授权成功！", {icon: 6, time: 1000, anim: 4}, function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
return false;
</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: 'lib/layui/lay/modules/authtree/'
}).extend({
authtree: 'authtree',
});
})
</script>
layui.use(['element', 'jquery', 'form'], function () {
var element = layui.element;
var $ = layui.jquery;
var form = layui.form;
form.on('submit(auth)', function (data) {
console.log(data.field);
layer.msg("授权成功！", {icon: 6, time: 1000, anim: 4}, function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
return false;
});
})
</script>
</body>
</html>

114
pages/member/role-edit.html
View File

@ -7,70 +7,58 @@
<link rel="stylesheet" href="../../css/oksub.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>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
<div class="ok-body">
<!--form表单-->
<form class="layui-form ok-form">
<div class="layui-form-item">
<label class="layui-form-label">角色名</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remarks" placeholder="请输入备注" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限</label>
<div class="layui-input-block">
<!-- TODO -->
<div id="authTree"></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--form表单-->
<form class="layui-form ok-form">
<div class="layui-form-item">
<label class="layui-form-label">角色名</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remarks" placeholder="请输入备注" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限</label>
<div class="layui-input-block">
<!-- TODO -->
<div id="authTree"></div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: ''
}).extend({
authtree: 'authtree',
});
layui.use(['element', 'form', 'jquery'], function () {
var element = layui.element;
var form = layui.form;
var $ = layui.jquery;
form.on('submit(edit)', function (data) {
console.log(data.field);
layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
return false;
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.config({
base: ''
}).extend({
authtree: 'authtree',
});
})
</script>
layui.use(['element', 'form', 'jquery'], function () {
var element = layui.element;
var form = layui.form;
var $ = layui.jquery;
form.on('submit(edit)', function (data) {
console.log(data.field);
layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
return false;
});
})
</script>
</body>
</html>

276
pages/member/role.html
View File

@ -7,159 +7,149 @@
<link rel="stylesheet" href="../../css/oksub.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>
</span>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
<div class="ok-body">
<!--模糊搜索区域-->
<div class="layui-row">
<form class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="startTime">
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
<input class="layui-input" placeholder="请输入角色名" autocomplete="off" name="name">
<button class="layui-btn" lay-submit="" lay-filter="search">
<i class="layui-icon layui-icon-search"></i>
</button>
</form>
</div>
<!--数据表格-->
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--模糊搜索区域-->
<div class="layui-row">
<form class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
<input class="layui-input" placeholder="请输入角色名" autocomplete="off">
<button class="layui-btn" lay-submit="" lay-filter="search">
<i class="layui-icon layui-icon-search"></i>
</button>
</form>
</div>
<!--数据表格-->
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
var table = layui.table;
var form = layui.form;
var laydate = layui.laydate;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
var okMock = layui.okMock;
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
let table = layui.table;
let form = layui.form;
let laydate = layui.laydate;
let okLayer = layui.okLayer;
let okUtils = layui.okUtils;
let okMock = layui.okMock;
laydate.render({elem: "#startTime", type: "datetime"});
laydate.render({elem: "#endTime", type: "datetime"});
laydate.render({elem: "#startTime", type: "datetime"});
laydate.render({elem: "#endTime", type: "datetime"});
var roleTable = table.render({
elem: "#tableId",
url: okMock.api.role.list,
limit: 10,
page: true,
toolbar: "#toolbarTpl",
size: "sm",
cols: [[
{type: "checkbox"},
{field: "id", title: "ID", width: 170, sort: true},
{field: "name", title: "角色名", width: 100},
{field: "remarks", title: "备注", width: 100},
{field: "createUsername", title: "创建者", width: 85},
{field: "status", title: "状态", width: 85, templet: "#statusTpl"},
{field: "createTime", title: "创建时间", width: 150},
{title: "操作", width: 80, align: "center", templet: "#operationTpl"}
]],
done: function (res, curr, count) {
console.log(res, curr, count);
}
});
form.on("submit(search)", function () {
roleTable.reload({
where: data.field,
page: {curr: 1}
let roleTable = table.render({
elem: "#tableId",
url: okMock.api.listRole,
limit: 10,
page: true,
toolbar: "#toolbarTpl",
size: "sm",
cols: [[
{type: "checkbox"},
{field: "id", title: "ID", width: 170, sort: true},
{field: "name", title: "角色名", width: 100},
{field: "remarks", title: "备注", width: 100},
{field: "createUsername", title: "创建者", width: 85},
{field: "status", title: "状态", width: 85, templet: "#statusTpl"},
{field: "createTime", title: "创建时间", width: 150},
{title: "操作", width: 80, align: "center", templet: "#operationTpl"}
]],
done: function (res, curr, count) {
console.log(res, curr, count);
}
});
return false;
});
table.on("toolbar(tableFilter)", function (obj) {
switch (obj.event) {
case "add":
add();
break;
case "batchDel":
batchDel();
break;
}
});
form.on("submit(search)", function (data) {
roleTable.reload({
where: data.field,
page: {curr: 1}
});
console.log("0000")
return false;
});
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;
}
});
table.on("toolbar(tableFilter)", function (obj) {
switch (obj.event) {
case "add":
add();
break;
case "batchDel":
batchDel();
break;
}
});
function add () {
okLayer.open("添加角色", "role-add.html", "90%", "90%", null, function () {
roleTable.reload();
})
}
table.on("tool(tableFilter)", function (obj) {
let data = obj.data;
switch (obj.event) {
case "edit":
edit(data.id);
break;
case "del":
del(data.id);
break;
}
});
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 add() {
okLayer.open("添加角色", "role-add.html", "90%", "90%", null, function () {
roleTable.reload();
})
}
function edit (id) {
okLayer.open("编辑角色", "role-edit.html?id=" + id, "90%", "90%", null, function () {
roleTable.reload();
})
}
function batchDel() {
okLayer.confirm("确定要批量删除吗？", function (index) {
layer.close(index);
let idsStr = okUtils.tableBatchCheck(table);
if (idsStr) {
okUtils.ajax("/role/batchDel", "post", {idsStr: idsStr}, true).done(function (response) {
console.log(response);
okUtils.tableSuccessMsg(response.msg);
}).fail(function (error) {
console.log(error)
});
}
});
}
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="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>
{{# } else if(d.status == 2) { }}
<span class="layui-btn layui-btn-danger layui-btn-xs">删除</span>
{{# } }}
</script>
function edit(id) {
okLayer.open("编辑角色", "role-edit.html?id=" + id, "90%", "90%", null, function () {
roleTable.reload();
})
}
<script type="text/html" id="operationTpl">
<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
function del(id) {
okLayer.confirm("确定要删除吗？", function () {
okUtils.ajax("/user/batchDel", "post", {idsStr: id}, true).done(function (response) {
console.log(response);
okUtils.tableSuccessMsg(response.msg);
}).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="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>
{{# } else if(d.status == 2) { }}
<span class="layui-btn layui-btn-danger layui-btn-xs">删除</span>
{{# } }}
</script>
<script type="text/html" id="operationTpl">
<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>

229
pages/member/user-add.html
View File

@ -7,129 +7,120 @@
<link rel="stylesheet" href="../../css/oksub.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>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
<div class="ok-body">
<!--form表单-->
<form class="layui-form layui-form-pane ok-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-block">
<input type="text" name="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input"
lay-verify="phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input"
lay-verify="email">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input"
lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input type="text" name="birthday" placeholder="请选择出生日期 格式为yyyy-MM-dd HH:mm:ss" autocomplete="off"
class="layui-input" id="birthday" lay-verify="birthdayVerify">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-block">
<select name="role">
<option value="0">管理员</option>
<option value="1">普通用户</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">兴趣</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读">
<input type="checkbox" name="like[run]" title="运动">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" checked value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--form表单-->
<form class="layui-form layui-form-pane ok-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">真实姓名</label>
<div class="layui-input-block">
<input type="text" name="reallyName" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-block">
<input type="text" name="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input" lay-verify="phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" lay-verify="email">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input type="text" name="birthday" placeholder="请选择出生日期 格式为yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input" id="birthday" lay-verify="birthdayVerify">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-block">
<select name="role">
<option value="0">管理员</option>
<option value="1">普通用户</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">兴趣</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读">
<input type="checkbox" name="like[run]" title="运动">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" checked value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["element", "form", "laydate", "okLayer", "okUtils", "okMock"], function () {
let form = layui.form;
let laydate = layui.laydate;
let okLayer = layui.okLayer;
let okUtils = layui.okUtils;
let okMock = layui.okMock;
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
let form = layui.form;
let laydate = layui.laydate;
let okLayer = layui.okLayer;
let okUtils = layui.okUtils;
laydate.render({elem: "#birthday", type: "datetime"});
laydate.render({elem: "#birthday", type: "datetime"});
form.verify({
birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
});
form.on("submit(add)", function (data) {
okUtils.ajax(okMock.api.user.add, "post", data.field, true).done(function (response) {
console.log(response);
okLayer.msg.greenTick("添加成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
form.verify({
birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
});
form.on("submit(add)", function (data) {
okUtils.ajax("/user/addUser", "post", data.field, true).done(function (response) {
console.log(response);
okLayer.greenTickMsg("添加成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
});
return false;
});
return false;
});
});
</script>
</script>
</body>
</html>

240
pages/member/user-edit.html
View File

@ -2,142 +2,130 @@
<html>
<head>
<meta charset="UTF-8">
<title>编辑用户</title>
<title>更新用户</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../css/oksub.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>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
<div class="ok-body">
<!--form表单-->
<form class="layui-form ok-form" lay-filter="filter">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-block">
<input type="text" name="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input" lay-verify="phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" lay-verify="email">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input type="text" name="createTime" placeholder="请选择出生日期 格式为yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input" id="birthday" lay-verify="birthdayVerify">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-block">
<select name="role">
<option value="0">管理员</option>
<option value="1">普通用户</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">兴趣</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" value="1" title="写作">
<input type="checkbox" name="like[read]" value="2" title="阅读">
<input type="checkbox" name="like[run]" value="3" title="运动">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" checked value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--form表单-->
<form class="layui-form ok-form" lay-filter="filter">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">真实姓名</label>
<div class="layui-input-block">
<input type="text" name="reallyName" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手机号码</label>
<div class="layui-input-block">
<input type="text" name="phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input" lay-verify="phone">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" lay-verify="email">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">出生日期</label>
<div class="layui-input-block">
<input type="text" name="birthday" placeholder="请选择出生日期 格式为yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input" id="birthday" lay-verify="birthdayVerify">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-block">
<select name="role">
<option value="0">管理员</option>
<option value="1">普通用户</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">兴趣</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" value="1" title="写作">
<input type="checkbox" name="like[read]" value="2" title="阅读">
<input type="checkbox" name="like[run]" value="3" title="运动">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" checked value="0">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
<input type="radio" name="sex" value="1" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
var initData;
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script>
let initData;
function initForm(data) {
var jsonString = JSON.stringify(data);
initData = JSON.parse(jsonString);
}
function initForm(data) {
let jsonString = JSON.stringify(data);
initData = JSON.parse(jsonString);
}
layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
var form = layui.form;
var laydate = layui.laydate;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
layui.use(["element", "form", "laydate", "okLayer", "okUtils"], function () {
let form = layui.form;
let laydate = layui.laydate;
let okLayer = layui.okLayer;
let okUtils = layui.okUtils;
form.val("filter", initData);
form.val("filter", initData);
laydate.render({elem: "#birthday", type: "datetime"});
laydate.render({elem: "#birthday", type: "datetime"});
form.verify({
birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
});
form.on("submit(edit)", function (data) {
okUtils.ajax(okUtils.mockApi.user.edit, "put", 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)
form.verify({
birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
});
return false;
});
})
</script>
form.on("submit(edit)", function (data) {
okUtils.ajax("/user/updateUser", "put", data.field, true).done(function (response) {
console.log(response);
okLayer.greenTickMsg("编辑成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
});
return false;
});
})
</script>
</body>
</html>

31
pages/member/user.html
View File

@ -8,17 +8,6 @@
</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>
</span>
<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
<!--模糊搜索区域-->
<div class="layui-row">
<form class="layui-form layui-col-md12 ok-search">
@ -49,7 +38,7 @@
let userTable = table.render({
elem: '#tableId',
url: okMock.api.user.list,
url: okMock.api.listUser,
limit: 20,
page: true,
toolbar: true,
@ -60,7 +49,7 @@
{field: "id", title: "ID", width: 160, sort: true},
{field: "username", title: "账号", width: 100},
{field: "password", title: "密码", width: 100},
{field: "reallyName", title: "姓名", width: 100},
{field: "name", title: "姓名", width: 100},
{field: "nickname", title: "昵称", width: 100},
{field: "role", title: "角色", width: 100, templet: "#roleTpl"},
{field: "status", title: "状态", width: 100, templet: "#statusTpl"},
@ -117,11 +106,11 @@
function batchEnabled() {
okLayer.confirm("确定要批量启用吗？", function (index) {
layer.close(index);
let idsStr = okUtils.table.batchCheck(table);
let idsStr = okUtils.tableBatchCheck(table);
if (idsStr) {
okUtils.ajax("/user/normalUser", "put", {idsStr: idsStr}, true).done(function (response) {
console.log(response);
okUtils.table.successMsg(response.msg);
okUtils.tableSuccessMsg(response.msg);
}).fail(function (error) {
console.log(error)
});
@ -132,11 +121,11 @@
function batchDisabled() {
okLayer.confirm("确定要批量停用吗？", function (index) {
layer.close(index);
let idsStr = okUtils.table.batchCheck(table);
let idsStr = okUtils.tableBatchCheck(table);
if (idsStr) {
okUtils.ajax("/user/stopUser", "put", {idsStr: idsStr}, true).done(function (response) {
console.log(response);
okUtils.table.successMsg(response.msg);
okUtils.tableSuccessMsg(response.msg);
}).fail(function (error) {
console.log(error)
});
@ -147,11 +136,11 @@
function batchDel() {
okLayer.confirm("确定要批量删除吗？", function (index) {
layer.close(index);
let idsStr = okUtils.table.batchCheck(table);
let idsStr = okUtils.tableBatchCheck(table);
if (idsStr) {
okUtils.ajax("/user/deleteUser", "delete", {idsStr: idsStr}, true).done(function (response) {
console.log(response);
okUtils.table.successMsg(response.msg);
okUtils.tableSuccessMsg(response.msg);
}).fail(function (error) {
console.log(error)
});
@ -166,7 +155,7 @@
}
function edit(data) {
okLayer.open("编辑用户", "user-edit.html", "90%", "90%", function (layero) {
okLayer.open("更新用户", "user-edit.html", "90%", "90%", function (layero) {
let iframeWin = window[layero.find("iframe")[0]["name"]];
iframeWin.initForm(data);
}, function () {
@ -178,7 +167,7 @@
okLayer.confirm("确定要删除吗？", function () {
okUtils.ajax("/user/deleteUser", "delete", {idsStr: id}, true).done(function (response) {
console.log(response);
okUtils.table.successMsg(response.msg);
okUtils.tableSuccessMsg(response.msg);
}).fail(function (error) {
console.log(error)
});