mirror of
https://github.com/xinliangnote/go-gin-api.git
synced 2024-04-21 12:31:46 +00:00
494 lines
20 KiB
HTML
494 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
|
|
<link href="../../bootstrap/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
|
|
<link href="../../bootstrap/js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
|
|
<link href="../../bootstrap/js/bootstrap-select/bootstrap-select.css" rel="stylesheet">
|
|
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../../bootstrap/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
|
|
<link href="../../bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
|
|
<link href="../../bootstrap/css/style.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid p-t-15">
|
|
<div class="row">
|
|
<div class="col-lg-5">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">配置菜单栏</div>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">上级菜单</span>
|
|
</div>
|
|
<select class="form-control select-picker col-lg-3" data-width="auto"
|
|
data-live-search="true" id="level">
|
|
</select>
|
|
</div>
|
|
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">菜单名称</span>
|
|
</div>
|
|
<input type="text" class="form-control" id="name" placeholder="请输入菜单名称">
|
|
</div>
|
|
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">菜单图标</span>
|
|
</div>
|
|
<input type="text" class="form-control" id="icon" placeholder="请输入菜单图标">
|
|
</div>
|
|
|
|
<div class="input-group mb-3">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">链接地址</span>
|
|
</div>
|
|
<input type="text" class="form-control" id="link" placeholder="请输入链接地址">
|
|
</div>
|
|
|
|
<input type="hidden" id="id">
|
|
|
|
<button type="button" id="btnOk" class="btn btn-primary">提交</button>
|
|
<button type="button" id="btnLoading" class="btn btn-primary" disabled style="display: none">
|
|
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
|
提交中...
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-7">
|
|
<div class="card">
|
|
<header class="card-header">
|
|
<div class="card-title">菜单栏列表</div>
|
|
</header>
|
|
<div class="card-body">
|
|
<table class="tree-table"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="../../bootstrap/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/popper.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/jquery-confirm/jquery-confirm.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/httpclient/httpclient.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/bootstrap-table/bootstrap-table.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/jquery-treegrid/jquery.treegrid.min.js"></script>
|
|
<script type="text/javascript"
|
|
src="../../bootstrap/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/bootstrap-select/bootstrap-select.min.js"></script>
|
|
<script type="text/javascript" src="../../bootstrap/js/bootstrap-select/i18n/defaults-zh_CN.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
$('.select-picker').selectpicker();
|
|
let menuData = "";
|
|
|
|
AjaxFormNoAsync(
|
|
"GET",
|
|
"/api/menu",
|
|
"",
|
|
function () {
|
|
},
|
|
function (data) {
|
|
$("#level").append("<option value='-1'>一级目录</option>");
|
|
$.each(data.list, function (index, value) {
|
|
$("#level").append("<option value='" + value.id + "'>" + value.name + "</option>");
|
|
});
|
|
|
|
$("#level option:eq(0)").attr('selected', 'selected'); //选中第一个
|
|
$("#level").selectpicker('refresh');
|
|
|
|
menuData = data.list;
|
|
},
|
|
function (response) {
|
|
AjaxError(response);
|
|
}
|
|
);
|
|
|
|
const $treeTable = $('.tree-table');
|
|
$treeTable.bootstrapTable({
|
|
data: menuData,
|
|
idField: 'id',
|
|
uniqueId: 'id',
|
|
dataType: 'jsonp',
|
|
//toolbar: '#toolbar2',
|
|
columns: [
|
|
{
|
|
field: 'name',
|
|
title: '名称',
|
|
formatter: function (value, row, index) {
|
|
return '<i class="mdi ' + row.icon + '"></i>' + row.name;
|
|
}
|
|
},
|
|
{
|
|
field: 'sort',
|
|
title: '排序',
|
|
formatter: function (value, row, index) {
|
|
return '<input type="text" value="'+ row.sort +'" data-id="' + row.hashid + '" data-name="' + row.name + '" class="form-control sort" style="width:60px;">';
|
|
}
|
|
},
|
|
{
|
|
field: 'is_used',
|
|
title: '是否启用',
|
|
//sortable: true,
|
|
formatter: function (value, row, index) {
|
|
let is_checked;
|
|
if (value === -1) {
|
|
is_checked = '';
|
|
} else if (value === 1) {
|
|
is_checked = 'checked="checked"';
|
|
}
|
|
return '<div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="customSwitch' + row.id + '" ' + is_checked + '><label class="custom-control-label customSwitch" state="' + value + '" hashid="' + row.hashid + '" for="customSwitch' + row.id + ')"></label></div>';
|
|
},
|
|
},
|
|
{
|
|
field: 'link',
|
|
title: '链接地址'
|
|
},
|
|
{
|
|
field: 'operate',
|
|
title: '操作',
|
|
align: 'center',
|
|
events: {
|
|
'click .role-add': function (e, value, row, index) {
|
|
add(row.hashid);
|
|
},
|
|
'click .role-delete': function (e, value, row, index) {
|
|
del(row.hashid);
|
|
},
|
|
'click .role-edit': function (e, value, row, index) {
|
|
update(row.hashid);
|
|
},
|
|
'click .role-action': function (e, value, row, index) {
|
|
if (row.link !== '') {
|
|
location.href = "/admin/menu_action/" + row.hashid;
|
|
} else {
|
|
$.alert({
|
|
title: '温馨提示',
|
|
icon: 'mdi mdi-alert',
|
|
type: 'orange',
|
|
content: '当前菜单无需设置功能权限。',
|
|
});
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
formatter: operateFormatter
|
|
}
|
|
],
|
|
|
|
treeShowField: 'name',
|
|
parentIdField: 'pid',
|
|
|
|
onResetView: function (menuData) {
|
|
$treeTable.treegrid({
|
|
initialState: 'collapsed', // 所有节点都折叠
|
|
treeColumn: 0,
|
|
//expanderExpandedClass: 'mdi mdi-folder-open', // 可自定义图标样式
|
|
//expanderCollapsedClass: 'mdi mdi-folder',
|
|
});
|
|
|
|
// 只展开树形的第一集节点
|
|
$treeTable.treegrid('getRootNodes').treegrid('expand');
|
|
},
|
|
|
|
});
|
|
|
|
// 操作按钮
|
|
function operateFormatter(value, row, index) {
|
|
return [
|
|
'<a type="button" class="role-add btn btn-xs btn-default m-r-5" title="编辑" data-toggle="tooltip"><i class="mdi mdi-plus"></i></a>',
|
|
'<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>',
|
|
'<a type="button" class="role-action btn btn-xs btn-default m-r-5" title="功能权限" data-toggle="tooltip"><i class="mdi mdi-playlist-plus"></i></a>',
|
|
'<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>'
|
|
].join('');
|
|
}
|
|
|
|
function add(id) {
|
|
$("#id").val('');
|
|
$("#name").val('');
|
|
$("#icon").val('');
|
|
$("#link").val('');
|
|
getMenuDetail(id, 'add');
|
|
}
|
|
|
|
function del(id) {
|
|
$.confirm({
|
|
title: '谨慎操作',
|
|
content: '确认要 <strong style="color: red">删除</strong> 吗？',
|
|
icon: 'mdi mdi-alert',
|
|
animation: 'scale',
|
|
closeAnimation: 'zoom',
|
|
buttons: {
|
|
okay: {
|
|
text: '确认',
|
|
keys: ['enter'],
|
|
btnClass: 'btn-orange',
|
|
action: function () {
|
|
AjaxForm(
|
|
"DELETE",
|
|
"/api/menu/" + id,
|
|
"",
|
|
function () {
|
|
},
|
|
function () {
|
|
$.alert({
|
|
title: '操作成功',
|
|
icon: 'mdi mdi-check-decagram',
|
|
type: 'green',
|
|
content: '已删除成功。',
|
|
buttons: {
|
|
okay: {
|
|
text: '关闭',
|
|
action: function () {
|
|
location.reload();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
function (response) {
|
|
AjaxError(response);
|
|
}
|
|
);
|
|
}
|
|
},
|
|
cancel: {
|
|
text: '取消',
|
|
keys: ['ctrl', 'shift'],
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function update(id) {
|
|
getMenuDetail(id, 'update');
|
|
}
|
|
|
|
function getMenuDetail(id, op) {
|
|
AjaxForm(
|
|
"GET",
|
|
"/api/menu/" + id,
|
|
"",
|
|
function () {
|
|
},
|
|
function (data) {
|
|
if (op === 'add') {
|
|
$('#level').selectpicker('val', data.id);
|
|
$("#level").selectpicker('refresh');
|
|
$("#level").attr("disabled", "");
|
|
}
|
|
|
|
if (op === 'update') {
|
|
if (data.pid === 0) {
|
|
data.pid = -1
|
|
}
|
|
$('#level').selectpicker('val', data.pid);
|
|
$("#level").selectpicker('refresh');
|
|
$("#level").attr("disabled", "");
|
|
|
|
$("#id").val(id);
|
|
$("#name").val(data.name);
|
|
$("#icon").val(data.icon);
|
|
$("#link").val(data.link);
|
|
}
|
|
},
|
|
function (response) {
|
|
AjaxError(response);
|
|
}
|
|
);
|
|
}
|
|
|
|
$(document).on('blur', '.sort', function () {
|
|
const hashid = $(this).attr("data-id");
|
|
const name = $(this).attr("data-name");
|
|
const val = $(this).val();
|
|
|
|
$.confirm({
|
|
title: '谨慎操作',
|
|
content: '确认要将 ' + name + ' 的排序设置为 <strong style="color: red">' + val + '</strong> 吗？',
|
|
icon: 'mdi mdi-alert',
|
|
animation: 'scale',
|
|
closeAnimation: 'zoom',
|
|
buttons: {
|
|
okay: {
|
|
text: '确认',
|
|
keys: ['enter'],
|
|
btnClass: 'btn-orange',
|
|
action: function () {
|
|
AjaxForm(
|
|
"PATCH",
|
|
"/api/menu/sort",
|
|
{id: hashid, sort: val},
|
|
function () {
|
|
},
|
|
function () {
|
|
$.alert({
|
|
title: '操作成功',
|
|
icon: 'mdi mdi-check-decagram',
|
|
type: 'green',
|
|
content: '菜单：' + name + '排序成功。',
|
|
buttons: {
|
|
okay: {
|
|
text: '关闭',
|
|
action: function () {
|
|
location.reload();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
function (response) {
|
|
AjaxError(response);
|
|
}
|
|
);
|
|
}
|
|
},
|
|
cancel: {
|
|
text: '取消',
|
|
keys: ['ctrl', 'shift'],
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
$(document).on('click', '.customSwitch', function () {
|
|
let state = $(this).attr("state");
|
|
const hashid = $(this).attr("hashid");
|
|
|
|
const is_used = (state === '1') ? -1 : 1;
|
|
const is_used_msg = (state === '1') ? "禁用" : "启用";
|
|
|
|
$.confirm({
|
|
title: '谨慎操作',
|
|
content: '确认要 <strong style="color: red">' + is_used_msg + '</strong> 吗？',
|
|
icon: 'mdi mdi-alert',
|
|
animation: 'scale',
|
|
closeAnimation: 'zoom',
|
|
buttons: {
|
|
okay: {
|
|
text: '确认',
|
|
keys: ['enter'],
|
|
btnClass: 'btn-orange',
|
|
action: function () {
|
|
AjaxForm(
|
|
"PATCH",
|
|
"/api/menu/used",
|
|
{id: hashid, used: is_used},
|
|
function () {
|
|
},
|
|
function () {
|
|
$.alert({
|
|
title: '操作成功',
|
|
icon: 'mdi mdi-check-decagram',
|
|
type: 'green',
|
|
content: '已' + is_used_msg + '成功。',
|
|
buttons: {
|
|
okay: {
|
|
text: '关闭',
|
|
action: function () {
|
|
location.reload();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
function (response) {
|
|
AjaxError(response);
|
|
}
|
|
);
|
|
}
|
|
},
|
|
cancel: {
|
|
text: '取消',
|
|
keys: ['ctrl', 'shift'],
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#btnOk').on('click', function () {
|
|
const level = $("#level").val();
|
|
const name = $("#name").val();
|
|
const icon = $("#icon").val();
|
|
const link = $("#link").val();
|
|
const id = $("#id").val();
|
|
|
|
if (level === "") {
|
|
$.alert({
|
|
title: '温馨提示',
|
|
icon: 'mdi mdi-alert',
|
|
type: 'orange',
|
|
content: '请选择上级目录。',
|
|
});
|
|
return false;
|
|
}
|
|
|
|
if (name === "") {
|
|
$.alert({
|
|
title: '温馨提示',
|
|
icon: 'mdi mdi-alert',
|
|
type: 'orange',
|
|
content: '请输入菜单名称。',
|
|
});
|
|
return false;
|
|
}
|
|
|
|
const postData = {
|
|
level: level,
|
|
name: name,
|
|
icon: icon,
|
|
link: link,
|
|
id: id,
|
|
};
|
|
|
|
AjaxForm(
|
|
"POST",
|
|
"/api/menu",
|
|
postData,
|
|
function () {
|
|
$(this).hide();
|
|
$("#btnLoading").show();
|
|
},
|
|
function () {
|
|
$("#btnLoading").hide();
|
|
$("#btnOk").show();
|
|
|
|
$.alert({
|
|
title: '操作成功',
|
|
icon: 'mdi mdi-check-decagram',
|
|
type: 'green',
|
|
content: '菜单：' + name + ' 创建完成。',
|
|
buttons: {
|
|
okay: {
|
|
text: '关闭',
|
|
action: function () {
|
|
location.reload();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
function (response) {
|
|
$("#btnLoading").hide();
|
|
$("#btnOk").show();
|
|
|
|
AjaxError(response);
|
|
}
|
|
);
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|