first commit
This commit is contained in:
172
web/templates/admin/license-logs.html
Normal file
172
web/templates/admin/license-logs.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>授权码操作日志</title>
|
||||
<link rel="stylesheet" href="/static/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<span>授权码操作日志</span>
|
||||
<div class="layui-btn-group">
|
||||
<button class="layui-btn layui-btn-sm" id="refresh-logs">
|
||||
<i class="layui-icon"></i> 刷新
|
||||
</button>
|
||||
<button class="layui-btn layui-btn-sm layui-btn-normal" id="export-logs">
|
||||
<i class="layui-icon"></i> 导出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<!-- 搜索表单 -->
|
||||
<form class="layui-form layui-form-pane" action="">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">操作类型</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="action">
|
||||
<option value="">全部</option>
|
||||
<option value="create">创建</option>
|
||||
<option value="use">使用</option>
|
||||
<option value="verify">验证</option>
|
||||
<option value="revoke">撤销</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">状态</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="status">
|
||||
<option value="">全部</option>
|
||||
<option value="success">成功</option>
|
||||
<option value="failed">失败</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">设备UID</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="device_uid" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<button class="layui-btn" lay-submit lay-filter="search">
|
||||
<i class="layui-icon"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<table id="log-table" lay-filter="log-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作类型模板 -->
|
||||
<script type="text/html" id="actionTpl">
|
||||
{{# var types = {
|
||||
'create': '<span class="layui-badge layui-bg-blue">创建</span>',
|
||||
'use': '<span class="layui-badge layui-bg-green">使用</span>',
|
||||
'verify': '<span class="layui-badge layui-bg-orange">验证</span>',
|
||||
'revoke': '<span class="layui-badge layui-bg-red">撤销</span>'
|
||||
}; }}
|
||||
{{# return types[d.action] || d.action; }}
|
||||
</script>
|
||||
|
||||
<!-- 状态模板 -->
|
||||
<script type="text/html" id="statusTpl">
|
||||
{{# if(d.status === 'success'){ }}
|
||||
<span class="layui-badge layui-bg-green">成功</span>
|
||||
{{# } else { }}
|
||||
<span class="layui-badge layui-bg-red">失败</span>
|
||||
{{# } }}
|
||||
</script>
|
||||
|
||||
<script src="/static/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['table', 'layer', 'form'], function(){
|
||||
var table = layui.table;
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
var $ = layui.$;
|
||||
|
||||
// 获取授权码ID
|
||||
var licenseId = location.search.match(/id=(\d+)/)[1];
|
||||
|
||||
// 初始化表格
|
||||
var tableIns = table.render({
|
||||
elem: '#log-table',
|
||||
url: '/api/licenses/' + licenseId + '/logs',
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||||
},
|
||||
cols: [[
|
||||
{field: 'action', title: '操作类型', width: 100, templet: '#actionTpl', sort: true},
|
||||
{field: 'device_uid', title: '设备UID', width: 180},
|
||||
{field: 'ip', title: 'IP地址', width: 150},
|
||||
{field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
|
||||
{field: 'message', title: '详细信息'},
|
||||
{field: 'created_at', title: '操作时间', width: 180, sort: true, templet: function(d){
|
||||
return new Date(d.created_at).toLocaleString();
|
||||
}}
|
||||
]],
|
||||
page: true,
|
||||
parseData: function(res) {
|
||||
if (res.code === 401) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
});
|
||||
|
||||
// 搜索表单提交
|
||||
form.on('submit(search)', function(data){
|
||||
tableIns.reload({
|
||||
where: data.field,
|
||||
page: {
|
||||
curr: 1
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
// 刷新按钮点击事件
|
||||
$('#refresh-logs').on('click', function(){
|
||||
tableIns.reload();
|
||||
});
|
||||
|
||||
// 导出按钮点击事件
|
||||
$('#export-logs').on('click', function(){
|
||||
var loadIndex = layer.load(2);
|
||||
fetch('/api/licenses/' + licenseId + '/logs?export=1', {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||||
}
|
||||
})
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
layer.close(loadIndex);
|
||||
var url = window.URL.createObjectURL(blob);
|
||||
var a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'license_logs_' + licenseId + '_' +
|
||||
new Date().toISOString().slice(0,19).replace(/[-:]/g, '') + '.csv';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
})
|
||||
.catch(error => {
|
||||
layer.close(loadIndex);
|
||||
layer.msg('导出失败:' + error.message);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user