258 lines
11 KiB
PHP
258 lines
11 KiB
PHP
{extend name="../../admin/view/main"}
|
||
|
||
{block name="content"}
|
||
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post">
|
||
<div class="layui-card-body">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">选择包名</label>
|
||
<div class="layui-input-block">
|
||
<div id="packageSelect"></div>
|
||
<input type="hidden" name="package_id" id="selectedPackageId">
|
||
<input type="hidden" name="package_name" id="selectedPackageName">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">事件名称</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="event_name" required lay-verify="required" placeholder="请输入事件名称" class="layui-input">
|
||
<tip>例如：install, register, purchase 等</tip>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">回传地址</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="callback_url" required lay-verify="required|callback_url" placeholder="请输入回传地址" class="layui-input">
|
||
<tip>
|
||
完整的回传接口地址，例如：http://api.example.com/callback<br>
|
||
支持变量替换，如 {package_name}, {event_name} 等<br>
|
||
详细说明请查看完整回传指南
|
||
</tip>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">状态</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="status" value="1" title="启用" checked>
|
||
<input type="radio" name="status" value="0" title="停用">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hr-line-dashed"></div>
|
||
|
||
<div class="layui-form-item text-center">
|
||
<button class="layui-btn" lay-submit lay-filter="formSubmit">保存数据</button>
|
||
<button class="layui-btn layui-btn-danger" type="button" data-close>取消添加</button>
|
||
</div>
|
||
</form>
|
||
{/block}
|
||
|
||
{block name="script"}
|
||
<style>
|
||
.layui-form tip {
|
||
display: block;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
color: #666;
|
||
background-color: #f8f8f8;
|
||
border-radius: 2px;
|
||
line-height: 1.8;
|
||
}
|
||
.layui-badge {
|
||
margin: 2px;
|
||
font-family: Consolas, monospace;
|
||
}
|
||
</style>
|
||
<script>
|
||
$(function () {
|
||
layui.use(['form', 'xmSelect', 'layer'], function () {
|
||
let form = layui.form;
|
||
let layer = layui.layer;
|
||
let existingConfig = null; // 用于存储已存在的配置信息
|
||
|
||
// 定义包名选择器
|
||
const packageSelect = xmSelect.render({
|
||
el: '#packageSelect',
|
||
name: 'package_id',
|
||
radio: true,
|
||
clickClose: true,
|
||
filterable: true,
|
||
tips: '请选择包名',
|
||
data: [],
|
||
direction: 'auto',
|
||
model: { label: { type: 'text' } },
|
||
on: function(data) {
|
||
if(data.arr.length > 0) {
|
||
let selected = data.arr[0];
|
||
$('#selectedPackageId').val(selected.value);
|
||
$('#selectedPackageName').val(selected.package_name);
|
||
// 选择包名后，如果已有事件名称，则检查是否存在
|
||
checkEventExists();
|
||
} else {
|
||
$('#selectedPackageId').val('');
|
||
$('#selectedPackageName').val('');
|
||
}
|
||
form.render();
|
||
}
|
||
});
|
||
|
||
let checkTimer = null; // 添加防抖定时器
|
||
|
||
// 监听事件名称输入框
|
||
$('input[name="event_name"]').on('input propertychange', function() {
|
||
let currentValue = $(this).val();
|
||
console.log('事件名称输入:', currentValue);
|
||
|
||
// 使用防抖，避免频繁请求
|
||
if (checkTimer) clearTimeout(checkTimer);
|
||
checkTimer = setTimeout(function() {
|
||
checkEventExists(currentValue);
|
||
}, 300);
|
||
});
|
||
|
||
// 检查事件是否存在
|
||
function checkEventExists(eventValue) {
|
||
// 获取当前弹窗内的元素
|
||
let $dialog = $('.layui-layer-page').last();
|
||
let packageId = $('#selectedPackageId').val();
|
||
let $eventInput = $dialog.find('input[name="event_name"]');
|
||
|
||
// 清除现有提示和验证状态
|
||
$eventInput.removeClass('layui-form-danger');
|
||
$eventInput.nextAll('.layui-form-mid,.layui-word-aux').remove();
|
||
$dialog.find('tip').show();
|
||
|
||
// 重置existingConfig
|
||
existingConfig = null;
|
||
|
||
if (packageId && eventValue) {
|
||
// 直接获取配置详情
|
||
$.ajax({
|
||
url: '{:url("getExistingConfig")}',
|
||
type: 'POST',
|
||
data: {
|
||
package_id: packageId,
|
||
event_name: eventValue
|
||
},
|
||
dataType: 'json',
|
||
success: function(configRes) {
|
||
if (configRes.code === 1 && configRes.data) {
|
||
// 保存已存在的配置信息
|
||
existingConfig = configRes.data; // 保存完整的配置信息
|
||
|
||
// 添加验证失败样式
|
||
$eventInput.addClass('layui-form-danger');
|
||
// 隐藏当前弹窗内的tip
|
||
$dialog.find('.layui-input-block tip').hide();
|
||
// 添加提示信息
|
||
$eventInput.after(`
|
||
<div class="layui-form-mid" style="margin-top: 5px;">
|
||
<div style="color: #FF5722; font-weight: bold; margin-bottom: 5px;">
|
||
<i class="layui-icon layui-icon-warning" style="font-size: 16px; margin-right: 5px;"></i>
|
||
该包名下已存在此事件名称的配置，提交时将覆盖现有配置
|
||
</div>
|
||
<div style="color: #666; background: #f8f8f8; padding: 8px; border-radius: 2px; margin-top: 5px;">
|
||
<i class="layui-icon layui-icon-link" style="margin-right: 5px;"></i>
|
||
已配置的回调地址：${configRes.data.callback_url}
|
||
</div>
|
||
</div>
|
||
`);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 加载包名列表
|
||
function loadPackageList() {
|
||
$.get('{:url("searchPackages")}', {
|
||
init: 1
|
||
}, function(res) {
|
||
if (res.code === 1) {
|
||
let data = res.data.map(function(item) {
|
||
return {
|
||
name: item.package_name + ' (' + item.name + ')',
|
||
value: item.id,
|
||
package_name: item.package_name
|
||
};
|
||
});
|
||
packageSelect.update({
|
||
data: data,
|
||
autoRow: true
|
||
});
|
||
}
|
||
}, 'json');
|
||
}
|
||
|
||
// 初始加载包名列表
|
||
loadPackageList();
|
||
|
||
// 表单验证
|
||
form.verify({
|
||
callback_url: function(value) {
|
||
if (!/^https?:\/\/.+/.test(value)) {
|
||
return '请输入正确的URL地址';
|
||
}
|
||
}
|
||
});
|
||
|
||
// 修改表单提交处理
|
||
form.on('submit(formSubmit)', function(data) {
|
||
// 如果存在配置，显示确认框
|
||
if (existingConfig) {
|
||
layer.confirm('该包名下已存在此事件配置，是否确认覆盖？', {
|
||
title: '覆盖确认',
|
||
btn: ['确认覆盖', '取消'],
|
||
icon: 3
|
||
}, function(index) {
|
||
// 确认覆盖，将请求转为更新操作
|
||
let formData = data.field;
|
||
formData.id = existingConfig.id; // 添加已存在配置的ID
|
||
|
||
$.ajax({
|
||
url: '{:url("edit")}',
|
||
type: 'POST',
|
||
data: formData,
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
if (res.code === 1) {
|
||
layer.msg(res.info, {icon: 1, time: 1500}, function() {
|
||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||
parent.location.reload();
|
||
});
|
||
} else {
|
||
layer.msg(res.info, {icon: 2, time: 1500});
|
||
}
|
||
}
|
||
});
|
||
layer.close(index);
|
||
});
|
||
} else {
|
||
// 如果不存在配置，使用默认表单提交
|
||
let formData = data.field;
|
||
$.ajax({
|
||
url: '{:url("add")}',
|
||
type: 'POST',
|
||
data: formData,
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
if (res.code === 1) {
|
||
layer.msg(res.info, {icon: 1, time: 1500}, function() {
|
||
parent.layer.close(parent.layer.getFrameIndex(window.name));
|
||
parent.location.reload();
|
||
});
|
||
} else {
|
||
layer.msg(res.info, {icon: 2, time: 1500});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
return false; // 阻止表单默认提交
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
{/block}
|