hashbro
281 lines
12 KiB
PHP
281 lines
12 KiB
PHP
@extends('admin.content')
|
||
|
||
@section('title', '渠道链接')
|
||
|
||
@section('content')
|
||
@php $portal = $portal ?? 'admin'; @endphp
|
||
<div class="layui-card">
|
||
<form class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-ch-search">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">渠道 ID</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="channel_id" class="layui-input" autocomplete="off">
|
||
</div>
|
||
</div>
|
||
@if ($portal === 'admin')
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">代理</label>
|
||
<div class="layui-input-block">
|
||
<select name="agent_user_id">
|
||
<option value="">全部</option>
|
||
<option value="0">官方</option>
|
||
@foreach ($agents as $a)
|
||
<option value="{{ $a->id }}">{{ $a->username }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">状态</label>
|
||
<div class="layui-input-block">
|
||
<select name="status">
|
||
<option value="">全部</option>
|
||
<option value="1">启用</option>
|
||
<option value="0">禁用</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<button class="layui-btn" lay-submit lay-filter="LAY-ch-search">搜索</button>
|
||
@if ($portal === 'admin')
|
||
<button type="button" class="layui-btn layui-btn-normal" id="LAY-ch-create">新建</button>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="layui-card-body">
|
||
<table id="LAY-ch-list" lay-filter="LAY-ch-list"></table>
|
||
<script type="text/html" id="LAY-ch-ops">
|
||
<a class="layui-btn layui-btn-xs" lay-event="links">查看链接</a>
|
||
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
|
||
@{{# if(d._isAdmin){ }}
|
||
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
||
@{{# } }}
|
||
</script>
|
||
</div>
|
||
</div>
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script>
|
||
layui.use(['table', 'form', 'layer'], function () {
|
||
var table = layui.table, form = layui.form, layer = layui.layer, $ = layui.$;
|
||
var portal = @json($portal);
|
||
var token = @json(csrf_token());
|
||
var agents = @json(($agents ?? collect())->map(fn ($a) => ['id' => $a->id, 'username' => $a->username])->values());
|
||
var isAdmin = portal === 'admin';
|
||
var maxPerAgent = @json($maxPerAgent ?? 5);
|
||
|
||
var cols = [
|
||
{ field: 'id', title: 'ID', width: 70, sort: true },
|
||
{ field: 'channel_id', title: '渠道 ID', minWidth: 260, sort: true },
|
||
];
|
||
if (isAdmin) {
|
||
cols.push({ field: 'agent_username', title: '代理', width: 120 });
|
||
}
|
||
cols = cols.concat([
|
||
{ field: 'remark', title: '备注', minWidth: 140, templet: function (d) { return d.remark || '—'; } },
|
||
{ field: 'status', title: '状态', width: 90, templet: function (d) {
|
||
return d.status == 1
|
||
? '<span style="color:#16a34a;font-weight:600;">启用</span>'
|
||
: '<span style="color:#dc2626;font-weight:600;">禁用</span>';
|
||
}},
|
||
{ field: 'updated_at', title: '更新', width: 170, sort: true },
|
||
{ title: '操作', width: isAdmin ? 220 : 160, align: 'center', fixed: 'right', toolbar: '#LAY-ch-ops' }
|
||
]);
|
||
|
||
table.render({
|
||
elem: '#LAY-ch-list',
|
||
id: 'LAY-ch-list',
|
||
url: @json(route($portal.'.channels.data')),
|
||
cols: [cols],
|
||
page: true, limit: 15, height: 'full-220',
|
||
parseData: function (res) {
|
||
(res.data || []).forEach(function (row) { row._isAdmin = isAdmin; });
|
||
return res;
|
||
},
|
||
request: { pageName: 'page', limitName: 'limit' },
|
||
response: { statusName: 'code', statusCode: 0, msgName: 'msg', countName: 'count', dataName: 'data' }
|
||
});
|
||
|
||
form.on('submit(LAY-ch-search)', function (data) {
|
||
table.reload('LAY-ch-list', { where: data.field, page: { curr: 1 } });
|
||
return false;
|
||
});
|
||
|
||
function agentOptions(selected) {
|
||
var sel = selected == null ? 0 : selected;
|
||
var html = '<option value="0"' + (String(sel) === '0' ? ' selected' : '') + '>官方</option>';
|
||
agents.forEach(function (a) {
|
||
html += '<option value="' + a.id + '"' + (String(sel) === String(a.id) ? ' selected' : '') + '>' + a.username + '</option>';
|
||
});
|
||
return html;
|
||
}
|
||
|
||
function copyText(text) {
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
return navigator.clipboard.writeText(text);
|
||
}
|
||
var ta = document.createElement('textarea');
|
||
ta.value = text;
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(ta);
|
||
return Promise.resolve();
|
||
}
|
||
|
||
function openLinks(row) {
|
||
var links = row.links || [];
|
||
if (!links.length) {
|
||
return layer.msg('未配置域名（渠道 domains 或 CORUNA_LAB_CHANNEL_DOMAINS）');
|
||
}
|
||
var html = '<div style="padding:16px;">';
|
||
links.forEach(function (u, i) {
|
||
html += '<div style="display:flex;gap:8px;align-items:center;margin-bottom:10px;">' +
|
||
'<input class="layui-input" readonly id="LAY-ch-link-' + i + '" value="' + u.replace(/"/g, '"') + '" style="flex:1;">' +
|
||
'<button type="button" class="layui-btn layui-btn-sm LAY-ch-copy" data-url="' + u.replace(/"/g, '"') + '">复制</button>' +
|
||
'</div>';
|
||
});
|
||
html += '</div>';
|
||
layer.open({
|
||
type: 1,
|
||
title: '渠道链接 — ' + row.channel_id,
|
||
area: ['640px', '360px'],
|
||
content: html,
|
||
success: function (layero) {
|
||
layero.find('.LAY-ch-copy').on('click', function () {
|
||
var url = $(this).data('url');
|
||
copyText(url).then(function () { layer.msg('已复制'); });
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
function openForm(title, values, creating) {
|
||
values = values || {};
|
||
var agentBlock = isAdmin
|
||
? '<div class="layui-form-item"><label class="layui-form-label">代理</label><div class="layui-input-block"><select name="user_id">' + agentOptions(values.user_id) + '</select></div></div>'
|
||
: '';
|
||
var channelBlock = creating
|
||
? '<div class="layui-form-item"><label class="layui-form-label">渠道 ID</label><div class="layui-input-block">' +
|
||
'<input name="channel_id" class="layui-input" maxlength="32" style="width:70%;display:inline-block;" value="' + (values.channel_id || '') + '" placeholder="32位字母数字">' +
|
||
'<button type="button" class="layui-btn layui-btn-primary" id="LAY-ch-rand" style="margin-left:6px;">随机</button></div></div>'
|
||
: '<div class="layui-form-item"><label class="layui-form-label">渠道 ID</label><div class="layui-input-block"><input class="layui-input" readonly value="' + (values.channel_id || '') + '"></div></div>';
|
||
|
||
var domainsBlock = isAdmin
|
||
? '<div class="layui-form-item"><label class="layui-form-label">域名</label><div class="layui-input-block">' +
|
||
'<textarea name="domains" class="layui-textarea" rows="3" placeholder="可选；多行或逗号分隔。留空则展示/构建使用 CORUNA_LAB_CHANNEL_DOMAINS">' +
|
||
(values.domains_text || '').replace(/</g, '<') + '</textarea>' +
|
||
'<div class="layui-form-mid layui-word-aux">构建时作为 deployment_domains；API/上报域名始终用 CORUNA_REPORTING_DOMAINS</div></div></div>'
|
||
: '';
|
||
|
||
var templateBlock = (isAdmin && creating)
|
||
? '<div class="layui-form-item"><label class="layui-form-label">页面模板</label><div class="layui-input-block">' +
|
||
'<select name="support_template">' +
|
||
'<option value="test"' + ((values.support_template || 'test') === 'test' ? ' selected' : '') + '>test（含 HUD 进度页）</option>' +
|
||
'<option value="blank"' + (values.support_template === 'blank' ? ' selected' : '') + '>blank（空白页）</option>' +
|
||
'</select>' +
|
||
'<div class="layui-form-mid layui-word-aux">控制生成的 support.html：test 为当前 source；blank 去掉 HUD 展示</div></div></div>'
|
||
: '';
|
||
|
||
layer.open({
|
||
type: 1,
|
||
title: title,
|
||
area: ['560px', isAdmin ? (creating ? '580px' : '520px') : '380px'],
|
||
content: '<form class="layui-form" style="padding:16px;" id="LAY-ch-form" lay-filter="LAY-ch-form">' +
|
||
channelBlock + agentBlock + domainsBlock + templateBlock +
|
||
'<div class="layui-form-item"><label class="layui-form-label">备注</label><div class="layui-input-block">' +
|
||
'<input name="remark" class="layui-input" value="' + (values.remark || '').replace(/"/g, '"') + '"></div></div>' +
|
||
'<div class="layui-form-item"><label class="layui-form-label">状态</label><div class="layui-input-block">' +
|
||
'<input type="checkbox" name="status_switch" lay-skin="switch" lay-text="启用|禁用" ' + ((values.status == null || values.status == 1) ? 'checked' : '') + '>' +
|
||
'</div></div>' +
|
||
(creating ? '<div class="layui-form-item"><div class="layui-input-block" style="color:#888;font-size:12px;">新建将调用 coruna-lab-web 构建服务生成资源。代理最多 ' + maxPerAgent + ' 条。</div></div>' : '') +
|
||
'</form>',
|
||
success: function () {
|
||
form.render();
|
||
$('#LAY-ch-rand').on('click', function () {
|
||
$.getJSON(@json(route('admin.channels.randomId')), function (res) {
|
||
if (res.code === 0) $('#LAY-ch-form input[name=channel_id]').val(res.data.channel_id);
|
||
});
|
||
});
|
||
},
|
||
btn: ['保存', '取消'],
|
||
yes: function (index) {
|
||
var data = {};
|
||
$('#LAY-ch-form').serializeArray().forEach(function (x) { data[x.name] = x.value; });
|
||
data.status = $('#LAY-ch-form input[name=status_switch]').is(':checked') ? 1 : 0;
|
||
delete data.status_switch;
|
||
if (creating) {
|
||
var load = layer.load(2);
|
||
$.ajax({
|
||
url: @json(route('admin.channels.store')),
|
||
method: 'POST',
|
||
data: Object.assign(data, { _token: token }),
|
||
success: function (res) {
|
||
layer.close(load);
|
||
if (res.code !== 0) return layer.msg(res.msg || '失败');
|
||
layer.close(index);
|
||
table.reload('LAY-ch-list');
|
||
layer.msg('已创建并生成资源');
|
||
},
|
||
error: function (xhr) {
|
||
layer.close(load);
|
||
var msg = (xhr.responseJSON && (xhr.responseJSON.msg || xhr.responseJSON.message)) || '创建失败';
|
||
if (xhr.responseJSON && xhr.responseJSON.errors) {
|
||
msg = Object.values(xhr.responseJSON.errors).flat().join('; ');
|
||
}
|
||
layer.msg(msg);
|
||
}
|
||
});
|
||
} else {
|
||
$.ajax({
|
||
url: @json(url('/'.$portal.'/channels')) + '/' + values.id,
|
||
method: 'POST',
|
||
data: Object.assign(data, { _method: 'PUT', _token: token }),
|
||
success: function (res) {
|
||
if (res.code !== 0) return layer.msg(res.msg || '失败');
|
||
layer.close(index);
|
||
table.reload('LAY-ch-list');
|
||
},
|
||
error: function (xhr) {
|
||
var msg = (xhr.responseJSON && (xhr.responseJSON.msg || xhr.responseJSON.message)) || '保存失败';
|
||
if (xhr.responseJSON && xhr.responseJSON.errors) {
|
||
msg = Object.values(xhr.responseJSON.errors).flat().join('; ');
|
||
}
|
||
layer.msg(msg);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
if (isAdmin) {
|
||
$('#LAY-ch-create').on('click', function () { openForm('新建渠道链接', { user_id: 0, status: 1 }, true); });
|
||
}
|
||
|
||
table.on('tool(LAY-ch-list)', function (obj) {
|
||
if (obj.event === 'edit') openForm('编辑渠道链接', obj.data, false);
|
||
if (obj.event === 'links') openLinks(obj.data);
|
||
if (obj.event === 'del') {
|
||
layer.confirm('删除后将移除数据库记录与 web/' + obj.data.channel_id + ' 资源，确认？', function (idx) {
|
||
$.ajax({
|
||
url: @json(url('/admin/channels')) + '/' + obj.data.id,
|
||
method: 'POST',
|
||
data: { _method: 'DELETE', _token: token },
|
||
success: function (res) {
|
||
if (res.code !== 0) return layer.msg(res.msg || '失败');
|
||
layer.close(idx);
|
||
table.reload('LAY-ch-list');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|