使用 Slow Admin 構建較複雜的頁面

Slowlyo發表於2022-08-26

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 協議》，轉載必須註明作者和本文連結
海到無涯天作案，山登絕頂我為峰

相關文章