dact-admin 模态框嵌套无法显示

1. 运行环境

1). 当前使用的 Laravel 版本?

laravel 8.5

2). 当前使用的 php 版本?

PHP 版本:7.4

3). 当前系统

Windows 10

4). 业务环境

开发环境

5). 相关软件版本

Nginx 1.15.11
MySQL 5.7

2. 问题描述?

模态框嵌套,第一个是异步表格,第二个是表单。但是表单无法显示,点击按钮毫无反应。
Laravel

点击页面管理后弹出异步表格模态框

Laravel
点击按钮弹出表单模态框,表单无法正常显示

3. 您期望得到的结果?

点击添加子导航的按钮时可以弹出表单模态框

Laravel

4. 您实际得到的结果?

点击按钮毫无反应
Laravel

5. 代码

控制器中使用模态框显示异步表格,这个可以正常显示

<?php

namespace App\Admin\Controllers;

use App\Admin\Renderable\NavPageTable;
use App\Admin\Repositories\DataNav;
use App\Models\DataNavPage as DataNavPageModel;
use Dcat\Admin\Form;
use Dcat\Admin\Grid;
use Dcat\Admin\Show;
use Dcat\Admin\Http\Controllers\AdminController;
use Dcat\Admin\Widgets\Modal;

class DataNavController extends AdminController
{
    /**
     * Make a grid builder.
     *
     * @return Grid
     */
    protected function grid()
    {
        return Grid::make(new DataNav(), function (Grid $grid) {
            $grid->column('id')->sortable();
            $grid->column('title');
            $grid->column('is_master')->display(function ($is) {
                return $is?'是':'否';
            });
            $grid->column('remark')->limit(20);
//            $grid->column('status')->switch();
            $grid->column('created_at');

            $grid->quickSearch(['title']);
            $grid->filter(function (Grid\Filter $filter) {
                $filter->equal('id');
                $filter->like('title');

            });

            $grid->actions(function ($action) use ($grid) {
                $action->prepend(
                    Modal::make()
                    ->lg()
                    ->title('页面管理')
                    ->xl()
                    ->body(NavPageTable::make())
                    ->button('页面管理')
                );
            });
        });
    }

    /**
     * Make a form builder.
     *
     * @return Form
     */
    protected function form()
    {
        return Form::make(new DataNav(), function (Form $form) {
            $form->text('title')->required();
            $form->textarea('remark');
//            $form->switch('status')->default(1);
            $form->switch('is_master')->default(0);

        });
    }
}

异步表格中使用模态框显示表单

<?php


namespace App\Admin\Renderable;

use App\Admin\Forms\AddChialNav;
use App\Admin\Repositories\DataNavPage;
use Dcat\Admin\Grid;
use Dcat\Admin\Grid\LazyRenderable;
use Dcat\Admin\Widgets\Modal;

/**
 * 异步加载
 * Class LinkGroupTable
 * @package App\Admin\Renderable
 */
class NavPageTable extends LazyRenderable
{
    public function grid(): Grid
    {
        return Grid::make(new DataNavPage(), function (Grid $grid) {
            $grid->column('id')->sortable();
            $grid->column('sort')->editable();
            $grid->column('title')->tree();
            $grid->column('created_at');

            $grid->quickSearch(['title']);
            $grid->model()->where('status', 1);
            $grid->model()->orderBy('sort', 'ASC');
            $grid->disableColumnSelector();
            $grid->actions(function ($actions) {
                $actions->disableDelete();
                $actions->disableEdit();
                $actions->prepend(
                    Modal::make()
                        ->lg()
                        ->title('添加子导航')
                        ->body(function () use ($actions) {
                            return AddChialNav::make()->payload(['parent_id' => $actions->row->id, 'nav_id' => $actions->row->nav_id]);
                        }) // 传递自定义参数
                        ->button('<a class="pull-left" style="margin-right: 10px;" href="javascript:void(0);" title="添加子导航"><i class="fa fa-sitemap"></i></a>')
                );

            });

        });
    }
}

工具表单代码

<?php

namespace App\Admin\Forms;

use App\Models\DataDriverCategory as DataDriverCategoryModel;
use App\Models\DataNavPage;
use App\Models\DataPostCategory;
use Dcat\Admin\Admin;
use Dcat\Admin\Widgets\Form;
use Dcat\Admin\Traits\LazyWidget;
use Dcat\Admin\Contracts\LazyRenderable;

class AddChialNav extends Form  implements LazyRenderable
{
    use LazyWidget;
    /**
     * Handle the form request.
     *
     * @param array $input
     *
     * @return mixed
     */
    public function handle(array $input)
    {
        DataNavPage::query()->create($input);
        return $this
                ->response()
                ->success('操作成功!')
                ->refresh();
    }
    /**
     * Build a form here.
     */
    public function form()
    {
        $this->hidden('parent_id')->value($this->payload['parent_id']);
        $this->hidden('nav_id')->value($this->payload['nav_id']);

        $this->radio('type')->options(['栏目', '外链'])
            ->when(0, function ($form) {
                $form->radio('model')
                    ->options(['DataPostArchive' => '文章', 'DataDriver' => '产品'])
                    ->when('DataPostArchive', function ($form) {
                        $form->select('category_id')->options(function () {
                            $tree = DataPostCategory::selectOptions(function ($tr) {
                                return $tr->where('status', 1)->orderBy('sort', 'ASC');
                            });
                            return $tree;
                        })->default(0);
                    })
                    ->when('DataDriver', function ($form) {
                        $form->select('category_id')->options(function () {
                            $tree = DataDriverCategoryModel::selectOptions(function ($tr) {
                                return $tr->where('status', 1)->orderBy('sort', 'ASC');
                            });
                            return $tree;
                        })->default(0);
                    })
                    ->default('DataPostArchive');

            })->when(1, function ($form) {
                $form->url('jump_address');
            })
            ->default(0);

        $this->text('title')->required();
        $this->switch('status')->default(1);
        $this->number('sort')->default(1000);

    }


    /**
     * The data of the form.
     *
     * @return array
     */
    public function default()
    {
        return [
            'parent_id',
            'nav_id',
            'type',
            'model',
            'category_id',
            'jump_address',
            'title',
            'status',
            'sort',
        ];
    }

}

各位大佬还请不吝赐教

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案

我记得弹框列表中,无法再进行操作

1、可以带条件跳转到 Grid 列表

2、树状表格

3、列展开 (这个不知道行不行)

6天前 评论
ly2997 (楼主) 5天前
讨论数量: 4

我记得弹框列表中,无法再进行操作

1、可以带条件跳转到 Grid 列表

2、树状表格

3、列展开 (这个不知道行不行)

6天前 评论
ly2997 (楼主) 5天前
DogLoML

参考官方那个自定义一个弹窗组件。

5天前 评论

dact-admin 目前开发发现,不能模态框嵌套,第二个模态框可以搞成a连接跳转形式 $actions->append('XXXXX');

4天前 评论

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