402 lines
18 KiB
HTML
402 lines
18 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="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="/assets/bootstrap/css/materialdesignicons.min.css" rel="stylesheet">
|
||
<link href="/assets/bootstrap/js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
|
||
<link href="/assets/bootstrap/css/style.min.css" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container-fluid p-t-15">
|
||
<div class="row">
|
||
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-toolbar d-flex flex-column flex-md-row">
|
||
<div class="toolbar-btn-action">
|
||
<a class="btn btn-primary m-r-5" href="/admin/add"><i class="mdi mdi-plus"></i> 新增</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-body">
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>编号</th>
|
||
<th>用户名</th>
|
||
<th>昵称</th>
|
||
<th>手机号</th>
|
||
<th>创建日期</th>
|
||
<th>更新日期</th>
|
||
<th style="text-align: center; ">可用状态</th>
|
||
<th style="text-align: center; ">在线状态</th>
|
||
<th style="text-align: center; ">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="tbody">
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<ul class="pagination">
|
||
<ul class="pagination" id="paginationDiv">
|
||
|
||
</ul>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/bootstrap.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/jquery-confirm/jquery-confirm.min.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/httpclient/httpclient.js"></script>
|
||
<script type="text/javascript" src="/assets/bootstrap/js/jquery.pagination.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function () {
|
||
// 加载列表页数据
|
||
getPageListData();
|
||
|
||
function getPageListData(page = 0, page_size = 0) {
|
||
|
||
if (parseInt(page) < 1) {
|
||
page = 1;
|
||
}
|
||
|
||
if (parseInt(page_size) < 1) {
|
||
page_size = 10;
|
||
}
|
||
|
||
AjaxForm(
|
||
"GET",
|
||
"/api/admin",
|
||
{page: page, page_size: page_size},
|
||
function () {},
|
||
function (data) {
|
||
if (data.list.length > 0) {
|
||
var totalNum = data.pagination.total; //总条数
|
||
var pageNum = Math.ceil(totalNum / data.pagination.per_page_count); //分页的总页数
|
||
|
||
$("#paginationDiv").pagination({
|
||
current: data.pagination.current_page,
|
||
pageCount: pageNum,
|
||
coping: true,
|
||
homePage: '首页',
|
||
endPage: '末页',
|
||
mode: 'fixed',
|
||
prevContent: '上一页',
|
||
nextContent: '下一页',
|
||
activeCls: 'pageActive',
|
||
prevCls: 'pagePrev',
|
||
nextCls: 'pageNext',
|
||
callback: function (api) {
|
||
$(".tbody").html("");
|
||
getPageListData(api.getCurrent());
|
||
}
|
||
});
|
||
|
||
$.each(data.list, function (index, value) {
|
||
var showUsedBadge = "";
|
||
var showOnlineBadge = "";
|
||
var optionUsedName = "";
|
||
|
||
if (value.is_used === 1) {
|
||
optionUsedName = '禁用';
|
||
showUsedBadge = '<span class="badge badge-success">启用</span></td>'
|
||
}
|
||
|
||
if (value.is_used === -1) {
|
||
optionUsedName = '启用';
|
||
showUsedBadge = '<span class="badge badge-danger">禁用</span></td>'
|
||
}
|
||
|
||
if (value.is_online === 1) {
|
||
showOnlineBadge = '<span class="badge btn-primary">在线</span></td>'
|
||
}
|
||
|
||
if (value.is_online === -1) {
|
||
showOnlineBadge = '<span class="badge btn-secondary">离线</span></td>'
|
||
}
|
||
|
||
const tr = '<tr>\n' +
|
||
'<td>' + value.id + '</td>\n' +
|
||
'<td>' + value.username + '</td>\n' +
|
||
'<td>' + value.nickname + '</td>\n' +
|
||
'<td>' + value.mobile + '</td>\n' +
|
||
'<td>' + value.created_at + '</td>\n' +
|
||
'<td>' + value.updated_at + '</td>\n' +
|
||
'<td style="text-align: center; ">' + showUsedBadge + '</td>\n' +
|
||
'<td style="text-align: center; ">' + showOnlineBadge + '</td>\n' +
|
||
'<td style="text-align: center; ">\n' +
|
||
'<div class="btn-group">\n' +
|
||
' <a class="btn btn-xs btn-default btn-option" href="#!" title=""\n' +
|
||
' data-id="' + value.hashid + '"' +
|
||
' data-is-used="' + value.is_used + '"' +
|
||
' data-toggle="tooltip" data-original-title="' + optionUsedName + '">' + optionUsedName + '</a>\n' +
|
||
' <a class="btn btn-xs btn-default btn-resetPassword" href="#!" title=""\n' +
|
||
' data-id="' + value.hashid + '"' +
|
||
' data-toggle="tooltip" data-original-title="重置密码">重置密码</a>\n' +
|
||
' <a class="btn btn-xs btn-default btn-menu" href="#!" title=""\n' +
|
||
' data-id="' + value.hashid + '"' +
|
||
' data-toggle="tooltip" data-original-title="菜单授权">菜单授权</a>\n' +
|
||
' <a class="btn btn-xs btn-default btn-offline" href="#!" title=""\n' +
|
||
' data-id="' + value.hashid + '"' +
|
||
' data-toggle="tooltip" data-original-title="下线">下线</a>\n' +
|
||
' <a class="btn btn-xs btn-default btn-confirm" href="#!" title=""\n' +
|
||
' data-id="' + value.hashid + '"' +
|
||
' data-toggle="tooltip" data-original-title="删除">删除</a>\n' +
|
||
'</div>\n' +
|
||
'</td>\n' +
|
||
'</tr>';
|
||
|
||
$(".tbody").append(tr);
|
||
})
|
||
} else {
|
||
// 数据为空
|
||
const tr = '<tr><td colspan="8" style="text-align: center">暂无数据</td></tr>';
|
||
$(".tbody").append(tr);
|
||
}
|
||
},
|
||
function (response) {
|
||
AjaxError(response);
|
||
}
|
||
|
||
);
|
||
}
|
||
|
||
// 启用/禁用
|
||
$(document).on('click', '.btn-option', function () {
|
||
const id = $(this).attr('data-id');
|
||
const isUsed = $(this).attr('data-is-used');
|
||
|
||
var tipMessage = "";
|
||
var wantUsed = 0;
|
||
if (isUsed === "1") { // 1=当前为启用状态，需要改成禁用
|
||
tipMessage = "禁用";
|
||
wantUsed = -1;
|
||
}
|
||
if (isUsed === "-1") { // -1=当前为禁用状态，需要改成启用
|
||
tipMessage = "启用";
|
||
wantUsed = 1;
|
||
}
|
||
|
||
const patchData = {
|
||
id: id,
|
||
used: wantUsed,
|
||
};
|
||
|
||
$.confirm({
|
||
title: '谨慎操作',
|
||
content: '确认要 <strong style="color: red">' + tipMessage + '</strong> 吗？',
|
||
icon: 'mdi mdi-alert',
|
||
animation: 'scale',
|
||
closeAnimation: 'zoom',
|
||
buttons: {
|
||
okay: {
|
||
text: '确认',
|
||
keys: ['enter'],
|
||
btnClass: 'btn-orange',
|
||
action: function () {
|
||
AjaxForm(
|
||
"PATCH",
|
||
"/api/admin/used",
|
||
patchData,
|
||
function () {},
|
||
function (data) {
|
||
$.alert({
|
||
title: '操作成功',
|
||
icon: 'mdi mdi-check-decagram',
|
||
type: 'green',
|
||
content: '编号：' + data.id + ' 已' + tipMessage + '。',
|
||
buttons: {
|
||
okay: {
|
||
text: '关闭',
|
||
action: function () {
|
||
location.reload();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
function (response) {
|
||
AjaxError(response);
|
||
}
|
||
);
|
||
}
|
||
},
|
||
cancel: {
|
||
text: '取消',
|
||
keys: ['ctrl', 'shift'],
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 重置密码
|
||
$(document).on('click', '.btn-resetPassword', function () {
|
||
const id = $(this).attr('data-id');
|
||
|
||
$.confirm({
|
||
title: '谨慎操作',
|
||
content: '确认要 <strong style="color: red">重置密码</strong> 吗？' + '<hr>' + '重置后密码为：123456',
|
||
icon: 'mdi mdi-alert',
|
||
animation: 'scale',
|
||
closeAnimation: 'zoom',
|
||
buttons: {
|
||
okay: {
|
||
text: '确认',
|
||
keys: ['enter'],
|
||
btnClass: 'btn-orange',
|
||
action: function () {
|
||
AjaxForm(
|
||
"PATCH",
|
||
'/api/admin/reset_password/' + id,
|
||
"",
|
||
function () {},
|
||
function (data) {
|
||
$.alert({
|
||
title: '操作成功',
|
||
icon: 'mdi mdi-check-decagram',
|
||
type: 'green',
|
||
content: '编号：' + data.id + ' 密码重置完成。',
|
||
buttons: {
|
||
okay: {
|
||
text: '关闭',
|
||
action: function () {
|
||
location.reload();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
function (response) {
|
||
AjaxError(response);
|
||
}
|
||
);
|
||
}
|
||
},
|
||
cancel: {
|
||
text: '取消',
|
||
keys: ['ctrl', 'shift'],
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 菜单授权
|
||
$(document).on('click', '.btn-menu', function () {
|
||
location.href = "/admin/action/" + $(this).attr('data-id');
|
||
});
|
||
|
||
// 下线
|
||
$(document).on('click', '.btn-offline', function () {
|
||
const id = $(this).attr('data-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(
|
||
"PATCH",
|
||
'/api/admin/offline',
|
||
{id: id},
|
||
function () {},
|
||
function (data) {
|
||
$.alert({
|
||
title: '操作成功',
|
||
icon: 'mdi mdi-check-decagram',
|
||
type: 'green',
|
||
content: '编号：' + data.id + ' 已下线。',
|
||
buttons: {
|
||
okay: {
|
||
text: '关闭',
|
||
action: function () {
|
||
location.reload();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
function (response) {
|
||
AjaxError(response);
|
||
}
|
||
);
|
||
}
|
||
},
|
||
cancel: {
|
||
text: '取消',
|
||
keys: ['ctrl', 'shift'],
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// 删除
|
||
$(document).on('click', '.btn-confirm', function () {
|
||
const id = $(this).attr('data-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/admin/' + id,
|
||
"",
|
||
function () {},
|
||
function (data) {
|
||
$.alert({
|
||
title: '操作成功',
|
||
icon: 'mdi mdi-check-decagram',
|
||
type: 'green',
|
||
content: '编号：' + data.id + ' 已删除。',
|
||
buttons: {
|
||
okay: {
|
||
text: '关闭',
|
||
action: function () {
|
||
location.reload();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
function (response) {
|
||
AjaxError(response);
|
||
}
|
||
);
|
||
}
|
||
},
|
||
cancel: {
|
||
text: '取消',
|
||
keys: ['ctrl', 'shift'],
|
||
}
|
||
}
|
||
});
|
||
})
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|