Dcat Admin開發erp 表單form中的一個值改變 查詢出關聯資料並按表格展示

菜雞一小隻發表於2021-07-07
ORM

背景介紹

最近使用DcatAdmin 開發一個簡單的ERP專案，涉及到採購單入庫的時候，在入庫單from表單選擇採購單需要把相關的採購明細展示在表單中，讓使用者自行決定可入庫物料及入庫數量。查詢了很久官方文件沒有找到元件和擴充套件，最後透過模版的方法終於解決，現在把簡單的程式碼實現分享出來。

最終實現的效果

先展示一下最終的效果：
Dcat Admin中 改變表單form中的一個值 查詢出關聯資料並按表格形式顯示 實現簡單的ERP

圖中根據選擇的採購單，下面明細展示的是對應的採購單明細，庫管可以根據實際到貨情況進行入庫操作。
為了實現這個程式碼使用了很多方法，有朋友可能說引用vue吧，但是DcatAdmin是採用 AdminLTE3(bootstrap4+jQuery3) 構建前端頁面。也就是頁面互動使用的是jQuery 互動的，所以引用vue可能會更麻煩。當然你可以使用DactAdmin 寫介面，vue做前端，但這好像跟DcatAdmin相去甚遠了。 好了，說到這裡就要說一下AdminLTE3這個東西了，有興趣的可以去看一下，主要看一下Tables->jsGrid 這個元件，我用的就是jsGrid這個元件。

[AdminLTE3 Demo展示](https://adminlte.io/themes/v3/pages/tables/jsgrid.html)

總體思路是用js監聽採購單的值變化，然後ajax去獲取採購單明細，使用JsGrid展示出來。這裡涉及到自定義頁面和js元件

[DcatAdmin 自定義頁面](https://learnku.com/docs/dcat-admin/2.x/custom-page/8473)

開始程式碼

1. form表單引入自定義頁面

protected function form()
    {
     ...
            if ($form->isCreating()) {
                $form->column(12, function (Form $form) {
                    $form->html(view('admin.order_detail'))->width(12,0);
                });
            }
     ...
    }

2. 自定義頁面

模版檔案路徑在resourses/view下面,模版程式碼如下

[JsGrid的使用 文件 這個比較全一點](https://gitee.com/mirrors/jsgrid)
    Dcat.ready(function () {
        // js程式碼也可以放在模板裡面
        var that = this
        console.log('所有JS指令碼都載入完了!!!');
        $('[name="delivery_id"]').on('change', function () {
            var delivery_id = $("input[name='delivery_id']").val()
            console.log(delivery_id)
            $.ajax({
                 type: "GET",
                 url: "/admin/api/admin/delivery/details",
                 data: {delivery_id:delivery_id},
                 dataType: "json",
                 success: function(response){
                    console.log(response)
                    $("#outstoreData").val(JSON.stringify(response))
                    $("#jsGrid1").jsGrid({
                        height: "auto",
                        width: "auto",
                        sorting: true,
                        paging: true,
                        confirmDeleting: false,
                        data: response,
                        fields: [
                            {title:'物料', name: "material.material_name", type: "text",width:300},
                            {title:'出庫數量',name: "delivery_num", type: "number", width:300},
                        ],
                        controller: {
                            updateItem: function(item){
                                console.log(item)
                                console.log(response)
                                response.forEach(function (val,key) {
                                    if (val['id'] == item['id']) {
                                        response[key] = item
                                    }
                                });
                                $("#outstoreData").val(JSON.stringify(response))
                                return item
                            }

JsGrid不能直接提交資料 所以把資料儲存在一個input框裡面可以隨著表單提交。

3. 處理提交的資料

表單提交的資料包含入庫單和採購訂單，可能涉及到採購訂單狀態，採購明細變更，入庫單明細寫入以及明細物料的庫存變動，因為需要特殊處理。可以使用表單的時間來進行資料處理

【表單事件文件】(https://learnku.com/docs/dcat-admin/2.x/event/8113)

以下是在saving事件時進行入庫物料的驗證，在saved是進行資料寫入資料庫

 $form->saving(function (Form $form) {
                // 判斷是否是新增操作
                if ($form->isCreating()) {
                    $deliveryService = new DeliveryService();
                    $deliveryData = json_decode($form->deliveryData,1);
                    $res = $deliveryService->deliverySalesOrder($deliveryData);
                    if ( !$res['status'] ) {
                        return $form->response()->error($res['msg']);
                    }
                }
            });

            $form->saved(function (Form $form, $result) {
                // 判斷是否是新增操作
                if ($form->isCreating()) {
                    $newId = $form->getKey();
                    if (!$newId) {
                        return $form->error('資料儲存失敗');
                    }
                    $deliveryService = new DeliveryService();
                    $deliveryData = json_decode($form->deliveryData,1);
                    $res = $deliveryService->saveDeliveryDetail($newId, $form->order_id, $deliveryData);
                    return;
                }
            });

結語

使用DcatAdmin框架做資料表關聯性大的比較麻煩一點，但確實可以提高開發效率。關於自定義頁面也做的非常靈活，可以區域性的插入表單。

第一次寫好像html 不能插入,僅代表個人愚見，有更好解決方案可以一起探討。
有需要了解更多的可以聯絡我 demo站建設中

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章