【Laravel】Laravel-admin後臺框架-2創建數據表建立模塊增刪改查CURD(2)

前言

前面的操作我們已經能夠

• 安裝Laravel-admin
• 創建數據表並生成模型
• 修改模型實現按業務寫入數據

可以參考之前的文章

【Laravel】Laravel-admin後臺框架-2創建數據表建立模塊增刪改查CURD(1)

【Laravel】Laravel-admin後臺框架-1安裝

實戰

對於一個基本的模塊，還有需要完成如下功能

• 自定義列表，格式化輸出內容
• 列表篩選字段以及規則
• 列表文本以及對應的按鈕
• 查看頁面的格式化輸出

列表頁展示

目前的列表頁面是這樣的

很顯然，日期和評分展示的內容是有問題的

對於數據的展示，優先修改模型

model中有個$casts，被稱爲屬性類型轉換，當你去訪問屬性的時候，就會默認轉換成對應的類型。

	protected $casts = [
		'created_at' => 'datetime:Y-m-d H:i:s',
		'updated_at' => 'datetime:Y-m-d H:i:s',
	];

展示列

RecordController繼承了 AdminController，AdminController內的index如下

    /**
     * Index interface.
     *
     * @param Content $content
     *
     * @return Content
     */
    public function index(Content $content)
    {
        return $content
            ->title($this->title())
            ->description($this->description['index'] ?? trans('admin.list'))
            ->body($this->grid());
    }

他的body對應的是$this->grid(),所以，我們默認是在修改,自定義本頁佈局的grid，下面是默認的寫法。

    /**
     * Make a grid builder.
     *
     * @return Grid
     */
    protected function grid()
    {
        $grid = new Grid(new FitRecord());

        $grid->column('id', __('Id'));
        $grid->column('user_name', __('User name'));
        $grid->column('admin_id', __('Admin id'));
        $grid->column('class_time', __('Class time'));
        $grid->column('star', __('Star'));
        $grid->column('date', __('Date'));
        $grid->column('remark', __('Remark'));
        $grid->column('created_at', __('Created at'));
        $grid->column('updated_at', __('Updated at'));

        return $grid;
    }

修改之後效果如下

對應代碼如下

RecordController

    /**
     * Make a grid builder.
     *
     * @return Grid
     */
    protected function grid()
    {
        $grid = new Grid(new FitRecord());
        $grid->expandFilter();
        $grid->filter(function($filter){
            $filter->column(1/2, function ($filter) {
                $filter->like('user_name',FitRecord::$label['user_name']);
                $filter->equal('star', FitRecord::$label['star'])->integer();
            });
            $filter->column(1/2, function ($filter) {

                $filter->date('date', FitRecord::$label['date']);
                $filter->between('class_time', FitRecord::$label['class_time'])->time();
            });
        });
        $grid->column('id', FitRecord::$label['id']);
        $grid->column('user_name',FitRecord::$label['user_name'])->editable();
        $grid->column('class_time',FitRecord::$label['class_time'])->sortable();
        $grid->column('star',FitRecord::$label['star'])->display(function ($star) {
            $html = "<i class='fa fa-star' style='color:#ff8913'></i>";

            if ($star < 1) {
                return '';
            }

            return join('&nbsp;', array_fill(0, min(5, $star), $html));
        });
        $grid->column('date',FitRecord::$label['date'])->sortable();
        $grid->column('created_at', FitRecord::$label['created_at']);
        $grid->column('updated_at', FitRecord::$label['updated_at']);

        $grid->disableExport();
        $grid->disableColumnSelector();

        $grid->footer(function ($query) {
            $starAvg = $query->avg('star');
            return "<div style='padding: 10px;'>平均評分 ： $starAvg</div>";
        });

        return $grid;
    }

FitRecord

namespace App\Models;

use Carbon\Carbon;
use Encore\Admin\Admin;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Auth;

/**
 * Class FitRecord
 *
 * @property int $id
 * @property string $user_name
 * @property int $admin_id
 * @property Carbon $class_time
 * @property bool $star
 * @property Carbon $date 日期
 * @property string $remark 備註
 * @property int $created_at
 * @property int $updated_at
 *
 * @package App\Models
 */
