Laravel-admin 弹出表单 Form select()->load()失效

问题

我在grid创建了自定义操作(审核),使用弹出表单的形式进行操作
表单内容中有select二级联动的操作,父级初始化成功,当改变低级时network有请求,也有相应返回结果,可是子级select并没有被渲染,显示的还是no results found

代码如下

列表 grid

$grid->actions(function($actions) {
    // 添加审核操作
    $actions->add(new Audit());
 });

Actions/Audit.php

<?php
namespace App\Admin\Actions;
use Encore\Admin\Actions\Response;
use Encore\Admin\Actions\RowAction;
use Encore\Admin\Facades\Admin;
use Illuminate\Http\Request;
/**
 * Class ChangeGoodsButton
 * @package App\Admin\Actions\Sales
 */
class ChangeGoodsButton extends RowAction
{
    public $name = '换货';
    /**
     * @param Model $model
     * @param Request $request
     * @return Response
     */
    public function handle(Model $model, Request $request)
    {
        // ToDo
        return $this->response()->success('审核操作成功!')->refresh ();
    }
    public function form()
    {
        $this->select('goods_id_' . $this->getKey(), __('GoodsName'))
            ->options('/api/have-inventory-goods')
            ->default($this->row['goods_id'])
            ->load('inventory_id_' . $this->getKey(), '/api/inventory-by-goods');
        $this->select('inventory_id_' . $this->getKey(), __('InventoryChoose'));
    }
}

页面html渲染结果

Laravel-admin 弹出表单 Form select()->load()失效

页面js渲染结果

Laravel-admin 弹出表单 Form select()->load()失效

可以看到渲染结果没有问题,而且当goods_id_21 change的时候查看network也是有请求的

Laravel-admin 弹出表单 Form select()->load()失效

但是inventory_id_21并没有渲染出返回结果,提示的还是no results found

Laravel-admin 弹出表单 Form select()->load()失效

还请帮忙看下这是什么导致的呢

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
最佳答案

自己搞了半天,奈何前端知识有限,也没解决,然后加入了官方讨论群,感谢群友@野草的提示,才找到原因,顺利解决问题。

原因

经过与正常组件的对比发现,弹出表单 字段外层div的class没有fields-group标识,导致js获取不到子级select。

// 文件地址 /vendor/encore/laravel-admin/resources/views/actions/form/modal.blade.php

<div class="modal" tabindex="-1" role="dialog" id="{{ $modal_id }}">
    <div class="modal-dialog {{ $modal_size }}" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{ $title }}</h4>
            </div>
            <form>
            <div class="modal-body fields-group"> // 在这里加上fields-group
                @foreach($fields as $field)
                    {!! $field->render() !!}
                @endforeach
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('admin.close') }}</button>
                <button type="submit" class="btn btn-primary">{{ __('admin.submit') }}</button>
            </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

OK,成功!唯一不好的就是要更改源码~

3年前 评论
讨论数量: 6

自己搞了半天,奈何前端知识有限,也没解决,然后加入了官方讨论群,感谢群友@野草的提示,才找到原因,顺利解决问题。

原因

经过与正常组件的对比发现,弹出表单 字段外层div的class没有fields-group标识,导致js获取不到子级select。

// 文件地址 /vendor/encore/laravel-admin/resources/views/actions/form/modal.blade.php

<div class="modal" tabindex="-1" role="dialog" id="{{ $modal_id }}">
    <div class="modal-dialog {{ $modal_size }}" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{ $title }}</h4>
            </div>
            <form>
            <div class="modal-body fields-group"> // 在这里加上fields-group
                @foreach($fields as $field)
                    {!! $field->render() !!}
                @endforeach
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('admin.close') }}</button>
                <button type="submit" class="btn btn-primary">{{ __('admin.submit') }}</button>
            </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

OK,成功!唯一不好的就是要更改源码~

3年前 评论

用js追加一个 class 也可以

2年前 评论

// modal-body添加 fields-group addSelectLinkage: function () { var dom = document.getElementsByClassName("modal-body"); if (dom) { for (var i = 0; i < dom.length; i++) { if (dom[i].classList.contains("fields-group") === false) { dom[i].classList.add("fields-group"); } } } }

2年前 评论

大佬牛逼,不知道哪个版本修复了,目前1.8.11还是有问题

11个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!