360 lines
10 KiB
Vue
360 lines
10 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<!-- 订单基本信息 -->
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span style="color: #027db4;">订单基本信息</span>
|
|
</div>
|
|
<el-form :model="form" label-width="100px" class="detail-form">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="订单号">
|
|
<el-input v-model="form.orderNo" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="订单类型">
|
|
<el-input v-model="form.orderType" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="订单发起人">
|
|
<el-input v-model="form.initiator" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="客户名称">
|
|
<el-input v-model="form.customerName" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="手机号码">
|
|
<el-input v-model="form.phoneNumber" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="区域">
|
|
<el-select v-model="form.region" disabled placeholder="请选择区域">
|
|
<!-- <el-option label="区域1" value="area1" />
|
|
<el-option label="区域2" value="area2" /> -->
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="景区">
|
|
<el-select v-model="form.scenicArea" disabled placeholder="请选择景区">
|
|
<!-- <el-option label="景区1" value="scenic1" />
|
|
<el-option label="景区2" value="scenic2" /> -->
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="路线">
|
|
<el-select v-model="form.route" disabled placeholder="请选择路线">
|
|
<!-- <el-option label="路线1" value="route1" />
|
|
<el-option label="路线2" value="route2" /> -->
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="货物重量">
|
|
<el-input v-model="form.weight" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="附加费">
|
|
<el-input v-model="form.additionalFee" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="操作员">
|
|
<el-input v-model="form.operator" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="下单时间">
|
|
<el-date-picker
|
|
v-model="form.orderTime"
|
|
type="datetime"
|
|
placeholder="选择日期时间"
|
|
format="yyyy-MM-dd HH:mm:ss"
|
|
disabled
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item label="订单状态">
|
|
<el-input v-model="form.orderStatus" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="订单确认人">
|
|
<el-input v-model="form.confirmer" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="订单金额">
|
|
<el-input v-model="form.amount" disabled />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</el-card>
|
|
|
|
<!-- 飞行任务信息表 -->
|
|
<el-card class="box-card" style="margin-top: 20px;">
|
|
<div slot="header" class="clearfix">
|
|
<span style="color: #027db4;">飞行任务信息</span>
|
|
</div>
|
|
<el-table :data="flightTaskData" style="width: 100%">
|
|
<el-table-column prop="operator" label="操作员" />
|
|
<el-table-column prop="device" label="执行设备" />
|
|
<el-table-column label="货物图片">
|
|
<template slot-scope="scope">
|
|
<img :src="scope.row.cargoImage" style="height: 50px;" @click="handlePreview(scope.row.cargoImage)">
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="weight" label="载货重量" />
|
|
<el-table-column prop="status" label="任务状态" />
|
|
<el-table-column label="操作" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small" @click="handleVideoView(scope.row)">查看视频</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pagination-container">
|
|
<el-pagination
|
|
:current-page.sync="taskPage.page"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
:page-size="taskPage.size"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="taskPage.total"
|
|
@size-change="handleTaskSizeChange"
|
|
@current-change="handleTaskCurrentChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
|
|
<!-- 图片预览 -->
|
|
<el-dialog :visible.sync="previewVisible" append-to-body>
|
|
<img :src="previewUrl" alt="Preview" style="width: 100%">
|
|
</el-dialog>
|
|
|
|
<!-- 视频预览 -->
|
|
<el-dialog
|
|
title="视频预览"
|
|
:visible.sync="videoDialogVisible"
|
|
width="50%"
|
|
append-to-body
|
|
>
|
|
<video
|
|
:src="currentVideoUrl"
|
|
controls
|
|
style="width: 100%"
|
|
>
|
|
您的浏览器不支持 video 标签。
|
|
</video>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getOrderDetail } from '@/api/order'
|
|
|
|
export default {
|
|
name: 'loadOrderDetail',
|
|
data() {
|
|
return {
|
|
form: {
|
|
orderNo: '',
|
|
orderType: '',
|
|
initiator: '',
|
|
customerName: '',
|
|
phoneNumber: '',
|
|
region: '',
|
|
scenicArea: '',
|
|
route: '',
|
|
weight: '',
|
|
additionalFee: '',
|
|
operator: '',
|
|
orderTime: '',
|
|
orderStatus: '',
|
|
confirmer: '',
|
|
amount: ''
|
|
},
|
|
flightTaskData: [],
|
|
taskPage: {
|
|
page: 1,
|
|
size: 10,
|
|
total: 0
|
|
},
|
|
previewVisible: false,
|
|
previewUrl: '',
|
|
videoDialogVisible: false,
|
|
currentVideoUrl: ''
|
|
}
|
|
},
|
|
created() {
|
|
// 获取详情数据
|
|
const id = this.$route.query.id
|
|
if (id) {
|
|
this.getDetail(id)
|
|
}
|
|
},
|
|
methods: {
|
|
getDetail(id) {
|
|
getOrderDetail(id).then(res => {
|
|
// 映射数据到form对象
|
|
this.form = {
|
|
orderNo: res.orderNo,
|
|
orderType: res.orderType,
|
|
initiator: res.orderInitiator,
|
|
customerName: res.customerName,
|
|
phoneNumber: res.phone,
|
|
region: this.$route.query.areaName || res.areaName,
|
|
scenicArea: res.scenicName,
|
|
route: res.routeName,
|
|
weight: res.cargoWeight + 'kg',
|
|
additionalFee: res.surchargeAmount,
|
|
operator: res.operatorName,
|
|
orderTime: res.orderCreateTime,
|
|
orderStatus: res.mainOrderStatus,
|
|
confirmer: res.operatorName,
|
|
amount: res.amount
|
|
}
|
|
|
|
// 映射任务列表数据
|
|
if (res.orderTaskDetailList && res.orderTaskDetailList.length > 0) {
|
|
this.flightTaskData = res.orderTaskDetailList.map(task => ({
|
|
operator: task.operatorName,
|
|
device: task.deviceName,
|
|
cargoImage: task.attachmentMaterialList && task.attachmentMaterialList.length > 0
|
|
? task.attachmentMaterialList[0].fileFullPath
|
|
: '',
|
|
weight: task.cargoWeight + 'kg',
|
|
status: task.orderItemStatus,
|
|
videoUrl: ''
|
|
}))
|
|
// 更新分页数据
|
|
this.taskPage.total = res.orderTaskDetailList.length
|
|
}
|
|
this.taskPage.page = 1
|
|
})
|
|
},
|
|
handlePreview(url) {
|
|
this.previewUrl = url
|
|
this.previewVisible = true
|
|
},
|
|
handleTaskSizeChange(val) {
|
|
this.taskPage.size = val
|
|
// 重新获取任务记录数据
|
|
},
|
|
handleTaskCurrentChange(val) {
|
|
this.taskPage.page = val
|
|
// 重新获取任务记录数据
|
|
},
|
|
handleVideoView(row) {
|
|
if (row.videoUrl) {
|
|
this.currentVideoUrl = row.videoUrl
|
|
this.videoDialogVisible = true
|
|
}
|
|
},
|
|
handleApiClick(type) {
|
|
// 跳转到对应的API模块
|
|
console.log('跳转到API模块:', type)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding: 0;
|
|
margin-bottom: 33px;
|
|
}
|
|
.detail-form {
|
|
.el-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
::v-deep .el-input {
|
|
width: 240px;
|
|
}
|
|
::v-deep .el-select {
|
|
width: 240px;
|
|
}
|
|
::v-deep .el-date-editor {
|
|
width: 240px;
|
|
}
|
|
::v-deep .el-input.is-disabled .el-input__inner {
|
|
background-color: white;
|
|
color: #686868;
|
|
}
|
|
::v-deep .el-textarea.is-disabled .el-textarea__inner {
|
|
background-color: white;
|
|
color: #686868;
|
|
}
|
|
}
|
|
.image-preview {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
.image-item {
|
|
width: 120px;
|
|
height: 120px;
|
|
cursor: pointer;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
&:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
.preview-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
}
|
|
.box-card {
|
|
margin-bottom: 20px;
|
|
box-shadow: none;
|
|
border: none;
|
|
background: none;
|
|
.clearfix {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.pagination-container {
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
}
|
|
.api-links {
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
display: flex;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
.api-link {
|
|
color: #027db4;
|
|
text-decoration: none;
|
|
padding: 10px 20px;
|
|
border: 1px solid #027db4;
|
|
border-radius: 4px;
|
|
&:hover {
|
|
background-color: #027db4;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
</style>
|