mirror of
https://github.com/skyle1995/NetworkAuth.git
synced 2026-05-25 02:24:05 +08:00
412 lines
14 KiB
HTML
412 lines
14 KiB
HTML
|
{{ define "apps.html" }}
|
|||
|
|
<section>
|
|||
|
|
<h2>应用管理</h2>
|
|||
|
|
<div class="layui-btn-container" style="margin:12px 0">
|
|||
|
|
<button class="layui-btn" id="btnAddApp"><i class="layui-icon layui-icon-add-1"></i> 新增应用</button>
|
|||
|
|
<button class="layui-btn layui-btn-danger" id="btnBatchDeleteApps"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
|
|||
|
|
<button class="layui-btn layui-btn-normal" id="btnBatchEnableApps"><i class="layui-icon layui-icon-ok-circle"></i> 批量启用</button>
|
|||
|
|
<button class="layui-btn layui-btn-warm" id="btnBatchDisableApps"><i class="layui-icon layui-icon-close-fill"></i> 批量禁用</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-card" style="margin-top:12px">
|
|||
|
|
<div class="layui-card-header">筛选</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<form class="layui-form layui-form-pane" id="appFilterForm" lay-filter="appFilterForm">
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<label class="layui-form-label">搜索</label>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<input type="text" name="search" placeholder="应用名称/UUID" autocomplete="off" class="layui-input" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-inline">
|
|||
|
|
<button type="button" class="layui-btn" id="btnSearchApps">查询</button>
|
|||
|
|
<button type="button" class="layui-btn layui-btn-primary" id="btnResetApps">重置</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="layui-card" style="margin-top:12px">
|
|||
|
|
<div class="layui-card-header">应用列表</div>
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
<table id="appsTable" lay-filter="appsTableFilter"></table>
|
|||
|
|
<script type="text/html" id="tpl-apps-ops">
|
|||
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|||
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|||
|
|
</script>
|
|||
|
|
<script type="text/html" id="tpl-apps-status">
|
|||
|
|
{{`{{# if(d.status === 1) { }}`}}
|
|||
|
|
<span class="layui-badge layui-bg-green">启用</span>
|
|||
|
|
{{`{{# } else { }}`}}
|
|||
|
|
<span class="layui-badge">禁用</span>
|
|||
|
|
{{`{{# } }}`}}
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 隐藏的表单弹层内容：新增/编辑应用 -->
|
|||
|
|
<div id="appFormModal" style="display:none;padding:16px">
|
|||
|
|
<form class="layui-form layui-form-pane" id="appForm">
|
|||
|
|
<input type="hidden" name="id" />
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">应用名称</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="name" placeholder="请输入应用名称" autocomplete="off" class="layui-input" lay-verify="required" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">版本号</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="version" placeholder="请输入版本号，默认1.0.0" autocomplete="off" class="layui-input" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">状态</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<select name="status">
|
|||
|
|
<option value="1" selected>启用</option>
|
|||
|
|
<option value="0">禁用</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">强制更新</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<select name="force_update">
|
|||
|
|
<option value="0" selected>不开启</option>
|
|||
|
|
<option value="1">开启</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">更新方式</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<select name="download_type" lay-filter="downloadTypeChange">
|
|||
|
|
<option value="0" selected>不启用更新</option>
|
|||
|
|
<option value="1">自动更新</option>
|
|||
|
|
<option value="2">手动下载</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-form-item" id="downloadUrlItem">
|
|||
|
|
<label class="layui-form-label">下载地址</label>
|
|||
|
|
<div class="layui-input-block">
|
|||
|
|
<input type="text" name="download_url" 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="appFormSubmit">提交</button>
|
|||
|
|
<button type="button" class="layui-btn layui-btn-primary" id="btnCancelApp">取消</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
layui.use(['table', 'form', 'layer', 'element'], function() {
|
|||
|
|
const table = layui.table;
|
|||
|
|
const form = layui.form;
|
|||
|
|
const layer = layui.layer;
|
|||
|
|
const $ = layui.$;
|
|||
|
|
|
|||
|
|
// 格式化时间函数
|
|||
|
|
function formatDateTime(dateStr) {
|
|||
|
|
if (!dateStr) return '-';
|
|||
|
|
return new Date(dateStr).toLocaleString();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 渲染表格
|
|||
|
|
const appsTable = table.render({
|
|||
|
|
elem: '#appsTable',
|
|||
|
|
id: 'appsTable',
|
|||
|
|
url: '/admin/api/apps/list',
|
|||
|
|
parseData: function(res) {
|
|||
|
|
// 后端返回的数据结构处理
|
|||
|
|
return {
|
|||
|
|
code: res.code,
|
|||
|
|
msg: res.msg || '',
|
|||
|
|
count: res.count || 0,
|
|||
|
|
data: res.data || []
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
request: {
|
|||
|
|
pageName: 'page', // 页码的参数名称，默认：page
|
|||
|
|
limitName: 'page_size' // 每页数据量的参数名称，默认：limit
|
|||
|
|
},
|
|||
|
|
method: 'GET',
|
|||
|
|
page: true,
|
|||
|
|
limit: 20,
|
|||
|
|
limits: [10, 20, 50, 100],
|
|||
|
|
loading: true,
|
|||
|
|
done: function(res, curr, count) {
|
|||
|
|
// 表格渲染完成后的回调
|
|||
|
|
},
|
|||
|
|
cols: [[
|
|||
|
|
{ type: 'checkbox', width: 50 },
|
|||
|
|
{ field: 'id', title: 'ID', width: 80, sort: true },
|
|||
|
|
{ field: 'name', title: '应用名称', minWidth: 180 },
|
|||
|
|
{ field: 'uuid', title: 'UUID', minWidth: 320 },
|
|||
|
|
{ field: 'version', title: '版本', width: 100 },
|
|||
|
|
{
|
|||
|
|
field: 'status',
|
|||
|
|
title: '状态',
|
|||
|
|
width: 100,
|
|||
|
|
templet: (d) => {
|
|||
|
|
if (d.status === 1) return '<span style="color: #5FB878;">启用</span>';
|
|||
|
|
return '<span style="color: #FF5722;">禁用</span>';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'secret',
|
|||
|
|
title: '密钥',
|
|||
|
|
minWidth: 320,
|
|||
|
|
templet: (d) => '<span style="font-family: monospace;">' + d.secret + '</span>'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'created_at',
|
|||
|
|
title: '创建时间',
|
|||
|
|
width: 180,
|
|||
|
|
templet: (d) => formatDateTime(d.created_at)
|
|||
|
|
},
|
|||
|
|
{ fixed: 'right', title: '操作', toolbar: '#tpl-apps-ops', width: 120 }
|
|||
|
|
]]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 搜索功能
|
|||
|
|
$('#btnSearchApps').on('click', function() {
|
|||
|
|
const search = $('input[name="search"]').val();
|
|||
|
|
appsTable.reload({
|
|||
|
|
where: {
|
|||
|
|
search: search
|
|||
|
|
},
|
|||
|
|
page: {
|
|||
|
|
curr: 1
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 重置搜索
|
|||
|
|
$('#btnResetApps').on('click', function() {
|
|||
|
|
$('#appFilterForm')[0].reset();
|
|||
|
|
appsTable.reload({
|
|||
|
|
where: {},
|
|||
|
|
page: {
|
|||
|
|
curr: 1
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 新增应用
|
|||
|
|
$('#btnAddApp').on('click', function() {
|
|||
|
|
$('#appForm')[0].reset();
|
|||
|
|
$('input[name="id"]').val('');
|
|||
|
|
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: '新增应用',
|
|||
|
|
content: $('#appFormModal'),
|
|||
|
|
area: ['500px', '460px'],
|
|||
|
|
btn: false,
|
|||
|
|
shadeClose: false
|
|||
|
|
});
|
|||
|
|
form.render();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 监听更新方式切换（保留事件监听器以备将来扩展）
|
|||
|
|
form.on('select(downloadTypeChange)', function(data) {
|
|||
|
|
// 下载地址字段现在始终显示，无需切换显示状态
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 表单提交
|
|||
|
|
form.on('submit(appFormSubmit)', function(data) {
|
|||
|
|
const isEdit = data.field.id !== '';
|
|||
|
|
const url = isEdit ? '/admin/api/apps/update' : '/admin/api/apps/create';
|
|||
|
|
|
|||
|
|
// 转换字段类型为正确的数据类型
|
|||
|
|
const formData = {
|
|||
|
|
...data.field,
|
|||
|
|
status: parseInt(data.field.status) || 0,
|
|||
|
|
download_type: parseInt(data.field.download_type) || 0,
|
|||
|
|
force_update: parseInt(data.field.force_update) || 0
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 如果是编辑模式，确保id也是整数
|
|||
|
|
if (isEdit) {
|
|||
|
|
formData.id = parseInt(data.field.id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
url: url,
|
|||
|
|
type: 'POST',
|
|||
|
|
data: JSON.stringify(formData),
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.msg(res.msg, {icon: 1});
|
|||
|
|
layer.closeAll();
|
|||
|
|
appsTable.reload();
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg || '操作失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(xhr) {
|
|||
|
|
layer.msg(xhr.responseText || '操作失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 取消按钮
|
|||
|
|
$('#btnCancelApp').on('click', function() {
|
|||
|
|
layer.closeAll();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 表格工具栏事件
|
|||
|
|
table.on('tool(appsTableFilter)', function(obj) {
|
|||
|
|
const data = obj.data;
|
|||
|
|
|
|||
|
|
if (obj.event === 'edit') {
|
|||
|
|
// 编辑
|
|||
|
|
$('#appForm')[0].reset();
|
|||
|
|
$('input[name="id"]').val(data.id);
|
|||
|
|
$('input[name="name"]').val(data.name);
|
|||
|
|
$('input[name="version"]').val(data.version);
|
|||
|
|
$('select[name="status"]').val(data.status);
|
|||
|
|
$('select[name="download_type"]').val(data.download_type || 0);
|
|||
|
|
$('input[name="download_url"]').val(data.download_url || '');
|
|||
|
|
$('select[name="force_update"]').val(data.force_update || 0);
|
|||
|
|
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: '编辑应用',
|
|||
|
|
content: $('#appFormModal'),
|
|||
|
|
area: ['500px', '460px'],
|
|||
|
|
btn: false,
|
|||
|
|
shadeClose: false
|
|||
|
|
});
|
|||
|
|
form.render();
|
|||
|
|
|
|||
|
|
} else if (obj.event === 'del') {
|
|||
|
|
// 删除
|
|||
|
|
layer.confirm('确定删除该应用吗？', {icon: 3, title: '提示'}, function(index) {
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/admin/api/apps/delete',
|
|||
|
|
type: 'POST',
|
|||
|
|
data: JSON.stringify({id: data.id}),
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.msg(res.msg, {icon: 1});
|
|||
|
|
appsTable.reload();
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg || '删除失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(xhr) {
|
|||
|
|
layer.msg(xhr.responseText || '删除失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
layer.close(index);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 批量删除
|
|||
|
|
$('#btnBatchDeleteApps').on('click', function() {
|
|||
|
|
const checkStatus = table.checkStatus('appsTable');
|
|||
|
|
const data = checkStatus.data;
|
|||
|
|
|
|||
|
|
if (data.length === 0) {
|
|||
|
|
layer.msg('请选择要删除的应用', {icon: 2});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
layer.confirm('确定删除选中的 ' + data.length + ' 个应用吗？', {icon: 3, title: '提示'}, function(index) {
|
|||
|
|
const ids = data.map(item => item.id);
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/admin/api/apps/batch_delete',
|
|||
|
|
type: 'POST',
|
|||
|
|
data: JSON.stringify({ids: ids}),
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.msg(res.msg, {icon: 1});
|
|||
|
|
appsTable.reload();
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg || '批量删除失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(xhr) {
|
|||
|
|
layer.msg(xhr.responseText || '批量删除失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
layer.close(index);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 批量启用
|
|||
|
|
$('#btnBatchEnableApps').on('click', function() {
|
|||
|
|
const checkStatus = table.checkStatus('appsTable');
|
|||
|
|
const data = checkStatus.data;
|
|||
|
|
|
|||
|
|
if (data.length === 0) {
|
|||
|
|
layer.msg('请选择要启用的应用', {icon: 2});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ids = data.map(item => item.id);
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/admin/api/apps/batch_update_status',
|
|||
|
|
type: 'POST',
|
|||
|
|
data: JSON.stringify({ids: ids, status: 1}),
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.msg(res.msg, {icon: 1});
|
|||
|
|
appsTable.reload();
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg || '批量启用失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(xhr) {
|
|||
|
|
layer.msg(xhr.responseText || '批量启用失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 批量禁用
|
|||
|
|
$('#btnBatchDisableApps').on('click', function() {
|
|||
|
|
const checkStatus = table.checkStatus('appsTable');
|
|||
|
|
const data = checkStatus.data;
|
|||
|
|
|
|||
|
|
if (data.length === 0) {
|
|||
|
|
layer.msg('请选择要禁用的应用', {icon: 2});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const ids = data.map(item => item.id);
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/admin/api/apps/batch_update_status',
|
|||
|
|
type: 'POST',
|
|||
|
|
data: JSON.stringify({ids: ids, status: 0}),
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
success: function(res) {
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
layer.msg(res.msg, {icon: 1});
|
|||
|
|
appsTable.reload();
|
|||
|
|
} else {
|
|||
|
|
layer.msg(res.msg || '批量禁用失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function(xhr) {
|
|||
|
|
layer.msg(xhr.responseText || '批量禁用失败', {icon: 2});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</section>
|
|||
|
|
{{ end }}
|