fastadmin後台訂單列表增加按鈕彈窗

項目後台訂單列表中需要增加個"發貨按鈕",實現點擊打開彈框選擇快遞公司和輸入單號後提交後台.

最終實現的效果如下所示:

點擊發貨按鈕效果如下:

具體的代碼實現邏輯如下所示:

order.js中增加發貨按鈕

{
    field: 'buttons',
    title: '按鈕組',
    width:"120px",
    table: table,
    operate: false,
    events: Table.api.events.operate,
    formatter: Table.api.formatter.operate,//將字段值渲染成操作列
    buttons:[
        {
            name:'express',//按鈕唯一標識
            text:'發貨',//按鈕顯示的文字
            title:'發貨',//按鈕彈框標題
            //按鈕的class，支持btn-dialog/btn-ajax/btn-addtabs
            //btn-dialog是通過彈出窗口打開url對應的頁面模板
            //btn-dialog 是向url對應的地址發送ajax請求
            //btn-addtabs是在新標籤頁中打開url對應的地址
            classname:'btn btn-xs btn-primary btn-dialog',
            icon:'fa fa-truck', //按鈕對應圖標
            confirm: '是否同意該請求？',//點擊按鈕是否展示確認彈框
            refresh: true,//操作完成後是否刷新列表
            //dropdown: '按鈕組名稱',//如果包含dropdown，將會以下拉列表的形式展示
            //對應頁面模板鏈接,默認會通過ids參數傳遞當前row的id編號
            url:"shop/order/express",
            hidden: function(row){ //判斷按鈕是否隱藏
              return row.express_sn
            } //判斷按鈕是否隱藏，支持function
        },
        {
            name: 'ajax',
            text: __('發送Ajax'),
            title: __('發送Ajax'),
            classname: 'btn btn-xs btn-success btn-magic btn-ajax',
            icon: 'fa fa-magic',
            url: 'example/bootstraptable/detail',
            confirm: '確認發送',
            success: function (data, ret) {
                Layer.alert(ret.msg + ",返回數據：" + JSON.stringify(data));
                //如果需要阻止成功提示，則必須使用return false;
                //return false;
            },
            error: function (data, ret) {
                console.log(data, ret);
                Layer.alert(ret.msg);
                return false;
            }
        },
        {
            name: 'addtabs',
            text: __('新選項卡中打開'),
            title: __('新選項卡中打開'),
            classname: 'btn btn-xs btn-warning btn-addtabs',
            icon: 'fa fa-folder-o',
            url: 'example/bootstraptable/detail'
        }
        
    ]
}

除了在order.js的初始化表格中增加操作按鈕組之外,還得給對應方法'shop/order/express'頁面表單增加Form api 事件綁定,類似於add,edit方法

edit: function () {
    Controller.api.bindevent();
},
//自定義express方法,當訪問發貨頁面的時候,這個方法會被觸發
//之所以會自動觸發是因為FastAdmin通過 URL 中的 “操作名”（如 edit、mqttPush）匹配 Controller 中的方法,但是匹配操作名的時候會自動轉小寫,所以mqttPush這個操作名自動匹配到的方法名是mqttpush,匹配不到mqttPush這點兒需要注意
express: function () {
    //綁定表單事件
    //這裏不綁定的話表單中的動態下列(selectpage)組件就不能正常工作
    Controller.api.bindevent();
},
api: {
    bindevent: function () {
        Form.api.bindevent($("form[role=form]"));
    }
}

注意這裏Controller.api.bindevent()的作用
Controller.api.bindevent() 是 FastAdmin 封裝的 “事件綁定工具方法”，主要負責綁定頁面中常見的交互事件，包括但不限於：

• 表單提交事件（點擊 “保存” 按鈕時觸發 AJAX 提交）
• 表單驗證事件（基於 Layui 表單驗證規則，實時校驗輸入內容）
• 文件上傳事件（綁定上傳按鈕與後台接口的交互）
• 其他自定義事件（如下拉框聯動、日期選擇器初始化等）

最直接的一個影響就是, 如果沒有給彈框綁定上面那些事件, 那彈框表單提交的時候就不是通過觸發ajax異步提交方式,還有就是彈框頁面底部layer-footer中的確定提交按鈕還是disable(不可用狀態)

然後在shop/order控制器中增加express方法

public function express()
{
    if ($this->request->isAjax()) {
        $params = $this->request->param();
        ...邏輯操作...
        $this->success('發貨成功');
    }
    return $this->view->fetch();
}

對應express.html模板代碼如下:

<form id="express-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">快遞公司:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-express-company" data-rule="required" 
                data-source="shop/order/company"
                class="form-control selectpage" 
                name="row[company_id]" type="text" value="">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">快遞單號:</label>
        <div class="col-xs-12 col-sm-8">
            <input   data-rule="required;" type="text" name="row[express_sn]" class="form-control" placeholder="請輸入快遞單號">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary">{:__('OK')}</button>
        </div>
    </div>

</form>

上面模板中快遞公司這個單選下拉列表是通過fastadmin的動態下拉(selectpage)實現的,下拉數據來源是通過配置的data-source="shop/order/company"方法獲取的

public function company()
{
    $query = ExpressCompany::field(['id', 'name']);
    return json([
        'total' => $query->count(),
        'rows' => $query->select(),
    ]);
}