695 lines
20 KiB
Vue
695 lines
20 KiB
Vue
<template>
|
||
<!-- 订单详情弹窗 -->
|
||
<el-dialog
|
||
:visible.sync="visible"
|
||
width="80%"
|
||
:title="title"
|
||
:close-on-click-modal="false"
|
||
@close="handleClose"
|
||
>
|
||
<div class="order-details">
|
||
<!-- 订单基本信息 -->
|
||
<el-row style="padding: 4px 40px; font-size: 14px">
|
||
<el-col :span="8">
|
||
<span> 订单编号： </span>
|
||
<span>{{ orderDetails.code }}</span>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span> 下单时间： </span>
|
||
<span>{{ orderDetails.orderTime }}</span>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span> 出租单位： </span>
|
||
<span>{{ orderDetails.czcompanyName }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row style="padding: 4px 40px; font-size: 14px">
|
||
<el-col :span="8">
|
||
<span> 出租人： </span>
|
||
<span>{{ orderDetails.person }}</span>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span> 出租人电话： </span>
|
||
<span>{{ orderDetails.personPhone }}</span>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span> 承租单位： </span>
|
||
<span>{{ orderDetails.companyName }}</span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row style="padding: 4px 40px; font-size: 14px">
|
||
<el-col :span="8">
|
||
<span> 承租人： </span>
|
||
<span>{{ orderDetails.nickName }}</span>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span> 承租人电话： </span>
|
||
<span>{{ orderDetails.phoneNumber }}</span>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span> 共享协议： </span>
|
||
<span> ** </span>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 订单商品信息 -->
|
||
<el-row
|
||
style="
|
||
background: #fff;
|
||
padding: 4px 12px;
|
||
margin: 4px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 20px;
|
||
"
|
||
>
|
||
<el-col :span="12" style="padding-left: 30px">
|
||
<div
|
||
v-for="(goods, j) in orderDetails.detailsList"
|
||
:key="j"
|
||
class="order-items order-info"
|
||
:style="j != orderDetails.detailsList.length - 1 ? 'border-bottom:1px solid #eee' : ''"
|
||
style="min-height: 80px"
|
||
>
|
||
<el-image
|
||
:src="goods.url"
|
||
style="width: 110px; height: 70px"
|
||
alt="装备图片"
|
||
fit="cover"
|
||
/>
|
||
<div
|
||
style="
|
||
min-height: 80px;
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-direction: column;
|
||
padding-left: 50px;
|
||
font-size: 13px;
|
||
"
|
||
>
|
||
<el-row style="font-weight: bold">
|
||
{{ goods.deviceName }}
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="3"> 租期 :</el-col>
|
||
<el-col :span="18">
|
||
<span style="margin-right: 10px" :style="isOrderComplete">
|
||
{{ goods.days }}{{ ' ' + '天' }}
|
||
</span>
|
||
<span v-if="orderStatus == 20">
|
||
{{
|
||
isNaN(momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day'))
|
||
? '-'
|
||
: momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day') == 0
|
||
? 1
|
||
: momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day')
|
||
}}{{ ' ' + '天' }}
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="3"> 租金 ：</el-col>
|
||
<el-col :span="8">
|
||
{{ goods.dayLeasePrice }}{{ ' ' + '元 / 天' }}
|
||
</el-col>
|
||
<el-col :span="3"> 数量 ：</el-col>
|
||
<el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="7" class="order-items-info">
|
||
<div
|
||
v-for="(goods, j) in orderDetails.detailsList"
|
||
:key="j"
|
||
class="order-items order-info"
|
||
:style="j != orderDetails.detailsList.length - 1 ? 'border-bottom:1px solid #eee' : ''"
|
||
style="min-height: 80px; width: 100%; font-size: 13px"
|
||
>
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
"
|
||
>
|
||
<div>租期</div>
|
||
<div style="font-weight: bold; margin-top: 10px" :style="isOrderComplete">
|
||
{{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
|
||
</div>
|
||
<div style="font-weight: bold; margin-top: 10px" v-if="orderStatus == 20">
|
||
{{ goods.takeOverTime ? goods.takeOverTime.slice(0, 10) : '' }}至
|
||
{{ goods.rentOverTime ? goods.rentOverTime.slice(0, 10) : '' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="5" class="order-items-info" style="border: none; font-size: 13px">
|
||
<div>总费用</div>
|
||
<div class="red-font">{{ orderDetails.cost }} 元</div>
|
||
<div class="red-font" v-if="orderStatus == 20">
|
||
{{ overhaulDetails.totalCost }} 元
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 退租检测/费用结算信息 -->
|
||
<TitleTip :titleText="`退租检测/费用结算信息`" v-if="orderStatus == 20" />
|
||
|
||
<div style="padding: 0 15px" v-if="orderStatus == 20">
|
||
<div style="padding: 6px 0 0 0; font-size: 18px; color: #eb190a; font-weight: bold">
|
||
总费用(元)： <span>{{ overhaulDetails.totalCost }}</span>
|
||
</div>
|
||
|
||
<!-- 共享费用明细 -->
|
||
<TitleTip :titleText="`共享费用明细`" />
|
||
<el-table
|
||
border
|
||
:data="orderDetailDtoList"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
color: '#fff',
|
||
background: '#00a288',
|
||
}"
|
||
>
|
||
<el-table-column prop="deviceName" align="center" label="装备名称" />
|
||
<el-table-column prop="typeName" align="center" label="型号" />
|
||
<el-table-column prop="num" align="center" label="数量" />
|
||
<el-table-column align="center" label="共享单价(元/天)">
|
||
<template #default="{ row }">
|
||
<span style="color: #eb190a">{{ row.dayLeasePrice }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="days" align="center" label="共享天数" />
|
||
<el-table-column align="center" label="租期">
|
||
<template #default="{ row }">
|
||
{{ `${row.preOutboundTime}至${row.rentOverTime || ''} ` }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="costs" align="center" label="共享费用(元)" width="160" />
|
||
<el-table-column prop="changeCost" align="center" label="改价后实际费用(元)" />
|
||
</el-table>
|
||
|
||
<!-- 维修费用明细 -->
|
||
<TitleTip :titleText="`维修费用明细`" />
|
||
<el-table
|
||
:data="repairRecordList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="deviceName" align="center" label="装备名称" />
|
||
<el-table-column prop="typeName" align="center" label="型号" />
|
||
<el-table-column prop="repairNum" align="center" label="维修数量" />
|
||
<el-table-column align="center" prop="repairPrice" label="维修费用(元)" />
|
||
<el-table-column prop="repairChangePrice" align="center" label="改价后实际费用(元)" />
|
||
<el-table-column align="center" label="附件" width="160">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" size="small" @click="onViewFileImg(row, 0)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 报废费用明细 -->
|
||
<TitleTip :titleText="`报废费用明细`" />
|
||
<el-table
|
||
:data="scrapRecordList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="deviceName" align="center" label="装备名称" />
|
||
<el-table-column prop="typeName" align="center" label="型号" />
|
||
<el-table-column prop="scrapNum" align="center" label="报废数量" />
|
||
<el-table-column prop="scrapReason" align="center" label="报废原因" />
|
||
<el-table-column prop="scrapPrice" align="center" label="报废费用(元)" />
|
||
<el-table-column prop="scrapChangePrice" align="center" label="改价后费用(元)" />
|
||
<el-table-column align="center" label="附件" width="160">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" size="small" @click="onViewFileImg(row, 1)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 丢失费用明细 -->
|
||
<TitleTip :titleText="`丢失费用明细`" />
|
||
<el-table
|
||
:data="lossRecordList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="deviceName" align="center" label="装备名称" />
|
||
<el-table-column prop="typeName" align="center" label="型号" />
|
||
<el-table-column prop="lossNum" align="center" label="丢失数量" />
|
||
<el-table-column prop="lossPrice" align="center" label="丢失费用(元)" />
|
||
<el-table-column prop="lossChangePrice" align="center" label="改价后费用(元)" />
|
||
<el-table-column align="center" label="附件" width="160">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" size="small" @click="onViewFileImg(row, 2)">查看</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 附件详情弹窗 -->
|
||
<el-dialog :visible.sync="innerVisible" width="500" title="附件详情" append-to-body>
|
||
<el-table
|
||
:data="viewFileInfoList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="fileName" align="center" label="文件名称" />
|
||
<el-table-column align="center" label="操作" width="120">
|
||
<template #default="{ row }">
|
||
<el-image
|
||
style="width: 60px; height: 60px"
|
||
:src="row.fileUrl"
|
||
:zoom-rate="1.2"
|
||
:max-scale="7"
|
||
:min-scale="0.2"
|
||
:preview-src-list="[row.fileUrl]"
|
||
:initial-index="0"
|
||
fit="cover"
|
||
:z-index="9999999999"
|
||
:preview-teleported="true"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import TitleTip from '@/components/TitleTip'
|
||
import { getOrderListInfoApi, getOverhaulApi } from "@/api/search/order";
|
||
import moment from 'moment'
|
||
|
||
export default {
|
||
components: { TitleTip },
|
||
name: "OrderDetailDialog",
|
||
props: {
|
||
// 控制弹窗显示与隐藏
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 订单ID
|
||
orderId: {
|
||
type: String,
|
||
required: true,
|
||
default:""
|
||
},
|
||
// 订单状态
|
||
orderStatus: {
|
||
type: String,
|
||
required: true,
|
||
default:""
|
||
},
|
||
// 弹窗标题
|
||
title: {
|
||
type: String,
|
||
default: "订单详情"
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 遮罩层
|
||
loading: false,
|
||
dialogLoading: false,
|
||
isView: false,
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
ids: [],
|
||
checkList: [],
|
||
// 总条数
|
||
total: 0,
|
||
// 订单详情数据
|
||
orderDetails: {},
|
||
momentInit: moment,
|
||
orderDetailDtoList: [],
|
||
repairRecordList: [],
|
||
scrapRecordList: [],
|
||
lossRecordList: [],
|
||
overhaulDetails: {},
|
||
fileListAll: [],
|
||
cardList: [],
|
||
// 步骤列表
|
||
stepList: [
|
||
{ title: '待接单', description: '' },
|
||
{ title: '待出库', description: '' },
|
||
{ title: '待收货', description: '' },
|
||
{ title: '共享中', description: '' },
|
||
{ title: '订单完成', description: '' }
|
||
],
|
||
isReject: false,
|
||
currentActive: 0,
|
||
isOrderComplete: undefined,
|
||
viewFileInfoList: [],
|
||
innerVisible: false
|
||
};
|
||
},
|
||
watch: {
|
||
// 当订单ID变化时重新加载数据
|
||
orderId: {
|
||
immediate: true,
|
||
handler(newVal) {
|
||
// 判断orderId不为空才执行初始化
|
||
if (newVal) {
|
||
this.init();
|
||
} else {
|
||
// 可以在这里处理orderId为空的情况
|
||
console.log('orderId为空，不执行初始化');
|
||
}
|
||
}
|
||
},
|
||
// 当订单状态变化时更新步骤
|
||
orderStatus: {
|
||
immediate: true,
|
||
handler() {
|
||
this.updateStepList();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 初始化
|
||
init() {
|
||
this.updateStepList();
|
||
this.getList();
|
||
},
|
||
|
||
// 更新步骤列表
|
||
updateStepList() {
|
||
this.stepList = [
|
||
{ title: '待接单', description: '' },
|
||
{ title: '待出库', description: '' },
|
||
{ title: '待收货', description: '' },
|
||
{ title: '共享中', description: '' },
|
||
{ title: '订单完成', description: '' }
|
||
];
|
||
|
||
if (this.orderStatus == 1) {
|
||
this.currentActive = 0;
|
||
} else if (this.orderStatus == 2) {
|
||
this.currentActive = 1;
|
||
this.stepList[0].title = '已接单';
|
||
} else if (this.orderStatus == 3) {
|
||
this.stepList[0].title = '已接单';
|
||
this.stepList[1].title = '已出库';
|
||
this.currentActive = 2;
|
||
} else if (this.orderStatus == 4) {
|
||
this.stepList[0].title = '已接单';
|
||
this.stepList[1].title = '已出库';
|
||
this.stepList[2].title = '已收货';
|
||
this.currentActive = 3;
|
||
} else if (this.orderStatus == 5) {
|
||
this.stepList[0].title = '已接单';
|
||
this.stepList[1].title = '已出库';
|
||
this.stepList[2].title = '已收货';
|
||
this.currentActive = 4;
|
||
} else if (this.orderStatus == 20) {
|
||
this.stepList[0].title = '已接单';
|
||
this.stepList[1].title = '已出库';
|
||
this.stepList[2].title = '已收货';
|
||
this.stepList[3].title = '共享结束';
|
||
this.currentActive = 4;
|
||
} else if (this.orderStatus == 99) {
|
||
this.stepList[0].title = '订单取消';
|
||
this.isReject = true;
|
||
this.currentActive = 0;
|
||
}
|
||
|
||
this.$forceUpdate();
|
||
},
|
||
|
||
/** 查询订单详情 */
|
||
getList() {
|
||
this.loading = true;
|
||
getOrderListInfoApi({ orderId: this.orderId }).then(async (res) => {
|
||
this.orderDetails = res.data || {};
|
||
|
||
// 如果订单已完成，获取检修信息
|
||
if (this.orderStatus == 20) {
|
||
await getOverhaulApi(this.orderId).then((resTwo) => {
|
||
this.orderDetailDtoList = resTwo.data.orderDetailDtoList || [];
|
||
this.repairRecordList = resTwo.data.repairRecordList || [];
|
||
this.scrapRecordList = resTwo.data.scrapRecordList || [];
|
||
this.lossRecordList = resTwo.data.lossRecordList || [];
|
||
this.fileListAll = resTwo.data.fileInfoList || [];
|
||
this.overhaulDetails = resTwo.data || {};
|
||
});
|
||
}
|
||
|
||
this.loading = false;
|
||
}).catch(() => {
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
// 查看附件图片
|
||
onViewFileImg(row, index) {
|
||
this.viewFileInfoList = [];
|
||
if (this.fileListAll && this.fileListAll.length) {
|
||
this.viewFileInfoList = this.fileListAll.filter(e => e.fileType == index);
|
||
}
|
||
this.innerVisible = true;
|
||
},
|
||
|
||
// 关闭弹窗时触发
|
||
handleClose() {
|
||
this.$emit('update:visible', false);
|
||
this.$emit('close');
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.order-details {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||
padding: 0 12px;
|
||
margin-top: 20px;
|
||
max-height: 70vh; /* 限制最大高度，超出部分滚动 */
|
||
}
|
||
|
||
.step {
|
||
margin-left: 80px;
|
||
}
|
||
|
||
.section {
|
||
margin-top: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.cart-tbody {
|
||
background: #fff;
|
||
padding: 8px 12px;
|
||
margin: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 20px;
|
||
|
||
.cart-user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
|
||
.user-name,
|
||
.user-phone {
|
||
padding: 3px 18px;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
.user-name {
|
||
margin-left: 20px;
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
.cart-list {
|
||
margin: 15px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
div {
|
||
text-align: center;
|
||
}
|
||
|
||
.goods-info {
|
||
display: flex;
|
||
align-content: center;
|
||
border-bottom: 1px solid #00a288;
|
||
|
||
img {
|
||
width: 140px;
|
||
height: 80px;
|
||
}
|
||
|
||
.goods-code {
|
||
margin-left: 70px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
|
||
div {
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
.lease-date {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.red-font {
|
||
color: #ff4800;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cart-listAll {
|
||
margin: 15px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
|
||
div {
|
||
text-align: center;
|
||
}
|
||
|
||
.cart-list {
|
||
margin: 15px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
|
||
div {
|
||
text-align: center;
|
||
}
|
||
|
||
.goods-info {
|
||
display: flex;
|
||
align-content: center;
|
||
|
||
img {
|
||
width: 180px;
|
||
height: 80px;
|
||
}
|
||
|
||
.goods-code {
|
||
margin-left: 110px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
|
||
div {
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
.lease-date {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.red-font {
|
||
color: #ff4800;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.lease-date {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.red-font {
|
||
color: #ff4800;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.order-items {
|
||
border-right: 1px solid #eee;
|
||
}
|
||
|
||
.order-info {
|
||
display: flex;
|
||
padding: 10px 0;
|
||
align-items: center;
|
||
}
|
||
|
||
.order-items-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-right: 1px solid #eee;
|
||
}
|
||
|
||
.red-font {
|
||
color: #ff4800;
|
||
font-weight: bold;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* 滚动条样式优化 */
|
||
::v-deep .el-dialog__body {
|
||
padding: 20px;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
::v-deep .el-dialog__body::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
|
||
border-radius: 3px;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
::v-deep .el-dialog__body::-webkit-scrollbar-track {
|
||
background-color: transparent;
|
||
}
|
||
</style>
|