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',
        ];
    }

}

各位大佬还请不吝赐教

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案

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

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

2、树状表格

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

1年前 评论
ly2997 (楼主) 1年前
讨论数量: 5

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

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

2、树状表格

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

1年前 评论
ly2997 (楼主) 1年前
DogLoML

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

1年前 评论

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

1年前 评论
Dcatplus-杨光

让DcatAdmin再放光芒系列 - 让modal嵌套的实现方法

博客:让DcatAdmin再放光芒系列 - 让modal嵌套的实现方法

9个月前 评论

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