fastadmin 开发示例：使用 layer 弹窗实现数据快速录入

功能场景 1：点击"添加"显示弹窗，录入工作人员信息

前端部分：layer.open 弹窗配置

在 FastAdmin 中，可以通过 layer.open 方法快速创建一个弹窗，用于数据录入。以下是一个典型的配置示例：

javascript 复制代码

            $('.btn-addguanzhong').on('click', function () {
                let btn = ["确定", "取消"];
                Layer.open({
                    type: 1,
                    title: '添加人员',
                    area: ["60%", "60%"],
                    id: 'add_guanzhong_dialog',
                    btn: btn,
                    zIndex: 999,
                    content: Template("addtpl", {}),
                    success: function (layero, index) {
                        // 弹窗打开之后的回调
                    },
                    yes: function (index, layero) {
                        // 点击"确定"按钮
                         // 1. 获取弹窗内的表单数据
                        var hid = $('#hid', layero).val();
                        var xingming = $('#xingming', layero).val();
                        var shouji = $('#shouji', layero).val();
                        var shenfenzhen = $('#shenfenzhen', layero).val();
                        var code = $('#code', layero).val();
                        // 获取选中的二维码生成方式（注意：name相同的radio是一组）
                        var gen_code_by = $('input[name="by_shouji"]:checked', layero).val();
            
                        // 2. 简单的必填项校验
                        // if (!xingming || !shouji || !shenfenzhen) {
                        //     Toastr.error('请填写完整的姓名、手机号和身份证信息');
                        //     return false;
                        // }
            
                        // 3. 发送 AJAX POST 请求
                        Fast.api.ajax({
                            url: 'csmsignin/conf/guanzhong?ids=' + hid,
                            type: 'POST', // 明确指定为 POST 请求
                            data: {
                                hid: hid,
                                xingming: xingming,
                                shouji: shouji,
                                shenfenzhen: shenfenzhen,
                                code: code,
                                gen_code_by: gen_code_by
                            }
                        }, function (data, ret) {
                            // 请求成功的回调
                            // Toastr.success(ret.msg || '添加成功');
                            
                            // 关闭弹窗
                            Layer.close(index);
                            
                            // 刷新父页面的表格数据
                            $(".btn-refresh").trigger("click");
                            
                        }, function (data, ret) {
                            // 请求失败的回调
                            // Toastr.error(ret.msg || '添加失败，请重试');
                        });
                        
                        // 返回 false 阻止 Layer 默认自动关闭弹窗的行为（我们在成功回调里手动关闭）
                        return false;
                    },
                    btn2: function (index, layero) {
                        // 点击"取消"按钮
                    },
                    cancel: function () {
                        // 点击右上角的关闭按钮
                    }
                });
                return;
            });

html部分

html 复制代码

<script type="text/html" id="addtpl">
    <div id="verificationdom" style="padding:15px;">

        <div class="form-group">
            <label for="">活动ID</label>
            <input readonly type="text" class="form-control input-lg" name="row['hid']" id="hid"  value="{$Request.get.ids}">
        </div>
        <div class="form-group">
            <label for="">姓名</label>
            <input type="text" class="form-control input-lg" name="row['xingming']" id="xingming">
        </div>
        <div class="form-group">
            <label for="">手机号</label>
            <input type="text" class="form-control input-lg" name="row['shouji']" id="shouji">
        </div>
        <div class="form-group">
            <label for="">身份证</label>
            <input type="text" class="form-control input-lg" name="row['shenfenzhen']" id="shenfenzhen">
        </div>
        <div class="form-group">
            <label for="">二维码</label>
            <input type="text" class="form-control input-lg" name="row['code']" id="code" placeholder="可以自定义，也可以选择手机号或身份证">
        </div>

        <div class="hidden" id="reader"></div>
    </div>
</script>

后端部分：FastAdmin 控制器处理

在控制器中需要准备一个 guanzhong 方法，通过请求类型执行不同的业务逻辑

get 请求用于渲染弹窗内容
ajax 请求用于列表渲染
post 请求用于添加请求
可以扩展 put、delete 请求等

注意请求方法的顺序：

post 方法要放最前面，因为列表请求（ajax、get 请求）、添加（ajax、post 请求）都是 ajax 请求，如果 isAjax放前面，会直接执行到 isajax 的逻辑里面，执行不到 post 的方法。
同样 isGet放最后面，不然数据列表请求数据是不会执行到 isAjax的逻辑里面的。

