先看效果：

1、前端頁面中引入了表格

2、表格中實現文件上傳

3、增加截止時間頁面

?

難點在哪呢？

1、這是前端頁面，并不支持直接使用btn-dialog的類屬性實現彈窗；

2、前端頁面一般綁定了layout模板，如何實現某個頁面不調用公共模板的情況下，保留Form.api.bindevent的核心調用，確保表單驗證功能正常；

圖1的index引入table

 index:function(){require(['table'], function (Table) {// 初始化表格參數配置Table.api.init({extend: {index_url: 'lunwen/index' + location.search,add_url: '/DAZoRKUuEW.php/lunwen/index/add?user_id='+Config.userinfo.id,edit_url: '/DAZoRKUuEW.php/lunwen/index/xiugai',table: 'lunwen_author',}});var urlArr = [];var multiple = Fast.api.query('multiple');multiple = multiple == 'true' ? true : false;var table = $("#table");// 遠程數據加載成功時觸發成功。table.on('load-success.bs.table', function (e, data) {$('[name="author_ids"]').val(data.rows.map(row=>row.id).join(','));});// 初始化表格table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,sortName: 'id',pk: 'id',uniqueId: 'id', // 指定唯一標識字段為 idshowToggle: false,showExport: false,search:false,commonSearch:false,columns: [[{checkbox: true,visible:false},{field: 'id', title: __('Id'),visible:false},{field: 'bianhao', title: __('論文編號'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},{field: 'zhuti', title: __('論文標題'), searchList: {"male":__('男'),"female":__('女')}, formatter: Table.api.formatter.normal,operate:false},{field: 'zhuanti_text', title: __('所屬專題'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},{field: 'baogao_type', title: __('報告形式'), operate: 'LIKE', table: table, class: 'autocontent', formatter: Table.api.formatter.content},{field: 'upload_poster',title: __('張貼報告'),formatter: function (value, row, index) {// 1. 口頭報告：顯示「無需上傳」if (row.baogao_type === '口頭報告') {return `<span class="text-muted">無需上傳</span>`;}// 2. 張貼報告且已有附件：顯示下載鏈接if (value) {return `<a href="${value}" target="_blank" class="text-success"><i class="fa fa-file-pdf-o"></i> 已上傳（點擊下載）</a>`;}// 3. 張貼報告且無附件：顯示上傳按鈕return `<button class="btn btn-xs btn-warning btn-upload-poster faupload"   data-mimetype="jpg,jpeg" data-id="${row.id}"><i class="fa fa-upload"></i> 上傳</button>`;},operate: false // 禁用搜索和排序},{field: 'status', title: __('Status'), searchList: {"0":__('草稿'),"save":__('保存'),"submit":__('提交')}, formatter: Table.api.formatter.normal},{field: 'buttons',width: "150px",title: __('操作'),table: table,events: Table.api.events.operate,buttons: [{name: 'detail',text: __('修改'),title: __('修改論文'),classname: 'btn btn-xs btn-primary btn-dialog',extend:' target="_blank"',// icon: 'fa fa-list',url: '/DAZoRKUuEW.php/lunwen/index/add',callback: function (data) {Layer.alert("接收到回傳數據：" + JSON.stringify(data), {title: "回傳數據"});},visible: function (row) {if(row.status=='submit') return false;//返回true時按鈕顯示,返回false隱藏return true;}},{name: 'detail',text: __('查看'),title: __('查看論文'),classname: 'btn btn-xs btn-primary btn-dialog',// icon: 'fa fa-list',url: '/DAZoRKUuEW.php/lunwen/index/chakan',extend:' target="_blank"',callback: function (data) {Layer.alert("接收到回傳數據：" + JSON.stringify(data), {title: "回傳數據"});},visible: function (row) {//返回true時按鈕顯示,返回false隱藏return true;}},],formatter: Table.api.formatter.buttons}]],queryParams:function(params){// var place_id = Fast.api.query('ids');var filter = typeof params.filter == "undefined" ? {} : JSON.parse(params.filter);var op = typeof params.op == "undefined" ? {} : JSON.parse(params.op);filter.user_id = Config.userinfo.id;op.place_id = '=';params.filter = JSON.stringify(filter);params.op = JSON.stringify(op);return params;}});// 為表格綁定事件Table.api.bindevent(table);});},

難點1的解決:用表格的formatter方法，根據狀態渲染不同的內容，如果是需要上傳的，渲染上傳按鈕

?

我顯示嘗試了直接在class里面加入faupload方法，但實際點擊沒反應。改用事件監聽，用Fast.api.open方法打開彈窗：

?

后端寫法：

public function uphaibao($ids){// 定義截止日期（2025年5月22日23:59:59）$deadline = strtotime('2025-05-22 23:59:59');$currentTime = time();// 統一時間校驗邏輯if ($currentTime > $deadline) {if ($this->request->isGet()) {// GET請求時返回提示頁面$this->view->engine->layout(false);return $this->view->fetch('common/deadline', ['message' => '論文海報上傳已截止（截止時間：2025年5月22日）']);} else {// POST請求時返回錯誤提示$this->error('上傳已截止（截止時間：2025年5月22日）');}}$params = $this->request->param();if($this->request->isGet()){$this->view->engine->layout(false);    // 不使用layout模版$this->view->assign('params',$params);return $this->view->fetch('uploadposter');}if($this->request->isPost()){$row = LunwenModel::get($params['ids']);if(!$row) $this->error('沒有找到論文記錄');$row->upload_poster = $params['upload_file'];if($row->save()){$this->success('上傳成功');}else{$this->error('上傳失敗');}}}

?相對應的js文件中加入

uphaibao:function(){Form.api.bindevent($("#lunwenform"));}

重點來了（難點2）

uploadposter.html的模板頁，把去頭掐尾的內容給補回來！

<!DOCTYPE html>
<html><head>{include file="common/meta" /}<link href="__CDN__/assets/css/user.css?v={$Think.config.site.version|htmlentities}" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script><!--<script src="https://cdn.tailwindcss.com"></script>--><script src="__CDN__/assets/js/tailwindcss.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"></head><body><main class="container mx-auto px-4 py-8"><form id="lunwenform" method="POST" action="" enctype="multipart/form-data"><!-- 隱藏業務字段 --><input type="hidden" name="ids" id="ids" value="{$params.ids ?? ''}"><!-- 上傳文件區域 --><div class="space-y-4"><div class="border border-gray-200 rounded-lg p-6 bg-gray-50"><h3 class="text-lg font-medium text-gray-800 mb-4">文件上傳要求</h3><ul class="list-disc list-inside text-sm text-gray-600"><li>支持格式：JPG/JPEG</li><li>最大文件大小：10MB</li><li>建議分辨率：1200x1600及以上（保證內容清晰）</li></ul></div><!-- 上傳組件 --><div class="flex flex-col gap-3"><label class="block text-sm font-medium text-gray-700">選擇報告文件</label><div class="flex items-center gap-4"><input readonly id="c-rowupload" name="upload_file" class="border-gray-300 rounded-lg shadow-sm flex-1 px-3 py-2" type="text" placeholder="點擊上傳按鈕選擇文件"><button id="faupload-rowupload" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors faupload"  data-mimetype="png,jpg,jpeg,gif" data-input-id="c-rowupload"type="button"><i class="fa fa-upload mr-2"></i> 上傳文件</button></div><div id="p-rowupload" class="mt-2 flex gap-3 flex-wrap"></div></div></div><!-- 提交按鈕 --><div class="mt-6"><button type="submit" class="w-full bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">保存并提交報告</button></div></form></main>{include file="common/script" /}</body></html>