初始化提交
This commit is contained in:
maticarmy
258
app/manager/view/package_callback/add.html
Normal file
258
app/manager/view/package_callback/add.html
Normal file
@@ -0,0 +1,258 @@
|
||||
{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}
|
||||
Reference in New Issue
Block a user