class FitRecord extends Model
{
	protected $table = 'fit_record';

	protected $casts = [
		'admin_id' => 'int',
		'star' => 'int',
		'created_at' => 'datetime:Y-m-d H:i:s',
		'updated_at' => 'datetime:Y-m-d H:i:s',
	];

	protected $fillable = [
		'user_name',
		'admin_id',
		'class_time',
		'star',
		'date',
		'remark'
	];

	public static $label = [
	    'id'=>'id',
	    'user_name'=>'用戶名',
        'star'=>'評分',
        'admin_id'=>'管理員',
        'date'=>'日期',
        'class_time'=>'開始時間',
        'remark'=>'備註',
        'created_at' => '創建時間',
        'updated_at' => '修改時間'
    ];


	public function __construct(array $attributes = [])
    {
        if($this->id == null){
            $this->admin_id = \Encore\Admin\Facades\Admin::user()->id; //初始化管理員id
        }
        parent::__construct($attributes);
    }
}

詳情頁面

上面的修改例子並沒有重寫對應的控制器方法，所以修改樣式只能在grid()內部進行調整，對於詳情頁面，我們可以通過重寫show方法的方式自己定義佈局，達到自定義展示內容的目的。

沒改之前的樣式如下

重寫show

    /**
     * 重寫展示詳情的方法
     * @param mixed $id
     * @param Content $content
     * @return Content
     */
    public function show($id, Content $content)
    {
        $box = new Box('Box標題', 'Box內容');
        $box->removable();
        $box->collapsable();
        $box->style('info');
        $box->solid();
        $box->scrollable();
        $collapse = new Collapse();
        $collapse->add('Bar', 'xxxxx');
        $collapse->add('Orders', 'aaaaa');
        $content->breadcrumb(
            ['text' => '記錄管理', 'url' => '/admin/record'],
            ['text' => '編輯記錄']
        );
        $content->row(function (Row $row)use ($box ,$collapse) {

            $row->column(6, $box);

            $row->column(6, function (Column $column) use ($collapse) {
                $column->row($collapse->render());
                $column->row('222');
            });
        });
        $content ->title($this->title())
            ->description($this->description['show'] ?? trans('admin.show'))
            ->body($this->detail($id));
        $content->row(function (Row $row)use ($box ,$collapse) {
            $row->column(2, $box);
            $row->column(10, function (Column $column) use ($collapse) {
                $column->row($collapse->render());
                $column->row('3333');
            });
        });
        return $content;
    }

    /**
     * 詳情組件
     * @param $id
     * @return Show
     */
    protected function detail($id)
    {
        $show = new Show(FitRecord::findOrFail($id));

        $show->field('id', FitRecord::$label['id']);
        $show->field('user_name', FitRecord::$label['user_name']);
        $show->field('class_time', FitRecord::$label['class_time']);
        $show->field('star', FitRecord::$label['star'])->unescape()->as(function ($star) {
            $html = "<i class='fa fa-star' style='color:#ff8913'></i>";
            if ($star < 1) {
                return '';
            }
            return join('&nbsp;', array_fill(0, min(5, $star), $html));
        });
        $show->field('date', FitRecord::$label['date']);
        $show->field('remark', FitRecord::$label['remark']);
        $show->field('created_at', FitRecord::$label['created_at']);
        $show->field('updated_at', FitRecord::$label['updated_at']);
        $show->panel()
            ->tools(function ($tools) {
                $tools->disableEdit();
            });;

        return $show;
    }

自定義的頁面如下，我們可以自由定義樣式的排列，滿足業務的需求。

總結

這樣簡單的CURD就可以快速實現了，還有一些工作需要做。

• 權限相關
• 自定義菜單
• 二級業務的模型關聯

參考資料

• https://laravel-admin.org/docs/zh/model-grid-filters
• https://laravel-admin.org/docs/zh/data-form
• https://laravel-admin.org/docs/zh/content-layout