代码优化
This commit is contained in:
BianLzhaoMin
parent
6c69e39a65
commit
660353b1d7
|
|
@ -3,20 +3,23 @@
|
|||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export { }
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Breadcrumb: typeof import('./src/components/Breadcrumb/index.vue')['default']
|
||||
ElBadge: typeof import('element-plus/es')['ElBadge']
|
||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElCountdown: typeof import('element-plus/es')['ElCountdown']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
|
|
@ -27,12 +30,9 @@ declare module 'vue' {
|
|||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ VITE_API_URL = '/proxyApi'
|
|||
# 开发环境接口地址
|
||||
# VITE_proxyTarget = 'http://10.40.92.74:8080' #盛旭
|
||||
|
||||
VITE_proxyTarget = 'http://192.168.2.246:28080' # 马帅
|
||||
# VITE_proxyTarget = 'http://192.168.0.244:28580' # 马帅
|
||||
# VITE_proxyTarget = 'http://192.168.2.246:28080' # 马帅
|
||||
VITE_proxyTarget = 'http://192.168.0.244:28580' # 马帅
|
||||
# VITE_proxyTarget = 'http://192.168.2.129:18080' # 马帅
|
||||
|
||||
# VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型)
|
||||
|
|
|
|||
|
|
@ -295,21 +295,21 @@ const routes: Array<RouteRecordRaw> = [
|
|||
// isLogin: true
|
||||
// },
|
||||
// },
|
||||
// /* 订单管理（订单详情出租） */
|
||||
// {
|
||||
// path: 'orderManagementInfoBuy',
|
||||
// name: 'orderManagementInfoBuy',
|
||||
// component: () => import('@/views/user/orderManagementCz/detail.vue'),
|
||||
// meta: {
|
||||
// title: '订单详情',
|
||||
// keepAlive: true,
|
||||
// AuthFlag: false,
|
||||
// isLogin: false
|
||||
// },
|
||||
// },
|
||||
/* 订单管理（订单详情出租） */
|
||||
{
|
||||
path: '/orderManagementInfoBuy',
|
||||
name: 'orderManagementInfoBuy',
|
||||
component: () => import('@/views/user/orderManagementCz/detail.vue'),
|
||||
meta: {
|
||||
title: '订单详情',
|
||||
keepAlive: true,
|
||||
AuthFlag: false,
|
||||
isLogin: false
|
||||
},
|
||||
},
|
||||
// /* 订单管理（订单详情承租） */
|
||||
{
|
||||
path: 'orderManagementInfo',
|
||||
path: '/orderManagementInfo',
|
||||
name: 'orderManagementInfo',
|
||||
component: () => import('@/views/user/orderManagement/detail.vue'),
|
||||
meta: {
|
||||
|
|
@ -321,7 +321,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||
},
|
||||
// /* 订单管理（退租） */
|
||||
{
|
||||
path: 'rentinTermination',
|
||||
path: '/rentinTermination',
|
||||
name: 'rentinTermination',
|
||||
component: () => import('views/user/orderManagement/orderCom/rentinTermination.vue'),
|
||||
meta: {
|
||||
|
|
|
|||
|
|
@ -10,73 +10,99 @@ 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 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 ? '已驳回' : ''
|
||||
}
|
||||
|
||||
// 计算是否过期
|
||||
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;
|
||||
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 = ()=>{
|
||||
// 计算是否过期
|
||||
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)
|
||||
}
|
||||
|
|
@ -85,10 +111,10 @@ const getId = ()=>{
|
|||
const getList = async () => {
|
||||
let params = {
|
||||
orderId: idTemp.value,
|
||||
flag:false
|
||||
flag: false,
|
||||
}
|
||||
|
||||
const res: any = await getOrderListInfoApi(params)
|
||||
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
|
||||
|
|
@ -96,120 +122,230 @@ const getList = async () => {
|
|||
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()
|
||||
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:80px;font-size: 20px;">
|
||||
<div style="color:green;">{{titleStaus}}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ name: '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: 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>
|
||||
|
||||
<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>
|
||||
<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 class="cart-listAll" :style="{background: cardList.orderStatus=='6' ? '#EBEEF5':'white'}">
|
||||
<el-col :span="1" >
|
||||
<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 :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 :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>
|
||||
|
|
@ -217,17 +353,17 @@ 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">{{ 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 }}
|
||||
{{ cardList.startTime }}
|
||||
</div>
|
||||
<div style="margin-top:3px;margin-bottom:3px">{{ '至' }}</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" >
|
||||
<el-col :span="4">
|
||||
<div
|
||||
v-if="cardList.orderStatus == '2'"
|
||||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
|
||||
|
|
@ -236,64 +372,93 @@ const time = ref([])
|
|||
</div>
|
||||
<div
|
||||
v-if="cardList.orderStatus == '3'"
|
||||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #C76F60"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #797979;
|
||||
"
|
||||
>
|
||||
{{ '已驳回' }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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;;
|
||||
.step {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cart-tbody {
|
||||
.cart-tbody {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
|
|
@ -320,7 +485,7 @@ const time = ref([])
|
|||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -358,21 +523,21 @@ const time = ref([])
|
|||
}
|
||||
}
|
||||
}
|
||||
.cart-listAll{
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
|
@ -411,18 +576,18 @@ const time = ref([])
|
|||
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;
|
||||
}
|
||||
.lease-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.red-font {
|
||||
color: #ff4800;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@ 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 operationDetails = ref<any>({
|
||||
1: { title: '已出库', preOutboundUser: '', preOutboundTime: '' },
|
||||
2: { title: '已收货', takeOverUser: '', takeOverTime: '' },
|
||||
3: { title: '租赁结束', rentOverUser: '', rentOverTime: '' },
|
||||
})
|
||||
// 获取数据列表
|
||||
// const getList = async () => {
|
||||
// const res: any = await getOrderListApi()
|
||||
|
|
@ -24,68 +24,94 @@ const operationDetails = ref<any>({
|
|||
// 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 ''; // 默认返回空描述
|
||||
// 根据步骤的 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 ? '已驳回' : ''
|
||||
}
|
||||
|
||||
// 计算是否过期
|
||||
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;
|
||||
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 = ()=>{
|
||||
// 计算是否过期
|
||||
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)
|
||||
}
|
||||
|
|
@ -94,10 +120,10 @@ const getId = ()=>{
|
|||
const getList = async () => {
|
||||
let params = {
|
||||
orderId: idTemp.value,
|
||||
flag:true
|
||||
flag: true,
|
||||
}
|
||||
|
||||
const res: any = await getOrderListInfoApi(params)
|
||||
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
|
||||
|
|
@ -107,117 +133,228 @@ const getList = async () => {
|
|||
operationDetails.value[3].rentOverTime = res.data.detailsList[0].rentOverTime
|
||||
}
|
||||
|
||||
onBeforeMount(()=>{
|
||||
getId()
|
||||
onBeforeMount(() => {
|
||||
getId()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
|
||||
const time = ref([])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 订单管理 -->
|
||||
<div class="container">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item :to="{ path: '/my-user/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-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>
|
||||
<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>
|
||||
|
||||
<el-row class="cart-listAll" :style="{background: cardList.orderStatus=='6' ? '#EBEEF5':'white'}">
|
||||
<el-col :span="1" >
|
||||
<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 :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 :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>
|
||||
|
|
@ -225,17 +362,17 @@ 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">{{ 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 }}
|
||||
{{ cardList.startTime }}
|
||||
</div>
|
||||
<div style="margin-top:3px;margin-bottom:3px">{{ '至' }}</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" >
|
||||
<el-col :span="4">
|
||||
<div
|
||||
v-if="cardList.orderStatus == '2'"
|
||||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
|
||||
|
|
@ -244,65 +381,93 @@ const time = ref([])
|
|||
</div>
|
||||
<div
|
||||
v-if="cardList.orderStatus == '3'"
|
||||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #C76F60"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #797979;
|
||||
"
|
||||
>
|
||||
{{ '已驳回' }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</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;;
|
||||
.step {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cart-tbody {
|
||||
.cart-tbody {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
|
|
@ -329,7 +494,7 @@ const time = ref([])
|
|||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -367,21 +532,21 @@ const time = ref([])
|
|||
}
|
||||
}
|
||||
}
|
||||
.cart-listAll{
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
|
@ -420,18 +585,18 @@ const time = ref([])
|
|||
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;
|
||||
}
|
||||
.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
Loading…
Reference in New Issue