414 lines
12 KiB
Vue
414 lines
12 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 页面标题 -->
|
||
<h2 class="page-title">结算单详情</h2>
|
||
|
||
<!-- 查询区域 -->
|
||
<div class="head-container">
|
||
<div class="filter-container">
|
||
<div class="filter-item">
|
||
<span class="label">订单批次号：</span>
|
||
<el-input
|
||
v-model="query.batchNo"
|
||
placeholder="请输入订单批次号"
|
||
style="width: 200px"
|
||
clearable
|
||
@input="handleSearch"
|
||
/>
|
||
</div>
|
||
<div class="filter-item">
|
||
<span class="label">景区：</span>
|
||
<el-select
|
||
v-model="query.scenicArea"
|
||
placeholder="请选择景区"
|
||
clearable
|
||
style="width: 200px"
|
||
@change="handleSearch"
|
||
>
|
||
<el-option
|
||
v-for="item in scenicAreaOptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</div>
|
||
<div class="filter-item">
|
||
<span class="label">日期：</span>
|
||
<el-date-picker
|
||
v-model="query.dateRange"
|
||
type="daterange"
|
||
range-separator="~"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:default-time="['00:00:00', '23:59:59']"
|
||
:default-value="defaultDateRange"
|
||
style="width: 350px"
|
||
@change="handleSearch"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单列表区域 -->
|
||
<div class="order-list-container">
|
||
<div class="list-header">
|
||
<span class="list-title">订单列表：</span>
|
||
</div>
|
||
|
||
<!-- 表格 -->
|
||
<el-table
|
||
ref="table"
|
||
v-loading="loading"
|
||
:data="paginatedData"
|
||
style="width: 100%"
|
||
>
|
||
<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="totalAmount" label="下单费用" align="center">
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.totalAmount.toLocaleString('zh', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="scenicName" label="景区" align="center" />
|
||
<el-table-column prop="routeIds" label="路线" align="center" />
|
||
<el-table-column prop="createBy" label="订单发起人" align="center" />
|
||
<el-table-column
|
||
prop="orderType"
|
||
label="订单类型"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ scope.row.orderType === 1 ? '载物飞行' : '载人飞行' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="mainOrderStatus"
|
||
label="订单状态"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span :class="getOrderStatusClass(scope.row.mainOrderStatus)">
|
||
{{ getOrderStatusText(scope.row.mainOrderStatus) }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="settlementStatus"
|
||
label="结算状态"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span :class="getSettlementStatusClass(scope.row.settlementStatus, true)">
|
||
{{ getSettlementStatusText(scope.row.settlementStatus, true) }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- 分页 -->
|
||
<div class="pagination-container">
|
||
<el-pagination
|
||
:current-page.sync="page.current"
|
||
:page-sizes="[10, 20, 50, 100]"
|
||
:page-size="page.size"
|
||
:total="tableData.length"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按钮 -->
|
||
<div class="action-buttons">
|
||
<el-button
|
||
:disabled="!(settlementStatus === 0)"
|
||
type="primary"
|
||
@click="handleCancelSettlement"
|
||
>
|
||
取消结算
|
||
</el-button>
|
||
<el-button type="primary" @click="handlePrint">打印结算单</el-button>
|
||
<el-button
|
||
v-if="settlementStatus === 2"
|
||
type="success"
|
||
@click="handleStatusChange(1)"
|
||
>
|
||
确认结算
|
||
</el-button>
|
||
<el-button
|
||
v-if="settlementStatus === 1"
|
||
type="success"
|
||
@click="handleStatusChange(2)"
|
||
>
|
||
完成结算
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- PDF导出组件 -->
|
||
<settlement-pdf
|
||
v-if="$route.query.orderId"
|
||
ref="settlementPdf"
|
||
:order-data="currentOrder"
|
||
:settlement-order-id="$route.query.orderId"
|
||
v-show="false"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getOrderStatusText, getSettlementStatusText, getOrderStatusClass, getSettlementStatusClass } from "@/utils/orderStatus";
|
||
import { getSettleOrderDetail, updateSettleOrderStatus, printSettleOrderData } from '@/api/order'
|
||
import { getDetail } from "@/api/system/pilot";
|
||
import { getCustomerId } from '@/api/system/customer'
|
||
import { getScenicValue } from '@/api/dropdown'
|
||
import SettlementPdf from './settlementPdf.vue'
|
||
|
||
export default {
|
||
name: "orderDetail",
|
||
components: {
|
||
SettlementPdf
|
||
},
|
||
data() {
|
||
return {
|
||
orderId: '',
|
||
loading: false,
|
||
scenicAreaOptions: [],
|
||
settlementStatus: 0,
|
||
currentOrder: null,
|
||
originalData: [], // 存储原始数据，用于筛选
|
||
query: {
|
||
batchNo: "",
|
||
scenicArea: "",
|
||
dateRange: [],
|
||
},
|
||
defaultDateRange: [],
|
||
page: {
|
||
current: 1,
|
||
size: 10
|
||
},
|
||
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()
|
||
this.scenicAreaOptions = scenicResponse.map(item => ({
|
||
value: item.key,
|
||
label: item.value
|
||
}))
|
||
|
||
// 获取订单详情并处理数据
|
||
this.orderId = this.$route.query.orderId
|
||
if(this.orderId) {
|
||
this.loading = true
|
||
this.getOrderDetail(this.orderId)
|
||
} else {
|
||
this.$message.error('没有提供订单ID')
|
||
}
|
||
},
|
||
methods: {
|
||
getOrderStatusText,
|
||
getSettlementStatusText,
|
||
getOrderStatusClass,
|
||
getSettlementStatusClass,
|
||
async getOrderDetail(orderId) {
|
||
try {
|
||
const settleOrderDetail = await getSettleOrderDetail(orderId)
|
||
await Promise.all(settleOrderDetail.map(async (item) => {
|
||
// 获取客户名称
|
||
const customerResponse = await getCustomerId(item.customerId)
|
||
item.customerName = customerResponse.name
|
||
|
||
// 获取飞行员信息
|
||
const pilotResponse = await getDetail(item.orderInitiatorId)
|
||
item.createBy = pilotResponse.name
|
||
|
||
// 获取景区名称
|
||
console.log(this.scenicAreaOptions)
|
||
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
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching order details:', error)
|
||
this.$message.error('获取订单详情失败')
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
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
|
||
} catch (error) {
|
||
console.error('Error searching orders:', error)
|
||
this.$message.error('搜索订单失败')
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
async handleCancelSettlement() {
|
||
try {
|
||
await updateSettleOrderStatus(this.orderId, 3)
|
||
this.settlementStatus = 3
|
||
this.$message.success('取消结算成功')
|
||
this.getOrderDetail(this.orderId) // 刷新数据
|
||
} catch (error) {
|
||
console.error('Error canceling settlement:', error)
|
||
this.$message.error('取消结算失败')
|
||
}
|
||
},
|
||
handleSizeChange(val) {
|
||
this.page.size = val;
|
||
this.page.current = 1; // 重置到第一页
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.page.current = val;
|
||
},
|
||
async handlePrint() {
|
||
if (this.orderId) {
|
||
try {
|
||
// 等待VUE渲染组件
|
||
await this.$nextTick()
|
||
await this.$refs.settlementPdf.generatePDF()
|
||
} catch (error) {
|
||
console.error('Error generating PDF:', error)
|
||
this.$message.error('导出PDF失败')
|
||
}
|
||
} else {
|
||
this.$message.warning('没有结算单ID')
|
||
}
|
||
},
|
||
async handleStatusChange(status) {
|
||
try {
|
||
await updateSettleOrderStatus(this.orderId, status)
|
||
this.settlementStatus = status
|
||
const statusText = status === 1 ? '已确认' : '已完成'
|
||
this.$message.success(`结算单状态已更新为：${statusText}`)
|
||
this.getOrderDetail(this.orderId) // 刷新数据
|
||
} catch (error) {
|
||
console.error('Error updating settlement status:', error)
|
||
this.$message.error('更新结算状态失败')
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-title {
|
||
margin-bottom: 20px;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
.filter-container {
|
||
background-color: #fff;
|
||
margin-bottom: 20px;
|
||
|
||
.filter-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-right: 20px;
|
||
|
||
.label {
|
||
color: #606266;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-list-container {
|
||
background-color: #fff;
|
||
|
||
.list-header {
|
||
margin-bottom: 20px;
|
||
|
||
.list-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
}
|
||
}
|
||
|
||
.action-buttons {
|
||
text-align: center;
|
||
margin: 20px 0;
|
||
padding: 20px 0;
|
||
|
||
.el-button {
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
|
||
.status-default { color: #909399; }
|
||
.status-pending { color: #909399; }
|
||
.status-processing { color: #409EFF; }
|
||
.status-success { color: #67c23a; }
|
||
.status-warning { color: #e6a23c; }
|
||
.status-danger { color: #f56c6c; }
|
||
|
||
.el-table {
|
||
margin-bottom: 70px;
|
||
margin-top: 20px;
|
||
::v-deep .el-table__body-wrapper {
|
||
overflow-x: auto;
|
||
}
|
||
}
|
||
|
||
.el-button--text {
|
||
color: #409eff;
|
||
&:hover {
|
||
color: #66b1ff;
|
||
}
|
||
}
|
||
</style>
|