367 lines
11 KiB
HTML
367 lines
11 KiB
HTML
<!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.msg, { icon: 1, time: 1000 }, function () {
|
|
layer.closeAll();
|
|
});
|
|
} else {
|
|
layer.msg(result.msg, { icon: 2, time: 1000 });
|
|
}
|
|
},
|
|
});
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|