? OwlAdmin : 看看在後端構建頁面有多簡單~

先看一段程式碼, 對 OwlAdmin 有一點點印象

以下這段程式碼就構建了一個完整的 crud 列表:

public function list()
{
    $crud = $this->baseCRUD()
        // 頭部工具欄
        ->headerToolbar([
            // 新增按鈕, 傳入 true 則為彈窗模式表單
            $this->createButton(true),
            // 其餘的操作, 包含批次操作/重新整理/篩選按鈕
            ...$this->baseHeaderToolBar(),
        ])
        ->filter(
            // 此處為篩選的表單
            $this->baseFilter()->body([
                // 一個基礎的 input 用來搜尋名稱
                TextControl::make()->name('title')->label('名稱')->size('md'),
                // 封裝的元件, 一個包含 啟用/禁用 的下拉選單
                Components::make()->enabledFilter(),
            ])
        )
        ->columns([
            // 這裡設定了表格的列資訊
            TableColumn::make()->name('id')->label('ID'),
            TableColumn::make()->name('title')->label('名稱'),
            TableColumn::make()->name('image')->label('圖片')->type('image')->enlargeAble(true),
            TableColumn::make()->name('sort')->label('排序')->sortable(true),
            // 同理, 封裝用於將 1/0 回顯為文字
            Components::make()->enabledTableColumn(),
            TableColumn::make()->name('created_at')->label('建立時間')->type('datetime')->sortable(true),
            // 行操作, 包含 詳情/編輯/刪除
            $this->rowActions(true),
        ]);

    return $this->baseList($crud);
}

示例一 : 對 enabled 欄位的封裝

對於常用的頁面元素, 可以提取為 function 在需要的地方粘粘粘就完了~

// 在表單中使用
public function enabledForm()
{
    return SwitchControl::make()->name('enabled')->label('是否啟用')->value(EnabledDefine::STATUS_ENABLED);
}

// 在篩選表單中使用
public function enabledFilter()
{
    return SelectControl::make()
        ->name('enabled')
        ->label('是否啟用')
        ->size('md')
        ->clearable(true)
        ->options(EnabledDefine::STATUS);
}

// 在列表/詳情中皆可按以上形式封裝
// 我將這些方法封裝在了 Components 中, 使用方式如下:
Components::make()->enabledForm();
Components::make()->enabledFilter();

示例二 : 在列表工具欄中新增一個彈窗表單, 儲存設定項

第一步: 建立一個彈窗表單

public function setting()
{
    // 最外層為按鈕的結構, 按鈕的文字, 樣式
    return amisMake()->DialogAction()->label('額度設定')->level('success')->dialog(
        // 彈窗的結構
        amisMake()->Dialog()->title('額度設定')->body(
            // Form 結構
            amisMake()->Form()->mode('horizontal')
                ->initApi(admin_url('xxx/get_setting')) // 初始化資料
                ->api(admin_url('xxx/save_setting'))    // 提交資料
                ->body([
                    $this->limitNumberControl('am_limit', '上午限額'),
                    $this->limitNumberControl('pm_limit', '下午限額'),
                ])
        )
    );
}

// 兩個相同的元件提取為方法
private function limitNumberControl($name, $label)
{
    return NumberControl::make()
        ->name($name)                  // 欄位名
        ->label($label)                // 標籤名
        ->displayMode('enhance')       // 設定為增強模式(左右有 +/- 按鈕)
        ->min(0)                       // 最小值
        ->max(999999)                  // 最大值
        ->value(0)                     // 預設值
        ->required(true);              // 必填
}

第二步: 新增到列表的工具欄中

// 將 setting() 新增到 crud 的 headerToolbar 方法中即可
// ...
->headerToolbar([
    $this->setting(),
    // ...
])

其他示例 : 框架內建的匯出按鈕的封裝

與示例二中的新增彈窗表單類似, 可以在 headerToolbar 中新增 exportAction() , 來為列表增加匯出按鈕
裡面封裝了一個下拉按鈕, 包含三種匯出型別 全部/本頁/選中項
邏輯與 示例二 一致, 只是封裝上覆雜了億點點, 多了一點 js 的操作

有興趣的同學可自行參閱 -> 原始碼

包括框架內的 rowAction() baseCRUD() baseFilter() baseForm() 等一系列的方法, 都是封裝元件的一種體現

• 對於元件 : 你想咋封裝就咋封裝, 內建 198 個class , 給你良好的編輯體驗

• 對於框架 : 幾乎所有的方法你都可以重寫來更改邏輯~

  “因為我們生來就是自由的~ 塔塔開~”

本作品採用《CC 協議》，轉載必須註明作者和本文連結