laravel后台列表搜索功能

在后台模板页面位置新建文件夹component

引入文件

第一个:search_data.blade.php这是搜索日期

{{--
    日期搜索组件
    合适的文档中 @include('component.search_date')
    JS开始位置  @yield("date_search") (script标签外)
--}}
<div class="col-xs-3 col-lg-2">
    <div class="form-group">
        <label for="start-at">起始日期：</label>
        <div class="input-group date">
            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
            <input class="form-control" name="start_at" id="start-at" value="{{ $start_at or '' }}">
        </div>
    </div>
</div>

<div class="col-xs-3 col-lg-2">
    <div class="form-group">
        <label for="end-at">结束日期：</label>
        <div class="input-group date">
            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
            <input class="form-control" name="end_at" id="end-at" value="{{ $end_at or '' }}">
        </div>
    </div>
</div>

<div class="col-xs-3 col-lg-2">
    <div class="form-group">
        <label for="range">快捷区间：</label>
        <select class="form-control" name="range" id="quick-search"
                v-on:focus="clearValue" v-on:change="changeData" v-model="range">
            <option v-for="(option,key) in options" v-cloak v-bind:value="key">
                @{{ option.text }}
            </option>
        </select>
    </div>
</div>


@section('date_search')
    <script src="/js/moment.min.js"></script>
    <script>
        $(document).on("click", ".datepicker-days .today", function () {
            $date = $(window.currentDatePicker);
            if ($date.length) {
                $date.datepicker("setDate", new Date());
                $date.datepicker("hide").blur();
                $date.find("input").blur();
            }
        });

        var quickSearch = new Vue({
            el: '#quick-search',
            created: function () {
                var _this = this;
                $('.date').datepicker({
                    autoclose: true,
                    clearBtn: true,
                    todayBtn: true,
                }).on("show", function (ev) {
                    currentDatePicker = ev.target;
                }).on("changeDate", function (ev){
                    _this.range = "";
                });

                this.options = {
                    'last_seven_days': {"text": '近七天', "startAt": this.AWeekAgo, "endAt": this.yesterday},
                    'this_week': {"text": '本周', "startAt": this.thisMonday, "endAt": this.today},
                    'last_week': {"text": '上周', "startAt": this.lastMonday, "endAt": this.lastSunday},
                    'this_month': {"text": '本月', "startAt": this.firstDayOfThisMonth, "endAt": this.today},
                    'last_month': {"text": '上月', "startAt": this.firstDayOfLastMonth, "endAt": this.lastDayOfLastMonth},
                    'last_three_month': {"text": '近三月', "startAt": this.threeMonthAgo, "endAt": this.yesterday},
                };

                $.each(this.options, function (key, option) {
                    if (option.startAt === _this.startAt && option.endAt === _this.endAt) {
                        _this.range = key;
                    }
                });
            },
            data: {
                range: getQueryString("range"),
                startAt: getQueryString("start_at"),
                endAt: getQueryString("end_at"),
                options: "",

                today: moment().format("YYYY-MM-DD"), // 今天
                yesterday: moment().subtract(1, "days").format("YYYY-MM-DD"), // 昨天
                AWeekAgo: moment().subtract(1, "week").format("YYYY-MM-DD"),   // 六天前 包括今天为近一周
                thisMonday: moment().weekday(1).format("YYYY-MM-DD"),           // 这周一
                lastMonday: moment().weekday(-6).format("YYYY-MM-DD"),          // 上周一
                lastSunday: moment().weekday(0).format("YYYY-MM-DD"),           // 上周日
                firstDayOfThisMonth: moment().date(1).format("YYYY-MM-DD"),     // 本月第一天
                firstDayOfLastMonth: moment().date(1).subtract(1, "months").format("YYYY-MM-DD"),//本月最后一天
                lastDayOfLastMonth: moment().date(0).format("YYYY-MM-DD"),      // 上个月最后一天
                threeMonthAgo: moment().subtract(3, "months").format("YYYY-MM-DD"),    //三月前第一天
            },
            methods: {
                changeData: function (e) {
                    e.target.blur(); // 失去焦点 解决select重复点击同一个option不会触发onchange事件的问题
                    var option = e.target.value;
                    this.startAt = this.options[option].startAt;
                    this.endAt = this.options[option].endAt;
                    $("#start-at").val(this.startAt);
                    $("#end-at").val(this.endAt);
                },
                clearValue: function (e) {
                    e.target.selectedIndex = -1; // 点击时改变值 解决select重复点击同一个option不会触发onchange事件的问题
                }
            }
        })
    </script>
@endsection

第二个:search_form.blade.php

{{--
    搜索组件
    合适的文档中 @include('component.search_form')
--}}

<form action=""  method="get" class="form" @if(isset($search)) name="search_action" @endif>
    <div class="row">
        @foreach($search_items as $search_item => $search_params)
            <?php
            $_type = $search_params['type'] ?? 'equal';
            $_form = $search_params['form'] ?? 'text';
            $_label = $search_params['label'] ?? '';
            $_options = ($_form === 'select') ? $search_params['options'] : [];
            ?>
            @if($_type === 'date')
                @include('component.search_date')
            @elseif($_form === 'select')
                @include('component.search_select', ['item'=>$search_item,'label'=>$_label,'options'=>$_options])
            @else
                @include('component.search_text', ['item'=>$search_item,'label'=>$_label])
            @endif
        @endforeach
    </div>


    <div class="row">
        <div class="col-xs-12">
            <button class="pretty-btn pull-left" >搜索</button>
            <a href="{{ url()->current() }}" class="pretty-btn">重置</a>
            @if(isset($export))
                <button name="export" value="export" class="pretty-btn pull-left">
                    <i class="fa fa-share-square-o"></i>导出
                </button>
            @endif
        </div>
    </div>



</form>

第三个:search_select.blade.php

{{--
    下拉选择组件
    合适的文档中 @include('component.search_select')
--}}
<div class="col-xs-3 col-lg-2">
    <div class="form-group">
        <label for="{{$item}}">{{$label}}：</label>
        <select class="form-control" name="{{$item}}" id="{{$item}}">
            <option value="">全部</option>
            @foreach($options as $value => $label)
                <option value="{{ $value }}" @if( isset($$item) && (intval($$item ?? "") === $value)) selected @endif >
                    {{ $label }}
                </option>
            @endforeach
        </select>
    </div>
</div>

第四个:search_text.blade.php

{{--
    文本组件
    合适的文档中 @include('component.search_text')
--}}
<div class="col-xs-3 col-lg-2">
    <div class="form-group">
        <label for="{{$item}}">{{$label}}：</label>
        <input class="form-control" name="{{$item}}" id="{{$item}}" value="{{ $$item or '' }}">
    </div>
</div>

然后在控制器的列表页进行配置:($search存放的就是要搜索的字段)

public function  index(){
        $search_items = [
            'name' => [
                'type' => 'like',
                'form' => 'text',
                'label' => '姓名',
            ],
            'mobile' => [
                'type' => 'like',
                'form' => 'text',
                'label' => '手机号',
            ],
            'created_at' => [
                'type' => 'date',
            ],
        ];
        $datas = Merchant::latest()
                ->search($search_items)
                ->paginate();
        return view('admin.merchant.index',compact('datas'));
    }

在后台页面模板进行配置:

这是搜索功能:

<div class="box-body">
            @include('component.search_form')
        </div>

分页功能:

        <div class="text-center">{{ links_custom($datas, $search_items) }}</div>

laravel后台列表搜索功能

猜你喜欢