wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

后台订单列表筛选

This commit is contained in:
pushuo 2022-08-24 08:51:45 +08:00
parent ca0320253d
commit e7017fa8b9
1 changed files with 91 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
resources/beike/admin/views/pages/orders/index.blade.php
View File

@ -5,6 +5,44 @@
@section('content')
<div id="customer-app" class="card">
<div class="card-body">
<div class="bg-light p-4 mb-3" id="app">
<el-form :inline="true" :model="filter" class="demo-form-inline" label-width="100px">
<div>
<el-form-item label="订单号">
<el-input v-model="filter.number" size="small" placeholder="订单号"></el-input>
</el-form-item>
<el-form-item label="客户姓名">
<el-input v-model="filter.customer_name" size="small" placeholder="客户姓名"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="filter.email" size="small" placeholder="邮箱"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="filter.telephone" size="small" placeholder="电话"></el-input>
</el-form-item>
</div>
<el-form-item label="订单日期">
<el-form-item>
<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" size="small"
placeholder="选择日期" v-model="filter.start" style="width: 100%;"></el-date-picker>
</el-form-item>
<span>-</span>
<el-form-item>
<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" size="small"
placeholder="选择日期" v-model="filter.end" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-form-item>
</el-form>
<div class="row">
<label class="wp-100"></label>
<div class="col-auto">
<button type="button" @click="search" class="btn btn-outline-primary btn-sm">筛选</button>
<button type="button" @click="exportOrder" class="btn btn-outline-primary btn-sm ms-1">导出</button>
<button type="button" @click="resetSearch" class="btn btn-outline-secondary btn-sm ms-1">重置</button>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
@ -30,7 +68,8 @@
<td>{{ $order->total }}</td>
<td>{{ $order->created_at }}</td>
<td>{{ $order->updated_at }}</td>
<td><a href="{{ admin_route('orders.show', [$order->id]) }}" class="btn btn-outline-secondary btn-sm">查看</a></td>
<td><a href="{{ admin_route('orders.show', [$order->id]) }}" class="btn btn-outline-secondary btn-sm">查看</a>
</td>
</tr>
@endforeach
</tbody>
@ -43,6 +82,57 @@
@push('footer')
<script>
new Vue({
el: '#app',
data: {
url: @json(admin_route('orders.index')),
exportUrl: @json(admin_route('orders.index')),
filter: {
number: bk.getQueryString('number'),
customer_name: bk.getQueryString('customer_name'),
email: bk.getQueryString('email'),
telephone: bk.getQueryString('telephone'),
start: bk.getQueryString('start'),
end: bk.getQueryString('end'),
},
},
computed: {
query() {
let query = '';
const filter = Object.keys(this.filter)
.filter(key => this.filter[key])
.map(key => key + '=' + this.filter[key])
.join('&');
const page = bk.getQueryString('page');
if (page) {
query += '?page=' + page;
}
if (filter) {
query += (page ? '&' : '?') + filter;
}
return query;
}
},
methods: {
search() {
location = this.url + this.query
},
resetSearch() {
Object.keys(this.filter).forEach(key => this.filter[key] = '')
location = this.url + this.query
},
exportOrder() {
location = this.exportUrl + this.query
},
}
});
</script>
@endpush