bwadmin/pear-admin-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移除旧版本静态模板

Browse Source
This commit is contained in:
zhengxinonly
2022-06-01 20:27:19 +08:00
parent 8835721924
commit d7d7e554ee
40 changed files with 1311 additions and 2912 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/view/includes/links.html
+1
View File
@@ -0,0 +1 @@
<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
templates/view/includes/scripts.html
+14
View File
@@ -0,0 +1,14 @@
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
/******************数据解析********************************/
function parserTableData(data) {
/* 将服务器返回的 json 数据解析为 layui 表格需要的格式 */
return {
'code': data.code, /*解析接口状态*/
'msg': data.message, /*解析提示文本*/
'count': data.result.total, /*解析数据长度*/
'data': data.result.items, /*解析数据列表*/
};
}
</script>
templates/view/system/department.html
+64 -56
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>部门管理</title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
{% include 'view/includes/links.html' %}
<link rel="stylesheet" href="/static/admin/css/other/department.css"/>
</head>
<body class="pear-container">
@@ -11,6 +11,12 @@
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">部门名称</label>
<div class="layui-input-inline">
<input type="text" name="deptName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
@@ -24,13 +30,7 @@
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="form_search">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
@@ -79,8 +79,18 @@
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
class="layui-icon layui-icon-delete"></i></button>
</script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
{#表格内的切换按钮#}
<script type="text/html" id="dept-status">
<input type="checkbox"
name="status"
value="{{ "{{ d.deptId }}" }}"
lay-skin="switch"
lay-text="启用|禁用"
lay-filter="dept_enable"
{{ "{{# if(d.status==1){ }} checked {{# } }}" }}>
</script>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['table', 'form', 'jquery', 'dtree'], function() {
let table = layui.table;
@@ -88,39 +98,19 @@
let $ = layui.jquery;
let dtree = layui.dtree;
let MODULE_PATH = 'operate/';
let MODULE_PATH = '/dept/';
let cols = [
[
{
type: 'checkbox',
},
{
title: '名称',
field: 'name',
align: 'center',
},
{
title: '人数',
field: 'userCount',
align: 'center',
},
{
title: '位置',
field: 'location',
align: 'center',
},
{
title: '负责人',
field: 'leader',
align: 'center',
},
{
title: '操作',
toolbar: '#organization-bar',
align: 'center',
width: 130,
},
{type: 'checkbox'},
{field: 'deptName', minWidth: 200, title: '部门名称'},
{field: 'leader', title: '负责人'},
{field: 'phone', title: '联系方式'},
{field: 'email', title: '邮箱'},
{field: 'address', title: '详细地址'},
{field: 'status', title: '状态', templet: '#dept-status'},
{field: 'sort', title: '排序', width: 100},
{title: '操作', toolbar: '#organization-bar', align: 'center', width: 130},
],
];
@@ -136,8 +126,9 @@
});
table.render({
parseData: parserTableData,
elem: '#organization-table',
url: '/static/admin/data/organization.json',
url: '/api/v1/dept/department/',
height: 'full-150',
page: true,
cols: cols,
@@ -187,13 +178,39 @@
return false;
});
/*切换选择状态*/
form.on('switch(dept_enable)', function(obj) {
let operate;
if (obj.elem.checked) {
operate = 1;
} else {
operate = 0;
}
let loading = layer.load();
$.ajax({
url: '/api/v1/dept/department/' + this.value + '/status',
data: JSON.stringify({deptId: this.value, operate: operate}),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.message);
} else {
layer.msg(result.message);
}
},
});
});
window.add = function() {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'add.html',
content: '/dept/add',
});
};
@@ -203,35 +220,26 @@
title: '修改',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'edit.html',
content: MODULE_PATH + 'edit?deptId=' + obj.data['deptId'],
});
};
window.remove = function(obj) {
layer.confirm('确定要删除该用户', {
icon: 3,
title: '提示',
}, function(index) {
layer.confirm('确定要删除该部门', {icon: 3, title: '提示'}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + 'remove/' + obj.data['organizationId'],
url: '/api/v1/dept/department/' + obj.data['deptId'],
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000,
}, function() {
popup.success(result.message, function() {
obj.del();
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000,
});
popup.failure(result.message);
}
},
});
templates/view/system/department_add.html
+126
View File
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>部门新增</title>
{% include 'view/includes/links.html' %}
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">上级部门</label>
<div class="layui-input-block">
<ul id="selectParent" name="parentId" class="dtree" data-id="0"></ul>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="deptName" lay-verify="title" autocomplete="off" placeholder="请输入部门名称"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">负责人</label>
<div class="layui-input-block">
<input type="text" name="leader" lay-verify="title" autocomplete="off" placeholder="请输入负责人名字"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" lay-verify="title" autocomplete="off" placeholder="请输入邮箱地址"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系方式</label>
<div class="layui-input-block">
<input type="text" name="phone" lay-verify="title" autocomplete="off"
placeholder="请输入联系方式（电话号码）"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="开启">
<input type="radio" name="status" value="0" title="关闭" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="text" name="sort" lay-verify="title" autocomplete="off" placeholder="请输入排序序号（数字）"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">详细地址</label>
<div class="layui-input-block">
<textarea placeholder="请输入详细地址" name="address" class="layui-textarea"></textarea>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="dept-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['form', 'jquery', 'dtree'], function() {
let form = layui.form;
let $ = layui.jquery;
let dtree = layui.dtree;
/*添加数据 渲染下拉选择组件*/
// TODO dtree
/*
dtree.renderSelect({
elem: '#selectParent',
url: '/api/v1/dept/department/',
method: 'get',
selectInputName: {nodeId: 'parentId', context: 'parentName'},
skin: 'layui',
dataFormat: 'list',
response: {treeId: 'deptId', parentId: 'parentId', title: 'deptName'},
selectInitVal: '1',
});
*/
/*添加数据 表单组件，提交按钮之后触发的事件*/
form.on('submit(dept-save)', function(data) {
$.ajax({
url: '/api/v1/dept/department/',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
parent.render();
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
});
</script>
</body>
</html>
templates/view/system/department_edit.html
+124
View File
@@ -0,0 +1,124 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>部门修改</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item layui-hide">
<label class="layui-form-label">编号</label>
<div class="layui-input-block">
<input type="text" value="{{ dept.id }}" name="deptId" lay-verify="required|number"
autocomplete="off" placeholder="请输入部门编号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" value="{{ dept.dept_name }}" name="deptName" lay-verify="required"
autocomplete="off" placeholder="请输入部门名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">负责人</label>
<div class="layui-input-block">
<input type="text" value="{{ dept.leader }}" name="leader" autocomplete="off"
placeholder="请输入负责人名字"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" value="{{ dept.email }}" name="email" autocomplete="off"
placeholder="请输入邮箱地址"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系方式</label>
<div class="layui-input-block">
<input type="text" value="{{ dept.phone }}" name="phone" autocomplete="off"
placeholder="请输入联系方式（电话号码）"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="status" {% if dept.status == 1 %}checked{% endif %}
value="1"
title="开启">
<input type="radio" name="status" {% if dept.status == 0 %}checked{% endif %}
value="0"
title="关闭">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="text" name="sort" value="{{ dept.sort }}" lay-verify="required|number"
autocomplete="off"
placeholder="请输入排序序号（数字）"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea placeholder="请输入详细地址" name="address"
class="layui-textarea">{{ dept.address }}</textarea>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="dept-update">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
// 修改数据 当点击更新之后，获取数据
form.on('submit(dept-update)', function(data) {
$.ajax({
url: '/api/v1/dept/department/' + data.field.deptId,
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
parent.render();
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
});
</script>
</body>
</html>
templates/view/system/dict.html
+4 -2
View File
@@ -94,7 +94,8 @@
</script>
<script type="text/html" id="dict-type-enable">
<input type="checkbox" value="{{ '{{ d.id }}'|safe }}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-type-enable"
<input type="checkbox" value="{{ '{{ d.id }}'|safe }}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="dict-type-enable"
{{ "{{ d.enable== '0' ? 'checked' : '' }}"|safe }}>
</script>
@@ -117,7 +118,8 @@
</script>
<script type="text/html" id="dict-data-enable">
<input type="checkbox" value="{{ '{{ d.dataId }}' |safe}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-data-enable"
<input type="checkbox" value="{{ '{{ d.dataId }}' |safe }}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="dict-data-enable"
{{ "{{ d.enable== '0' ? 'checked' : '' }}"|safe }}>
</script>
<script src="/static/component/layui/layui.js"></script>
templates/view/system/log.html
+15 -14
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>行为日志</title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<div class="layui-card">
@@ -40,33 +40,34 @@
{{ '{{layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss")}}'|safe }}
</script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['table', 'form', 'jquery', 'element'], function() {
let table = layui.table;
let form = layui.form;
let element = layui.element;
let MODULE_PATH = '/system/logging/';
let MODULE_PATH = '/logs/';
let cols = [
[
{title: '模块', field: 'title', align: 'center'},
{title: '请求方式', field: 'requestMethod', align: 'center'},
{title: '接口', field: 'method', align: 'center'},
{title: '浏览器', field: 'browser', align: 'center'},
{title: '操作地址', field: 'operateAddress', align: 'center'},
{title: '操作系统', field: 'systemOs', align: 'center'},
{title: '访问时间', field: 'createTime', templet: '#log-createTime', align: 'center'},
{title: '操作人', field: 'operateName', align: 'center'},
{title: 'ID', field: 'id', align: 'center'},
{#{title: '模块', field: 'title', align: 'center'},#}
{title: '请求方式', field: 'method', align: 'center'},
{title: '接口', field: 'url', align: 'center'},
{title: '浏览器', field: 'user_agent', align: 'center'},
{title: '操作地址', field: 'ip', align: 'center'},
{title: '描述', field: 'desc', align: 'center'},
{title: '访问时间', field: 'create_at', templet: '#log-createTime', align: 'center'},
{title: '操作人', field: 'uid', align: 'center'},
{title: '访问状态', toolbar: '#log-bar', align: 'center', width: 150},
],
];
table.render({
parseData: parserTableData,
elem: '#log-operate-table',
url: '/static/admin/data/operateLog.json',
url: MODULE_PATH + 'access_log',
page: true,
cols: cols,
skin: 'line',
@@ -75,7 +76,7 @@
table.render({
elem: '#log-login-table',
url: '/static/admin/data/loginLog.json',
url: MODULE_PATH + 'login_log',
page: true,
cols: cols,
skin: 'line',
templates/view/system/operate.html
+104 -105
View File
@@ -1,109 +1,108 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="username" value="854085467" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" value="854085467@qq.com" lay-verify="title"
autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="text" name="password" value="*******" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" value="15555555555" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</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>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="form-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
</head>
<body>
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="username" value="854085467" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-block">
<input type="text" name="email" value="854085467@qq.com" lay-verify="title"
autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="text" name="password" value="*******" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">电话</label>
<div class="layui-input-block">
<input type="text" name="phone" value="15555555555" lay-verify="title" autocomplete="off"
placeholder="请输入标题" class="layui-input">
</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>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="form-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(form-save)', function(data) {
$.ajax({
url: '/system/user/save',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
parent.layer.close(parent.layer.getFrameIndex(window
.name)); //关闭当前页
parent.layui.table.reload("form-table");
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
return false;
});
})
</script>
<script>
</script>
</body>
form.on('submit(form-save)', function(data) {
$.ajax({
url: '/system/user/save',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000,
}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
parent.layui.table.reload('form-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000,
});
}
},
});
return false;
});
});
</script>
<script>
</script>
</body>
</html>
templates/view/system/person.html
+202 -173
View File
@@ -1,183 +1,212 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<link rel="stylesheet" href="../../admin/css/other/person.css" />
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
<link rel="stylesheet" href="/static/admin/css/other/person.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-body" style="padding: 25px;">
<div class="text-center layui-text">
<div class="user-info-head" id="userInfoHead">
<img src="../../admin/images/avatar.jpg" id="userAvatar" width="115px" height="115px" alt="">
</div>
<h2 style="padding-top: 20px;font-size: 20px;">就眠仪式</h2>
<p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
</div>
</div>
<div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
<span>今日事 ，今日毕</span>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-body" style="padding: 25px;">
<div class="text-center layui-text">
<div class="user-info-head" id="userInfoHead">
<img src="/static/admin/images/avatar.jpg" id="userAvatar" width="115px" height="115px" alt="">
</div>
<h2 style="padding-top: 20px;font-size: 20px;">就眠仪式</h2>
<p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
</div>
</div>
<div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
<span>今日事 ，今日毕</span>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">
归档
</div>
<div class="layui-card-body">
<ul class="list">
<li class="list-item"><span class="title">优化代码格式</span><span class="footer">2020-06-04 11:28</span></li>
<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2020-06-01 04:23</span></li>
<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2020-05-22 21:38</span></li>
<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2020-05-15 14:26</span></li>
<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2020-05-13 16:32</span></li>
<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2019-12-9 14:58</span></li>
<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2019-12-7 9:06</span></li>
<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2019-12-1 10:26</span></li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-header">
我的文章
</div>
<div class="layui-card-body">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['jquery', 'element', 'layer', 'convert'], function () {
var element = layui.element,
layer = layui.layer,
$ = layui.jquery,
convert = layui.convert;
<div class="layui-card">
<div class="layui-card-header">
归档
</div>
<div class="layui-card-body">
<ul class="list">
<li class="list-item"><span class="title">优化代码格式</span><span class="footer">2020-06-04 11:28</span>
</li>
<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2020-06-01 04:23</span>
</li>
<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2020-05-22 21:38</span>
</li>
<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2020-05-15 14:26</span>
</li>
<li class="list-item"><span class="title">兼容多系统菜单模式</span><span
class="footer">2020-05-13 16:32</span></li>
<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2019-12-9 14:58</span>
</li>
<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2019-12-7 9:06</span>
</li>
<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2019-12-1 10:26</span>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-header">
我的文章
</div>
<div class="layui-card-body">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="/static/admin/images/act.jpg"
style="width: 100%;height: 100%;border-radius: 5px;"/>
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
4
</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="/static/admin/images/act.jpg"
style="width: 100%;height: 100%;border-radius: 5px;"/>
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
4
</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="/static/admin/images/act.jpg"
style="width: 100%;height: 100%;border-radius: 5px;"/>
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
4
</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="/static/admin/images/act.jpg"
style="width: 100%;height: 100%;border-radius: 5px;"/>
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
4
</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="/static/admin/images/act.jpg"
style="width: 100%;height: 100%;border-radius: 5px;"/>
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
4
</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="/static/admin/images/act.jpg"
style="width: 100%;height: 100%;border-radius: 5px;"/>
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
4
</div>
</div>
</div>
<div class="layui-row layui-col-space10" style="margin: 15px;">
<div class="layui-col-md1">
<img src="/static/admin/images/act.jpg"
style="width: 100%;height: 100%;border-radius: 5px;"/>
</div>
<div class="layui-col-md11" style="height: 80px;">
<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
<div class="content">
“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
</div>
<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发
4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
layui.use(['jquery', 'element', 'layer', 'convert'], function() {
var element = layui.element,
layer = layui.layer,
$ = layui.jquery,
convert = layui.convert;
let MODULE_PATH = "operate/";
var image = new Image();
image.src = "../../admin/images/avatar.jpg";
image.onload = function() {
$("#userAvatar").attr("src", convert.imageToBase64(image));
}
window.callback = function (data) {
layer.close(data.index);
$("#userAvatar").attr("src", data.newAvatar);
}
let MODULE_PATH = 'operate/';
$("#userAvatar").click(function () {
layer.open({
type: 2,
title: '更换图片',
shade: 0.1,
area: ["900px", "500px"],
content: MODULE_PATH + 'profile.html',
btn: ['确定', '取消'],
yes: function (index, layero) {
window['layui-layer-iframe' + index].submitForm();
}
});
});
});
</script>
var image = new Image();
image.src = '/static/admin/images/avatar.jpg';
image.onload = function() {
$('#userAvatar').attr('src', convert.imageToBase64(image));
};
window.callback = function(data) {
layer.close(data.index);
$('#userAvatar').attr('src', data.newAvatar);
};
$('#userAvatar').click(function() {
layer.open({
type: 2,
title: '更换图片',
shade: 0.1,
area: ['900px', '500px'],
content: MODULE_PATH + 'profile.html',
btn: ['确定', '取消'],
yes: function(index, layero) {
window['layui-layer-iframe' + index].submitForm();
},
});
});
});
</script>
</body>
</html>
templates/view/system/photo.html
+267
View File
@@ -0,0 +1,267 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>图片上传</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<table id="tables" lay-filter="tables"></table>
</div>
</div>
<script type="text/html" id="toolbar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="toolbar-add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-sm" lay-event="toolbar-remove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="tool">
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="tool-remove">
<i class="layui-icon layui-icon-delete"></i>
</button>
</script>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['table', 'form', 'jquery', 'element', 'form', 'upload'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let upload = layui.upload;
const get_columns = () => [
[
{
type: 'checkbox',
},
{
field: 'id',
title: 'ID',
sort: true,
align: 'center',
unresize: true,
width: 80,
},
{
field: 'name',
title: '文件名称',
unresize: true,
align: 'center',
},
{
field: 'href',
title: '图片',
unresize: true,
align: 'center',
templet: (d) => {
return `<img class="tool-photo" style="max-width: 100%;height: 100%;cursor: pointer;" lay-event="photo" src="${d.href}"></i>`;
},
},
{
field: 'mime',
title: 'mime类型',
unresize: true,
align: 'center',
},
{
field: 'size',
title: '文件大小',
unresize: true,
align: 'center',
},
{
field: 'create_at',
title: '创建时间',
templet: (d) => `${layui.util.toDateString(d.create_at, 'yyyy-MM-dd HH:mm:ss')}`,
unresize: true,
align: 'center',
},
{
title: '操作',
toolbar: '#tool',
align: 'center',
unresize: true,
width: 200,
},
],
];
table.render({
parseData: parserTableData, /* 服务器返回的数据格式与 layui 不一致，需要进行转化*/
elem: '#tables',
url: '/api/v1/file/photo',
page: true,
cols: get_columns(),
skin: 'line',
toolbar: '#toolbar',
defaultToolbar: [
{
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'],
});
table.on('tool(tables)', function(obj) {
if (obj.event === 'tool-remove') {
window.remove(obj);
} else if (obj.event === 'photo') {
window.photo(obj);
}
});
table.on('toolbar(tables)', function(obj) {
if (obj.event === 'toolbar-add') {
window.add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'toolbar-remove') {
window.batchRemove(obj);
}
});
//弹出窗设置 自己设置弹出百分比
function screen(width, height) {
if (typeof width !== 'number' || width === 0) {
width = $(window).width() * 0.8;
}
if (typeof height !== 'number' || height === 0) {
height = $(window).height() - 20;
}
return [width + 'px', height + 'px'];
}
window.add = function() {
layer.open({
type: 2,
maxmin: true,
title: '新增图片',
shade: 0.1,
area: screen(),
content: 'file/photo/add',
});
};
window.remove = function(obj) {
layer.confirm('确定要删除该图片', {
icon: 3,
title: '提示',
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: '/api/v1/file/photo/' + obj.data['id'],
data: {id: obj.data['id']},
dataType: 'json',
type: 'delete',
success: function(res) {
layer.close(loading);
if (res.success) {
layer.msg(res.message, {
icon: 1,
time: 1000,
}, function() {
obj.del();
});
} else {
layer.msg(res.message, {
icon: 2,
time: 1000,
});
}
},
});
});
};
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg('未选中数据', {
icon: 3,
time: 1000,
});
return false;
}
var ids = [];
var hasCheck = table.checkStatus('tables');
var hasCheckData = hasCheck.data;
if (hasCheckData.length > 0) {
$.each(hasCheckData, function(index, element) {
ids.push(element.id);
});
}
layer.confirm('确定要删除这些图片', {
icon: 3,
title: '提示',
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: '/api/v1/file/photos',
data: {ids: ids},
dataType: 'json',
type: 'POST',
success: function(res) {
layer.close(loading);
if (res.success) {
layer.msg(res.message, {
icon: 1,
time: 1000,
}, function() {
table.reload('tables');
});
} else {
layer.msg(res.message, {
icon: 2,
time: 1000,
});
}
},
});
});
};
window.refresh = function() {
table.reload('tables');
};
// 查看大图
window.photo = function(obj) {
if (!obj.data.href || obj.data.href === '') {
layer.msg('图片地址错误！');
return;
}
var auto_img = {};
var img = new Image();
img.src = obj.data.href;
img.onload = function() {
var max_height = $(window).height() - 100;
var max_width = $(window).width();
var rate1 = max_height / img.height;
var rate2 = max_width / img.width;
var rate3 = 1;
var rate = Math.min(rate1, rate2, rate3);
auto_img.height = img.height * rate;
auto_img.width = img.width * rate;
layer.open({
type: 1,
title: false,
area: ['auto'],
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: `<img src="${obj.data['href']}" width="${auto_img.width}px" height="${auto_img.height}px">`,
});
};
};
});
</script>
</body>
</html>
templates/view/system/photo_add.html
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>新增图片</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-tab-content">
<fieldset class="layui-elem-field layui-field-title">
<legend>新增图片</legend>
</fieldset>
<form class="layui-form edit-form">
<div class="layui-form-item">
<label class="layui-form-label">
新增图片
</label>
<button type="button" class="layui-btn layui-btn-normal" id="select-img">选择文件</button>
<button type="button" class="layui-btn" id="logo-upload-button">开始上传</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['jquery', 'element', 'form', 'upload'], function() {
var $ = layui.jquery;
var element = layui.element;
var form = layui.form;
var upload = layui.upload;
//选完文件后不自动上传
upload.render({
elem: '#select-img'
, url: '/api/v1/file/photos'
, auto: false
, exts: 'jpg|png|gif|bmp|jpeg'
, size: 1000
, bindAction: '#logo-upload-button'
, done: function(res) {
if (res.success) {
layer.msg(res.message, {icon: 1, time: 500}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
window.parent.location.reload();
});
} else {
layer.msg(res.message, {icon: 2});
}
},
});
});
</script>
</body>
</html>
templates/view/system/power.html
+250 -209
View File
@@ -1,242 +1,283 @@
<!DOCTYPE html>
<html lang="en">
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>权限管理</title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
<title>权限</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限名称</label>
<div class="layui-input-inline">
<input type="text" name="powerName" placeholder="" class="layui-input">
</div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="power_query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="power-table" lay-filter="power-table"></table>
<table id="tables" lay-filter="tables"></table>
</div>
</div>
<script type="text/html" id="power-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<script type="text/html" id="toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="toolbar-add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<button class="pear-btn pear-btn-md" lay-event="toolbar-remove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
<i class="layui-icon layui-icon-spread-left"></i>
展开
</button>
<button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
<i class="layui-icon layui-icon-shrink-right"></i>
折叠
</button>
</script>
<script type="text/html" id="tool">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="tool-edit"><i
class="layui-icon layui-icon-edit"></i>
</button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="tool-remove"><i
class="layui-icon layui-icon-delete"></i>
</button>
</script>
<script type="text/html" id="power-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="power-type">
{{ " {{#if (d.powerType == '0') { }}
<span>目录</span>
{{# }else if(d.powerType == '1'){ }}
<span>菜单</span>
{{# }else if(d.powerType == '2'){ }}
<span>按钮</span>
{{# } }}"|safe }}
</script>
<script type="text/html" id="power-enable">
<input type="checkbox" name="enable" value="{{ "{{d.id}}"|safe }}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{ "{{ d.enable== true ? 'checked' : '' }}"|safe }} />
</script>
<script type="text/html" id="icon">
<i class="layui-icon {{ "{{d.icon}}" |safe}}"></i>
</script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['table','form','jquery','treetable'],function () {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let treetable = layui.treetable;
layui.use(['table', 'form', 'jquery', 'treetable', 'popup', 'dtree', 'iconPicker'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let treetable = layui.treetable;
let popup = layui.popup;
let iconPicker = layui.iconPicker;
let dtree = layui.dtree;
let MODULE_PATH = "operate/";
window.render = function(){
treetable.render({
treeColIndex: 1,
treeSpid: 0,
treeIdName: 'powerId',
treePidName: 'parentId',
skin:'line',
treeDefaultClose: true,
toolbar:'#power-toolbar',
elem: '#power-table',
url: '/static/admin/data/power.json',
page: false,
cols: [
[
{type: 'checkbox'},
{field: 'powerName', minWidth: 200, title: '权限名称'},
{field: 'icon', title: '图标',templet:'#icon'},
{field: 'powerType', title: '权限类型',templet:'#power-type'},
{field: 'enable', title: '是否可用',templet:'#power-enable'},
{field: 'sort', title: '排序'},
{title: '操作',templet: '#power-bar', width: 150, align: 'center'}
]
]
});
}
render();
table.on('tool(power-table)',function(obj){
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
const get_columns = () => [
[
{type: 'checkbox'},
{field: 'powerName', minWidth: 200, title: '权限名称'},
{field: 'icon', title: '图标', templet: (d) => `<i class="layui-icon ${d.icon}"></i>`},
{
field: 'powerType', title: '权限类型', templet: (d) => {
if (d.powerType === 0) {
return `<span>目录</span>`;
} else if (d.powerType === 1) {
return `<span>菜单</span>`;
} else if (d.powerType === 2) {
return `<span>按钮</span>`;
}
})
},
},
{
field: 'enable', title: '是否可用', templet: (d) => {
// TODO 修改禁用启动逻辑
return `<input type="checkbox" name="enable" value="${d.powerId}" lay-skin="switch" lay-text="启用|禁用" lay-filter="tool-switch" ${d.enable ===
true ? 'checked=checked' : ''}>`;
},
},
{field: 'sort', title: '排序'},
{title: '操作', templet: '#tool', width: 150, align: 'center'},
],
];
treetable.render({
treeColIndex: 1,
treeSpid: 0,
treeIdName: 'powerId',
treePidName: 'parentId',
skin: 'line',
method: 'get',
treeDefaultClose: true,
toolbar: '#toolbar',
elem: '#tables',
url: '/api/v1/rights/rights',
page: false,
cols: get_columns(),
});
table.on('toolbar(power-table)', function(obj){
if(obj.event === 'add'){
window.add();
} else if(obj.event === 'refresh'){
window.refresh();
} else if(obj.event === 'batchRemove'){
window.batchRemove(obj);
} else if(obj.event === 'expandAll'){
treetable.expandAll("#power-table");
} else if(obj.event === 'foldAll'){
treetable.foldAll("#power-table");
}
form.on('submit(power_query)', function(data) {
var keyword = data.field.powerName;
var $tds = $('#tables').next('.treeTable').find('.layui-table-body tbody tr td');
if (!keyword) {
$tds.css('background-color', 'transparent');
layer.msg('请输入关键字', {icon: 5});
return;
}
var searchCount = 0;
$tds.each(function() {
$(this).css('background-color', 'transparent');
if ($(this).text().indexOf(keyword) >= 0) {
$(this).css('background-color', 'rgba(250,230,160,0.5)');
if (searchCount === 0) {
$('body,html').stop(true);
$('body,html').animate({scrollTop: $(this).offset().top - 150}, 500);
}
searchCount++;
}
});
if (searchCount === 0) {
layer.msg('没有匹配结果', {icon: 5});
} else {
treetable.expandAll('#tables');
}
return false;
});
table.on('tool(tables)', function(obj) {
if (obj.event === 'tool-remove') {
window.tool_remove(obj);
} else if (obj.event === 'tool-edit') {
window.tool_edit(obj);
}
});
table.on('toolbar(tables)', function(obj) {
if (obj.event === 'toolbar-add') {
window.toolbar_add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'toolbar-remove') {
window.toolbar_remove(obj);
}
});
form.on('switch(tool-switch)', function(obj) {
let operate;
if (obj.elem.checked) {
operate = 1; /*启用*/
} else {
operate = 0; /*禁用*/
}
let loading = layer.load();
$.ajax({
url: '/api/v1/rights/power/' + this.value + '/status',
data: JSON.stringify({powerId: this.value, operate: operate}),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
layer.close(loading);
if (result.success) {
popup.success(result.message);
} else {
popup.failure(result.message);
}
},
});
});
window.toolbar_add = function() {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['450px', '500px'],
content: '/rights/add',
});
};
window.tool_edit = function(obj) {
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['450px', '500px'],
content: '/rights/power/' + obj.data['powerId'],
});
};
window.tool_remove = function(obj) {
layer.confirm('确定要删除该权限', {icon: 3, title: '提示'}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: '/api/v1/rights/power/' + obj.data['powerId'],
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
popup.success(result.message, function() {
console.log(obj);
obj.del();
});
} else {
popup.failure(result.message);
}
},
});
});
};
window.add = function(){
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['450px', '500px'],
content: MODULE_PATH + 'add.html'
});
}
window.toolbar_remove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg('未选中数据', {
icon: 3,
time: 1000,
});
return false;
}
var ids = [];
var hasCheck = table.checkStatus('tables');
var hasCheckData = hasCheck.data;
if (hasCheckData.length > 0) {
$.each(hasCheckData, function(index, element) {
ids.push(element.id);
});
}
layer.confirm('确定要删除选中权限', {
icon: 3,
title: '提示',
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: '/api/v1/rights/rights',
data: {ids: ids},
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
popup.success(result.msg, function() {
console.log(obj);
obj.del();
});
} else {
popup.failure(result.msg);
}
},
});
});
};
window.edit = function(obj){
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['450px', '500px'],
content: MODULE_PATH + 'edit.html'
});
}
window.remove = function(obj){
layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH+"remove/"+obj.data['powerId'],
dataType:'json',
type:'delete',
success:function(result){
layer.close(loading);
if(result.success){
layer.msg(result.msg,{icon:1,time:1000},function(){
obj.del();
});
}else{
layer.msg(result.msg,{icon:2,time:1000});
}
}
})
});
}
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].powerId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些权限', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + "batchRemove/" + ids,
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
table.reload('user-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
});
}
})
iconPicker.render({
// 选择器，推荐使用input
elem: '#add_icon',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false
search: true,
// 是否开启分页
page: true,
// 每页显示数量，默认12
limit: 12,
// 点击回调
click: function(data) {
console.log(data);
},
});
});
</script>
</body>
</html>
templates/view/system/power_add.html
+172
View File
@@ -0,0 +1,172 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>权限</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">父级</label>
<div class="layui-input-block">
<ul id="selectParent" name="parentId" class="dtree" data-id="-1"></ul>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="powerName" lay-verify="title" autocomplete="off" placeholder="权限名称"
class="layui-input">
</div>
</div>
<div class="layui-form-item" id="powerCodeItem">
<label class="layui-form-label">标识</label>
<div class="layui-input-block">
<input type="text" id="powerCode" name="powerCode" autocomplete="off" placeholder="权限标识"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" lay-filter="powerType" name="powerType" value="0" title="目录">
<input type="radio" lay-filter="powerType" name="powerType" value="1" title="菜单" checked>
<input type="radio" lay-filter="powerType" name="powerType" value="2" title="按钮">
</div>
</div>
<div class="layui-form-item" id="powerUrlItem">
<label class="layui-form-label">路径</label>
<div class="layui-input-block">
<input type="text" id="powerUrl" name="powerUrl" autocomplete="off" placeholder="菜单路径"
class="layui-input">
</div>
</div>
<div class="layui-form-item" id="openTypeItem">
<label class="layui-form-label">打开</label>
<div class="layui-input-block">
<select name="openType" id="openType">
<option value=""></option>
<option value="_iframe">框架</option>
<option value="_blank">签页</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图标</label>
<div class="layui-input-block">
<input type="text" id="icon" name="icon" lay-filter="icon" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="text" name="sort" lay-verify="title" autocomplete="off" placeholder="排序"
class="layui-input">
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="power-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['form', 'jquery', 'iconPicker', 'dtree'], function() {
let form = layui.form;
let $ = layui.jquery;
let iconPicker = layui.iconPicker;
let dtree = layui.dtree;
dtree.renderSelect({
elem: '#selectParent',
url: '/api/v1/rights/rights',
method: 'get',
selectInputName: {nodeId: 'parentId', context: 'powerName'},
skin: 'layui',
dataFormat: 'list',
response: {treeId: 'powerId', parentId: 'parentId', title: 'powerName'}, //修改response中返回数据的定义
selectInitVal: '0',
});
form.on('radio(powerType)', function() {
if (this.value == '0') {
$('#powerUrlItem').hide();
$('#powerCodeItem').hide();
$('#openTypeItem').hide();
$('#powerUrl').val('');
$('#powerCode').val('');
$('#openType').val('');
} else if (this.value == '1') {
$('#powerUrlItem').show();
$('#powerCodeItem').show();
$('#openTypeItem').show();
} else if (this.value == '2') {
$('#powerUrlItem').hide();
$('#openTypeItem').hide();
$('#powerCodeItem').show();
$('#powerUrl').val('');
$('#openType').val('');
}
});
form.on('submit(power-save)', function(data) {
data.field.icon = 'layui-icon ' + data.field.icon;
$.ajax({
url: '/api/v1/rights/power/',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
parent.render();
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
iconPicker.render({
// 选择器，推荐使用input
elem: '#icon',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false
search: true,
// 是否开启分页
page: true,
// 每页显示数量，默认12
limit: 12,
// 点击回调
click: function(data) {
console.log(data);
},
});
});
</script>
</body>
</html>
templates/view/system/power_edit.html
+204
View File
@@ -0,0 +1,204 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>权限编辑</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item layui-hide">
<label class="layui-form-label">编号</label>
<div class="layui-input-block">
<input type="text" value="{{ power.id }}" name="powerId"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">父级</label>
<div class="layui-input-block">
<ul id="selectParent" name="parentId" class="dtree" data-id="-1"></ul>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" value="{{ power.name }}" name="powerName"
autocomplete="off" placeholder="权限名称" class="layui-input">
</div>
</div>
<div class="layui-form-item" id="powerCodeItem">
<label class="layui-form-label">标识</label>
<div class="layui-input-block">
<input type="text" id="powerCode" value="{{ power.code }}" name="powerCode"
autocomplete="off" placeholder="权限标识" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" lay-filter="powerType" {% if power.type == 0 %} checked{% endif %}
name="powerType" value="0" title="目录">
<input type="radio" lay-filter="powerType" {% if power.type == 1 %} checked{% endif %}
name="powerType" value="1" title="菜单">
<input type="radio" lay-filter="powerType" {% if power.type == 2 %} checked{% endif %}
name="powerType" value="2" title="按钮">
</div>
</div>
<div class="layui-form-item" id="powerUrlItem">
<label class="layui-form-label">路径</label>
<div class="layui-input-block">
<input type="text" id="powerUrl" value="{{ power.url }}" name="powerUrl"
autocomplete="off" placeholder="菜单路径" class="layui-input">
</div>
</div>
<div class="layui-form-item" id="openTypeItem">
<label class="layui-form-label">打开</label>
<div class="layui-input-block">
<select name="openType" id="openType">
<option value=""></option>
<option value="_iframe" {% if power.open_type == "_iframe" %} selected{% endif %}>框架
</option>
<option value="_blank" {% if power.open_type == "_blank" %} selected{% endif %}>签页</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图标</label>
<div class="layui-input-block">
<input type="text" id="edit_icon" value="{{ power.icon }}" name="icon" lay-filter="icon"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="text" value="{{ power.sort }}" name="sort" lay-verify="title" autocomplete="off"
placeholder="排序" class="layui-input">
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="power-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['form', 'jquery', 'iconPicker', 'dtree'], function() {
let form = layui.form;
let $ = layui.jquery;
let iconPicker = layui.iconPicker;
let dtree = layui.dtree;
dtree.renderSelect({
elem: '#selectParent',
url: '/api/v1/rights/rights',
method: 'get',
selectInputName: {nodeId: 'parentId', context: 'powerName'},
skin: 'layui',
dataFormat: 'list',
response: {treeId: 'powerId', parentId: 'parentId', title: 'powerName'},
selectInitVal: "{{ power.parent_id }}",
});
form.on('radio(powerType)', function(data) {
if (this.value == '0') {
{#目录#}
$('#powerUrlItem').hide();
$('#powerCodeItem').hide();
$('#openTypeItem').hide();
$('#powerUrl').val('');
$('#powerCode').val('');
$('#openType').val('');
} else if (this.value == '1') {
{#菜单#}
$('#powerUrlItem').show();
$('#powerCodeItem').show();
$('#openTypeItem').show();
} else if (this.value == '2') {
{#按钮#}
$('#powerUrlItem').hide();
$('#openTypeItem').hide();
$('#powerCodeItem').show();
$('#powerUrl').val('');
$('#openType').val('');
}
});
form.on('submit(power-save)', function(data) {
data.field.icon = 'layui-icon ' + data.field.icon;
console.log(data.field);
$.ajax({
url: '/api/v1/rights/power/' + data.field.powerId,
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
parent.render();
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
iconPicker.render({
elem: '#edit_icon',
type: 'fontClass',
search: true,
page: true,
limit: 12,
click: function(data) {
console.log(data);
},
});
iconPicker.checkIcon('icon', "{{ icon }}");
window.init = function(type) {
if (type == '0') {
$('#powerUrlItem').hide();
$('#powerCodeItem').hide();
$('#openTypeItem').hide();
$('#powerUrl').val('');
$('#powerCode').val('');
$('#openType').val('');
} else if (type == '1') {
$('#powerUrlItem').show();
$('#powerCodeItem').show();
$('#openTypeItem').show();
} else if (type == '2') {
$('#powerUrlItem').hide();
$('#openTypeItem').hide();
$('#powerCodeItem').show();
$('#powerUrl').val('');
$('#openType').val('');
}
};
window.init("{{ power.type }}");
});
</script>
</body>
</html>
templates/view/system/profile.html
+5 -5
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>头像上传</title>
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space15">
@@ -29,8 +29,8 @@
<div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
</div>
</div>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
layui.use(['jquery','layer','cropper'], function () {
let $ = layui.jquery;
@@ -42,7 +42,7 @@
preview: '#previewImage', // 预览div
viewmode: 1
};
$("#sourceImage").attr("src", parent.layui.$("#userAvatar").attr("src"));
$("#sourceImage").cropper(options);
@@ -58,7 +58,7 @@
formData.append('file', blob, fileName);
formData.append('fileName', fileName);
formData.append('fileToken', timeStamp);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
templates/view/system/role.html
+120 -97
View File
@@ -1,222 +1,243 @@
<!DOCTYPE html>
<html>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>角色管理</title>
<link href="/static/component/pear/css/pear.css" rel="stylesheet"/>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
<label class="layui-form-label">角色名</label>
<div class="layui-input-inline">
<input type="text" name="roleName" placeholder="" class="layui-input">
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
<label class="layui-form-label">角色标识</label>
<div class="layui-input-inline">
<input type="text" name="roleCode" placeholder="" class="layui-input">
</div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="role-table" lay-filter="role-table"></table>
<table id="tables" lay-filter="tables"></table>
</div>
</div>
<script type="text/html" id="role-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<script type="text/html" id="toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="toolbar-add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<button class="pear-btn pear-btn-md" lay-event="toolbar-remove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="role-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
<script type="text/html" id="tool">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="tool-edit"><i
class="layui-icon layui-icon-edit"></i>
</button>
<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="power"><i
class="layui-icon layui-icon-vercode"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="tool-power"><i
class="layui-icon layui-icon-vercode"></i>
</button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="tool-remove"><i
class="layui-icon layui-icon-delete"></i>
</button>
</script>
<script type="text/html" id="role-enable">
<input type="checkbox" name="enable" value="{{ '{{ d.id }}'|safe }}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="role-enable"
{{ "{{ d.enable== true ? 'checked' : '' }}"|safe }} />
<script type="text/html" id="tool-switch">
<input type="checkbox" name="enable" value="{{ "{{d.id}}" }}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="tool-switch" {{ "{{# if(d.enable==1){ }} checked {{# } }}" }}>
</script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['table', 'form', 'jquery'], function() {
layui.use(['table', 'form', 'jquery', 'popup', 'common'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let popup = layui.popup;
let MODULE_PATH = 'operate/';
let cols = [
const get_columns = () => [
[
{type: 'checkbox'},
{title: '角色名', field: 'roleName', align: 'center', width: 100},
{title: 'Key值', field: 'roleCode', align: 'center'},
{title: '描述', field: 'details', align: 'center'},
{title: '是否可用', field: 'enable', align: 'center', templet: '#role-enable'},
{title: '操作', toolbar: '#role-bar', align: 'center', width: 195},
{title: '是否可用', field: 'enable', align: 'center', templet: '#tool-switch'},
{title: '排序', field: 'sort', align: 'center'},
{title: '操作', toolbar: '#tool', align: 'center', width: 195},
],
];
table.render({
elem: '#role-table',
url: '/static/admin/data/role.json',
parseData: parserTableData,
elem: '#tables',
url: '/api/v1/roles/role',
page: true,
cols: cols,
cols: get_columns(),
skin: 'line',
toolbar: '#role-toolbar',
toolbar: '#toolbar',
defaultToolbar: [
{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'],
});
table.on('tool(role-table)', function(obj) {
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
} else if (obj.event === 'power') {
window.power(obj);
table.on('tool(tables)', function(obj) {
if (obj.event === 'tool-remove') {
window.tool_remove(obj);
} else if (obj.event === 'tool-edit') {
window.tool_edit(obj);
} else if (obj.event === 'tool-power') {
window.tool_power(obj);
}
});
table.on('toolbar(role-table)', function(obj) {
if (obj.event === 'add') {
window.add();
table.on('toolbar(tables)', function(obj) {
if (obj.event === 'toolbar-add') {
window.toolbar_add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'batchRemove') {
window.batchRemove(obj);
} else if (obj.event === 'toolbar-remove') {
window.toolbar_remove(obj);
}
});
form.on('submit(role-query)', function(data) {
table.reload('role-table', {where: data.field});
table.reload('tables', {where: data.field});
return false;
});
form.on('switch(role-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
form.on('switch(tool-switch)', function(obj) {
let operate;
if (obj.elem.checked) {
operate = 1;
} else {
operate = 0;
}
let loading = layer.load();
$.ajax({
url: '/api/v1/roles/role/' + this.value + '/status',
data: JSON.stringify({roleId: this.value, operate: operate}),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
});
window.add = function() {
window.toolbar_add = function() {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'add.html',
area: ['500px', '500px'],
content: '/admin/role/add',
});
};
window.power = function(obj) {
window.tool_power = function(obj) {
layer.open({
type: 2,
title: '授权',
shade: 0.1,
area: ['320px', '400px'],
content: MODULE_PATH + 'edit.html',
content: '/admin/role/power/' + obj.data['id'],
});
};
window.edit = function(obj) {
window.tool_edit = function(obj) {
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'edit.html',
area: ['500px', '500px'],
content: '/admin/role/edit/' + obj.data['id'],
});
};
window.remove = function(obj) {
window.tool_remove = function(obj) {
layer.confirm('确定要删除该角色', {icon: 3, title: '提示'}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + 'remove/' + obj.data['roleId'],
url: '/api/v1/roles/role_power/' + obj.data['id'],
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {icon: 1, time: 1000}, function() {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
obj.del();
});
} else {
layer.msg(result.msg, {icon: 2, time: 1000});
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
});
};
window.batchRemove = function(obj) {
window.toolbar_remove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg('未选中数据', {icon: 3, time: 1000});
layer.msg('未选中数据', {
icon: 3,
time: 1000,
});
return false;
}
let ids = '';
for (let i = 0; i < data.length; i++) {
ids += data[i].roleId + ',';
var ids = [];
var hasCheck = table.checkStatus('tables');
var hasCheckData = hasCheck.data;
if (hasCheckData.length > 0) {
$.each(hasCheckData, function(index, element) {
ids.push(element.id);
});
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些用户', {icon: 3, title: '提示'}, function(index) {
console.log(ids);
layer.confirm('确定要删除选中角色', {
icon: 3,
title: '提示',
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + 'batchRemove/' + ids,
url: '/api/v1/roles/role',
data: {ids: ids},
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {icon: 1, time: 1000}, function() {
table.reload('role-table');
popup.success(result.message, function() {
table.reload('tables');
});
} else {
layer.msg(result.msg, {icon: 2, time: 1000});
popup.failure(result.message);
}
},
});
@@ -224,9 +245,11 @@
};
window.refresh = function() {
table.reload('role-table');
table.reload('tables');
};
});
</script>
</body>
</html>
templates/view/system/roles_add.html
+94
View File
@@ -0,0 +1,94 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>角色新增</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" name="roleName" lay-verify="title" autocomplete="off" placeholder="请输入名称"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标识</label>
<div class="layui-input-block">
<input type="text" name="roleCode" lay-verify="title" autocomplete="off" placeholder="请输入标识"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="enable" value="0" title="开启">
<input type="radio" name="enable" value="1" title="关闭" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="text" name="sort" lay-verify="title" autocomplete="off" placeholder="请输入排序序号（数字）"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea placeholder="请输入描述" name="details" class="layui-textarea"></textarea>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="role-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(role-save)', function(data) {
$.ajax({
url: '/api/v1/roles/role/',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
parent.layui.table.reload('tables');
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
});
</script>
</body>
</html>
templates/view/system/roles_edit.html
+104
View File
@@ -0,0 +1,104 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>角色编辑</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="main-container">
<div class="layui-form-item layui-hide">
<label class="layui-form-label">编号</label>
<div class="layui-input-block">
<input type="text" value="{{ role.id }}" name="roleId" lay-verify="title"
autocomplete="off" placeholder="请输入编号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" value="{{ role.name }}" name="roleName" lay-verify="title"
autocomplete="off" placeholder="请输入名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标识</label>
<div class="layui-input-block">
<input type="text" value="{{ role.code }}" readonly name="roleCode" lay-verify="title"
autocomplete="off" placeholder="请输入标识" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态</label>
<div class="layui-input-block">
<input type="radio" name="enable" {% if role.enable == 1 %}checked {% endif %}value="1"
title="开启">
<input type="radio" name="enable" {% if role.enable == 0 %}checked {% endif %} value="0"
title="关闭">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="text" name="sort" value="{{ role.sort }}" lay-verify="title" autocomplete="off"
placeholder="请输入排序序号（数字）"
class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">描述</label>
<div class="layui-input-block">
<textarea placeholder="请输入描述" name="details"
class="layui-textarea">{{ role.details }}</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="role-update">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script type="module">
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(role-update)', function(data) {
$.ajax({
url: '/api/v1/roles/role/' + data.field.roleId,
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
parent.layui.table.reload('tables');
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
});
</script>
</body>
</html>
templates/view/system/roles_power.html
+85
View File
@@ -0,0 +1,85 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>角色授权</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="main-container">
<ul id="role-power" class="dtree" data-id="0"></ul>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="power-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['dtree', 'form', 'jquery'], function() {
let dtree = layui.dtree;
let form = layui.form;
let $ = layui.jquery;
dtree.render({
elem: '#role-power',
method: 'get',
url: '/api/v1/roles/role_power/' + {{ role_id }}, /*最后是 jianja2 语法*/
dataFormat: 'list',
checkbar: true,
skin: 'layui',
initLevel: '1',
checkbarType: 'self',
response: {treeId: 'powerId', parentId: 'parentId', title: 'powerName'},
});
form.on('submit(power-save)', function(data) {
let param = dtree.getCheckbarNodesParam('role-power');
let ids = '';
for (let i = 0; i < param.length; i++) {
let id = param[i].nodeId;
ids += id + ',';
}
ids = ids.substr(0, ids.length - 1);
data.field.roleId = {{role_id}};
data.field.powerIds = ids;
$.ajax({
url: '/api/v1/roles/role_power/' + data.field.roleId,
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
});
</script>
</body>
</html>
templates/view/system/space.html
+3 -3
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
<style>
h1{
margin-top: 200px;
@@ -22,6 +22,6 @@
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
</html>
templates/view/system/theme.html
+279 -274
View File
@@ -1,300 +1,305 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header">按钮</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary">Button</button>
<button class="pear-btn pear-btn-primary">Button</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">输入框</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">开关</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="xxx" lay-skin="switch">&nbsp;&nbsp;
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>&nbsp;&nbsp;
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">&nbsp;&nbsp;
<input type="checkbox" name="aaa" lay-skin="switch" disabled>&nbsp;&nbsp;
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">单选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
</div>
<div class="layui-card layui-form">
<div class="layui-card-header">下拉</div>
<div class="layui-card-body">
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
</div>
</div>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header">按钮</div>
<div class="layui-card-body">
<button class="pear-btn pear-btn-primary">Button</button>
<button class="pear-btn pear-btn-primary">Button</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">输入框</div>
<div class="layui-card-body">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">开关</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="xxx" lay-skin="switch">&nbsp;&nbsp;
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>&nbsp;&nbsp;
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">&nbsp;&nbsp;
<input type="checkbox" name="aaa" lay-skin="switch" disabled>&nbsp;&nbsp;
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">单选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>
</div>
</div>
</div>
<div class="layui-card layui-form">
<div class="layui-card-header">下拉</div>
<div class="layui-card-body">
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
</div>
</div>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
</button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
</button>
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{ '{{d.id}}' }}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ "{{ d.enable == 0 ? 'true' : 'false' }}" }}">
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{ '{{d.id}}' }}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="user-enable" checked="{{ "{{ d.enable == 0 ? 'true' : 'false' }}" }}">
</script>
<script type="text/html" id="user-sex">
{{ "{{#if (d.sex == 1) { }}
<script type="text/html" id="user-sex">
{{ "{{#if (d.sex == 1) { }}
<span>男</span>
{{# }else if(d.sex == 2){ }}
<span>女</span>
{{# } }}" }}
</script>
</script>
<script type="text/html" id="user-login">
{{ "{{#if (d.login == 0) { }}
<script type="text/html" id="user-login">
{{ "{{#if (d.login == 0) { }}
<span>在线</span>
{{# }else if(d.sex == 1){ }}
<span>离线</span>
{{# } }}" }}
</script>
</script>
<script type="text/html" id="user-createTime">
{{ "{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}" }}
</script>
<script type="text/html" id="user-createTime">
{{ "{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}" }}
</script>
<div class="layui-card">
<div class="layui-card-header">选项卡</div>
<div class="layui-card-body">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" style="height: 30px;">
<div class="layui-tab-item layui-show"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">进度条</div>
<div class="layui-card-body">
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="30%"></div>
</div>
<br />
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="20%"></div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">分页</div>
<div class="layui-card-body">
<div id="test1"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">辅助元素</div>
<div class="layui-card-body">
<blockquote class="layui-elem-quote">快乐的时候不敢尽兴，频繁警戒自己保持清醒.</blockquote>
<blockquote class="layui-elem-quote">路上没有灯火的时候，就点亮自己的头颅.</blockquote>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利72周年
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">日期选择</div>
<div class="layui-card-body">
<input type="text" class="layui-input" id="test2">
</div>
</div>
</body>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery', 'drawer'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let drawer = layui.drawer;
<div class="layui-card">
<div class="layui-card-header">选项卡</div>
<div class="layui-card-body">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" style="height: 30px;">
<div class="layui-tab-item layui-show"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
<div class="layui-tab-item"></div>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">进度条</div>
<div class="layui-card-body">
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="30%"></div>
</div>
<br/>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="20%"></div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">分页</div>
<div class="layui-card-body">
<div id="test1"></div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">辅助元素</div>
<div class="layui-card-body">
<blockquote class="layui-elem-quote">快乐的时候不敢尽兴，频繁警戒自己保持清醒.</blockquote>
<blockquote class="layui-elem-quote">路上没有灯火的时候，就点亮自己的头颅.</blockquote>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header"></div>
<div class="layui-card-body">
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月18日</h3>
<p>
layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月16日</h3>
<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title">8月15日</h3>
<p>
中国人民抗日战争胜利72周年
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">日期选择</div>
<div class="layui-card-body">
<input type="text" class="layui-input" id="test2">
</div>
</div>
</body>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery', 'drawer'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let drawer = layui.drawer;
let MODULE_PATH = "/system/user/";
let MODULE_PATH = '/system/user/';
let cols = [
[{
type: 'checkbox'
},
{
title: '姓名',
field: 'realName',
align: 'center'
},
{
title: '性别',
field: 'sex',
align: 'center',
width: 80,
templet: '#user-sex'
},
{
title: '启用',
field: 'enable',
align: 'center',
templet: '#user-enable'
},
{
title: '登录',
field: 'login',
align: 'center',
templet: '#user-login'
},
{
title: '注册',
field: 'createTime',
align: 'center',
templet: '#user-createTime'
},
{
title: '操作',
toolbar: '#user-bar',
align: 'center',
width: 130
}
]
]
let cols = [
[
{
type: 'checkbox',
},
{
title: '姓名',
field: 'realName',
align: 'center',
},
{
title: '性别',
field: 'sex',
align: 'center',
width: 80,
templet: '#user-sex',
},
{
title: '启用',
field: 'enable',
align: 'center',
templet: '#user-enable',
},
{
title: '登录',
field: 'login',
align: 'center',
templet: '#user-login',
},
{
title: '注册',
field: 'createTime',
align: 'center',
templet: '#user-createTime',
},
{
title: '操作',
toolbar: '#user-bar',
align: 'center',
width: 130,
},
],
];
table.render({
elem: '#user-table',
url: '/static/admin/data/table.json',
page: true,
cols: cols,
skin: 'line',
toolbar: '#user-toolbar',
defaultToolbar: [{
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports']
});
table.render({
elem: '#user-table',
url: '/static/admin/data/table.json',
page: true,
cols: cols,
skin: 'line',
toolbar: '#user-toolbar',
defaultToolbar: [
{
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'],
});
form.on('switch(user-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
});
form.on('switch(user-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
});
})
</script>
<script>
layui.use('form', function() {
});
</script>
<script>
layui.use('form', function() {
})
</script>
<script>
layui.use('laypage', function() {
var laypage = layui.laypage;
});
</script>
<script>
layui.use('laypage', function() {
var laypage = layui.laypage;
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,
count: 50 //数据总数，从服务端得到
});
});
</script>
<script>
layui.use('laydate', function() {
var laydate = layui.laydate;
laypage.render({
elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
,
count: 50, //数据总数，从服务端得到
});
});
</script>
<script>
layui.use('laydate', function() {
var laydate = layui.laydate;
laydate.render({
elem: '#test2' //指定元素
});
});
</script>
laydate.render({
elem: '#test2', //指定元素
});
});
</script>
</html>
templates/view/system/user.html
+192 -214
View File
@@ -1,304 +1,282 @@
<!DOCTYPE html>
<html>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>用户管理</title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
{# 查询表单 #}
<div class="layui-card">
<div class="layui-card-body">
<form class="layui-form" action="">
<form class="layui-form" action="" lay-filter="user-query-form">
<div class="layui-form-item">
<div class="layui-form-item layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
<label class="layui-form-label">用户</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-inline">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
<label class="layui-form-label">账号</label>
<div class="layui-input-inline">
<input type="text" name="username" placeholder="" class="layui-input">
</div>
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
{# 用户表格 #}
<div class="user-main user-collasped">
<div class="layui-card">
<div class="layui-card-body">
<table id="tables" lay-filter="tables"></table>
</div>
</div>
</div>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
{% include 'view/includes/scripts.html' %}
{# 表格操作 #}
<script type="text/html" id="toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="toolbar-add">
<i class="pear-icon pear-icon-add"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
<button class="pear-btn pear-btn-md" lay-event="toolbar-remove">
<i class="pear-icon pear-icon-ashbin"></i>
删除
</button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
</button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
<button class="pear-btn pear-btn-md" lay-event="toolbar-collasped">
<i class="pear-icon pear-icon-modular"></i>
高级
</button>
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{ "{{ d.id }}"|safe }}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="user-enable"
{{ "{{ d.enable== true ? 'checked' : '' }}"|safe }} />
{# 用户修改操作 #}
<script type="text/html" id="tool">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="tool-edit">
<i class="pear-icon pear-icon-edit"></i>
</button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="tool-remove">
<i class="pear-icon pear-icon-ashbin"></i>
</button>
</script>
<script type="text/html" id="user-sex">
{{ "{{#if (d.sex == 1) { }}
<span>男</span>
{{# }else if(d.sex == 2){ }}
<span>女</span>
{{# } }}" |safe }}
{# 启动与禁用 #}
<script type="text/html" id="tool-switch">
<input type="checkbox" name="enable" value="{{ "{{ d.id }}" }}" lay-skin="switch" lay-text="启用|禁用"
lay-filter="tool-switch"
{{ "{{# if(d.enable==1){ }} checked {{# } }}" }} />
</script>
<script type="text/html" id="user-login">
{{ "{{#if (d.login == 0) { }}
<span>在线</span>
{{# }else if(d.sex == 1){ }}
<span>离线</span>
{{# } }}"|safe }}
</script>
{# 用户注册时间 #}
<script type="text/html" id="user-createTime">
{{ "{{ layui.util.toDateString(d.createTime, 'yyyy-MM-dd') }}"|safe }}
{{ ' {{layui.util.toDateString(d.create_at, "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>
{# 用户更新时间 #}
<script type="text/html" id="user-updateTime">
{{ ' {{layui.util.toDateString(d.update_at, "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
layui.use(['table', 'form', 'jquery', 'common'], function() {
layui.use(['table', 'dtree', 'form', 'jquery', 'popup', 'common'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let dtree = layui.dtree;
let popup = layui.popup;
let common = layui.common;
let MODULE_PATH = 'operate/';
let cols = [
// 表格数据
const get_columns = () => [
[
{
type: 'checkbox',
},
{
title: '账号',
field: 'username',
align: 'center',
width: 100,
},
{
title: '姓名',
field: 'realName',
align: 'center',
},
{
title: '性别',
field: 'sex',
align: 'center',
width: 80,
templet: '#user-sex',
},
{
title: '电话',
field: 'phone',
align: 'center',
},
{
title: '启用',
field: 'enable',
align: 'center',
templet: '#user-enable',
},
{
title: '登录',
field: 'login',
align: 'center',
templet: '#user-login',
},
{
title: '注册',
field: 'createTime',
align: 'center',
templet: '#user-createTime',
},
{
title: '操作',
toolbar: '#user-bar',
align: 'center',
width: 130,
},
{type: 'checkbox'},
{title: '姓名', field: 'realname', align: 'center', width: 110},
{title: '账号', field: 'username', align: 'center'},
{title: '部门', field: 'dept', align: 'center'},
{title: '启用', field: 'enable', align: 'center', templet: '#tool-switch', width: 120},
{title: '注册时间', field: 'create_at', templet: '#user-createTime', align: 'center'},
{title: '更新时间', field: 'update_at', templet: '#user-updateTime', align: 'center'},
{title: '操作', toolbar: '#tool', align: 'center', width: 130},
],
];
// 渲染表格数据
table.render({
elem: '#user-table',
url: '/static/admin/data/user.json',
parseData: parserTableData,
elem: '#tables',
url: '/api/v1/users/user',
page: true,
cols: cols,
cols: get_columns(),
skin: 'line',
toolbar: '#user-toolbar',
defaultToolbar: [
{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh',
}, 'filter', 'print', 'exports'],
height: 'full-148',
toolbar: '#toolbar', /*工具栏*/
text: {none: '暂无人员信息'},
defaultToolbar: [{layEvent: 'refresh', icon: 'layui-icon-refresh'}, 'filter', 'print', 'exports'], /*默认工具栏*/
});
table.on('tool(user-table)', function(obj) {
if (obj.event === 'remove') {
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
//
$('.user-group').click(function() {
let group = $(this).attr('user-group');
let field = form.val('user-query-form');
if (group === '-1') {
field.deptId = group;
$(this).removeClass('button-default');
$(this).prev().removeClass('button-primary');
$(this).prev().addClass('button-default');
$(this).addClass('button-primary');
} else {
field.deptId = group;
$(this).removeClass('button-default');
$(this).next().removeClass('button-primary');
$(this).next().addClass('button-default');
$(this).addClass('button-primary');
}
window.refresh(field);
});
table.on('tool(tables)', function(obj) {
if (obj.event === 'tool-remove') {
window.tool_remove(obj);
} else if (obj.event === 'tool-edit') {
window.tool_edit(obj);
}
});
table.on('toolbar(user-table)', function(obj) {
if (obj.event === 'add') {
window.add();
table.on('toolbar(tables)', function(obj) {
if (obj.event === 'toolbar-add') {
window.toolbar_add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'batchRemove') {
window.batchRemove(obj);
} else if (obj.event === 'toolbar-remove') {
window.toolbar_remove(obj);
} else if (obj.event === 'toolbar-collasped') {
$('.user-left').toggleClass('user-collasped');
$('.user-main').toggleClass('user-collasped');
table.resize();
}
});
form.on('submit(user-query)', function(data) {
table.reload('user-table', {
where: data.field,
});
window.refresh(data.field);
return false;
});
form.on('switch(user-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
form.on('switch(tool-switch)', function(obj) {
let operate;
if (obj.elem.checked) {
operate = 1;
} else {
operate = 0;
}
let loading = layer.load();
$.ajax({
url: '/api/v1/users/user/' + this.value + '/status',
data: JSON.stringify({operate: operate, userId: this.value}),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
layer.close(loading);
if (result.success) {
popup.success(result.message);
} else {
popup.failure(result.message);
}
},
});
});
window.add = function() {
window.toolbar_add = function() {
layer.open({
type: 2,
title: '新增',
shade: 0.1,
area: [common.isModile() ? '100%' : '500px', common.isModile() ? '100%' : '400px'],
content: MODULE_PATH + 'add.html',
area: ['550px', '550px'],
content: '/users/add',
});
};
window.edit = function(obj) {
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['500px', '400px'],
content: MODULE_PATH + 'edit.html',
});
};
window.remove = function(obj) {
layer.confirm('确定要删除该用户', {
icon: 3,
title: '提示',
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + 'remove/' + obj.data['userId'],
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000,
}, function() {
obj.del();
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000,
});
}
},
});
});
};
window.batchRemove = function(obj) {
var checkIds = common.checkField(obj, 'userId');
if (checkIds === '') {
window.toolbar_remove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg('未选中数据', {
icon: 3,
time: 1000,
});
return false;
}
layer.confirm('确定要删除这些用户', {
var ids = [];
var hasCheck = table.checkStatus('tables');
var hasCheckData = hasCheck.data;
if (hasCheckData.length > 0) {
$.each(hasCheckData, function(index, element) {
ids.push(element.id);
});
}
{#console.log(ids);#}
layer.confirm('确定要删除选中角色', {
icon: 3,
title: '提示',
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: MODULE_PATH + 'batchRemove/' + ids,
url: '/api/v1/users/user',
data: {ids: ids},
dataType: 'json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
layer.msg(result.msg, {
icon: 1,
time: 1000,
}, function() {
table.reload('user-table');
popup.success(result.message, function() {
table.reload('role-table');
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000,
});
popup.failure(result.message);
}
},
});
});
};
window.refresh = function(param) {
table.reload('user-table');
table.reload('tables', {where: param});
};
window.tool_remove = function(obj) {
layer.confirm('确定要删除该用户', {icon: 3, title: '提示'}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: '/api/v1/users/user/' + obj.data['id'],
dataType: 'json',
contentType: 'application/json',
type: 'delete',
success: function(result) {
layer.close(loading);
if (result.success) {
popup.success(result.message, function() {
obj.del();
});
} else {
popup.failure(result.message);
}
},
});
});
};
window.tool_edit = function(obj) {
layer.open({
type: 2,
title: '修改',
shade: 0.1,
area: ['550px', '500px'],
content: '/users/' + obj.data['id'],
});
};
});
</script>
</body>
</html>
</html>
templates/view/system/user_add.html
+101
View File
@@ -0,0 +1,101 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>用户管理</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<form class="layui-form">
<div class="mainBox">
<div class="main-container">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入账号"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入姓名"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="text" name="password" lay-verify="title" autocomplete="off" placeholder="请输入密码"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-block">
{% for role in roles %}
<input
value="{{ role.id }}" title="{{ role.name }}" type="checkbox"
name="roleIds" lay-skin="primary">
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="user-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
form.on('submit(user-save)', function(data) {
let roleIds = '';
$('input[type=checkbox]:checked').each(function() {
roleIds += $(this).val() + ',';
});
roleIds = roleIds.substr(0, roleIds.length - 1);
data.field.roleIds = roleIds;
$.ajax({
url: '/api/v1/users/user',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
parent.layui.table.reload('tables');
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
});
</script>
</body>
</html>
templates/view/system/user_edit.html
+120
View File
@@ -0,0 +1,120 @@
<!doctype html>
<html lang="zh-CN">
<head>
<title>用户编辑</title>
{% include 'view/includes/links.html' %}
</head>
<body class="pear-container">
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="main-container">
<div class="layui-form-item layui-hide">
<label class="layui-form-label">编号</label>
<div class="layui-input-block">
<input type="text" value="{{ user.id }}" name="userId" lay-verify="title"
autocomplete="off" placeholder="请输入编号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">账号</label>
<div class="layui-input-block">
<input type="text" value="{{ user.username }}" name="username" lay-verify="title"
autocomplete="off" placeholder="请输入账号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" value="{{ user.realname }}" name="realName" lay-verify="title"
autocomplete="off" placeholder="请输入姓名"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">部门</label>
<div class="layui-input-block">
<ul id="selectParent" name="deptId" class="dtree" data-id="0"></ul>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色</label>
<div class="layui-input-block">
{% for role in roles %}
<input {% if role.id in checked_roles %}
checked
{% endif %}
value="{{ role.id }}" title="{{ role.name }}" type="checkbox"
name="roleIds" lay-skin="primary">
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="user-update">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
{% include 'view/includes/scripts.html' %}
<script>
layui.use(['form', 'jquery', 'dtree'], function() {
let form = layui.form;
let $ = layui.jquery;
let dtree = layui.dtree;
dtree.renderSelect({
elem: '#selectParent',
url: '/api/v1/dept/department',
method: 'get',
selectInputName: {nodeId: 'deptId', context: 'deptName'},
skin: 'layui',
dataFormat: 'list',
response: {treeId: 'deptId', parentId: 'parentId', title: 'deptName'},
selectInitVal: "{{ user.dept_id }}",
});
form.on('submit(user-update)', function(data) {
let roleIds = '';
$('input[type=checkbox]:checked').each(function() {
roleIds += $(this).val() + ',';
});
roleIds = roleIds.substr(0, roleIds.length - 1);
data.field.roleIds = roleIds;
$.ajax({
url: '/api/v1/users/user/' + data.field.userId + '/role',
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'put',
success: function(result) {
if (result.success) {
layer.msg(result.message, {icon: 1, time: 1000}, function() {
parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭当前页
parent.layui.table.reload('tables');
});
} else {
layer.msg(result.message, {icon: 2, time: 1000});
}
},
});
return false;
});
});
</script>
</body>
</html>