refactor(all): 完成项目的前后端逻辑分离，静态页面可以单独部署
This commit is contained in:
zhengxinonly
@@ -0,0 +1,243 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>部门管理</title>
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div style="padding: 16px">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table
|
||||
class="layui-hide"
|
||||
id="department-table"
|
||||
lay-filter="department-table"
|
||||
></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
class="layui-form"
|
||||
lay-filter="department-form"
|
||||
id="department-form"
|
||||
action=""
|
||||
style="padding: 15px; display: none"
|
||||
>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">ID</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="id"
|
||||
value="0"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">部门名</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="请输入部门名"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
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"
|
||||
placeholder="请输入负责人"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">状态</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="enable"
|
||||
lay-skin="switch"
|
||||
autocomplete="off"
|
||||
checked
|
||||
title="启用|禁用"
|
||||
class="layui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">上级部门ID</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="pid"
|
||||
placeholder="请输入上级部门id"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button
|
||||
type="submit"
|
||||
class="layui-btn"
|
||||
lay-submit
|
||||
lay-filter="department-form-btn"
|
||||
>
|
||||
立即提交
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script type="text/html" id="department-toolbar">
|
||||
<div class="layui-btn-container">
|
||||
<button
|
||||
class="layui-btn layui-btn-sm"
|
||||
lay-event="department-toolbar-add"
|
||||
>
|
||||
新增部门
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="department-tool">
|
||||
<div class="layui-btn-container">
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-blue"
|
||||
lay-event="department-tool-edit"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-red"
|
||||
lay-event="department-tool-del"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var treeTable = layui.treeTable;
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
|
||||
treeTable.render({
|
||||
elem: "#department-table",
|
||||
id: "department-table",
|
||||
url: "/api/v1/department?type=tree", // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||
height: "full-35", // 最大高度减去其他容器已占有的高度差
|
||||
toolbar: "#department-toolbar",
|
||||
page: true,
|
||||
cols: [
|
||||
[
|
||||
//标题栏
|
||||
{ field: "id", title: "ID", width: 80, sort: true },
|
||||
{ field: "name", title: "部门名", width: 220 },
|
||||
{ field: "leader", title: "负责人", width: 160 },
|
||||
{ field: "enable", title: "状态", width: 80 },
|
||||
{
|
||||
fixed: "right",
|
||||
title: "操作",
|
||||
width: 120,
|
||||
align: "center",
|
||||
toolbar: "#department-tool",
|
||||
},
|
||||
],
|
||||
],
|
||||
});
|
||||
|
||||
treeTable.on("toolbar(department-table)", function (obj) {
|
||||
if (obj.event === "department-toolbar-add") {
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
content: $("#department-form"),
|
||||
area: ["50%", "80%"],
|
||||
});
|
||||
form.render($("#department-form"));
|
||||
}
|
||||
});
|
||||
|
||||
treeTable.on("tool(department-table)", function (obj) {
|
||||
if (obj.event === "department-tool-edit") {
|
||||
form.val("department-form", obj.data);
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
content: $("#department-form"),
|
||||
area: ["50%", "80%"],
|
||||
});
|
||||
} else if (obj.event === "department-tool-del") {
|
||||
$.ajax({
|
||||
url: `/api/v1/department/${obj.data.id}`,
|
||||
type: "DELETE",
|
||||
contentType: "application/json",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": getCookie("csrf_access_token"),
|
||||
},
|
||||
success: function (res) {
|
||||
if (!res.code) {
|
||||
treeTable.reloadData("department-table");
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
form.on("submit(department-form-btn)", function (data) {
|
||||
var field = data.field;
|
||||
|
||||
data.field.enable = data.field.enable === "on";
|
||||
let method, url;
|
||||
if (field.pid === "") {
|
||||
field.pid = null;
|
||||
}
|
||||
if (field.id == 0) {
|
||||
field.id = null;
|
||||
method = "POST";
|
||||
url = "/api/v1/department";
|
||||
} else {
|
||||
method = "PUT";
|
||||
url = `/api/v1/department/${field.id}`;
|
||||
}
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: method,
|
||||
contentType: "application/json",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": getCookie("csrf_access_token"),
|
||||
},
|
||||
data: JSON.stringify(field),
|
||||
success: function (res) {
|
||||
if (!res.code) {
|
||||
layer.closeAll();
|
||||
treeTable.reloadData("department-table");
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,386 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>权限管理</title>
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="padding: 16px">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table
|
||||
class="layui-hide"
|
||||
id="rights-table"
|
||||
lay-filter="rights-table"
|
||||
></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/html" id="rights-toolbar">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="rights-toolbar-add">
|
||||
新增权限
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="rights-tool">
|
||||
<div class="layui-btn-container">
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-blue"
|
||||
lay-event="rights-tool-edit"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-red"
|
||||
lay-event="rights-tool-del"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
<form
|
||||
class="layui-form"
|
||||
lay-filter="rights-form"
|
||||
id="rights-form"
|
||||
style="padding: 15px; display: none"
|
||||
>
|
||||
<div class="layui-form-item" style="display: none">
|
||||
<label class="layui-form-label">ID</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="id"
|
||||
value="0"
|
||||
lay-verify="required"
|
||||
placeholder="请输入权限名"
|
||||
autocomplete="off"
|
||||
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="name"
|
||||
lay-verify="required"
|
||||
placeholder="请输入权限名"
|
||||
autocomplete="off"
|
||||
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="code"
|
||||
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="type"
|
||||
value="menu"
|
||||
title="菜单"
|
||||
lay-filter="form-rights-filter"
|
||||
checked
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="type"
|
||||
value="path"
|
||||
title="路由"
|
||||
lay-filter="form-rights-filter"
|
||||
/>
|
||||
<input
|
||||
type="radio"
|
||||
name="type"
|
||||
value="auth"
|
||||
title="权限"
|
||||
lay-filter="form-rights-filter"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">图标</label>
|
||||
<div class="layui-input-inline">
|
||||
<input
|
||||
type="text"
|
||||
name="icon_sign"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item" style="display: none">
|
||||
<label class="layui-form-label">访问地址</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="url"
|
||||
lay-verify=""
|
||||
placeholder="请输入访问地址"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">状态</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="status"
|
||||
lay-skin="switch"
|
||||
lay-filter="rights-row-status"
|
||||
checked
|
||||
title="启用|禁用"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">序号</label>
|
||||
<div class="layui-input-inline">
|
||||
<input
|
||||
type="text"
|
||||
name="sort"
|
||||
placeholder=""
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
value="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">打开方式</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="open_type" id="">
|
||||
<option value="_component" selected>默认方式</option>
|
||||
<option value="_blank">新窗口</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">父元素 ID</label>
|
||||
<div class="layui-input-inline">
|
||||
<input
|
||||
type="text"
|
||||
name="pid"
|
||||
placeholder=""
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button
|
||||
type="submit"
|
||||
class="layui-btn"
|
||||
lay-submit
|
||||
lay-filter="rights-form-btn"
|
||||
>
|
||||
立即提交
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var treeTable = layui.treeTable;
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
treeTable.render({
|
||||
elem: "#rights-table",
|
||||
id: "rights-table",
|
||||
url: "/api/v1/rights?type=treetable", // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||
height: "full-35", // 最大高度减去其他容器已占有的高度差
|
||||
toolbar: "#rights-toolbar",
|
||||
cols: [
|
||||
[
|
||||
{ type: "checkbox", fixed: "left" },
|
||||
{
|
||||
field: "id",
|
||||
title: "ID",
|
||||
width: 80,
|
||||
sort: true,
|
||||
fixed: "left",
|
||||
},
|
||||
{ field: "name", title: "权限名", width: 180 },
|
||||
{ field: "code", title: "权限标识", width: 150 },
|
||||
{
|
||||
field: "type",
|
||||
title: "类型",
|
||||
width: 100,
|
||||
templet: (d) => {
|
||||
if (d.type === "menu") {
|
||||
return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius">菜单</button>`;
|
||||
} else if (d.type === "path") {
|
||||
return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal">路径</button>`;
|
||||
} else if (d.type === "auth") {
|
||||
return `<button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-bg-purple">权限</button>`;
|
||||
}
|
||||
},
|
||||
},
|
||||
{ field: "url", title: "访问地址", width: 200 },
|
||||
{
|
||||
field: "icon_sign",
|
||||
title: "图标",
|
||||
width: 90,
|
||||
templet: (d) => {
|
||||
return `<i class="${d.icon_sign}"></i> `;
|
||||
},
|
||||
},
|
||||
{ field: "open_type", title: "打开方式", width: 100 },
|
||||
{ field: "sort", title: "排序", width: 100 },
|
||||
{
|
||||
field: "status",
|
||||
title: "状态",
|
||||
width: 100,
|
||||
templet: (d) => {
|
||||
return `<input type="checkbox" name="status" value="${
|
||||
d.id
|
||||
}" title="启用|禁用" lay-skin="switch" ${
|
||||
d.status ? "checked" : ""
|
||||
} lay-filter="rights-table-switch-status"/>`;
|
||||
},
|
||||
},
|
||||
{
|
||||
fixed: "right",
|
||||
title: "操作",
|
||||
width: 120,
|
||||
align: "center",
|
||||
toolbar: "#rights-tool",
|
||||
},
|
||||
],
|
||||
],
|
||||
page: true,
|
||||
});
|
||||
|
||||
treeTable.on("toolbar(rights-table)", function (obj) {
|
||||
if (obj.event === "rights-toolbar-add") {
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
content: $("#rights-form"),
|
||||
area: ["50%", "80%"],
|
||||
});
|
||||
form.render($("#rights-form"));
|
||||
}
|
||||
});
|
||||
|
||||
// 提交事件
|
||||
form.on("submit(rights-form-btn)", function (data) {
|
||||
let field = data.field;
|
||||
field.status = !!field.status;
|
||||
let method, url;
|
||||
if (field.id == 0) {
|
||||
field.id = null;
|
||||
method = "POST";
|
||||
url = "/api/v1/rights";
|
||||
|
||||
if (field.type === "path") {
|
||||
if (!/\//.test(field.url)) {
|
||||
layer.msg("url 不符合格式");
|
||||
return false;
|
||||
}
|
||||
} else if (field.type === "auth") {
|
||||
console.log(field.pid);
|
||||
if (!field.pid || field.pid === "0") {
|
||||
layer.msg("权限必须填入父级 id");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
method = "PUT";
|
||||
url = `/api/v1/rights/${field.id}`;
|
||||
}
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: method,
|
||||
contentType: "application/json",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": getCookie("csrf_access_token"),
|
||||
},
|
||||
data: JSON.stringify(field),
|
||||
success: function (res) {
|
||||
if (!res.code) {
|
||||
layer.closeAll();
|
||||
treeTable.reloadData("rights-table");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return false; // 阻止默认 form 跳转
|
||||
});
|
||||
|
||||
treeTable.on("tool(rights-table)", function (obj) {
|
||||
var layEvent = obj.event;
|
||||
if (layEvent === "rights-tool-edit") {
|
||||
form.val("rights-form", obj.data);
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
content: $("#rights-form"),
|
||||
area: ["50%", "80%"],
|
||||
});
|
||||
} else if (layEvent === "rights-tool-del") {
|
||||
$.ajax({
|
||||
url: `/api/v1/rights/${obj.data.id}`,
|
||||
type: "DELETE",
|
||||
contentType: "application/json",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": getCookie("csrf_access_token"),
|
||||
},
|
||||
success: function (res) {
|
||||
if (!res.code) {
|
||||
treeTable.reloadData("rights-table");
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
form.on("radio(form-rights-filter)", function (data) {
|
||||
var elem = data.elem;
|
||||
var value = elem.value;
|
||||
|
||||
switch (value) {
|
||||
case "menu":
|
||||
$('[name="icon_sign"]').parent().parent().show();
|
||||
$('[name="url"]').parent().parent().hide();
|
||||
break;
|
||||
case "path":
|
||||
$('[name="icon_sign"]').parent().parent().hide();
|
||||
$('[name="url"]').parent().parent().show();
|
||||
break;
|
||||
case "auth":
|
||||
$('[name="url"]').parent().parent().hide();
|
||||
$('[name="icon_sign"]').parent().parent().hide();
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,343 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>权限管理</title>
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div style="padding: 16px">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table
|
||||
class="layui-hide"
|
||||
id="role-table"
|
||||
lay-filter="role-table"
|
||||
></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
class="layui-form"
|
||||
lay-filter="role-form"
|
||||
id="role-form"
|
||||
action=""
|
||||
style="padding: 15px; display: none"
|
||||
>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">ID</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="id"
|
||||
value="0"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="请输入用户名"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
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="code"
|
||||
placeholder="请输入用户标识"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
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="desc"
|
||||
placeholder="请输入用户描述"
|
||||
autocomplete="off"
|
||||
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="rights_ids"
|
||||
placeholder="请输入用户权限列表"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button
|
||||
type="submit"
|
||||
class="layui-btn"
|
||||
lay-submit
|
||||
lay-filter="role-form-btn"
|
||||
>
|
||||
立即提交
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script type="text/html" id="role-toolbar">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="role-toolbar-add">
|
||||
新增角色
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="role-tool">
|
||||
<div class="layui-btn-container">
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-blue"
|
||||
lay-event="role-tool-edit"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-yellow"
|
||||
lay-event="role-tool-detail"
|
||||
>
|
||||
授权
|
||||
</button>
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-red"
|
||||
lay-event="role-tool-del"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!--授权表格-->
|
||||
<form
|
||||
class="layui-form"
|
||||
action=""
|
||||
style="display: none"
|
||||
id="role-rights-form"
|
||||
lay-filter="role-rights-form"
|
||||
>
|
||||
<div class="row" style="margin: 10px 5px">
|
||||
<ul id="role_rights" class="dtree" data-id="0"></ul>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button
|
||||
type="submit"
|
||||
class="layui-btn layui-btn-primary layui-btn-sm"
|
||||
lay-submit
|
||||
lay-filter="role-rights-save"
|
||||
>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var table = layui.table;
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
let tree = layui.tree;
|
||||
|
||||
let role_id = -1;
|
||||
|
||||
table.render({
|
||||
elem: "#role-table",
|
||||
id: "role-table",
|
||||
url: "/api/v1/role", // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||
height: "full-35", // 最大高度减去其他容器已占有的高度差
|
||||
toolbar: "#role-toolbar",
|
||||
page: true,
|
||||
cols: [
|
||||
[
|
||||
//标题栏
|
||||
{ field: "id", title: "ID", width: 80, sort: true },
|
||||
{ field: "name", title: "用户名", width: 120 },
|
||||
{ field: "code", title: "用户标识", width: 160 },
|
||||
{ field: "desc", title: "描述", maxWidth: 120 },
|
||||
{ field: "ids", title: "权限列表", width: 100 },
|
||||
{
|
||||
fixed: "right",
|
||||
title: "操作",
|
||||
width: 180,
|
||||
align: "center",
|
||||
toolbar: "#role-tool",
|
||||
},
|
||||
],
|
||||
],
|
||||
});
|
||||
|
||||
table.on("toolbar(role-table)", function (obj) {
|
||||
if (obj.event === "role-toolbar-add") {
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
content: $("#role-form"),
|
||||
area: ["50%", "80%"],
|
||||
});
|
||||
form.render($("#role-form"));
|
||||
}
|
||||
});
|
||||
|
||||
table.on("tool(role-table)", function (obj) {
|
||||
if (obj.event === "role-tool-edit") {
|
||||
form.val("role-form", obj.data);
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
content: $("#role-form"),
|
||||
area: ["50%", "80%"],
|
||||
});
|
||||
} else if (obj.event === "role-tool-del") {
|
||||
$.ajax({
|
||||
url: `/api/v1/role/${obj.data.id}`,
|
||||
type: "DELETE",
|
||||
contentType: "application/json",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": getCookie("csrf_access_token"),
|
||||
},
|
||||
success: function (res) {
|
||||
if (!res.code) {
|
||||
table.reloadData("role-table");
|
||||
}
|
||||
},
|
||||
});
|
||||
} else if (obj.event === "role-tool-detail") {
|
||||
// 角色授权 role-tool-detail
|
||||
role_id = obj.data["id"];
|
||||
$.ajax({
|
||||
url: "/api/v1/rights?type=tree",
|
||||
type: "get",
|
||||
success: function (ret) {
|
||||
// 渲染组件数据
|
||||
tree.render({
|
||||
elem: "#role_rights",
|
||||
id: "role_rights",
|
||||
data: ret.data,
|
||||
showCheckbox: true,
|
||||
});
|
||||
// 获取需要授权角色的权限数据
|
||||
$.ajax({
|
||||
url: `/api/v1/role/role_rights/${role_id}?type=tree`,
|
||||
type: "get",
|
||||
success: function (ret) {
|
||||
tree.setChecked("role_rights", ret.data);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "授权",
|
||||
shade: false,
|
||||
area: ["500px", "500px"],
|
||||
content: $("#role-rights-form"),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
form.on("submit(role-form-btn)", function (data) {
|
||||
var field = data.field;
|
||||
let method, url;
|
||||
if (field.id == 0) {
|
||||
field.id = null;
|
||||
method = "POST";
|
||||
url = "/api/v1/role";
|
||||
} else {
|
||||
method = "PUT";
|
||||
url = `/api/v1/role/${field.id}`;
|
||||
}
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: method,
|
||||
contentType: "application/json",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": getCookie("csrf_access_token"),
|
||||
},
|
||||
data: JSON.stringify(field),
|
||||
success: function (res) {
|
||||
if (!res.code) {
|
||||
layer.closeAll();
|
||||
table.reloadData("role-table");
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
function get_id(list_tree_data) {
|
||||
if (Array.isArray(list_tree_data)) {
|
||||
let ret = [];
|
||||
$.each(list_tree_data, function (index, item) {
|
||||
if (item?.children) {
|
||||
ret.push(...get_id(item.children));
|
||||
}
|
||||
ret.push(...get_id(item));
|
||||
});
|
||||
return ret;
|
||||
} else {
|
||||
return [list_tree_data.id];
|
||||
}
|
||||
}
|
||||
|
||||
form.on("submit(role-rights-save)", function (data) {
|
||||
let param = tree.getChecked("role_rights"); // 获取选中节点的数据
|
||||
let rights_ids = get_id(param).join();
|
||||
$.ajax({
|
||||
url: `/api/v1/role/role_rights/${role_id}`,
|
||||
data: JSON.stringify({ rights_ids: rights_ids }),
|
||||
dataType: "json",
|
||||
contentType: "application/json",
|
||||
type: "put",
|
||||
success: function (result) {
|
||||
if (result.code === 0) {
|
||||
layer.msg(result.message, { icon: 1, time: 1000 }, function () {
|
||||
layer.closeAll();
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.message, { icon: 2, time: 1000 });
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,366 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>用户管理</title>
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div style="padding: 16px">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<table
|
||||
class="layui-hide"
|
||||
id="user-table"
|
||||
lay-filter="user-table"
|
||||
></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form
|
||||
class="layui-form"
|
||||
lay-filter="user-form"
|
||||
id="user-form"
|
||||
action=""
|
||||
style="padding: 15px; display: none"
|
||||
>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">ID</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="id"
|
||||
value="0"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">用户名</label>
|
||||
<div class="layui-input-block">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="请输入用户名"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
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="nickname"
|
||||
placeholder="请输入用户标识"
|
||||
lay-verify="required"
|
||||
autocomplete="off"
|
||||
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="mobile"
|
||||
placeholder="请输入用户描述"
|
||||
autocomplete="off"
|
||||
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"
|
||||
placeholder="请输入用户权限列表"
|
||||
autocomplete="off"
|
||||
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="create_at"
|
||||
class="layui-input"
|
||||
id="form_create_at"
|
||||
placeholder="yyyy-MM-dd HH:mm:ss"
|
||||
autocomplete="off"
|
||||
lay-verify="required"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button
|
||||
type="submit"
|
||||
class="layui-btn"
|
||||
lay-submit
|
||||
lay-filter="user-form-btn"
|
||||
>
|
||||
立即提交
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script type="text/html" id="user-toolbar">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="user-toolbar-add">
|
||||
新增角色
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="user-tool">
|
||||
<div class="layui-btn-container">
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-blue"
|
||||
lay-event="user-tool-edit"
|
||||
>
|
||||
编辑
|
||||
</button>
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-yellow"
|
||||
lay-event="user-tool-detail"
|
||||
>
|
||||
授权
|
||||
</button>
|
||||
<button
|
||||
class="layui-btn layui-btn-sm layui-bg-red"
|
||||
lay-event="user-tool-del"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<!--用户授权标签-->
|
||||
<form
|
||||
class="layui-form"
|
||||
action=""
|
||||
id="user-role-form"
|
||||
lay-filter="user-role-form"
|
||||
>
|
||||
<div class="row" style="margin: 10px 5px">
|
||||
<ul id="user_role" class="dtree" data-id="0"></ul>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button
|
||||
type="submit"
|
||||
class="layui-btn layui-btn-primary layui-btn-sm"
|
||||
lay-submit=""
|
||||
lay-filter="user-role-save"
|
||||
>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
提交
|
||||
</button>
|
||||
<button type="reset" class="layui-btn layui-btn-sm">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var table = layui.table;
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var laydate = layui.laydate;
|
||||
var tree = layui.tree;
|
||||
|
||||
let user_id = -1;
|
||||
|
||||
table.render({
|
||||
elem: "#user-table",
|
||||
id: "user-table",
|
||||
url: "/api/v1/user", // 此处为静态模拟数据，实际使用时需换成真实接口
|
||||
height: "full-35", // 最大高度减去其他容器已占有的高度差
|
||||
toolbar: "#user-toolbar",
|
||||
page: true,
|
||||
cols: [
|
||||
[
|
||||
//标题栏
|
||||
{ field: "id", title: "ID", width: 80, sort: true },
|
||||
{ field: "username", title: "用户名", width: 120 },
|
||||
{ field: "nickname", title: "昵称", width: 120 },
|
||||
{ field: "mobile", title: "手机号", width: 160 },
|
||||
{ field: "email", title: "邮箱", width: 120 },
|
||||
{ field: "create_at", title: "创建时间", width: 180 },
|
||||
{
|
||||
fixed: "right",
|
||||
title: "操作",
|
||||
width: 180,
|
||||
align: "center",
|
||||
toolbar: "#user-tool",
|
||||
},
|
||||
],
|
||||
],
|
||||
});
|
||||
|
||||
table.on("toolbar(user-table)", function (obj) {
|
||||
if (obj.event === "user-toolbar-add") {
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
content: $("#user-form"),
|
||||
area: ["50%", "80%"],
|
||||
});
|
||||
form.render($("#user-form"));
|
||||
}
|
||||
});
|
||||
|
||||
table.on("tool(user-table)", function (obj) {
|
||||
if (obj.event === "user-tool-edit") {
|
||||
form.val("user-form", obj.data);
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
content: $("#user-form"),
|
||||
area: ["50%", "80%"],
|
||||
});
|
||||
} else if (obj.event === "user-tool-del") {
|
||||
$.ajax({
|
||||
url: `/api/v1/user/${obj.data.id}`,
|
||||
type: "DELETE",
|
||||
contentType: "application/json",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": getCookie("csrf_access_token"),
|
||||
},
|
||||
success: function (res) {
|
||||
if (!res.code) {
|
||||
table.reloadData("user-table");
|
||||
}
|
||||
},
|
||||
});
|
||||
} else if (obj.event === "user-tool-detail") {
|
||||
user_id = obj.data["id"];
|
||||
$.ajax({
|
||||
url: "/api/v1/role?type=tree",
|
||||
type: "get",
|
||||
success: function (ret) {
|
||||
let data = [];
|
||||
$.each(ret.data, function (index, item) {
|
||||
data.push({ id: item.id, title: item.name });
|
||||
});
|
||||
tree.render({
|
||||
elem: "#user_role",
|
||||
id: "user_role",
|
||||
data: data,
|
||||
showCheckbox: true,
|
||||
});
|
||||
// 请求获取当前用户的权限
|
||||
$.ajax({
|
||||
url: `/api/v1/user/user_role/${user_id}`,
|
||||
type: "get",
|
||||
success: function (ret) {
|
||||
tree.setChecked("user_role", ret.data);
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
// 用户授权
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: "授权",
|
||||
shade: false,
|
||||
area: ["500px", "500px"],
|
||||
// content: "/views/user_role/" + obj.data["id"]
|
||||
content: $("#user-role-form"),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
form.on("submit(user-form-btn)", function (data) {
|
||||
var field = data.field;
|
||||
let method, url;
|
||||
if (field.id == 0) {
|
||||
field.id = null;
|
||||
method = "POST";
|
||||
url = "/api/v1/user";
|
||||
} else {
|
||||
method = "PUT";
|
||||
url = `/api/v1/user/${field.id}`;
|
||||
}
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: method,
|
||||
contentType: "application/json",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": getCookie("csrf_access_token"),
|
||||
},
|
||||
data: JSON.stringify(field),
|
||||
success: function (res) {
|
||||
if (!res.code) {
|
||||
layer.closeAll();
|
||||
table.reloadData("user-table");
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
// form_create_at
|
||||
laydate.render({
|
||||
elem: "#form_create_at",
|
||||
type: "datetime",
|
||||
});
|
||||
|
||||
function get_id(list_tree_data) {
|
||||
if (Array.isArray(list_tree_data)) {
|
||||
let ret = [];
|
||||
$.each(list_tree_data, function (index, item) {
|
||||
if (item?.children) {
|
||||
ret.push(...get_id(item.children));
|
||||
}
|
||||
ret.push(...get_id(item));
|
||||
});
|
||||
return ret;
|
||||
} else {
|
||||
return [list_tree_data.id];
|
||||
}
|
||||
}
|
||||
|
||||
form.on("submit(user-role-save)", function (data) {
|
||||
let param = tree.getChecked("user_role"); // 获取选中节点的数据
|
||||
let rights_ids = get_id(param).join();
|
||||
$.ajax({
|
||||
url: `/api/v1/user/user_role/${user_id}`,
|
||||
data: JSON.stringify({ rights_ids: rights_ids }),
|
||||
dataType: "json",
|
||||
contentType: "application/json",
|
||||
type: "put",
|
||||
success: function (result) {
|
||||
if (result.code === 0) {
|
||||
layer.msg(result.message, { icon: 1, time: 1000 }, function () {
|
||||
layer.closeAll();
|
||||
});
|
||||
} else {
|
||||
layer.msg(result.message, { icon: 2, time: 1000 });
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user