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

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的内容

    

        

            @if($icon)
            

                

                    
                
            
            @endif

            @if($title)
                
{!! $title !!}
            @endif

            
{!! $header !!}
        

        @if (! empty($subTitle))
            
                {{ $subTitle }}
            
        @endif

        @if(! empty($dropdown))
        

            
                {{ current($dropdown) }}
            
            

                @foreach($dropdown as $key => $value)
                
{{ $value }}
                @endforeach
            
        
        @endif

        @if(! empty($datepicker))
        

            

                

                    

                         
                            
                        
                        
                    
                
                

                    

                         
                            
                        
                        
                    
                
                

                    
                        查询
                    
                
            
        
        @endif

    

    
{!! $content !!}

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( <<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"
]