承租方订单页面优化
This commit is contained in:
BianLzhaoMin
parent
9c3ae0bc5a
commit
d288f3131f
|
|
@ -18,13 +18,11 @@ declare module 'vue' {
|
|||
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']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
|
|
@ -32,7 +30,6 @@ 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']
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ VITE_API_URL = '/proxyApi'
|
|||
# VITE_proxyTarget = 'http://192.168.2.246:28080' # 马帅
|
||||
# VITE_proxyTarget = 'http://192.168.2.127:28080' # 梁超
|
||||
# VITE_proxyTarget = 'http://36.33.26.201:17788/proxyApi' # 测试服务
|
||||
VITE_proxyTarget = 'http://192.168.0.244:28580' # 测试服务
|
||||
# VITE_proxyTarget = 'http://192.168.2.129:18080' # 马帅j
|
||||
# VITE_proxyTarget = 'http://192.168.0.244:28580' # 测试服务
|
||||
VITE_proxyTarget = 'http://192.168.2.72:28080' # 马帅j
|
||||
|
||||
# VITE_proxyTarget = 'http://10.40.92.185:9206' # 赵福海 ( 设备类型)
|
||||
# VITE_proxyTarget = 'http://10.40.92.16:9502' # 牛 (个人中心 基础信息企业申请认证)
|
||||
|
|
|
|||
|
|
@ -271,32 +271,32 @@ onMounted(() => {
|
|||
// }
|
||||
// }
|
||||
const onLeaseDateChange = (value: any, companyIndex: number, goodsIndex: number) => {
|
||||
// if (!value) {
|
||||
// cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = ''
|
||||
// cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = ''
|
||||
// cardList.value[companyIndex].devInfoVoList[goodsIndex].days = 0
|
||||
// } else {
|
||||
// cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = value[0]
|
||||
// cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = value[1]
|
||||
// cardList.value[companyIndex].devInfoVoList[goodsIndex].days = moment(value[1]).diff(
|
||||
// value[0],
|
||||
// 'day',
|
||||
// )
|
||||
// }
|
||||
|
||||
cardList.value.forEach((e: any) => {
|
||||
e.devInfoVoList.forEach((j: any) => {
|
||||
if (!value) {
|
||||
j.rentBeginTime = ''
|
||||
j.rentEndTime = ''
|
||||
j.days = 0
|
||||
cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = ''
|
||||
cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = ''
|
||||
cardList.value[companyIndex].devInfoVoList[goodsIndex].days = 0
|
||||
} else {
|
||||
j.rentBeginTime = value[0]
|
||||
j.rentEndTime = value[1]
|
||||
j.days = moment(value[1]).diff(value[0], 'day')
|
||||
cardList.value[companyIndex].devInfoVoList[goodsIndex].rentBeginTime = value[0]
|
||||
cardList.value[companyIndex].devInfoVoList[goodsIndex].rentEndTime = value[1]
|
||||
cardList.value[companyIndex].devInfoVoList[goodsIndex].days = moment(value[1]).diff(
|
||||
value[0],
|
||||
'day',
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// cardList.value.forEach((e: any) => {
|
||||
// e.devInfoVoList.forEach((j: any) => {
|
||||
// if (!value) {
|
||||
// j.rentBeginTime = ''
|
||||
// j.rentEndTime = ''
|
||||
// j.days = 0
|
||||
// } else {
|
||||
// j.rentBeginTime = value[0]
|
||||
// j.rentEndTime = value[1]
|
||||
// j.days = moment(value[1]).diff(value[0], 'day')
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
}
|
||||
|
||||
// 删除按钮
|
||||
|
|
|
|||
|
|
@ -369,6 +369,7 @@ if (props.orderStatus == 7) {
|
|||
? 'border-bottom:1px solid #eee'
|
||||
: ''
|
||||
"
|
||||
style="min-height: 140px"
|
||||
>
|
||||
<el-image
|
||||
:src="goods.url"
|
||||
|
|
@ -378,6 +379,7 @@ if (props.orderStatus == 7) {
|
|||
/>
|
||||
<div
|
||||
style="
|
||||
min-height: 140px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
@ -404,15 +406,39 @@ if (props.orderStatus == 7) {
|
|||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="5" class="order-items-info">
|
||||
<div>总费用</div>
|
||||
<div class="red-font">{{ orderDetails.cost }} 元</div>
|
||||
</el-col>
|
||||
<el-col :span="5" class="order-items-info" style="border: none">
|
||||
<div
|
||||
v-for="(goods, j) in orderDetails.detailsList"
|
||||
:key="j"
|
||||
class="order-items order-info"
|
||||
:style="
|
||||
j != orderDetails.detailsList.length - 1
|
||||
? 'border-bottom:1px solid #eee'
|
||||
: ''
|
||||
"
|
||||
style="min-height: 140px; width: 100%"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div>租期</div>
|
||||
<div style="font-weight: bold; margin-top: 10px">
|
||||
{{ orderDetails.startTime }}至{{ orderDetails.endTime }}
|
||||
{{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="5" class="order-items-info" style="border: none">
|
||||
<div>总费用</div>
|
||||
<div class="red-font">{{ orderDetails.cost }} 元</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -592,6 +618,7 @@ if (props.orderStatus == 7) {
|
|||
.order-info {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.order-items-info {
|
||||
|
|
|
|||
|
|
@ -46,17 +46,27 @@ const pageNumber = 1
|
|||
const total: any = ref(0)
|
||||
const cardList = ref<any>([])
|
||||
const status = 0
|
||||
const statusList = [
|
||||
const statusList: any = [
|
||||
{ id: '1', name: '待接单' },
|
||||
{ id: '2', name: '待出库' },
|
||||
{ id: '3', name: '待收货' },
|
||||
{ id: '4', name: '租赁中' },
|
||||
{ id: '5', name: '已退租' },
|
||||
{ id: '6', name: '已完成' },
|
||||
{ id: '5', name: '已退租待结算' },
|
||||
{ id: '6', name: '结算待确认' },
|
||||
{ id: '7', name: '已完成' },
|
||||
{ id: '8', name: '已驳回' },
|
||||
]
|
||||
|
||||
const orderText = (status: any) => {
|
||||
return statusList.filter((e: any) => e.id == status)[0].name
|
||||
}
|
||||
const orderType = (status: any) => {
|
||||
if (status == 1 || status == 2 || status == 3 || status == 5) return 'primary'
|
||||
if (status == 4 || status == 7) return 'success'
|
||||
if (status == 5 || status == 6) return 'warning'
|
||||
if (status == 8) return 'danger'
|
||||
}
|
||||
|
||||
// const dateTimeConvert=(param:string)=>{
|
||||
// const time = param;
|
||||
// // 创建一个新的Date对象
|
||||
|
|
@ -183,16 +193,38 @@ const dialogVisible: any = ref(false)
|
|||
const dialogImageUrl = ref('')
|
||||
|
||||
// 发起退租
|
||||
const handleViewBack = async (row: any) => {
|
||||
const handleViewBack = async (goods: any, row: any) => {
|
||||
ElMessageBox.confirm('是否确定发起退租？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
return passApi({ orderId: row.orderId, orderStatus: 5, maIds: [goods.maId] })
|
||||
})
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '发起退租成功',
|
||||
})
|
||||
numberTemp.value = numberTemp.value + 1
|
||||
getList()
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
// 全部退租
|
||||
const handleViewBackAll = (row: any) => {
|
||||
ElMessageBox.confirm('是否确定发起全部退租？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
return passApi({ orderId: row.orderId, orderStatus: 5 })
|
||||
})
|
||||
.then((res) => {
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
|
|
@ -506,7 +538,17 @@ const costSubmit = () => {
|
|||
{{ item.czcompanyName }}
|
||||
</span>
|
||||
</el-col>
|
||||
|
||||
<div class="order-type-box">
|
||||
<el-tag
|
||||
style="padding: 6px 12px"
|
||||
:type="orderType(item.orderStatus)"
|
||||
effect="light"
|
||||
>{{ orderText(item.orderStatus) }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<el-row
|
||||
style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
|
||||
class="order-title-info"
|
||||
|
|
@ -537,6 +579,7 @@ const costSubmit = () => {
|
|||
v-for="(goods, j) in item.detailsList"
|
||||
:key="j"
|
||||
class="order-items order-info"
|
||||
style="min-height: 140px"
|
||||
:style="
|
||||
j != item.detailsList.length - 1
|
||||
? 'border-bottom:1px solid #eee'
|
||||
|
|
@ -547,6 +590,7 @@ const costSubmit = () => {
|
|||
<div
|
||||
style="
|
||||
flex: 1;
|
||||
min-height: 140px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
|
|
@ -576,13 +620,50 @@ const costSubmit = () => {
|
|||
<div class="red-font">{{ item.cost }} 元</div>
|
||||
</el-col>
|
||||
<el-col :span="4" class="order-items-info">
|
||||
<div
|
||||
v-for="(goods, j) in item.detailsList"
|
||||
:key="j"
|
||||
class="order-info"
|
||||
:style="
|
||||
j != item.detailsList.length - 1
|
||||
? 'border-bottom:1px solid #eee'
|
||||
: ''
|
||||
"
|
||||
style="min-height: 140px"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div>租期</div>
|
||||
<div style="font-weight: bold; margin-top: 10px">
|
||||
{{ item.startTime }}至{{ item.endTime }}
|
||||
{{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" class="order-items-info">
|
||||
<div
|
||||
v-for="(goods, j) in item.detailsList"
|
||||
:key="j"
|
||||
class="order-info"
|
||||
:style="
|
||||
j != item.detailsList.length - 1
|
||||
? 'border-bottom:1px solid #eee'
|
||||
: ''
|
||||
"
|
||||
style="min-height: 140px; width: 95%"
|
||||
>
|
||||
<el-tag :type="orderType(goods.orderStatus)" effect="light">{{
|
||||
orderText(goods.orderStatus)
|
||||
}}</el-tag>
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
v-if="item.orderStatus == '1'"
|
||||
style="
|
||||
font-size: 14px;
|
||||
|
|
@ -681,16 +762,36 @@ const costSubmit = () => {
|
|||
"
|
||||
>
|
||||
{{ '已驳回' }}
|
||||
</div>
|
||||
</div> -->
|
||||
</el-col>
|
||||
<el-col :span="6" class="handle-btn">
|
||||
|
||||
<el-col :span="2" class="order-items-info" v-if="item.orderStatus == 4">
|
||||
<div
|
||||
v-for="(goods, j) in item.detailsList"
|
||||
:key="j"
|
||||
class="order-info"
|
||||
:style="
|
||||
j != item.detailsList.length - 1
|
||||
? 'border-bottom:1px solid #eee'
|
||||
: ''
|
||||
"
|
||||
style="min-height: 140px; width: 95%"
|
||||
>
|
||||
<el-button
|
||||
v-if="item.orderStatus == '3'"
|
||||
v-if="goods.orderStatus == 4"
|
||||
@click="handleViewBack(goods, item)"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="confirmReceipt(index)"
|
||||
>确认收货</el-button
|
||||
>
|
||||
发起退租
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="item.orderStatus == 4 ? 4 : 6"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<div :class="item.orderStatus == 4 ? 'handle-btn-4' : 'handle-btn'">
|
||||
<el-button
|
||||
v-if="item.orderStatus == '2'"
|
||||
type="primary"
|
||||
|
|
@ -699,20 +800,17 @@ const costSubmit = () => {
|
|||
>取消</el-button
|
||||
>
|
||||
|
||||
<el-button @click="handleViewOrder(j, item)" type="primary" size="small">
|
||||
<el-button
|
||||
@click="handleViewOrder(j, item)"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
订单详情
|
||||
</el-button>
|
||||
<el-button @click="handleViewWord(j)" type="primary" size="small">
|
||||
租赁协议
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="item.orderStatus == '4'"
|
||||
@click="handleViewBack(item)"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
发起退租
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="item.orderStatus == '6' || item.orderStatus == '7'"
|
||||
@click="handleViewList(item.orderId)"
|
||||
|
|
@ -737,6 +835,17 @@ const costSubmit = () => {
|
|||
>
|
||||
费用确认
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
v-if="item.orderStatus == 4"
|
||||
@click="handleViewBackAll(item)"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
全部退租
|
||||
</el-button>
|
||||
<el-button type="primary" size="small"> 发起减免 </el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -1506,9 +1615,16 @@ const costSubmit = () => {
|
|||
}
|
||||
|
||||
.order-title-info {
|
||||
padding: 6px 4px;
|
||||
position: relative;
|
||||
padding: 14px 4px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
|
||||
.order-type-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.order-items {
|
||||
|
|
@ -1518,6 +1634,8 @@ const costSubmit = () => {
|
|||
.order-info {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.order-items-info {
|
||||
|
|
@ -1535,6 +1653,7 @@ const costSubmit = () => {
|
|||
}
|
||||
|
||||
.handle-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
|
@ -1544,4 +1663,17 @@ const costSubmit = () => {
|
|||
margin-left: 10px !important;
|
||||
}
|
||||
}
|
||||
.handle-btn-4 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.el-button {
|
||||
width: calc((100% - 20px) / 2);
|
||||
// margin: 0;
|
||||
margin-left: 10px !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -157,7 +157,6 @@ console.log(props.orderStatus, 'orderStatus', props.orderId, 'orderId')
|
|||
|
||||
const time = ref([])
|
||||
const currentActive = ref(0)
|
||||
const type = ref(0)
|
||||
const stepList = ref([
|
||||
{
|
||||
title: '待接单',
|
||||
|
|
@ -176,22 +175,20 @@ const stepList = ref([
|
|||
description: '',
|
||||
},
|
||||
{
|
||||
title: '待退租结算',
|
||||
title: '退租待结算',
|
||||
description: '',
|
||||
},
|
||||
{
|
||||
title: '待结算确认',
|
||||
title: '结算待确认',
|
||||
description: '',
|
||||
},
|
||||
|
||||
{
|
||||
title: '已完成',
|
||||
description: '',
|
||||
},
|
||||
])
|
||||
|
||||
// const setStepType = (status: any) => {
|
||||
|
||||
// }
|
||||
if (props.orderStatus == 1) {
|
||||
currentActive.value = 0
|
||||
}
|
||||
|
|
@ -372,6 +369,7 @@ if (props.orderStatus == 7) {
|
|||
? 'border-bottom:1px solid #eee'
|
||||
: ''
|
||||
"
|
||||
style="min-height: 140px"
|
||||
>
|
||||
<el-image
|
||||
:src="goods.url"
|
||||
|
|
@ -381,6 +379,7 @@ if (props.orderStatus == 7) {
|
|||
/>
|
||||
<div
|
||||
style="
|
||||
min-height: 140px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
@ -407,15 +406,39 @@ if (props.orderStatus == 7) {
|
|||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="5" class="order-items-info">
|
||||
<div>总费用</div>
|
||||
<div class="red-font">{{ orderDetails.cost }} 元</div>
|
||||
</el-col>
|
||||
<el-col :span="5" class="order-items-info" style="border: none">
|
||||
<div
|
||||
v-for="(goods, j) in orderDetails.detailsList"
|
||||
:key="j"
|
||||
class="order-items order-info"
|
||||
:style="
|
||||
j != orderDetails.detailsList.length - 1
|
||||
? 'border-bottom:1px solid #eee'
|
||||
: ''
|
||||
"
|
||||
style="min-height: 140px; width: 100%"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<div>租期</div>
|
||||
<div style="font-weight: bold; margin-top: 10px">
|
||||
{{ orderDetails.startTime }}至{{ orderDetails.endTime }}
|
||||
{{ goods.rentBeginTime }}至{{ goods.rentEndTime }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="5" class="order-items-info" style="border: none">
|
||||
<div>总费用</div>
|
||||
<div class="red-font">{{ orderDetails.cost }} 元</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -595,6 +618,7 @@ if (props.orderStatus == 7) {
|
|||
.order-info {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.order-items-info {
|
||||
|
|
|
|||
Loading…
Reference in New Issue