使用 Slow Admin 构建较复杂的页面

Slow Admin 可以方便且快速地构建出你想要的页面, 以下使用本人开发的一个工具页面举例

效果

实现代码

整体布局

    public function index()
    {
        $page = $this->basePage()->css($this->style())->body([
            // 使用 Grid2d 组件布局页面
            Grid2d::make()->gap(15)->grids([
                // 日历部分
                Wrapper::make()->size('none')->body($this->calendar())->x(1)->y(1)->w(7),
                // 右侧表单部分
                Wrapper::make()->size('none')->body([
                    $this->form(),
                    $this->generator(),
                ])->x(8)->y(1),
            ]),
        ]);

        return $this->response()->success($page);
    }

日历组件部分

    public function calendar()
    {
        $calendar = Calendar::make()->largeMode(true)->schedules('${calendarData}')->scheduleAction(
            // 此处重写了日历组件原有的点击弹窗内容
            Component::make()->actionType('dialog')->dialog(
                Component::make()->setType('dialog')->body(
                    Table::make()->columns([
                        ['name' => 'project', 'label' => '项目'],
                        ['name' => 'showDate', 'label' => '日期'],
                        ['name' => 'content', 'label' => '内容'],
                    ])->data('${scheduleData}')
                )->actions([])->title('')->size('lg')->closeOnEsc(true)
            )
        )->onEvent([
            // calendar 组件的 change 事件, 触发后将选择的日期赋值给 日期 字段
            'change' => [
                'actions' => [
                    'actionType'  => 'setValue',
                    'componentId' => 'create_form',
                    'args'        => [
                        'value' => [
                            'currentDate' => '${event.data.value}',
                        ],
                    ],
                ],
            ],
        ]);

        // 使用 Service 组件, 实现表单提交后刷新 calendar 数据
        // api() 为获取数据 api 地址
        return Service::make()->api(admin_url('task_logs/calendar'))->body($calendar)->id('calendar_service');
    }

右上表单

    public function form()
    {
        return $this->baseForm()
            // 设置 form 的组件 id, 为了让 calendar 的 change 事件能找到目标
            ->id('create_form')
            // 表单提交路径
            ->api($this->getStorePath())
            // 表单数据域
            ->data([
                'currentDate' => today()->timestamp,
            ])->body([
                Select::make()->name('project')->label('项目')->options(ProjectService::make()->getOptions()),
                InputDate::make()->name('date')->label('日期')->value('${currentDate}'),
                Textarea::make()->name('content')->label('内容')->minRows(10),
            ])->onEvent([
                // 表单提交成功事件, 刷新 calendar 外层的 Service, 重新获取日历数据
                'submitSucc' => [
                    'actions' => [
                        'actionType'  => 'reload',
                        'componentId' => 'calendar_service',
                    ],
                ],
            ]);
    }

右下表单

    public function generator()
    {
        // 给 title 和 actions 赋空值, 隐藏原有的 form 标题和提交按钮
        return Form::make()->title('')->actions([])->api(admin_url('task_logs/generate'))->body([
            // 布局
            Flex::make()->alignItems('center')->justify('space-between')->items([
                InputDateRange::make()->name('date_range')->size('full')->required(true),
                // 添加一个行为按钮, 实现提交功能
                Action::make()
                    ->className('ml-3 mb-6')
                    ->label('生成')
                    ->level('success')
                    ->actionType('submit'),
            ]),
            // 用来显示 form 提交后返回的内容
            Textarea::make()->name('content')->minRows(14)->className('my-3'),
        ]);
    }

🌵 完整代码

本作品采用《CC 协议》，转载必须注明作者和本文链接