订单列表页面完善
This commit is contained in:
zhh
parent
621d682c6c
commit
ca80a103dd
8
src/api/order.js
Normal file
8
src/api/order.js
Normal file
@ -0,0 +1,8 @@
|
||||
import request from '@/utils/request'
|
||||
export function fetchList(params) {
|
||||
return request({
|
||||
url:'/order/list',
|
||||
method:'get',
|
||||
params:params
|
||||
})
|
||||
}
|
||||
24
src/utils/date.js
Normal file
24
src/utils/date.js
Normal file
@ -0,0 +1,24 @@
|
||||
// date.js
|
||||
export function formatDate (date, fmt) {
|
||||
if (/(y+)/.test(fmt)) {
|
||||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
|
||||
}
|
||||
let o = {
|
||||
'M+': date.getMonth() + 1,
|
||||
'd+': date.getDate(),
|
||||
'h+': date.getHours(),
|
||||
'm+': date.getMinutes(),
|
||||
's+': date.getSeconds()
|
||||
};
|
||||
for (let k in o) {
|
||||
if (new RegExp(`(${k})`).test(fmt)) {
|
||||
let str = o[k] + '';
|
||||
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
|
||||
}
|
||||
}
|
||||
return fmt;
|
||||
}
|
||||
|
||||
function padLeftZero (str) {
|
||||
return ('00' + str).substr(str.length);
|
||||
}
|
||||
@ -7,11 +7,13 @@
|
||||
<el-button
|
||||
style="float:right"
|
||||
type="primary"
|
||||
@click="handleSearchList()"
|
||||
size="small">
|
||||
查询搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
style="float:right;margin-right: 15px"
|
||||
@click="handleResetSearch()"
|
||||
size="small">
|
||||
重置
|
||||
</el-button>
|
||||
@ -27,23 +29,137 @@
|
||||
<el-form-item label="提交时间：">
|
||||
<el-date-picker
|
||||
v-model="listQuery.createTime"
|
||||
value-format="timestamp"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单状态：">
|
||||
<el-select v-model="listQuery.status" placeholder="全部" clearable>
|
||||
<el-option v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单分类：">
|
||||
<el-select v-model="listQuery.orderType" placeholder="全部" clearable>
|
||||
<el-option v-for="item in orderTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单来源：">
|
||||
<el-select v-model="listQuery.sourceType" placeholder="全部" clearable>
|
||||
<el-option v-for="item in sourceTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="operate-container" shadow="never">
|
||||
|
||||
<i class="el-icon-tickets"></i>
|
||||
<span>数据列表</span>
|
||||
</el-card>
|
||||
<div class="table-container"></div>
|
||||
<div class="batch-operate-container"></div>
|
||||
<div class="pagination-container"></div>
|
||||
<div class="table-container">
|
||||
<el-table ref="orderTable"
|
||||
:data="list"
|
||||
style="width: 100%;"
|
||||
v-loading="listLoading" border>
|
||||
<el-table-column type="selection" width="60" align="center"></el-table-column>
|
||||
<el-table-column label="订单编号" width="180" align="center">
|
||||
<template slot-scope="scope">{{scope.row.orderSn}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="提交时间" width="180" align="center">
|
||||
<template slot-scope="scope">{{scope.row.createTime | formatCreateTime}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="用户账号" align="center">
|
||||
<template slot-scope="scope">{{scope.row.memberUsername}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单金额" width="120" align="center">
|
||||
<template slot-scope="scope">￥{{scope.row.totalAmount}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="支付方式" width="120" align="center">
|
||||
<template slot-scope="scope">{{scope.row.payType | formatPayType}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单来源" width="120" align="center">
|
||||
<template slot-scope="scope">{{scope.row.sourceType | formatSourceType}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单状态" width="120" align="center">
|
||||
<template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleViewOrder(scope.$index, scope.row)"
|
||||
>查看订单</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleCloseOrder(scope.$index, scope.row)"
|
||||
v-show="scope.row.status===0">关闭订单</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleDeliveryOrder(scope.$index, scope.row)"
|
||||
v-show="scope.row.status===1">订单发货</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleViewLogistics(scope.$index, scope.row)"
|
||||
v-show="scope.row.status===2||scope.row.status===3">订单跟踪</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDeleteOrder(scope.$index, scope.row)"
|
||||
v-show="scope.row.status===4">删除订单</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="batch-operate-container">
|
||||
<el-select
|
||||
size="small"
|
||||
v-model="operateType" placeholder="批量操作">
|
||||
<el-option
|
||||
v-for="item in operateOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-button
|
||||
style="margin-left: 20px"
|
||||
class="search-button"
|
||||
@click="handleBatchOperate()"
|
||||
type="primary"
|
||||
size="small">
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
layout="total, sizes,prev, pager, next,jumper"
|
||||
:current-page.sync="listQuery.pageNum"
|
||||
:page-size="listQuery.pageSize"
|
||||
:page-sizes="[5,10,15]"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {fetchList} from '@/api/order'
|
||||
import {formatDate} from '@/utils/date';
|
||||
|
||||
const defaultListQuery = {
|
||||
pageNum: 1,
|
||||
pageSize: 5,
|
||||
@ -57,7 +173,152 @@
|
||||
export default {
|
||||
name: "orderList",
|
||||
data() {
|
||||
return {listQuery: Object.assign({}, defaultListQuery)}
|
||||
return {
|
||||
listQuery: Object.assign({}, defaultListQuery),
|
||||
listLoading: true,
|
||||
list: null,
|
||||
total: null,
|
||||
operateType: null,
|
||||
statusOptions: [
|
||||
{
|
||||
label: '待付款',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '待发货',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '已发货',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: '已完成',
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: '已关闭',
|
||||
value: 4
|
||||
}
|
||||
],
|
||||
orderTypeOptions: [
|
||||
{
|
||||
label: '正常订单',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '秒杀订单',
|
||||
value: 1
|
||||
}
|
||||
],
|
||||
sourceTypeOptions: [
|
||||
{
|
||||
label: 'PC订单',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: 'APP订单',
|
||||
value: 1
|
||||
}
|
||||
],
|
||||
operateOptions: [
|
||||
{
|
||||
label: "批量发货",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "关闭订单",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "删除订单",
|
||||
value: 3
|
||||
}
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
filters: {
|
||||
formatCreateTime(time) {
|
||||
let date = new Date(time);
|
||||
return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
|
||||
},
|
||||
formatPayType(value) {
|
||||
if (value === 1) {
|
||||
return '支付宝';
|
||||
} else if (value === 2) {
|
||||
return '微信';
|
||||
} else {
|
||||
return '未支付';
|
||||
}
|
||||
},
|
||||
formatSourceType(value) {
|
||||
if (value === 1) {
|
||||
return 'APP订单';
|
||||
} else {
|
||||
return 'PC订单';
|
||||
}
|
||||
},
|
||||
formatStatus(value) {
|
||||
if (value === 1) {
|
||||
return '待发货';
|
||||
} else if (value === 2) {
|
||||
return '已发货';
|
||||
} else if (value === 3) {
|
||||
return '已完成';
|
||||
} else if (value === 4) {
|
||||
return '已关闭';
|
||||
} else if (value === 5) {
|
||||
return '无效订单';
|
||||
} else {
|
||||
return '待付款';
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleResetSearch() {
|
||||
this.listQuery = Object.assign({}, defaultListQuery);
|
||||
},
|
||||
handleSearchList() {
|
||||
this.listQuery.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleViewOrder(index, row){},
|
||||
handleCloseOrder(index, row){
|
||||
|
||||
},
|
||||
handleDeliveryOrder(index, row){},
|
||||
handleViewLogistics(index, row){},
|
||||
handleDeleteOrder(index, row){},
|
||||
handleBatchOperate(){
|
||||
console.log(this.operateType);
|
||||
if(this.operateType===1){
|
||||
|
||||
}else if(this.operateType===2){
|
||||
|
||||
}else if(this.operateType===3){
|
||||
|
||||
}
|
||||
},
|
||||
handleSizeChange(val){
|
||||
this.listQuery.pageNum = 1;
|
||||
this.listQuery.pageSize = val;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(val){
|
||||
this.listQuery.pageNum = val;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
this.listLoading = true;
|
||||
fetchList(this.listQuery).then(response => {
|
||||
this.listLoading = false;
|
||||
this.list = response.data.list;
|
||||
this.total = response.data.total;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user