php 复制代码

    public function guanzhong (){
        $ids = $this->request->get('ids');
        $hdmc = $this->request->get('hdmc');
        if(!$ids) $this->error('活动ID 参数不正确');
        if(true === $this->request->isPost()){
            $data = $this->request->post();
            Db::startTrans();
            try {
                $requiredFields = ['hid'=>'活动ID', 'xingming'=>'姓名', 'shouji'=>'手机号', 'code'=>'二维码'];
                // 检查必填参数是否缺失
                foreach ($requiredFields as $field=>$filedName) {
                    // 非空判断
                    if (!isset($data[$field]) || empty($data[$field])) {
                        throw new Exception(sprintf('%s 不能为空', $filedName));
                    }
                }
                // 校验手机号格式
                if (!preg_match("/^1[3-9]\d{9}$/", $data['shouji'])) {
                    $this->error('请输入正确的11位手机号码');
                }
                // 校验身份证格式 (简单的15位或18位正则)
                if (!empty($data['shenfenzhen']) && !preg_match("/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/", $data['shenfenzhen'])) {
                     throw new Exception('请输入正确的身份证号码');
                }
                $result = $this->zcdb()->table('Sys_guanzhong')->insert($data);
                Db::commit();
            } catch (ValidateException|PDOException|Exception $e) {
                Db::rollback();
                $this->error($e->getMessage());
            }
            if ($result === false) {
                $this->error(__('No rows were inserted'));
            }
            $this->success();
        }
        if(true === $this->request->isAjax()){
            $this->model = $this->zcdb()->table('Sys_guanzhong')->where('hid',$ids);
            return parent::index();
        }
        if(true === $this->request->isGet()){
            $this->assignConfig('hdmc',$hdmc);
            return $this->view->fetch();
        }
    }

完整示例流程

在列表页面添加一个触发按钮，绑定点击事件；
在弹窗页面准备表单，在窗口打开、关闭、按钮事件中书写业务逻辑，发起 ajax 请求，
后端控制器处理提交；

注意事项

确保在 FastAdmin 后台已经正确配置了路由和权限
表单字段需要与数据库字段对应
提交地址需要与控制器方法匹配
弹窗尺寸可以根据实际内容调整
错误处理应该完善，给用户明确的反馈

功能场景 2：二维码的显示

方式 1：直接渲染成图片

改写 formatter，输出自定义 html

html 复制代码

{ 
                            field: 'banner', 
                            title: __('Images'), 
                            events: Table.api.events.image, // 绑定图片预览事件
                            formatter: function(value, row, index) {
                                // 处理单图（字符串）或多图（数组）
                                if (!value) return ''; // 无图时返回空
                                
                                // 统一转换为数组格式（兼容单图）
                                const images = Array.isArray(value) ? value : [value];
                                
                                return images.map(url => {
                                    // 补全 URL 前缀（若未补全，参考之前逻辑）
                                    const fullUrl = url.startsWith('http') 
                                        ? url 
                                        : `https://xcx.ffep.online:20095/${url}`;
                                    
                                    // 生成图片标签（添加样式类，支持点击预览）
                                    return `<img src="${fullUrl}" class="img-thumbnail" style="max-width: 100px;" data-toggle="lightbox" data-src="${fullUrl}" data-title="${__('Banner')}">`;
                                }).join(''); // 多图用空字符串连接（可改为 <br> 换行）
                            } 
                        },

方式 2：渲染成 button，弹窗显示

渲染成操作按钮，弹窗显示

html 复制代码

{ field: 'code', title: __('二维码'), table: table, buttons: [
                            {
                                name: 'equipments',
                                text: '查看',
                                title: (row)=>Config.hdmc,
                                extend: 'data-area=\'["50%", "80%"]\'',
                                classname: 'btn-dialog',
                                url: (row)=>{
                                    const label = Config.hdmc+row.xingming;
                                    return `csmsignin/conf/qrcode?code=${row.code}&label=${label}`;
                                }},
                        ], formatter: Table.api.formatter.buttons, operate: false},

对应的qrcode 后端方法

php 复制代码

    // 显示二维码（调用 it.gde.cc 的在线 qrcode 工具）
    public function qrcode($code = null, $label = null)
    {
        // 构建二维码图片链接
        $src = "//it.gde.cc/qrcode/build?text=$code&label=$code&logo=0&labelalignment=center&foreground=%23000000&background=%23ffffff&size=300&padding=50&logosize=50&labelfontsize=14&errorcorrection=medium";
    
        // 拼接美化后的 HTML 和 CSS
        $html = '
        <div style="
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f7fa;
            font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, \'Helvetica Neue\', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        ">
            <div style="
                background: #ffffff;
                padding: 30px;
                border-radius: 12px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                text-align: center;
                max-width: 400px;
                width: 100%;
            ">
                <h3 style="
                    margin: 0 0 20px 0;
                    color: #333333;
                    font-size: 18px;
                    font-weight: 600;
                ">请扫描下方二维码</h3>
                
                <div style="
                    display: inline-block;
                    padding: 15px;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                    border-radius: 8px;
                ">
                    <img src="' . $src . '" alt="二维码" style="
                        display: block;
                        max-width: 100%;
                        height: auto;
                        border-radius: 4px;
                    ">
                </div>
                
                <p style="
                    margin: 20px 0 0 0;
                    color: #666666;
                    font-size: 14px;
                    word-break: break-all;
                ">' . htmlspecialchars($label) . '</p>
            </div>
        </div>';
    
        echo $html;
    }

总结：

以上方法，简单实现了工作人员信息的录入，二维码证件的展示，减少了MVC 的操作，实现功能快速实现。