2024-12-19 16:09:08 +08:00
|
|
|
|
<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">
|
|
|
|
|
|
{{
|
2025-02-13 14:46:44 +08:00
|
|
|
|
isNaN(momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day'))
|
|
|
|
|
|
? '-'
|
|
|
|
|
|
: momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day') == 0
|
2024-12-19 16:09:08 +08:00
|
|
|
|
? 1
|
2025-02-13 14:46:44 +08:00
|
|
|
|
: momentInit(goods.takeOverTime).diff(goods.rentOverTime, 'day')
|
2024-12-19 16:09:08 +08:00
|
|
|
|
}}{{ ' ' + '天' }}
|
|
|
|
|
|
</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"
|
|
|
|
|
|
>
|
2025-02-13 14:46:44 +08:00
|
|
|
|
{{ goods.takeOverTime ? goods.takeOverTime.slice(0, 10) : '' }}至
|
|
|
|
|
|
{{ goods.rentOverTime ? goods.rentOverTime.slice(0, 10) : '' }}
|
2024-12-19 16:09:08 +08:00
|
|
|
|
</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',
|
2025-04-30 09:39:28 +08:00
|
|
|
|
background: '#00377a',
|
2024-12-19 16:09:08 +08:00
|
|
|
|
}"
|
|
|
|
|
|
>
|
|
|
|
|
|
<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 }">
|
2025-02-13 14:46:44 +08:00
|
|
|
|
{{ `${row.preOutboundTime}至${row.rentOverTime || ''} ` }}
|
2024-12-19 16:09:08 +08:00
|
|
|
|
</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="{
|
2025-04-30 09:39:28 +08:00
|
|
|
|
background: '#00377a',
|
2024-12-19 16:09:08 +08:00
|
|
|
|
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="{
|
2025-04-30 09:39:28 +08:00
|
|
|
|
background: '#00377a',
|
2024-12-19 16:09:08 +08:00
|
|
|
|
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="{
|
2025-04-30 09:39:28 +08:00
|
|
|
|
background: '#00377a',
|
2024-12-19 16:09:08 +08:00
|
|
|
|
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="{
|
2025-04-30 09:39:28 +08:00
|
|
|
|
background: '#00377a',
|
2024-12-19 16:09:08 +08:00
|
|
|
|
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;
|
2025-04-30 09:39:28 +08:00
|
|
|
|
border-bottom: 1px solid #00377a;
|
2024-12-19 16:09:08 +08:00
|
|
|
|
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>
|
