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

功能场景 1点击“添加”显示弹窗录入工作人员信息前端部分layer.open 弹窗配置在 FastAdmin 中可以通过 layer.open 方法快速创建一个弹窗用于数据录入。以下是一个典型的配置示例$(.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[nameby_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部分script typetext/html idaddtpl div idverificationdom stylepadding:15px; div classform-group label for活动ID/label input readonly typetext classform-control input-lg namerow[hid] idhid value{$Request.get.ids} /div div classform-group label for姓名/label input typetext classform-control input-lg namerow[xingming] idxingming /div div classform-group label for手机号/label input typetext classform-control input-lg namerow[shouji] idshouji /div div classform-group label for身份证/label input typetext classform-control input-lg namerow[shenfenzhen] idshenfenzhen /div div classform-group label for二维码/label input typetext classform-control input-lg namerow[code] idcode placeholder可以自定义也可以选择手机号或身份证 /div div classhidden idreader/div /div /script后端部分FastAdmin 控制器处理在控制器中需要准备一个 guanzhong 方法通过请求类型执行不同的业务逻辑get 请求用于渲染弹窗内容ajax 请求用于列表渲染post 请求用于添加请求可以扩展 put、delete 请求等注意请求方法的顺序post 方法要放最前面因为列表请求ajax、get 请求、添加ajax、post 请求都是 ajax 请求如果 isAjax放前面会直接执行到 isajax 的逻辑里面执行不到 post 的方法。同样 isGet放最后面不然数据列表请求数据是不会执行到 isAjax的逻辑里面的。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{ 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} classimg-thumbnail stylemax-width: 100px; />渲染成操作按钮弹窗显示{ 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.hdmcrow.xingming; return csmsignin/conf/qrcode?code${row.code}label${label}; }}, ], formatter: Table.api.formatter.buttons, operate: false},对应的qrcode 后端方法// 显示二维码调用 it.gde.cc 的在线 qrcode 工具 public function qrcode($code null, $label null) { // 构建二维码图片链接 $src //it.gde.cc/qrcode/build?text$codelabel$codelogo0labelalignmentcenterforeground%23000000background%23ffffffsize300padding50logosize50labelfontsize14errorcorrectionmedium; // 拼接美化后的 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 的操作实现功能快速实现。