背景介紹
最近使用DcatAdmin 開發一個簡單的ERP專案，涉及到採購單入庫的時候，在入庫單from表單選擇採購單需要把相關的採購明細展示在表單中，讓使用者自行決定可入庫物料及入庫數量。查詢了很久官方文件沒有找到元件和擴充套件，最後通過模版的方法終於解決，現在把簡單的程式碼實現分享出來。
最終實現的效果
先展示一下最終的效果：
圖中根據選擇的採購單，下面明細展示的是對應的採購單明細，庫管可以根據實際到貨情況進行入庫操作。
為了實現這個程式碼使用了很多方法，有朋友可能說引用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 協議》，轉載必須註明作者和本文連結