602 lines
20 KiB
Vue
602 lines
20 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { getOrderListInfoApi } from 'http/api/usercenter/seekorder'
|
||
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: '' },
|
||
})
|
||
// 获取数据列表
|
||
// const getList = async () => {
|
||
// const res: any = await getOrderListApi()
|
||
// console.log('获取数据列表***', res)
|
||
// tableData.value = res.rows
|
||
// total.value = res.total
|
||
// }
|
||
|
||
// 根据步骤的 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 getList = async () => {
|
||
let params = {
|
||
orderId: idTemp.value,
|
||
}
|
||
|
||
const res: any = await getOrderListInfoApi(params)
|
||
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 time = ref([])
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 订单管理 -->
|
||
<div class="container">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item :to="{ name: 'orderManagementCz' }">订单管理</el-breadcrumb-item>
|
||
<el-breadcrumb-item>订单明细</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
<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 - 1"
|
||
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>
|
||
|
||
<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>订单编号：{{ cardList.code }}</span>
|
||
</div>
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
opacity: 0.7;
|
||
"
|
||
>
|
||
<span>下单时间：{{ cardList.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>出租单位：{{ cardList.czcompanyName }}</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
opacity: 0.7;
|
||
"
|
||
>
|
||
<span>出租人：{{ cardList.person }}</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
opacity: 0.7;
|
||
"
|
||
>
|
||
<span>出租人电话：{{ cardList.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>承租单位：{{ cardList.companyName }}</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
opacity: 0.7;
|
||
"
|
||
>
|
||
<span>承租人：{{ cardList.nickName }}</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
opacity: 0.7;
|
||
"
|
||
>
|
||
<span>承租人电话：{{ cardList.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-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 cardList.detailsList" :key="j">
|
||
<el-col class="goods-info">
|
||
<el-col :span="7">
|
||
<img :src="goods.url" 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">{{ cardList.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 }}
|
||
</div>
|
||
<div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
|
||
<div style="color: black; font-weight: bold">{{ cardList.endTime }}</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div
|
||
v-if="cardList.orderStatus == '2'"
|
||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
|
||
>
|
||
{{ '待出库' }}
|
||
</div>
|
||
<div
|
||
v-if="cardList.orderStatus == '3'"
|
||
style="
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #c76f60;
|
||
"
|
||
>
|
||
{{ '待收货' }}
|
||
</div>
|
||
<div
|
||
v-if="cardList.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="cardList.orderStatus == '4' && !isExpired(cardList)"
|
||
style="
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #008d06;
|
||
"
|
||
>
|
||
{{ '租赁中' }}
|
||
</div>
|
||
<div
|
||
v-if="cardList.orderStatus == '5'"
|
||
style="
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #5b33cc;
|
||
"
|
||
>
|
||
{{ '已退租' }}
|
||
</div>
|
||
<div
|
||
v-if="cardList.orderStatus == '6'"
|
||
style="
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #c00017;
|
||
"
|
||
>
|
||
{{ '已完成' }}
|
||
</div>
|
||
<div
|
||
v-if="cardList.orderStatus == '7'"
|
||
style="
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #797979;
|
||
"
|
||
>
|
||
{{ '已驳回' }}
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
// width: 800px;
|
||
margin: 0 auto;
|
||
padding: 10px;
|
||
// background: #eeeff6;
|
||
font-size: 14px;
|
||
.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;
|
||
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>
|