PHP Dcat-admin 统计卡片 指定日期查询 日期选择器

背景，统计卡片只能是下拉框如图1，需求想要制定日期范围查询，查了一圈都没有，只能自己改个组件

图1.png

开搞！

1、先要修改掉视图文件，原视图文件在 vendor/dcat/laravel-admin/resources/views/widgets/metrics/card.blade.php；
新建了一个本地视图resources/views/widgets/metrics/card.blade.php；增加了.datepicker的内容

<div {!! $attributes !!}>
    <div class="card-header d-flex justify-content-between align-items-start pb-0">
        <div>
            @if($icon)
            <div class="avatar bg-rgba-{{ $style }} p-50 m-0">
                <div class="avatar-content">
                    <i class="{{ $icon }} text-{{ $style }} font-medium-5"></i>
                </div>
            </div>
            @endif

            @if($title)
                <h4 class="card-title mb-1">{!! $title !!}</h4>
            @endif

            <div class="metric-header">{!! $header !!}</div>
        </div>

        @if (! empty($subTitle))
            <span class="btn btn-sm bg-light shadow-0 p-0">
                {{ $subTitle }}
            </span>
        @endif

        @if(! empty($dropdown))
        <div class="dropdown chart-dropdown">
            <button class="btn btn-sm btn-light shadow-0 dropdown-toggle p-0 waves-effect" data-toggle="dropdown">
                {{ current($dropdown) }}
            </button>
            <div class="dropdown-menu dropdown-menu-right">
                @foreach($dropdown as $key => $value)
                <li class="dropdown-item"><a href="javascript:void(0)" class="select-option" data-option="{{ $key }}">{{ $value }}</a></li>
                @endforeach
            </div>
        </div>
        @endif

        @if(! empty($datepicker))
        <div class="col-md-7 datepicker">
            <div class="row">
                <div class="col-lg-5 pl-0">
                    <div class="input-group">
                         <span class="input-group-prepend">
                            <span class="input-group-text bg-white"><i class="feather icon-calendar"></i></span>
                        </span>
                        <input autocomplete="off" type="text" name="started" value="{{ $datepicker['start'] }}" class="form-control field_started" required="1" id="asdsss">
                    </div>
                </div>
                <div class="col-lg-5 pl-0">
                    <div class="input-group">
                         <span class="input-group-prepend">
                            <span class="input-group-text bg-white"><i class="feather icon-calendar"></i></span>
                        </span>
                        <input autocomplete="off" type="text" name="ended" value="{{ $datepicker['end'] }}" class="form-control field_ended" required="1" id="_35455a066a22a942">
                    </div>
                </div>
                <div class="col-lg-2 pl-0 pr-0">
                    <button class="btn btn-primary btn-outline-info" data-started="{{ $datepicker['start'] }}" data-ended="{{ $datepicker['end'] }}">
                        <span class="d-none d-sm-inline">查询</span>
                    </button>
                </div>
            </div>
        </div>
        @endif

    </div>

    <div class="metric-content">{!! $content !!}</div>
</div>

2、修改统计卡片默认调用的视图，如图，统计卡片类里增加

protected $view = "widgets.metrics.card";

图2.png 图3.png

3、写个Trait，引入静态文件和日期选择事件，DatepickerTrait.php

trait DatepickerTrait
{

    protected $id = '';

    /**
     * 引入
     * @param $formID
     * @return $this
     */
    public function datepicker($formID)
    {
        $this->id = $formID;

        $this->file();
        $this->script();
        return $this;
    }

    /**
     * 所需要的css js
     */
    protected function file()
    {
        admin_css('/vendor/dcat-admin/dcat/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css');
        admin_js('/vendor/dcat-admin/dcat/plugins/moment/moment-with-locales.min.js');
        admin_js('/vendor/dcat-admin/dcat/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js');
    }

    /**
     * 绑定时间选择器点击事件
     */
    protected function script()
    {
        admin_script( <<<JS
Dcat.init('#{$this->id} .datepicker .field_started', function (self, id) { var options = {"format":"YYYY-MM-DD","locale":"zh_CN"};
    var last = $('#{$this->id} .datepicker .field_ended');

    self.datetimepicker(options);
    last.datetimepicker($.extend(options, {useCurrent: false}));
    self.on("dp.change", function (e) {
        last.data("DateTimePicker").minDate(e.date);
        $("#{$this->id} .datepicker .btn-primary").data('started', $(this).val())
    });
    last.on("dp.change", function (e) {
        self.data("DateTimePicker").maxDate(e.date);
        $("#{$this->id} .datepicker .btn-primary").data('ended', $(this).val())
    });
 });
JS);
    }
}

4、引用trait

图4.png

5、在统计初始化的时候调用方法

/**
     * 初始化卡片内容
     */
    protected function init()
    {
        parent::init();

        $this->title('完成情况');
        $this->height(300);
//        $this->height(400);#放弃了脚部
        $this->chartHeight(240);
        $this->chartLabels('比对成功率');
        ......

        #日期选择开始
        $id = $this->id();
        $this->datepicker($id)
            ->click("#{$id} .datepicker .btn-primary")
            ->addVariables([
            'datepicker' => [
                'start' => date('Y-m-d', strtotime('-7 days')),
                'end' => date('Y-m-d', time()),
            ]
        ]);
        #日期选择结束
    }

6、效果

图5.png

打印结果

/**
     * 处理请求
     *
     * @param Request $request
     *
     * @return mixed|void
     */
    public function handle(Request $request)
    {
        dd($request->input());
        var_dump($request->get('started'));die;

        switch ($request->get('option')) {
            case '365':
            case '30':
            case '28':
            case '7':
            default:
                // 卡片内容
                $this->withContent(162);
                // 卡片底部
//                $this->withFooter(29, 63, '1d');
                // 图表数据
                $this->withChart(83);
        }

array:4 [
  "_key" => "App\Admin\Metrics\Home\Completion"
  "_token" => "YFEn3gJde4YWy6frX57JyoFbci7WSY6SIaTb2MW9"
  "ended" => "2022-08-01"
  "started" => "2022-07-25"
]