修复分页和筛选错误
This commit is contained in:
parent
488f2a3b1b
commit
b6cd4462f2
@ -27,10 +27,11 @@ export function getSettleOrderList(params) {
|
||||
}
|
||||
|
||||
// 根据id查询结算订单详情
|
||||
export function getSettleOrderDetail(settlementOrderId) {
|
||||
export function getSettleOrderDetail(settlementOrderId, params) {
|
||||
return request({
|
||||
url: `api/settlementOrder/querySettlementOrderDetail/${settlementOrderId}`,
|
||||
method: 'get'
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,13 @@
|
||||
<!-- 搜索栏 -->
|
||||
<div class="head-container">
|
||||
<div class="filter-container">
|
||||
<el-input
|
||||
v-model="query.orderNo"
|
||||
placeholder="请输入订单号"
|
||||
class="filter-item"
|
||||
style="width: 200px"
|
||||
clearable
|
||||
/>
|
||||
<el-select
|
||||
v-model="query.attractionId"
|
||||
placeholder="请选择景区"
|
||||
@ -53,13 +60,14 @@
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column prop="orderNo" label="订单号" align="center" />
|
||||
<el-table-column prop="customerName" label="客户名称" align="center" />
|
||||
<el-table-column prop="phone" label="手机号码" align="center" />
|
||||
<el-table-column prop="orderTime" label="下单时间" align="center" />
|
||||
<el-table-column
|
||||
prop="amount"
|
||||
label="下单费用"
|
||||
width="180"
|
||||
width="120"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
@ -143,6 +151,7 @@ export default {
|
||||
return {
|
||||
loading: false,
|
||||
query: {
|
||||
orderNo: "",
|
||||
attractionId: undefined,
|
||||
customerId: undefined,
|
||||
phone: "",
|
||||
@ -183,6 +192,7 @@ export default {
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const params = {
|
||||
orderNo: this.query.orderNo,
|
||||
attractionId: this.query.attractionId,
|
||||
customerId: this.query.customerId,
|
||||
phone: this.query.phone,
|
||||
@ -200,6 +210,7 @@ export default {
|
||||
const scenic = this.scenicOptions.find(s => s.id === record.attractionId);
|
||||
const initiator = this.pilotOptions.find(p => p.id === record.orderInitiatorId);
|
||||
return {
|
||||
orderNo: record.orderNo,
|
||||
customerName: customer ? customer.name : "未知客户",
|
||||
phone: record.customerPhone,
|
||||
orderTime: record.orderCreateTime,
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
range-separator="~"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
:default-value="defaultDateRange"
|
||||
style="width: 350px;"
|
||||
@ -156,8 +157,8 @@ export default {
|
||||
this.getList();
|
||||
},
|
||||
data() {
|
||||
const defaultStartDate = new Date('2015-10-02')
|
||||
const defaultEndDate = new Date('2015-10-10')
|
||||
const today = new Date()
|
||||
const nowDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
|
||||
return {
|
||||
dialogVisible: false,
|
||||
settlementList: [],
|
||||
@ -165,12 +166,12 @@ export default {
|
||||
query: {
|
||||
attractionId: undefined,
|
||||
customerId: undefined,
|
||||
dateRange: [defaultStartDate, defaultEndDate]
|
||||
dateRange: []
|
||||
},
|
||||
permission: {
|
||||
add: ['admin', 'settlementOrder:add'],
|
||||
},
|
||||
defaultDateRange: [defaultStartDate, defaultEndDate],
|
||||
defaultDateRange: [nowDate, nowDate],
|
||||
page: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
@ -207,8 +208,8 @@ export default {
|
||||
const params = {
|
||||
attractionId: this.query.attractionId,
|
||||
customerId: this.query.customerId,
|
||||
startTime: this.query.dateRange ? this.query.dateRange[0] : null,
|
||||
endTime: this.query.dateRange ? this.query.dateRange[1] : null,
|
||||
queryStartTime: this.query.dateRange ? this.query.dateRange[0] : null,
|
||||
queryEndTime: this.query.dateRange ? this.query.dateRange[1] : null,
|
||||
current: this.page.current,
|
||||
size: this.page.size,
|
||||
mainOrderStatus: 2, // 只查询已完成的订单
|
||||
|
||||
@ -3,17 +3,16 @@
|
||||
<!-- 页面标题 -->
|
||||
<h2 class="page-title">结算单详情</h2>
|
||||
|
||||
<!-- 查询区域 -->
|
||||
<!-- 查询区域 -->
|
||||
<div class="head-container">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<span class="label">订单批次号：</span>
|
||||
<span class="label">订单号：</span>
|
||||
<el-input
|
||||
v-model="query.batchNo"
|
||||
placeholder="请输入订单批次号"
|
||||
v-model="query.orderNo"
|
||||
placeholder="请输入订单号"
|
||||
style="width: 200px"
|
||||
clearable
|
||||
@input="handleSearch"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -23,7 +22,6 @@
|
||||
placeholder="请选择景区"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@change="handleSearch"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in scenicAreaOptions"
|
||||
@ -41,12 +39,15 @@
|
||||
range-separator="~"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:default-time="['00:00:00', '23:59:59']"
|
||||
:default-value="defaultDateRange"
|
||||
style="width: 350px"
|
||||
@change="handleSearch"
|
||||
style="width: 300px"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -60,12 +61,13 @@
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="loading"
|
||||
:data="paginatedData"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="orderNo" label="订单号" align="center" width="130" />
|
||||
<el-table-column prop="customerName" label="客户名称" align="center" />
|
||||
<el-table-column prop="phone" label="手机号码" align="center" />
|
||||
<el-table-column prop="createTime" label="下单时间" align="center" width="180" />
|
||||
<el-table-column prop="createTime" label="下单时间" align="center" width="140" />
|
||||
<el-table-column prop="totalAmount" label="下单费用" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.totalAmount.toLocaleString('zh', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span>
|
||||
@ -109,10 +111,10 @@
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:current-page.sync="page.current"
|
||||
:current-page.sync="pagination.current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="page.size"
|
||||
:total="tableData.length"
|
||||
:page-size.sync="pagination.size"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
@ -172,6 +174,8 @@ export default {
|
||||
SettlementPdf
|
||||
},
|
||||
data() {
|
||||
const today = new Date()
|
||||
const nowDate = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`
|
||||
return {
|
||||
orderId: '',
|
||||
loading: false,
|
||||
@ -179,28 +183,21 @@ export default {
|
||||
typeOptions: [], // 飞行类型选项
|
||||
settlementStatus: 0,
|
||||
currentOrder: null,
|
||||
originalData: [], // 存储原始数据，用于筛选
|
||||
query: {
|
||||
batchNo: "",
|
||||
orderNo: "",
|
||||
scenicArea: "",
|
||||
dateRange: [],
|
||||
},
|
||||
defaultDateRange: [],
|
||||
page: {
|
||||
defaultDateRange: [nowDate, nowDate],
|
||||
pagination: {
|
||||
current: 1,
|
||||
size: 10
|
||||
size: 10,
|
||||
total: 0
|
||||
},
|
||||
tableData: [],
|
||||
selection: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
paginatedData() {
|
||||
const start = (this.page.current - 1) * this.page.size
|
||||
const end = start + this.page.size
|
||||
return this.tableData.slice(start, end)
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
// 获取景区下拉数据
|
||||
const scenicResponse = await getScenicValue()
|
||||
@ -239,8 +236,31 @@ export default {
|
||||
},
|
||||
async getOrderDetail(orderId) {
|
||||
try {
|
||||
const settleOrderDetail = await getSettleOrderDetail(orderId)
|
||||
await Promise.all(settleOrderDetail.map(async (item) => {
|
||||
const params = {
|
||||
orderId: orderId,
|
||||
current: this.pagination.current,
|
||||
size: this.pagination.size
|
||||
}
|
||||
|
||||
// 添加筛选条件
|
||||
if (this.query.orderNo) {
|
||||
params.orderNo = this.query.orderNo
|
||||
}
|
||||
if (this.query.scenicArea) {
|
||||
params.attractionId = this.query.scenicArea
|
||||
}
|
||||
if (this.query.dateRange && this.query.dateRange.length === 2) {
|
||||
params.queryStartTime = this.formatDate(this.query.dateRange[0])
|
||||
params.queryEndTime = this.formatDate(this.query.dateRange[1])
|
||||
}
|
||||
|
||||
const settleOrderDetail = await getSettleOrderDetail(this.orderId, params)
|
||||
|
||||
// 更新分页信息
|
||||
this.pagination.total = Number(settleOrderDetail.total)
|
||||
this.pagination.current = Number(settleOrderDetail.current)
|
||||
|
||||
await Promise.all(settleOrderDetail.records.map(async (item) => {
|
||||
// 获取客户名称
|
||||
const customerResponse = await getCustomerId(item.customerId)
|
||||
item.customerName = customerResponse.name
|
||||
@ -253,11 +273,10 @@ export default {
|
||||
const scenic = this.scenicAreaOptions.find(s => s.value === item.attractionId)
|
||||
item.scenicName = scenic ? scenic.label : ''
|
||||
}))
|
||||
this.originalData = settleOrderDetail // 保存原始数据
|
||||
this.tableData = settleOrderDetail
|
||||
if(settleOrderDetail.length > 0) {
|
||||
this.currentOrder = settleOrderDetail[0]
|
||||
this.settlementStatus = settleOrderDetail[0].settlementStatus
|
||||
this.tableData = settleOrderDetail.records
|
||||
if(settleOrderDetail.records.length > 0) {
|
||||
this.currentOrder = settleOrderDetail.records[0]
|
||||
this.settlementStatus = settleOrderDetail.records[0].settlementStatus
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching order details:', error)
|
||||
@ -269,38 +288,8 @@ export default {
|
||||
handleSearch() {
|
||||
this.loading = true
|
||||
try {
|
||||
// 从原始数据中筛选
|
||||
const filteredData = this.originalData.filter(item => {
|
||||
let matchesBatchNo = true
|
||||
let matchesScenicArea = true
|
||||
let matchesDateRange = true
|
||||
|
||||
// 批次号筛选
|
||||
if (this.query.batchNo) {
|
||||
matchesBatchNo = item.batchNo.toLowerCase().includes(this.query.batchNo.toLowerCase())
|
||||
}
|
||||
|
||||
// 景区筛选
|
||||
if (this.query.scenicArea) {
|
||||
matchesScenicArea = item.attractionId === this.query.scenicArea
|
||||
}
|
||||
|
||||
// 日期范围筛选
|
||||
if (this.query.dateRange && this.query.dateRange.length === 2) {
|
||||
const orderDate = new Date(item.createTime)
|
||||
const startDate = new Date(this.query.dateRange[0])
|
||||
const endDate = new Date(this.query.dateRange[1])
|
||||
startDate.setHours(0, 0, 0, 0)
|
||||
endDate.setHours(23, 59, 59, 999)
|
||||
matchesDateRange = orderDate >= startDate && orderDate <= endDate
|
||||
}
|
||||
|
||||
return matchesBatchNo && matchesScenicArea && matchesDateRange
|
||||
})
|
||||
|
||||
this.tableData = filteredData
|
||||
// 重置分页到第一页
|
||||
this.page.current = 1
|
||||
this.pagination.current = 1 // 重置到第一页
|
||||
this.getOrderDetail(this.orderId)
|
||||
} catch (error) {
|
||||
console.error('Error searching orders:', error)
|
||||
this.$message.error('搜索订单失败')
|
||||
@ -320,11 +309,20 @@ export default {
|
||||
}
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.page.size = val;
|
||||
this.page.current = 1; // 重置到第一页
|
||||
this.pagination.size = val
|
||||
this.pagination.current = 1 // 重置到第一页
|
||||
this.getOrderDetail(this.orderId)
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.page.current = val;
|
||||
this.pagination.current = val
|
||||
this.getOrderDetail(this.orderId)
|
||||
},
|
||||
formatDate(date) {
|
||||
const d = new Date(date)
|
||||
const year = d.getFullYear()
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
async handlePrint() {
|
||||
if (this.orderId) {
|
||||
|
||||
@ -89,7 +89,7 @@ export default {
|
||||
async fetchData() {
|
||||
try {
|
||||
const params = {
|
||||
page: this.page.current - 1,
|
||||
current: this.page.current,
|
||||
size: this.page.size,
|
||||
name: this.query.scenicName,
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user