<template>
|
<div class="app-container">
|
<el-page-header @back="goBack" content="任务详情">
|
</el-page-header>
|
|
<el-card class="box-card" style="margin-top: 20px;" shadow="hover">
|
<div slot="header" class="clearfix">
|
<span><i class="el-icon-document"></i> 任务基本信息</span>
|
</div>
|
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="任务编号">{{ taskInfo.taskCode }}</el-descriptions-item>
|
<el-descriptions-item label="任务状态">
|
<el-tag :type="getStatusType(taskInfo.taskStatus)">
|
{{ getStatusText(taskInfo.taskStatus) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="车牌号">{{ taskInfo.vehicleNo }}</el-descriptions-item>
|
<el-descriptions-item label="执行人">{{ taskInfo.assigneeName }}</el-descriptions-item>
|
<el-descriptions-item label="计划开始时间">{{ taskInfo.plannedStartTime }}</el-descriptions-item>
|
<el-descriptions-item label="计划结束时间">{{ taskInfo.plannedEndTime }}</el-descriptions-item>
|
<el-descriptions-item label="实际开始时间">{{ taskInfo.actualStartTime || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="实际结束时间">{{ taskInfo.actualEndTime || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="出发地址" :span="2">{{ taskInfo.departureAddress }}</el-descriptions-item>
|
<el-descriptions-item label="目的地址" :span="2">{{ taskInfo.destinationAddress }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
|
<!-- GPS里程统计组件 -->
|
<task-mileage-detail v-if="taskInfo.taskId" :task-id="taskInfo.taskId" />
|
|
<!-- 支付信息卡片 -->
|
<el-card v-if="showPaymentInfo && paymentInfo" class="box-card" style="margin-top: 20px;" shadow="hover">
|
<div slot="header" class="clearfix">
|
<span><i class="el-icon-wallet"></i> 支付信息</span>
|
</div>
|
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="成交价">¥{{ paymentInfo.transferPrice || 0 }}</el-descriptions-item>
|
<el-descriptions-item label="附加费用">¥{{ paymentInfo.additionalAmount || 0 }}</el-descriptions-item>
|
<el-descriptions-item label="总金额">
|
<span style="color: #e54d42; font-weight: bold; font-size: 16px;">¥{{ paymentInfo.totalAmount || 0 }}</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="支付状态" v-if="paymentInfo.latestPayment">
|
<el-tag :type="getPaymentStatusType(paymentInfo.latestPayment.payStatus)">
|
{{ getPaymentStatusText(paymentInfo.latestPayment.payStatus) }}
|
</el-tag>
|
</el-descriptions-item>
|
<el-descriptions-item label="支付状态" v-else>
|
<el-tag type="info">未支付</el-tag>
|
</el-descriptions-item>
|
<template v-if="paymentInfo.latestPayment">
|
<el-descriptions-item label="支付方式">{{ getPaymentMethodText(paymentInfo.latestPayment.paymentMethod) }}</el-descriptions-item>
|
<el-descriptions-item label="结算金额">¥{{ paymentInfo.latestPayment.settlementAmount }}</el-descriptions-item>
|
<el-descriptions-item label="交易号" v-if="paymentInfo.latestPayment.tradeNo">{{ paymentInfo.latestPayment.tradeNo }}</el-descriptions-item>
|
<el-descriptions-item label="支付时间" v-if="paymentInfo.latestPayment.payTime">{{ paymentInfo.latestPayment.payTime }}</el-descriptions-item>
|
</template>
|
</el-descriptions>
|
|
<!-- 附加费用明细 -->
|
<div v-if="paymentInfo.additionalFees && paymentInfo.additionalFees.length > 0" style="margin-top: 20px;">
|
<el-divider content-position="left">附加费用明细</el-divider>
|
<el-table :data="paymentInfo.additionalFees" border style="width: 100%">
|
<el-table-column prop="feeName" label="费用名称" width="150" />
|
<el-table-column prop="unitAmount" label="单价" width="100">
|
<template slot-scope="scope">
|
¥{{ scope.row.unitAmount }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="quantity" label="数量" width="80" />
|
<el-table-column prop="totalAmount" label="小计" width="100">
|
<template slot-scope="scope">
|
¥{{ scope.row.totalAmount }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
|
</el-table>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import TaskMileageDetail from '@/components/TaskMileageDetail'
|
import { getTask } from '@/api/task'
|
import { getPaymentInfo } from '@/api/task'
|
|
export default {
|
name: 'TaskDetail',
|
components: {
|
TaskMileageDetail
|
},
|
data() {
|
return {
|
taskInfo: {
|
taskId: null,
|
taskCode: '',
|
taskStatus: '',
|
taskType: '',
|
vehicleNo: '',
|
assigneeName: '',
|
plannedStartTime: '',
|
plannedEndTime: '',
|
actualStartTime: '',
|
actualEndTime: '',
|
departureAddress: '',
|
destinationAddress: ''
|
},
|
paymentInfo: null,
|
showPaymentInfo: false
|
}
|
},
|
created() {
|
const taskId = this.$route.params && this.$route.params.taskId
|
if (taskId) {
|
this.loadTaskInfo(taskId)
|
this.loadPaymentInfo(taskId)
|
}
|
},
|
methods: {
|
/** 加载任务信息 */
|
loadTaskInfo(taskId) {
|
getTask(taskId).then(response => {
|
this.taskInfo = response.data
|
// 只有转运任务才显示支付信息
|
this.showPaymentInfo = this.taskInfo.taskType === 'EMERGENCY_TRANSFER'
|
})
|
},
|
|
/** 加载支付信息 */
|
loadPaymentInfo(taskId) {
|
getPaymentInfo(taskId).then(response => {
|
if (response.code === 200) {
|
this.paymentInfo = response.data
|
}
|
}).catch(error => {
|
console.error('加载支付信息失败:', error)
|
})
|
},
|
|
/** 返回 */
|
goBack() {
|
this.$router.go(-1)
|
},
|
|
/** 获取状态类型 */
|
getStatusType(status) {
|
const statusMap = {
|
'PENDING': 'info',
|
'DEPARTING': 'warning',
|
'ARRIVED': 'primary',
|
'RETURNING': 'warning',
|
'COMPLETED': 'success',
|
'CANCELLED': 'danger'
|
}
|
return statusMap[status] || 'info'
|
},
|
|
/** 获取状态文本 */
|
getStatusText(status) {
|
const statusMap = {
|
'PENDING': '待出发',
|
'DEPARTING': '出发中',
|
'ARRIVED': '已到达',
|
'RETURNING': '返程中',
|
'COMPLETED': '已完成',
|
'CANCELLED': '已取消'
|
}
|
return statusMap[status] || status
|
},
|
|
/** 获取支付状态类型 */
|
getPaymentStatusType(status) {
|
const typeMap = {
|
'UNPAID': 'info',
|
'PENDING': 'warning',
|
'PAID': 'success',
|
'FAILED': 'danger',
|
'REFUNDED': 'info'
|
}
|
return typeMap[status] || 'info'
|
},
|
|
/** 获取支付状态文本 */
|
getPaymentStatusText(status) {
|
const textMap = {
|
'UNPAID': '未支付',
|
'PENDING': '支付中',
|
'PAID': '已支付',
|
'FAILED': '支付失败',
|
'REFUNDED': '已退款'
|
}
|
return textMap[status] || status
|
},
|
|
/** 获取支付方式文本 */
|
getPaymentMethodText(method) {
|
const methodMap = {
|
'CASH': '现金支付',
|
'ON_ACCOUNT': '挂账支付',
|
'WECHAT': '微信支付',
|
'ALIPAY': '支付宝支付'
|
}
|
return methodMap[method] || method
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
</style>
|
