Dcat Admin v1.2.0 釋出 - 對後端開發者友好的高顏值後臺系統構建工具，增加編輯器以及新的主題配色

Jiangqh發表於2020-04-27

Dcat Admin是一個基於laravel-admin二次開發而成的後臺系統構建工具，只需很少的程式碼即可快速構建出一個功能完善的高顏值後臺系統。內建豐富的後臺常用元件，開箱即用，讓開發者告別冗雜的HTML程式碼，對後端開發者非常友好。

線上演示站點 | LearnKu官方文件 | Github主頁(如果喜歡這個專案不妨點個star，感謝支援！)

v1.2.0更新內容

功能新增以及優化部分

1.整合editor-md作為內建markdown編輯器，並支援圖片上傳功能

使用

$form->markdown('content')->disk('oss');

效果

2.表格過濾搜尋增加panel佈局方式

目前系統內建兩種過濾器的佈局方式，預設的是rightSide(右側滑動皮膚)佈局，在這個版本中通過以下方式可以切換過濾器的佈局方式

use Dcat\Admin\Grid;

$grid->filter(function (Grid\Filter $filter) {

    // 更改為 panel 佈局

    $filter->panel();

    // 注意切換為panel佈局方式時需要重新調整表單欄位的寬度

    $filter->equal('id')->width(3);

});

3.優化資料表格邊框模式

這個版本中優化了表格的邊框模式，即使是非組合表頭也可以使用邊框模式

$grid->withBorder();

4.工具表單增加buildSuccessScript方法

工具表單自定義類中可以通過buildSuccessScript和buildErrorScript方法控制表單儲存之後的行為，比如可以在表單儲存成功之後進行列印小票等操作。

<?php

namespace App\Admin\Forms;

use Dcat\Admin\Widgets\Form;
use Symfony\Component\HttpFoundation\Response;

class Setting extends Form
{
    // 處理請求
    public function handle(array $input)
    {
        // dump($input);

        // return $this->error('Your error message.');

        return $this->success('Processed successfully.', '/');
    }

    // 構建表單
    public function form()
    {
        $this->text('name')->required();
        $this->email('email')->rules('email');
    }

    // 設定表單儲存成功後執行的JS
    protected function buildSuccessScript()
    {
        return <<<JS
        // data 為介面返回資料
        if (! data.status) {
            Dcat.error(data.message);

            return false;
        }

        Dcat.success(data.message);

        if (data.redirect) {
            Dcat.reload(data.redirect)
        }

        // 中斷後續邏輯（預設邏輯）
        return false;
JS;
    }

    // 設定表單儲存失敗後執行的JS
    protected function buildErrorScript()
    {
        return <<<JS
        var errorData = JSON.parse(response.responseText);

        if (errorData) {
            Dcat.error(errorData.message);
        } else {
            console.log('提交出錯', response.responseText);
        }

        // 中斷後續邏輯執行（預設邏輯）
        return false;
JS;
    }
}