391 lines
12 KiB
HTML
391 lines
12 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="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; // 获得 radio 原始 DOM 对象
|
|
var checked = elem.checked; // 获得 radio 选中状态
|
|
var value = elem.value; // 获得 radio 值
|
|
var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
|
|
|
|
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;
|
|
}
|
|
|
|
layer.msg(["value: " + value, "checked: " + checked].join("<br>"));
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|