cursoradminapiformjifengqiang/app/manager/view/package_callback/edit.html

{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">
        <input type="hidden" name="id" value="{$vo.id|default=''}">
        
        <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" value="{$vo.package_id|default=''}">
                <input type="hidden" name="package_name" id="selectedPackageName" value="{$vo.package_name|default=''}">
            </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" value="{$vo.event_name|default=''}">
                <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" value="{$vo.callback_url|default=''}">
                <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="启用" {if $vo.status eq 1}checked{/if}>
                <input type="radio" name="status" value="0" title="停用" {if $vo.status eq 0}checked{/if}>
            </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'], function () {
            let form = layui.form;
            
            // 定义包名选择器
            const packageSelect = xmSelect.render({
                el: '#packageSelect',
                name: 'package_id',
                radio: true,
                clickClose: true,
                filterable: true,
                tips: '请选择包名',
                data: [],
                direction: 'auto',
                model: { label: { type: 'text' } },
                initValue: [{$vo.package_id|default=0}], // 设置初始选中值
                on: function(data) {
                    if(data.arr.length > 0) {
                        let selected = data.arr[0];
                        $('#selectedPackageId').val(selected.value);
                        $('#selectedPackageName').val(selected.package_name);
                    } else {
                        $('#selectedPackageId').val('');
                        $('#selectedPackageName').val('');
                    }
                    form.render();
                }
            });

            // 加载包名列表并选中当前包名
            function loadPackageList() {
                $.get('{:url("searchPackages")}', {
                    init: 1,
                    edit_id: '{$vo.id|default=0}' // 传递当前编辑的ID
                }, 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,
                                selected: item.id == '{$vo.package_id|default=0}' // 标记当前选中项
                            };
                        });
                        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) {
                let formData = data.field;
                $.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});
                        }
                    }
                });
                return false;
            });
        });
    });
</script>
{/block}