在后台模板页面位置新建文件夹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>