324 lines
13 KiB
Vue
324 lines
13 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: '' },
|
||
})
|
||
// 根据步骤的 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 getId = ()=>{
|
||
orderStatusTemp.value = Number(route.query.orderStatusTemp)
|
||
idTemp.value = String(route.query.idTemp)
|
||
}
|
||
|
||
/** 查询列表 */
|
||
const getList = async () => {
|
||
let params = {
|
||
id: 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="{ path: '/my-user/orderManagement' }">订单管理</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:20px;font-size: 20px;">
|
||
<div style="color:green;">{{titleStaus}}</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-header>
|
||
|
||
<el-steps class="step" :space="400" :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>
|
||
|
||
<div class="cart-tbody" >
|
||
<el-row class="cart-list" v-for="(goods, j) in cardList.detailsList" :key="j">
|
||
<el-col :span="9" 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>租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}</div>
|
||
<div>数量：{{ goods.num }}{{ ' ' + '台' }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
|
||
总费用
|
||
</div>
|
||
<div class="red-font">{{goods.costs}}</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">
|
||
{{ goods.rentBeginTime }}
|
||
</div>
|
||
<div style="margin-top:3px;margin-bottom:3px">{{ '至' }}</div>
|
||
<div style="color: black; font-weight: bold">{{ goods.rentEndTime }}</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div v-if="goods.orderStatus=='0'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"未下单"}}</div>
|
||
<div v-if="goods.orderStatus=='1'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已下单"}}</div>
|
||
<div v-if="goods.orderStatus=='2'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"待出库"}}</div>
|
||
<div v-if="goods.orderStatus=='3'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"待收货"}}</div>
|
||
<div v-if="goods.orderStatus=='4'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"租赁中"}}</div>
|
||
<div v-if="goods.orderStatus=='5'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已退租"}}</div>
|
||
<div v-if="goods.orderStatus=='6'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已完成"}}</div>
|
||
<div v-if="goods.orderStatus=='7'" style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color:blue">{{"已驳回"}}</div>
|
||
</el-col>
|
||
<!-- <el-col :span="3">
|
||
<div>
|
||
<el-button
|
||
@click="handleViewOrder(j)"
|
||
type="text"
|
||
size="mini"
|
||
style="color: #blue; font-weight: bold"
|
||
>
|
||
出库
|
||
</el-button>
|
||
<el-button
|
||
@click="handleViewOrder(j)"
|
||
type="text"
|
||
size="mini"
|
||
style="color: #blue; font-weight: bold"
|
||
>
|
||
驳回
|
||
</el-button>
|
||
</div>
|
||
</el-col> -->
|
||
</el-row>
|
||
</div>
|
||
|
||
</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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|