172 lines
6.9 KiB
HTML
172 lines
6.9 KiB
HTML
|
<!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>
|