dcat admin 详情页如何做成选项卡的展示

dcat admin 详情页如何做成选项卡的展示(类似下图),以便把各个关联表的数据分开展示,目前只在文档中找到多列布局
Laravel

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

第一步

use App\Admin\Modal\xxxxx;
use Dcat\Admin\Grid\RowAction;
use Dcat\Admin\Widgets\Modal;

class xxxxx1 extends RowAction
{
    protected $title = '详情';

    /**
     * 异步表格行操作弹窗
     * https://learnku.com/docs/dcat-admin/2.x/tools-form/8125#7f7b20
     * @return Modal|string
     */
    public function render()
    {
        $form = xxxxx::make();

        return Modal::make()
            ->lg()
            ->title($this->title)
            ->body($form)
            ->button($this->title);
    }
}

第二步

use Dcat\Admin\Support\LazyRenderable;
use Dcat\Admin\Widgets\Tab;

class xxxxx extends LazyRenderable
{
    public function render()
    {
        /**
         * 页面组件 =》选项卡
         * 文档地址 https://learnku.com/docs/dcat-admin/2.x/tab/8133#9377e3
         */
        $tab        = Tab::make();

        $tab->add('tab1', 'tab1', true);
        $tab->add('tab1', 'tab3');
        $tab->add('tab...', 'tab...');
        return $tab->withCard();
    }
}

第三步

$actions->append(new xxxxx1());
1年前 评论
luxiaofeng (楼主) 1年前
你是我的眼 2个月前
讨论数量: 18

第一步

use App\Admin\Modal\xxxxx;
use Dcat\Admin\Grid\RowAction;
use Dcat\Admin\Widgets\Modal;

class xxxxx1 extends RowAction
{
    protected $title = '详情';

    /**
     * 异步表格行操作弹窗
     * https://learnku.com/docs/dcat-admin/2.x/tools-form/8125#7f7b20
     * @return Modal|string
     */
    public function render()
    {
        $form = xxxxx::make();

        return Modal::make()
            ->lg()
            ->title($this->title)
            ->body($form)
            ->button($this->title);
    }
}

第二步

use Dcat\Admin\Support\LazyRenderable;
use Dcat\Admin\Widgets\Tab;

class xxxxx extends LazyRenderable
{
    public function render()
    {
        /**
         * 页面组件 =》选项卡
         * 文档地址 https://learnku.com/docs/dcat-admin/2.x/tab/8133#9377e3
         */
        $tab        = Tab::make();

        $tab->add('tab1', 'tab1', true);
        $tab->add('tab1', 'tab3');
        $tab->add('tab...', 'tab...');
        return $tab->withCard();
    }
}

第三步

$actions->append(new xxxxx1());
1年前 评论
luxiaofeng (楼主) 1年前
你是我的眼 2个月前

直接用 tab 组件

protected function detail($id)
{
        return Show::make($id, new User(['loginInfo', 'orders']), function (Show $show) {
            $show->html(view('admin.users.user._header', ['user' => $show->model()]));

            $tab = Tab::make();
            $tab->add('订单', $this->orders($show->model()));
            $tab->add('发起团购', $this->initGroupBuy($show->model()));
            $tab->add('参与团购', $this->joinGroupBuy($show->model()));
            $tab->add('登录日志', $this->loginInfo($show->model()));

            $show->html($tab->withCard());

            $show->disableDeleteButton();
        });
 }

protected function loginInfo($model)
{
        $grid = new Grid(new UserLoginInfo());

        $grid->header('系统默认只保留最近'. config('system.common.max_login_log_items') .'条记录');
        $grid->model()->where('user_id', $model->id);

        $grid->column('created_at', '时间');
        $grid->column('address', '地址');
        $grid->column('ip', '登录IP');
        $grid->column('client', '客户端')->display(fn($client) => $client->label());

        $grid->disableActions()
            ->disablePagination()
            ->disableRefreshButton()
            ->disableCreateButton();

        return $grid->render();
}

file

1年前 评论
wangchuang 10个月前

模态框中写自定义页面

1年前 评论
porygonCN

Dcat集成了layer 你这个可以考虑用modal模态框弹出

1年前 评论

layer 加 作者自己封装的Show

1年前 评论

第一步

use App\Admin\Modal\xxxxx;
use Dcat\Admin\Grid\RowAction;
use Dcat\Admin\Widgets\Modal;

class xxxxx1 extends RowAction
{
    protected $title = '详情';

