Dcat Admin 構建頁面佈局

辣粉and五斤發表於2021-09-26

Dcat Admin這個CMS後臺管理框架，是基於laravel-admin進行的二次開發。我之所以選擇它，主要一點也是被其豐富的元件吸引。畢竟現在身邊沒有能配合的前端。如果自己能把那些表單輕鬆搞定，實在是一件很開心的事。

Dcat 如果操作熟練後，每個模組建立完資料表以後，配套的CURD就已經建好了。搜尋都有了。PHP開發人員就可以輕鬆很多，把注意力放在其它地方了。

這是一篇學習總結筆記，用於日後自己的記憶喪失之時，我還能靠著它進行復習。
官方關於頁面佈局的手冊地址：開發前必讀《Dcat Admin 中文文件》

接下來是我自己的總結性筆記.

我現在的需求是這樣的，製作一個頁面，在最上面寫上一些提示資訊，單獨為一行。
下面的一行進行左右分欄。

Dcat Admin 構建頁面佈局

在Dcat框架中底層封裝了內容類檔案：

use Dcat\Admin\Layout\Content;

其中的body()方法可以設定頁面內容。在body()方法中，可以直接填寫字串。

public function index(Content $content){
   return $content->body("這是一個自定義頁面");
}

也可以放入匿名函式，從而進行頁面佈局。在做頁面佈局的時候，需要引入兩個類檔案。

use Dcat\Admin\Layout\Row;
use Dcat\Admin\Layout\Column;

下面是index類的完整程式碼：
public function index(Content $content){
       //$tab是選項卡的程式碼，先刪掉後面在貼上。

        return $content
                ->body(function(Row $row) use($tab){
                     $row->column(12,$this->showMessage());

                     $row->column(12,function(Column $column) use ($tab){
                        $column->row(function(Row $row) use($tab){
                            $row->column(6,$this->form());
                            $row->column(6,$tab->withCard());  
                        });
                     });
                });
    }

現在介紹程式碼：
在body()方法中傳入匿名函式，放置Row這個類作為引數。Dcat框架採用了 bootstrap 的柵格系統，每行的長度是 12。

//這種寫法是定義了一個列，它的長度為12，就代表佔滿了螢幕，引數2的 showMessage 返回了一些html字串。
$row->column(12,$this->showMessage());

接下來的程式碼，要設定左右分欄，所以先做了一個大的外框，可以把它理解成iframe標籤。

$row->column(12,function(Column $column) use ($tab){

然後在用$column->row()設定一行

$column->row(function(Row $row) use($tab){

最後設定兩個子列，每個列佔用6個寬度。

$row->column(6,$this->form());
$row->column(6,$tab->withCard());

左右分欄的完整程式碼：

$row->column(12,function(Column $column) use ($tab){
      $column->row(function(Row $row) use($tab){
           $row->column(6,$this->form());
           $row->column(6,$tab->withCard());  
       });
});

注意先是$row->column(), 如果要在內部繼續巢狀佈局時，就要轉換成$column->row()先設定一行，然後在用$row->column()做列。東西理解後就不難，但發現總結成筆記，這塊就好繞口。哈哈。

手冊裡，到是這樣來介紹。
Dcat Admin 構建頁面佈局

#製作Tab選項卡

框架還供了多種頁面元件，比如Tab選項卡
使用前需要引入這個Tab類檔案

use Dcat\Admin\Widgets\Tab;

然後按照下面的程式碼，例項化Tab類為物件，通過add()方法設定選項卡的內容。
引數1：是選項卡的名字
引數2：是要顯示的內容
引數3：true代表預設選中狀態

public function index(Content $content){

        $tab = Tab::make();
        $tab->add('未執行',$this->grid(), true);
        $tab->add('已執行',$this->executeTable());
 最後呼叫$tab->withCard() 方法就會顯示出選項卡了

完整程式碼如下：這塊我又把佈局換成了三行1列的形式。

 public function index(Content $content){

        $tab = Tab::make();
        $tab->add('未執行',$this->grid(), true);
        $tab->add('已執行',$this->executeTable());

        return $content
                ->translation($this->translation())
                ->title("批量匯入資料")
                ->description($this->description()['index'] ?? trans('admin.list'))
                ->body(function(Row $row) use($tab){
                     $row->column(12,$this->showMessage());

                     $row->column(12,$this->form());
                     $row->column(12,$tab->withCard());  
                });
    }

效果圖：

Dcat Admin 構建頁面佈局

目前我的計劃是，使用Dcat做一個資料統計分析後臺，然後用Elasticsearch做搜尋引擎+大資料分析。

如果本週內能運用熟練，估計開發進度會快很多。自己能搞定的，就不用做圖的了，哈哈。

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

相關文章