dcat 卡片 useChart與非同步表單不相容

白小二發表於2021-05-10
非同步

原始碼

<?php

namespace App\Admin\Metrics\Examples;

use Dcat\Admin\Widgets\Metrics\Card;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Http\Request;
use App\Admin\Metrics\Charts;
use Dcat\Admin\Widgets\Metrics\Line;
use Dcat\Admin\Admin;

class NewCard2 extends Card
{
    /**
     * 卡片底部內容.
     *
     * @var string|Renderable|\Closure
     */
    protected $footer;

    // 儲存自定義引數
    protected $data = [];

    // 構造方法引數必須設定預設值
    public function __construct(array $data = [])
    {
        $this->data = [];

        parent::__construct();
    }

    protected function init()
    {
        parent::init();

        // 設定標題
        $this->title('New Card');
        // 設定下拉選單
        $this->useChart();
        $this->dropdown([
            '7' => 'Last 7 Days',
            '28' => 'Last 28 Days',
            '30' => 'Last Month',
            '365' => 'Last Year',
        ]);
    }
    /**
     * 處理請求.
     *
     * @param Request $request
     *
     * @return void
     */
    public function handle(Request $request)
    {
        // 獲取外部傳遞的自定義引數
        $key1 = $request->get('key1');

        switch ($request->get('option')) {
            case '365':

                break;
            case '30':
                break;
            case '28':
                break;
            case '7':
            default:
                $this->content(mt_rand(0, 100));
                $this->up(mt_rand(0, 100)) . '%';
        }
    }

    // 傳遞自定義引數到 handle 方法
    public function parameters(): array
    {
        return $this->data;
    }

    /**
     * @param int $percent
     *
     * @return $this
     */
    public function up($percent)
    {
        return $this->footer(
            "<i class=\"feather icon-trending-up text-success\"></i> {$percent}% Increase"
        );
    }

    /**
     * @param int $percent
     *
     * @return $this
     */
    public function down($percent)
    {
        return $this->footer(
            "<i class=\"feather icon-trending-down text-danger\"></i> {$percent}% Decrease"
        );
    }

    /**
     * 設定卡片底部內容
     *
     * @param string|Renderable|\Closure $footer
     *
     * @return $this
     */
    public function footer($footer)
    {
        $this->footer = $footer;

        return $this;
    }

    /**
     * 渲染卡片內容.
     *
     * @return string
     */
    public function renderContent()
    {
        $content = parent::renderContent();
        $example =  view('widgets.ApexCharts.example');
        return <<<HTML
        {$content}
<div class="ml-1 mt-1 font-weight-bold text-80">
    {$this->renderFooter()}
</div>
HTML;
    }

    /**
     * @return string
     */
    public function renderFooter()
    {
        return $this->toString($this->footer);
    }
}

描述

去掉 $this->useChart() 可以觸發非同步表單

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

相關文章