    /**
     * 异步表格行操作弹窗
     * https://learnku.com/docs/dcat-admin/2.x/tools-form/8125#7f7b20
     * @return Modal|string
     */
    public function render()
    {
        $form = xxxxx::make();

        return Modal::make()
            ->lg()
            ->title($this->title)
            ->body($form)
            ->button($this->title);
    }
}

第二步

use Dcat\Admin\Support\LazyRenderable;
use Dcat\Admin\Widgets\Tab;

class xxxxx extends LazyRenderable
{
    public function render()
    {
        /**
         * 页面组件 =》选项卡
         * 文档地址 https://learnku.com/docs/dcat-admin/2.x/tab/8133#9377e3
         */
        $tab        = Tab::make();

        $tab->add('tab1', 'tab1', true);
        $tab->add('tab1', 'tab3');
        $tab->add('tab...', 'tab...');
        return $tab->withCard();
    }
}

第三步

$actions->append(new xxxxx1());
1年前 评论
luxiaofeng (楼主) 1年前
你是我的眼 2个月前

直接用 tab 组件

protected function detail($id)
{
        return Show::make($id, new User(['loginInfo', 'orders']), function (Show $show) {
            $show->html(view('admin.users.user._header', ['user' => $show->model()]));

            $tab = Tab::make();
            $tab->add('订单', $this->orders($show->model()));
            $tab->add('发起团购', $this->initGroupBuy($show->model()));
            $tab->add('参与团购', $this->joinGroupBuy($show->model()));
            $tab->add('登录日志', $this->loginInfo($show->model()));

            $show->html($tab->withCard());

            $show->disableDeleteButton();
        });
 }

protected function loginInfo($model)
{
        $grid = new Grid(new UserLoginInfo());

        $grid->header('系统默认只保留最近'. config('system.common.max_login_log_items') .'条记录');
        $grid->model()->where('user_id', $model->id);

        $grid->column('created_at', '时间');
        $grid->column('address', '地址');
        $grid->column('ip', '登录IP');
        $grid->column('client', '客户端')->display(fn($client) => $client->label());

        $grid->disableActions()
            ->disablePagination()
            ->disableRefreshButton()
            ->disableCreateButton();

        return $grid->render();
}

file

1年前 评论
wangchuang 10个月前

为啥我按照和你一样的方法实现,模态框tab切换,页面是渲染出来了,但是tab点击无限啊。tab不能切换

1年前 评论
luxiaofeng (楼主) 1年前

tab切换确实无效呀,按照上面的方法来写的。

1年前 评论
deMemory 1年前

@de-memory

use App\Admin\Actions\Grid\OrderDetail;
protected function grid()
{
        return Grid::make(new Order([...]), function (Grid $grid) {
            $grid->disableCreateButton();
            $grid->withBorder();
            $grid->disableViewButton();

            $grid->actions(function (Grid\Displayers\Actions $actions) {
                $actions->append(new OrderDetail());
            });
            $grid->column('id')->sortable();
            ...
        });
}

class OrderDetail extends RowAction
{
    /**
     * @return string
     */
    protected $title = '<a><i class="feather icon-file-text">&nbsp;订单详情</i></a>&nbsp;';

    public function render()
    {
        return Modal::make()
            ->lg()
            ->title($this->title)
            ->body(\App\Admin\Renderable\OrderDetail::make(['id' => $this->getKey()]))
            ->button($this->title);
    }
<?php
/**
 * FileName: OrderDetail.php
 * Author: WongZeeWing
 * DateTime: 2023/9/15 15:22
 * ProductName: PhpStorm
 */

namespace App\Admin\Renderable;

use App\Admin\Controllers\OrderController;
use App\Admin\Controllers\OrderInfoController;
use App\Models\OrderInfo;
use Dcat\Admin\Support\LazyRenderable;
use Dcat\Admin\Widgets\Tab;

class OrderDetail extends LazyRenderable
{
    public function render()
    {
        $tab = Tab::make();

        $id = $this->payload['id'] ?? null;

        $order_info_id = OrderInfo::where('order_id', $id)->value('id');
        $tab->add('订单信息', OrderController::detailShow($id), true);
        $tab->add('更多信息', OrderInfoController::orderInfo($order_info_id));
        $tab->add('服务人员信息', OrderInfoController::serviceInfo($order_info_id));
        return $tab->withCard();
    }
}
    public static function detailShow($id)
    {
        return Show::make($id, new Order(['...']), function (Show $show) use ($id) {
            $show->tools(Helper::generateToolAction($tools));

            $show->field('id');
            ...

Laravel

1年前 评论
deMemory 1年前
wongzeewing (作者) 1年前
deMemory 1年前
Lmt 1个月前
daleboy 1个月前

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