背景介绍
最近使用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站建设中