740 lines
24 KiB
Vue
740 lines
24 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item :to="{ path: '/search/order' }">订单管理</el-breadcrumb-item>
|
||
<el-breadcrumb-item>订单明细</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
<div class="order-details">
|
||
<TitleTip :titleText="`订单流程`" />
|
||
|
||
<div style="padding: 20px 40px">
|
||
<el-steps
|
||
:active="currentActive"
|
||
:finish-status="isReject ? 'wait' : 'success'"
|
||
:process-status="isReject ? 'error' : 'process'"
|
||
align-center
|
||
>
|
||
<el-step
|
||
v-for="item in stepList"
|
||
:key="item.index"
|
||
:title="item.title"
|
||
:description="item.description"
|
||
/>
|
||
</el-steps>
|
||
</div>
|
||
<TitleTip :titleText="`租赁信息`" />
|
||
<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: '#00377a',
|
||
}"
|
||
>
|
||
<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 prop="days" 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>
|
||
<el-table-column prop="changeCost" align="center" label="改价后实际费用(元)" />
|
||
</el-table>
|
||
|
||
<TitleTip :titleText="`维修费用明细`" />
|
||
<el-table
|
||
:data="repairRecordList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00377a',
|
||
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>
|
||
<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: '#00377a',
|
||
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>
|
||
<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: '#00377a',
|
||
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>
|
||
<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: '#00377a',
|
||
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>
|
||
</div>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import TitleTip from '@/components/TitleTip'
|
||
import { getOrderListInfoApi,getOverhaulApi } from "@/api/search/order";
|
||
import moment from 'moment'
|
||
export default {
|
||
components: { TitleTip },
|
||
name: "orderDetail",
|
||
data() {
|
||
return {
|
||
orderStatus: undefined,
|
||
orderId:undefined,
|
||
// 遮罩层
|
||
loading: false,
|
||
dialogLoading: false,
|
||
isView: false,
|
||
// 非单个禁用
|
||
single: true,
|
||
// 非多个禁用
|
||
multiple: true,
|
||
// 显示搜索条件
|
||
showSearch: true,
|
||
ids: [],
|
||
checkList: [],
|
||
// 总条数
|
||
total: 0,
|
||
// 弹出层标题
|
||
title: "",
|
||
titleStaus:"",
|
||
// 查询参数
|
||
queryParams: {
|
||
typeId: undefined,
|
||
supplierId: undefined,
|
||
productionTime: undefined,
|
||
},
|
||
orderDetails:{},
|
||
momentInit : moment,
|
||
orderDetailDtoList: [],
|
||
repairRecordList: [],
|
||
scrapRecordList: [],
|
||
lossRecordList: [],
|
||
overhaulDetails: {},
|
||
fileListAll: [],
|
||
cardList:[],
|
||
//描述信息
|
||
stepList:[
|
||
{
|
||
title: '待接单',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '待出库',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '待收货',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '租赁中',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '已退租待检修',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '已检修待结算',
|
||
description: '',
|
||
},
|
||
|
||
{
|
||
title: '订单完成',
|
||
description: '',
|
||
},
|
||
],
|
||
isReject:false,
|
||
currentActive:0,
|
||
isOrderComplete:undefined,
|
||
viewFileInfoList:[],
|
||
innerVisible:false,
|
||
};
|
||
},
|
||
mounted() {
|
||
this.orderStatus = Number(this.$route.query && this.$route.query.orderStatus);
|
||
this.orderId = Number(this.$route.query && this.$route.query.orderId);
|
||
this.stepList=[
|
||
{
|
||
title: '待接单',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '待出库',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '待收货',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '租赁中',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '已退租待检修',
|
||
description: '',
|
||
},
|
||
{
|
||
title: '已检修待结算',
|
||
description: '',
|
||
},
|
||
|
||
{
|
||
title: '订单完成',
|
||
description: '',
|
||
},
|
||
];
|
||
if (this.orderStatus == 1) {
|
||
this.currentActive = 0
|
||
}
|
||
if (this.orderStatus == 2) {
|
||
this.currentActive = 1
|
||
this.stepList[0].title = '已接单'
|
||
}
|
||
if (this.orderStatus == 3) {
|
||
this.stepList[0].title = '已接单'
|
||
this.stepList[1].title = '已出库'
|
||
this.currentActive = 2
|
||
}
|
||
if (this.orderStatus == 4) {
|
||
this.stepList[0].title = '已接单'
|
||
this.stepList[1].title = '已出库'
|
||
this.stepList[2].title = '已收货'
|
||
this.currentActive = 3
|
||
}
|
||
if (this.orderStatus == 5) {
|
||
this.stepList[0].title = '已接单'
|
||
this.stepList[1].title = '已出库'
|
||
this.stepList[2].title = '已收货'
|
||
this.currentActive = 4
|
||
}
|
||
if (this.orderStatus == 10) {
|
||
this.stepList[0].title = '已接单'
|
||
this.stepList[1].title = '已出库'
|
||
this.stepList[2].title = '已收货'
|
||
this.stepList[3].title = '租赁结束'
|
||
this.stepList[4].title = '退租已检修'
|
||
this.currentActive = 5
|
||
}
|
||
if (this.orderStatus == 15) {
|
||
this.stepList[0].title = '已接单'
|
||
this.stepList[1].title = '已出库'
|
||
this.stepList[2].title = '已收货'
|
||
this.stepList[3].title = '租赁结束'
|
||
this.stepList[4].title = '退租已检修'
|
||
this.stepList[5].title = '已结算待确认'
|
||
this.currentActive = 5
|
||
}
|
||
if (this.orderStatus == 20) {
|
||
this.stepList[0].title = '已接单'
|
||
this.stepList[1].title = '已出库'
|
||
this.stepList[2].title = '已收货'
|
||
this.stepList[3].title = '租赁结束'
|
||
this.stepList[4].title = '退租已检修'
|
||
this.stepList[5].title = '结算完成'
|
||
this.currentActive = 7
|
||
}
|
||
this.$forceUpdate();
|
||
this.getList();
|
||
},
|
||
|
||
watch:{
|
||
},
|
||
methods: {
|
||
/** 查询列表 */
|
||
getList() {
|
||
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;
|
||
})}
|
||
console.log('12',this.orderDetails)
|
||
console.log('14',this.overhaulDetails)
|
||
});
|
||
},
|
||
|
||
onViewFileImg(row, index) {
|
||
this.viewFileInfoList = [];
|
||
if(this.fileListAll){
|
||
this.fileListAll.forEach((e) => {
|
||
if (e.fileType == index) {
|
||
this.viewFileInfoList.push(e);
|
||
}
|
||
});
|
||
}
|
||
// if(this.fileListAll){
|
||
// this.viewFileInfoList = this.fileListAll.find((e) => e.fileType == index);
|
||
// }
|
||
console.log('12131',this.viewFileInfoList)
|
||
this.innerVisible = true;
|
||
},
|
||
|
||
},
|
||
};
|
||
</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;
|
||
}
|
||
|
||
.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 #00377a;
|
||
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;
|
||
}
|
||
</style> |