代码优化
This commit is contained in:
BianLzhaoMin
parent
14487ab37d
commit
9df856613b
|
|
@ -130,7 +130,7 @@ div
|
|||
type="primary"
|
||||
@click="onRepublish(row.orderStatus, row.orderId, row.isChangePrice)"
|
||||
>
|
||||
{{ row.orderStatus == 6 || row.isChangePrice == 1 ? '费用详情' : '费用结算' }}
|
||||
{{ row.orderStatus == 7 || row.isChangePrice == 1 ? '费用详情' : '费用结算' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
|
@ -1179,7 +1179,7 @@ const onReset = () => {
|
|||
|
||||
// 重新发布
|
||||
const onRepublish = async (type: any, orderId: any, isChangePrice: any) => {
|
||||
type == 6 || isChangePrice == 1
|
||||
type == 7 || isChangePrice == 1
|
||||
? (dialogTitle.value = '费用详情')
|
||||
: (dialogTitle.value = '费用结算')
|
||||
const { data: res }: any = await getOverhaulApi(orderId)
|
||||
|
|
|
|||
|
|
@ -117,8 +117,9 @@ const getList = async () => {
|
|||
|
||||
const res: any = await getOrderListInfoApi({ orderId: props.orderId })
|
||||
|
||||
// orderDetails.value = res.data
|
||||
console.log(res, '订单详情---')
|
||||
orderDetails.value = res.data
|
||||
// setStepType(res.data.orderStatus)
|
||||
// console.log(res, '订单详情---')
|
||||
// cardList.value = res.data
|
||||
// operationDetails.value[1].preOutboundUser = res.data.detailsList[0].preOutboundUser
|
||||
// operationDetails.value[1].preOutboundTime = res.data.detailsList[0].preOutboundTime
|
||||
|
|
@ -155,6 +156,66 @@ const onOrderManage = () => {
|
|||
console.log(props.orderStatus, 'orderStatus', props.orderId, 'orderId')
|
||||
|
||||
const time = ref([])
|
||||
const currentActive = ref(0)
|
||||
const stepList = ref([
|
||||
{
|
||||
title: '待接单',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已接单',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已出库',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已收货',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '租赁中',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已退租',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已结算',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已完成',
|
||||
description: '',
|
||||
},
|
||||
])
|
||||
|
||||
// const setStepType = (status: any) => {
|
||||
|
||||
// }
|
||||
if (props.orderStatus == 1) {
|
||||
currentActive.value = 0
|
||||
}
|
||||
if (props.orderStatus == 2) {
|
||||
currentActive.value = 1
|
||||
}
|
||||
if (props.orderStatus == 3) {
|
||||
currentActive.value = 3
|
||||
}
|
||||
if (props.orderStatus == 4) {
|
||||
currentActive.value = 5
|
||||
}
|
||||
if (props.orderStatus == 5) {
|
||||
currentActive.value = 6
|
||||
}
|
||||
if (props.orderStatus == 6) {
|
||||
currentActive.value = 7
|
||||
}
|
||||
if (props.orderStatus == 7) {
|
||||
currentActive.value = 8
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -170,17 +231,23 @@ const time = ref([])
|
|||
<TitleTip :titleText="`订单流程`" />
|
||||
|
||||
<div style="padding: 20px 40px">
|
||||
<el-steps :active="1" finish-status="success" process-status="wait" align-center>
|
||||
<el-step title="Done" />
|
||||
<el-step title="Processing" />
|
||||
<el-step title="Step 3" />
|
||||
<el-step title="Step 3" />
|
||||
<el-step title="Step 3" />
|
||||
<el-steps
|
||||
:active="currentActive"
|
||||
finish-status="success"
|
||||
process-status="process"
|
||||
align-center
|
||||
>
|
||||
<el-step
|
||||
v-for="item in stepList"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
/>
|
||||
</el-steps>
|
||||
</div>
|
||||
<TitleTip :titleText="`租赁信息`" />
|
||||
|
||||
<div class="section">
|
||||
<!-- <div class="section">
|
||||
<el-header>
|
||||
<el-row type="flex" justify="space-between" align="middle">
|
||||
<el-col :span="3">
|
||||
|
|
@ -207,147 +274,69 @@ const time = ref([])
|
|||
<el-step :title="getStepTitle(4)"></el-step>
|
||||
<el-step :title="getStepTitle(5)"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<el-row style="padding: 10px 40px">
|
||||
<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: 10px 40px">
|
||||
<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: 10px 40px">
|
||||
<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>
|
||||
|
||||
<div class="section">
|
||||
<el-header style="height: 30px">租赁信息 </el-header>
|
||||
<div style="height: 80px">
|
||||
<div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>订单编号：{{ orderDetails.code }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>下单时间：{{ orderDetails.orderTime }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>出租单位：{{ orderDetails.czcompanyName }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>出租人：{{ orderDetails.person }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>出租人电话：{{ orderDetails.personPhone }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>承租单位：{{ orderDetails.companyName }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>承租人：{{ orderDetails.nickName }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>承租人电话：{{ orderDetails.phoneNumber }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item"
|
||||
style="
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
margin-left: 40px;
|
||||
opacity: 0.7;
|
||||
"
|
||||
>
|
||||
<span>租赁协议：</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <el-header style="height: 30px">租赁信息 </el-header> -->
|
||||
<el-row
|
||||
class="cart-listAll"
|
||||
:style="{ background: cardList.orderStatus == '6' ? '#EBEEF5' : 'white' }"
|
||||
|
|
@ -361,7 +350,7 @@ const time = ref([])
|
|||
<el-col :span="7">
|
||||
<el-row
|
||||
class="cart-list"
|
||||
v-for="(goods, j) in cardList.detailsList"
|
||||
v-for="(goods, j) in orderDetails.detailsList"
|
||||
:key="j"
|
||||
>
|
||||
<el-col class="goods-info">
|
||||
|
|
@ -399,21 +388,23 @@ const time = ref([])
|
|||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
|
||||
总费用
|
||||
</div>
|
||||
<div class="red-font">{{ cardList.cost }}</div>
|
||||
<div class="red-font">{{ orderDetails.cost }}</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
|
||||
租期
|
||||
</div>
|
||||
<div style="color: black; font-weight: bold">
|
||||
{{ cardList.startTime }}
|
||||
{{ orderDetails.startTime }}
|
||||
</div>
|
||||
<div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
|
||||
<div style="color: black; font-weight: bold">{{ cardList.endTime }}</div>
|
||||
<div style="color: black; font-weight: bold">
|
||||
{{ orderDetails.endTime }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div
|
||||
v-if="cardList.orderStatus == '2'"
|
||||
v-if="orderDetails.orderStatus == '2'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -424,7 +415,7 @@ const time = ref([])
|
|||
{{ '待出库' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="cardList.orderStatus == '3'"
|
||||
v-if="orderDetails.orderStatus == '3'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -435,7 +426,7 @@ const time = ref([])
|
|||
{{ '待收货' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="cardList.orderStatus == '4' && isExpired(cardList)"
|
||||
v-if="orderDetails.orderStatus == '4' && isExpired(cardList)"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -447,7 +438,7 @@ const time = ref([])
|
|||
<span style="color: red">(已过期)</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="cardList.orderStatus == '4' && !isExpired(cardList)"
|
||||
v-if="orderDetails.orderStatus == '4' && !isExpired(cardList)"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -458,7 +449,7 @@ const time = ref([])
|
|||
{{ '租赁中' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="cardList.orderStatus == '5'"
|
||||
v-if="orderDetails.orderStatus == '5'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -469,7 +460,7 @@ const time = ref([])
|
|||
{{ '已退租' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="cardList.orderStatus == '6'"
|
||||
v-if="orderDetails.orderStatus == '6'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
@ -480,7 +471,7 @@ const time = ref([])
|
|||
{{ '已完成' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="cardList.orderStatus == '7'"
|
||||
v-if="orderDetails.orderStatus == '7'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -46,12 +46,14 @@ const total: any = ref(0)
|
|||
const cardList = ref<any>([])
|
||||
const status = 0
|
||||
const statusList = [
|
||||
{ id: '1', name: '待接单' },
|
||||
{ id: '2', name: '待出库' },
|
||||
{ id: '3', name: '待收货' },
|
||||
{ id: '4', name: '租赁中' },
|
||||
{ id: '5', name: '已退租' },
|
||||
{ id: '6', name: '已完成' },
|
||||
{ id: '7', name: '已驳回' },
|
||||
{ id: '7', name: '已完成' },
|
||||
{ id: '8', name: '已驳回' },
|
||||
]
|
||||
|
||||
// const dateTimeConvert=(param:string)=>{
|
||||
|
|
@ -340,8 +342,10 @@ const getOverhaulDetails = (orderId: any) => {
|
|||
dialogFormVisibleSettleList.value = true
|
||||
})
|
||||
}
|
||||
const currentOrderId = ref<any>()
|
||||
const onCostConfirm = (orderId: any) => {
|
||||
settleListTitle.value = '费用确认'
|
||||
currentOrderId.value = orderId
|
||||
getOverhaulDetails(orderId)
|
||||
}
|
||||
const onViewFileImg = (row: any, index: number) => {
|
||||
|
|
@ -358,7 +362,7 @@ const costSubmit = () => {
|
|||
})
|
||||
.then(async () => {
|
||||
const res: any = await confirmPriceApi({
|
||||
orderId: overhaulDetails.value.orderId,
|
||||
orderId: currentOrderId.value,
|
||||
})
|
||||
if (res.code == 200) {
|
||||
ElMessage({
|
||||
|
|
@ -573,6 +577,17 @@ const costSubmit = () => {
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" class="order-items-info">
|
||||
<div
|
||||
v-if="item.orderStatus == '1'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: blue;
|
||||
"
|
||||
>
|
||||
{{ '待接单' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item.orderStatus == '2'"
|
||||
style="
|
||||
|
|
@ -627,7 +642,7 @@ const costSubmit = () => {
|
|||
color: #5b33cc;
|
||||
"
|
||||
>
|
||||
{{ '已退租' }}
|
||||
{{ '已退租待结算' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item.orderStatus == '6'"
|
||||
|
|
@ -638,7 +653,7 @@ const costSubmit = () => {
|
|||
color: #c00017;
|
||||
"
|
||||
>
|
||||
{{ '已完成' }}
|
||||
{{ '待结算确认' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item.orderStatus == '7'"
|
||||
|
|
@ -648,6 +663,17 @@ const costSubmit = () => {
|
|||
margin-bottom: 10px;
|
||||
color: #797979;
|
||||
"
|
||||
>
|
||||
{{ '已完成' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item.orderStatus == '8'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #797979;
|
||||
"
|
||||
>
|
||||
{{ '已驳回' }}
|
||||
</div>
|
||||
|
|
@ -683,23 +709,23 @@ const costSubmit = () => {
|
|||
发起退租
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="item.orderStatus == '6'"
|
||||
v-if="item.orderStatus == '6' || item.orderStatus == '7'"
|
||||
@click="handleViewList(item.orderId)"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
费用清单
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="item.orderStatus == 5 && item.isLeaseContent == 1"
|
||||
<!-- <el-button
|
||||
v-if="item.orderStatus == 6 && item.isLeaseContent == 1"
|
||||
@click="onViewOverhaulDetails()"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
检修详情
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
<el-button
|
||||
v-if="item.orderStatus == 5 && item.isLeaseContent == 1"
|
||||
v-if="item.orderStatus == 6 && item.isLeaseContent == 1"
|
||||
@click="onCostConfirm(item.orderId)"
|
||||
type="primary"
|
||||
size="small"
|
||||
|
|
|
|||
|
|
@ -2,15 +2,13 @@
|
|||
<div class="order-container">
|
||||
<!-- <OrderHome /> -->
|
||||
<!-- <OrderDetails /> -->
|
||||
<KeepAlive>
|
||||
<component
|
||||
:orderId="orderId"
|
||||
:is="isComponents"
|
||||
:orderStatus="orderStatus"
|
||||
@onBackOrderHome="onBackOrderHome"
|
||||
@onOpenOrderDetails="onOpenOrderDetails"
|
||||
/>
|
||||
</KeepAlive>
|
||||
<component
|
||||
:orderId="orderId"
|
||||
:is="isComponents"
|
||||
:orderStatus="orderStatus"
|
||||
@onBackOrderHome="onBackOrderHome"
|
||||
@onOpenOrderDetails="onOpenOrderDetails"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,653 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
|
||||
|
||||
import TitleTip from 'components/TitleTip/index.vue'
|
||||
const route = useRoute()
|
||||
/* 查询参数 */
|
||||
const cardList = ref<any>({})
|
||||
const orderStatusTemp = ref<number>(0)
|
||||
const idTemp = ref<string>('')
|
||||
const titleStaus = ref<any>('')
|
||||
//描述信息
|
||||
const operationDetails = ref<any>({
|
||||
1: { title: '已出库', preOutboundUser: '', preOutboundTime: '' },
|
||||
2: { title: '已收货', takeOverUser: '', takeOverTime: '' },
|
||||
3: { title: '租赁结束', rentOverUser: '', rentOverTime: '' },
|
||||
})
|
||||
// 根据步骤的 Id 返回对应的标题
|
||||
const getStepTitle = (stepId: number) => {
|
||||
if (orderStatusTemp.value === 2) {
|
||||
titleStaus.value = '待出库'
|
||||
return stepId === 1 ? '待出库' : ''
|
||||
} else if (orderStatusTemp.value === 3) {
|
||||
titleStaus.value = '待收货'
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '待收货' : ''
|
||||
} else if (orderStatusTemp.value === 4) {
|
||||
titleStaus.value = '租赁中'
|
||||
return stepId === 1 ? '已出库' : stepId === 2 ? '已收货' : stepId === 3 ? '租赁中' : ''
|
||||
} else if (orderStatusTemp.value === 5) {
|
||||
titleStaus.value = '已退租'
|
||||
return stepId === 1
|
||||
? '已出库'
|
||||
: stepId === 2
|
||||
? '已收货'
|
||||
: stepId === 3
|
||||
? '租赁结束'
|
||||
: stepId === 4
|
||||
? '已退租'
|
||||
: ''
|
||||
} else if (orderStatusTemp.value === 6) {
|
||||
titleStaus.value = '已完成'
|
||||
return stepId === 1
|
||||
? '已出库'
|
||||
: stepId === 2
|
||||
? '已收货'
|
||||
: stepId === 3
|
||||
? '租赁结束'
|
||||
: stepId === 4
|
||||
? '已退租'
|
||||
: stepId === 5
|
||||
? '已完成'
|
||||
: ''
|
||||
} else if (orderStatusTemp.value === 7) {
|
||||
titleStaus.value = '已驳回'
|
||||
return stepId === 1 ? '已驳回' : ''
|
||||
}
|
||||
titleStaus.value = ''
|
||||
return '' // 默认返回空字符串
|
||||
}
|
||||
|
||||
// 根据步骤的 Id 返回对应的描述
|
||||
const getDescription = (desId: number) => {
|
||||
const operation = operationDetails.value[desId]
|
||||
if (operation.title == '已出库' && titleStaus.value != '待出库') {
|
||||
return `
|
||||
操作人：${operation.preOutboundUser == null ? ' ' : operation.preOutboundUser}
|
||||
操作时间：${operation.preOutboundTime == null ? ' ' : operation.preOutboundTime}
|
||||
`
|
||||
} else if (
|
||||
operation.title == '已收货' &&
|
||||
titleStaus.value != '待收货' &&
|
||||
titleStaus.value != '待出库'
|
||||
) {
|
||||
return `
|
||||
操作人：${operation.takeOverUser == null ? ' ' : operation.takeOverUser}
|
||||
操作时间：${operation.takeOverTime == null ? ' ' : operation.takeOverTime}
|
||||
`
|
||||
} else if (
|
||||
operation.title == '租赁结束' &&
|
||||
titleStaus.value != '待收货' &&
|
||||
titleStaus.value != '待出库' &&
|
||||
titleStaus.value != '租赁中'
|
||||
) {
|
||||
return `
|
||||
操作人：${operation.rentOverUser == null ? ' ' : operation.rentOverUser}
|
||||
操作时间：${operation.rentOverTime == null ? ' ' : operation.rentOverTime}
|
||||
`
|
||||
}
|
||||
return '' // 默认返回空描述
|
||||
}
|
||||
|
||||
// 计算是否过期
|
||||
const isExpired = (goods: any) => {
|
||||
// 获取当前日期并去掉时间部分
|
||||
const today = new Date()
|
||||
today.setHours(0, 0, 0, 0)
|
||||
|
||||
// 将endtime转为Date对象
|
||||
const endTime = new Date(goods.endTime.replace(/-/g, '/'))
|
||||
|
||||
// 判断endtime是否早于今天
|
||||
return endTime < today
|
||||
}
|
||||
|
||||
const getId = () => {
|
||||
orderStatusTemp.value = Number(route.query.orderStatusTemp)
|
||||
idTemp.value = String(route.query.idTemp)
|
||||
}
|
||||
const orderDetails = ref<any>({})
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
let params = {
|
||||
orderId: idTemp.value,
|
||||
}
|
||||
|
||||
console.log(props.orderId, 'props.orderId')
|
||||
|
||||
const res: any = await getOrderListInfoApi({ orderId: props.orderId })
|
||||
|
||||
orderDetails.value = res.data
|
||||
// setStepType(res.data.orderStatus)
|
||||
// console.log(res, '订单详情---')
|
||||
// cardList.value = res.data
|
||||
// operationDetails.value[1].preOutboundUser = res.data.detailsList[0].preOutboundUser
|
||||
// operationDetails.value[1].preOutboundTime = res.data.detailsList[0].preOutboundTime
|
||||
// operationDetails.value[2].takeOverUser = res.data.detailsList[0].takeOverUser
|
||||
// operationDetails.value[2].takeOverTime = res.data.detailsList[0].takeOverTime
|
||||
// operationDetails.value[3].rentOverUser = res.data.detailsList[0].rentOverUser
|
||||
// operationDetails.value[3].rentOverTime = res.data.detailsList[0].rentOverTime
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getId()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
orderStatus: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
orderId: {
|
||||
type: [String, Number],
|
||||
default: () => '',
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['onBackOrderHome'])
|
||||
const onOrderManage = () => {
|
||||
emit('onBackOrderHome')
|
||||
}
|
||||
|
||||
console.log(props.orderStatus, 'orderStatus', props.orderId, 'orderId')
|
||||
|
||||
const time = ref([])
|
||||
const currentActive = ref(1)
|
||||
const stepList = ref([
|
||||
{
|
||||
title: '待接单',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已接单',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已出库',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已收货',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '租赁中',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已退租',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已结算',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '已完成',
|
||||
description: '',
|
||||
},
|
||||
])
|
||||
|
||||
if (props.orderStatus == 1) {
|
||||
currentActive.value = 0
|
||||
}
|
||||
if (props.orderStatus == 2) {
|
||||
currentActive.value = 1
|
||||
}
|
||||
if (props.orderStatus == 3) {
|
||||
currentActive.value = 3
|
||||
}
|
||||
if (props.orderStatus == 4) {
|
||||
currentActive.value = 5
|
||||
}
|
||||
if (props.orderStatus == 5) {
|
||||
currentActive.value = 6
|
||||
}
|
||||
if (props.orderStatus == 6) {
|
||||
currentActive.value = 7
|
||||
}
|
||||
if (props.orderStatus == 7) {
|
||||
currentActive.value = 8
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 订单管理 -->
|
||||
<div class="container">
|
||||
<el-breadcrumb separator="/" style="padding: 15px 0">
|
||||
<el-breadcrumb-item @click="onOrderManage" class="order-title"
|
||||
>订单管理</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="success"
|
||||
process-status="process"
|
||||
align-center
|
||||
>
|
||||
<el-step
|
||||
v-for="item in stepList"
|
||||
:key="item.title"
|
||||
:title="item.title"
|
||||
:description="item.description"
|
||||
/>
|
||||
</el-steps>
|
||||
</div>
|
||||
<TitleTip :titleText="`租赁信息`" />
|
||||
|
||||
<!-- <div class="section">
|
||||
<el-header>
|
||||
<el-row type="flex" justify="space-between" align="middle">
|
||||
<el-col :span="3">
|
||||
<span>订单流程</span>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="2"
|
||||
style="text-align: right; margin-right: 80px; font-size: 20px"
|
||||
>
|
||||
<div style="color: green">{{ titleStaus }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
|
||||
<el-steps
|
||||
class="step"
|
||||
:space="600"
|
||||
:active="orderStatusTemp === 7 ? 1 : orderStatusTemp - 2"
|
||||
finish-status="success"
|
||||
>
|
||||
<el-step :title="getStepTitle(1)" :description="getDescription(1)"></el-step>
|
||||
<el-step :title="getStepTitle(2)" :description="getDescription(2)"></el-step>
|
||||
<el-step :title="getStepTitle(3)" :description="getDescription(3)"></el-step>
|
||||
<el-step :title="getStepTitle(4)"></el-step>
|
||||
<el-step :title="getStepTitle(5)"></el-step>
|
||||
</el-steps>
|
||||
</div> -->
|
||||
|
||||
<el-row style="padding: 10px 40px">
|
||||
<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: 10px 40px">
|
||||
<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: 10px 40px">
|
||||
<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>
|
||||
|
||||
<div class="section">
|
||||
<!-- <el-header style="height: 30px">租赁信息 </el-header> -->
|
||||
<el-row
|
||||
class="cart-listAll"
|
||||
:style="{ background: cardList.orderStatus == '6' ? '#EBEEF5' : 'white' }"
|
||||
>
|
||||
<el-col :span="1">
|
||||
<!-- <div style="text-align: center">
|
||||
<el-checkbox :key="numberTemp" v-model="goods.isChecked" @change="onChangeGoods(index)" :disabled="goods.orderStatus!='2'">
|
||||
</el-checkbox>
|
||||
</div> -->
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-row
|
||||
class="cart-list"
|
||||
v-for="(goods, j) in orderDetails.detailsList"
|
||||
:key="j"
|
||||
>
|
||||
<el-col class="goods-info">
|
||||
<el-col :span="7">
|
||||
<img
|
||||
:src="goods.url"
|
||||
style="width: 160px; height: 120px"
|
||||
alt=""
|
||||
/>
|
||||
</el-col>
|
||||
<div class="goods-code">
|
||||
<div style="font-size: 10px; font-weight: bold">
|
||||
{{ goods.deviceName }}
|
||||
</div>
|
||||
<div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
"
|
||||
>
|
||||
<div style="flex: 1; text-align: left; width: 220px">
|
||||
租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
|
||||
</div>
|
||||
<div style="flex: 1; text-align: left">
|
||||
数量：{{ goods.num }}{{ ' ' + '台' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
|
||||
总费用
|
||||
</div>
|
||||
<div class="red-font">{{ orderDetails.cost }}</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
|
||||
租期
|
||||
</div>
|
||||
<div style="color: black; font-weight: bold">
|
||||
{{ orderDetails.startTime }}
|
||||
</div>
|
||||
<div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
|
||||
<div style="color: black; font-weight: bold">
|
||||
{{ orderDetails.endTime }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<div
|
||||
v-if="orderDetails.orderStatus == '2'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: blue;
|
||||
"
|
||||
>
|
||||
{{ '待出库' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="orderDetails.orderStatus == '3'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #c76f60;
|
||||
"
|
||||
>
|
||||
{{ '待收货' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="orderDetails.orderStatus == '4' && isExpired(cardList)"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #008d06;
|
||||
"
|
||||
>
|
||||
{{ '租赁中' }}
|
||||
<span style="color: red">(已过期)</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="orderDetails.orderStatus == '4' && !isExpired(cardList)"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #008d06;
|
||||
"
|
||||
>
|
||||
{{ '租赁中' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="orderDetails.orderStatus == '5'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #5b33cc;
|
||||
"
|
||||
>
|
||||
{{ '已退租' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="orderDetails.orderStatus == '6'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #c00017;
|
||||
"
|
||||
>
|
||||
{{ '已完成' }}
|
||||
</div>
|
||||
<div
|
||||
v-if="orderDetails.orderStatus == '7'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #797979;
|
||||
"
|
||||
>
|
||||
{{ '已驳回' }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
// width: 800px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.order-title {
|
||||
cursor: pointer;
|
||||
color: #00a288;
|
||||
font-weight: bold;
|
||||
:deep .el-breadcrumb__inner {
|
||||
color: #00a288;
|
||||
}
|
||||
}
|
||||
|
||||
.order-details {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue