代码优化

This commit is contained in:
BianLzhaoMin 2024-12-04 11:28:24 +08:00
parent 2de641d81d
commit cbf3069a57
6 changed files with 293 additions and 13 deletions

12
components.d.ts vendored
View File

@ -8,15 +8,23 @@ 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']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
@ -27,8 +35,12 @@ declare module 'vue' {
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']
ElSteps: typeof import('element-plus/es')['ElSteps']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']

View File

@ -136,12 +136,21 @@ const onSelectRoles = (type: number) => {
const getBookCarDetailsData = async () => {
const res: any = await getBookCarDetailsApi()
cart.SET_CART_NUM(res.data.length || 0)
let amountNum = 0
res.data.forEach((e: any) => {
amountNum = e.devInfoVoList.length + amountNum
})
cart.SET_CART_NUM(amountNum)
}
getBookCarDetailsData()
const cartNum = computed(() => {
return cart.cartNum
// let amountNum = 0
// cardList.value.forEach((e: any) => {
// amountNum = e.devInfoVoList.length + amountNum
// })
// return amountNum
})
//

View File

@ -929,7 +929,11 @@ const onAddCart = async () => {
})
getData()
const res: any = await getBookCarDetailsApi()
cart.SET_CART_NUM(res.data.length)
let amountNum = 0
res.data.forEach((e: any) => {
amountNum = e.devInfoVoList.length + amountNum
})
cart.SET_CART_NUM(amountNum)
} else {
ElMessage({
type: 'error',

View File

@ -323,7 +323,7 @@ const time = ref([])
<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="" />
<img :src="goods.url" style="width: 160px; height: 120px" alt="" />
</el-col>
<div class="goods-code">
<div style="font-size: 10px; font-weight: bold">

View File

@ -424,6 +424,225 @@ const confirmFail = async (index: number) => {
</el-form>
<template v-if="cardList.length > 0">
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
<el-row class="order-title-info">
<el-col :span="8">
<span> 订单编号 </span>
<span>
{{ item.code }}
</span>
</el-col>
<el-col :span="8">
<span> 下单时间 </span>
<span>
{{ item.orderTime }}
</span>
</el-col>
<el-col :span="8">
<span> 装备所属公司 </span>
<span>
{{ item.czcompanyName }}
</span>
</el-col>
</el-row>
<el-row
style="border-bottom: 1px solid #ccc; margin-bottom: 10px"
class="order-title-info"
>
<el-col :span="8">
<span> 出租方联系电话 </span>
<span>
{{ item.personPhone }}
</span>
</el-col>
<el-col :span="8">
<span> 承租方联系电话 </span>
<span>
{{ item.phoneNumber }}
</span>
</el-col>
<el-col :span="8">
<span> 承租方地址 </span>
<span>
{{ item.czcompanyName }}
</span>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div
v-for="(goods, j) in item.detailsList"
:key="j"
class="order-items order-info"
:style="
j != item.detailsList.length - 1
? 'border-bottom:1px solid #eee'
: ''
"
>
<img :src="goods.url" style="width: 160px; height: 120px" alt="" />
<div
style="
flex: 1;
display: flex;
justify-content: space-around;
flex-direction: column;
padding-left: 12px;
"
>
<el-row style="color: #169bd5; font-weight: bold">
{{ goods.deviceName }}
</el-row>
<el-row>
<el-col :span="4"> 租期 </el-col>
<el-col :span="18"> {{ goods.days }}{{ ' ' + '天' }} </el-col>
</el-row>
<el-row>
<el-col :span="4"> 租金 </el-col>
<el-col :span="8">
{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}
</el-col>
<el-col :span="4"> 数量 </el-col>
<el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }} </el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :span="3" class="order-items-info">
<div>总费用</div>
<div class="red-font">{{ item.cost }} </div>
</el-col>
<el-col :span="4" class="order-items-info">
<div>租期</div>
<div style="font-weight: bold; margin-top: 10px">
{{ item.startTime }}{{ item.endTime }}
</div>
</el-col>
<el-col :span="3" class="order-items-info">
<div
v-if="item.orderStatus == '2'"
style="
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: blue;
"
>
{{ '待出库' }}
</div>
<div
v-if="item.orderStatus == '3'"
style="
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #c76f60;
"
>
{{ '待收货' }}
</div>
<div
v-if="item.orderStatus == '4' && isExpired(item)"
style="
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #008d06;
"
>
{{ '租赁中' }}
<span style="color: red">(已过期)</span>
</div>
<div
v-if="item.orderStatus == '4' && !isExpired(item)"
style="
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #008d06;
"
>
{{ '租赁中' }}
</div>
<div
v-if="item.orderStatus == '5'"
style="
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #5b33cc;
"
>
{{ '已退租' }}
</div>
<div
v-if="item.orderStatus == '6'"
style="
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #c00017;
"
>
{{ '已完成' }}
</div>
<div
v-if="item.orderStatus == '7'"
style="
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #797979;
"
>
{{ '已驳回' }}
</div>
</el-col>
<el-col :span="6" class="handle-btn">
<el-button
v-if="item.orderStatus == '3'"
type="primary"
size="small"
@click="confirmReceipt(index)"
>确认收货</el-button
>
<el-button
v-if="item.orderStatus == '2'"
type="primary"
size="small"
@click="confirmFail(index)"
>取消</el-button
>
<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'"
@click="handleViewList(j)"
type="primary"
size="small"
>
费用清单
</el-button>
</el-col>
</el-row>
</div>
</template>
<!-- <template v-if="cardList.length > 0">
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
<el-row style="border-bottom: 1px solid #ccc">
<el-col :span="1">
@ -566,12 +785,7 @@ const confirmFail = async (index: number) => {
class="cart-listAll"
:style="{ background: item.orderStatus == '2' ? '#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="1"> </el-col>
<el-col :span="7">
<el-row class="cart-list" v-for="(goods, j) in item.detailsList" :key="j">
@ -738,7 +952,7 @@ const confirmFail = async (index: number) => {
</el-col>
</el-row>
</div>
</template>
</template> -->
<el-empty v-else />
<PagingComponent
@ -1039,7 +1253,9 @@ const confirmFail = async (index: number) => {
.cart-tbody {
background: #fff;
padding: 8px 12px;
margin: 10px;
margin-bottom: 6px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
.cart-user-info {
display: flex;
@ -1152,4 +1368,43 @@ const confirmFail = async (index: number) => {
background-color: skyblue;
z-index: 9999;
}
.order-title-info {
padding: 6px 4px;
font-size: 14px;
color: #999;
}
.order-items {
border-right: 1px solid #eee;
}
.order-info {
display: flex;
padding: 10px 0;
}
.order-items-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid #eee;
}
.red-font {
color: #ff4800;
font-weight: bold;
margin-top: 10px;
}
.handle-btn {
padding: 0 6px;
display: flex;
flex-wrap: wrap;
align-items: center;
.el-button {
flex: 1;
}
}
</style>

View File

@ -807,7 +807,7 @@ const handleViewWord = () => {
</el-col>
<el-col :span="3" class="order-items-info">
<div>总费用</div>
<div class="red-font">{{ item.cost }}</div>
<div class="red-font">{{ item.cost }} </div>
</el-col>
<el-col :span="4" class="order-items-info">
<div>租期</div>