568 lines
17 KiB
Vue
568 lines
17 KiB
Vue
<template>
|
||
<Header />
|
||
<div class="container">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||
<el-breadcrumb-item>预约车</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
|
||
<div class="cart-title">
|
||
<div></div>
|
||
<div style="margin: 0 8px">预约车</div>
|
||
<div>({{ amountNum }})</div>
|
||
</div>
|
||
|
||
<el-row class="cart-th">
|
||
<el-col :span="2">
|
||
<div>
|
||
<el-checkbox v-model="allChecked" @change="onChangeAll" :key="allKey">
|
||
全选
|
||
</el-checkbox>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="9">
|
||
<div>装备信息</div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div>租期</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>日租金/元</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>天数</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>数量</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>总金额/元</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>操作</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
|
||
<el-row style="border-bottom: 1px solid #ccc">
|
||
<el-col :span="1">
|
||
<div style="text-align: center">
|
||
<el-checkbox
|
||
v-model="item.isChecked"
|
||
:key="index"
|
||
@change="onChangeCompany($event, index, item)"
|
||
>
|
||
</el-checkbox>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="22" class="cart-user-info">
|
||
<div>{{ item.companyPersonPhoneKey.companyName }}</div>
|
||
<div class="user-name">{{ item.companyPersonPhoneKey.person }}</div>
|
||
<div class="user-phone">{{ item.companyPersonPhoneKey.personPhone }}</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row class="cart-list" v-for="(goods, j) in item.devInfoVoList" :key="goods.id">
|
||
<el-col :span="1">
|
||
<div style="text-align: center">
|
||
<el-checkbox
|
||
v-model="goods.isChecked"
|
||
@change="onChangeGoods(index)"
|
||
:key="goods.id"
|
||
>
|
||
</el-checkbox>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="9" class="goods-info">
|
||
<img :src="goods.picUrl" alt="" />
|
||
<div class="goods-code">
|
||
<div style="font-size: 14px; font-weight: bold">{{ goods.deviceName }}</div>
|
||
|
||
<!-- <div>装备编号： {{ goods.code }}</div>
|
||
<div>装备型号： {{ goods.typeName }}</div> -->
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div class="lease-date">
|
||
<div style="margin-bottom: 8px">
|
||
{{ goods.rentBeginTime }}
|
||
<span v-if="goods.rentBeginTime && goods.rentEndTime">-</span>
|
||
{{ goods.rentEndTime }}
|
||
</div>
|
||
|
||
<!-- <el-date-picker
|
||
style="width: 100px; margin-top: 10px"
|
||
v-model="goods.lease_date"
|
||
type="daterange"
|
||
size="small"
|
||
value-format="YYYY-MM-DD"
|
||
@change="onLeaseDateChange($event, goods)"
|
||
>
|
||
</el-date-picker> -->
|
||
|
||
<CustomDatePickerButton
|
||
:modelValue="goods.lease_date"
|
||
:companyIndex="index"
|
||
:goodsIndex="j"
|
||
type="primary"
|
||
size="large"
|
||
placeholder="选择日期"
|
||
@onLeaseDateChange="onLeaseDateChange"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div class="red-font">
|
||
{{ goods.dayLeasePrice }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div class="red-font" style="color: #0062ff">
|
||
{{ goods.days }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>
|
||
<el-input-number
|
||
v-model="goods.num"
|
||
style="width: 100px"
|
||
:min="1"
|
||
:max="goods.deviceCount || 1"
|
||
size="small"
|
||
/>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div class="red-font">
|
||
{{ goods.num * goods.days * goods.dayLeasePrice }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div>
|
||
<!-- <el-button
|
||
link
|
||
@click="onDeleteGoods(goods.id)"
|
||
style="color: #ff4800; font-weight: bold"
|
||
>
|
||
删除
|
||
</el-button> -->
|
||
|
||
<el-popconfirm
|
||
width="220"
|
||
:icon="InfoFilled"
|
||
icon-color="#626AEF"
|
||
title="确定删除该条预约车记录吗？"
|
||
@confirm="onDeleteGoods(goods.id)"
|
||
>
|
||
<template #reference>
|
||
<el-button link style="color: #ff4800; font-weight: bold">
|
||
删除</el-button
|
||
>
|
||
</template>
|
||
<template #actions="{ confirm }">
|
||
<el-button size="small">取消</el-button>
|
||
<el-button type="danger" size="small" @click="confirm()">
|
||
确定
|
||
</el-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="protocol-handle" v-if="cardList.length > 0">
|
||
<el-row style="display: flex; align-items: center">
|
||
<el-col :span="16">
|
||
<div class="checkbox-container">
|
||
<el-checkbox v-model="protocolChecked">
|
||
我已阅读并同意签署
|
||
<a href="#"> 《xxxx公司租赁服务合同》 </a>
|
||
</el-checkbox>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div>
|
||
共：<span style="color: #ff4800; font-weight: bold">{{
|
||
amountDevice
|
||
}}</span>
|
||
件装备
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div class="red-font">
|
||
订单总金额：<span style="color: #ff4800; font-weight: bold"
|
||
>{{ orderAmountPice }} 元</span
|
||
>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div style="text-align: right">
|
||
<el-button
|
||
size="small"
|
||
@click="onCartSubmit"
|
||
style="padding: 6px 24px; background-color: #1abc9c; color: #fff"
|
||
>提交</el-button
|
||
>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<FooterInfo />
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Header from '../../components/header/index.vue'
|
||
import FooterInfo from '../../components/FooterInfo/index.vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import {
|
||
getBookCarDetailsApi,
|
||
submitBookCarApi,
|
||
deleteCartByIdApi,
|
||
} from '../../http/api/cart/index'
|
||
import moment, { max } from 'moment'
|
||
import { InfoFilled } from '@element-plus/icons-vue'
|
||
import CustomDatePickerButton from './components/date-picker-button.vue'
|
||
|
||
const protocolChecked = ref<boolean>(false)
|
||
const allKey = ref(0)
|
||
const cardList = ref<any>([])
|
||
const getBookCarDetailsData = async () => {
|
||
const res: any = await getBookCarDetailsApi()
|
||
|
||
cardList.value = []
|
||
cardList.value = res.data
|
||
cardList.value.forEach((e: any) => {
|
||
e.isChecked = false
|
||
|
||
e.devInfoVoList.forEach((j: any) => {
|
||
j.days = 0
|
||
j.num = 1
|
||
j.costs = 0
|
||
j.rentBeginTime = ''
|
||
j.rentEndTime = ''
|
||
j.lease_date = null
|
||
})
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
getBookCarDetailsData()
|
||
})
|
||
|
||
// 日期change事件
|
||
// const onLeaseDateChange = (e: any, item: any) => {
|
||
// console.log(e, '*****')
|
||
// if (!e) {
|
||
// item.rentBeginTime = ''
|
||
// item.rentEndTime = ''
|
||
// item.days = 0
|
||
// } else {
|
||
// item.rentBeginTime = e[0]
|
||
// item.rentEndTime = e[1]
|
||
// item.days = moment(e[1]).diff(e[0], 'day')
|
||
// }
|
||
// }
|
||
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
|
||
} else {
|
||
j.rentBeginTime = value[0]
|
||
j.rentEndTime = value[1]
|
||
j.days = moment(value[1]).diff(value[0], 'day')
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
// 删除按钮
|
||
const onDeleteGoods = async (id: number | string) => {
|
||
const res: any = await deleteCartByIdApi({ id })
|
||
if (res.code == 200) {
|
||
ElMessage({
|
||
showClose: false,
|
||
message: '删除成功',
|
||
type: 'success',
|
||
})
|
||
|
||
getBookCarDetailsData()
|
||
}
|
||
}
|
||
|
||
// 全选change事件
|
||
const onChangeAll = (e: boolean) => {
|
||
cardList.value.forEach((item: any) => {
|
||
item.isChecked = e
|
||
item.devInfoVoList.forEach((j: any) => {
|
||
j.isChecked = e
|
||
})
|
||
})
|
||
}
|
||
|
||
// 公司全选事件
|
||
const onChangeGoods = (index: number) => {
|
||
cardList.value[index].isChecked = cardList.value[index].devInfoVoList.every(
|
||
(e: any) => e.isChecked === true,
|
||
)
|
||
}
|
||
// 公司全选事件
|
||
const onChangeCompany = (e: boolean, index: number, item: any) => {
|
||
cardList.value[index].devInfoVoList.every((j) => (j.isChecked = e))
|
||
}
|
||
|
||
// 计算所有装备
|
||
const amountNum = computed(() => {
|
||
let amountNum = 0
|
||
cardList.value.forEach((e: any) => {
|
||
amountNum = e.devInfoVoList.length + amountNum
|
||
})
|
||
return amountNum
|
||
})
|
||
// 计算全选按钮的选中状态
|
||
const allChecked = computed(() => {
|
||
if (cardList.value.length < 1) {
|
||
return false
|
||
} else {
|
||
return cardList.value.every((e: any) => e.isChecked === true)
|
||
}
|
||
})
|
||
|
||
// 已勾选的装备数量
|
||
const amountDevice = computed(() => {
|
||
let amountNum = 0
|
||
cardList.value.forEach((e: any) => {
|
||
e.devInfoVoList.forEach((g: any) => {
|
||
if (g.isChecked) {
|
||
amountNum++
|
||
}
|
||
})
|
||
})
|
||
return amountNum
|
||
})
|
||
// 已勾选的装备数量
|
||
const amountDeviceList = computed(() => {
|
||
let selectList: any = []
|
||
cardList.value.forEach((e: any) => {
|
||
e.devInfoVoList.forEach((g: any) => {
|
||
if (g.isChecked) {
|
||
selectList.push(g)
|
||
}
|
||
})
|
||
})
|
||
return selectList
|
||
})
|
||
|
||
// 计算订单总价格
|
||
const orderAmountPice = computed(() => {
|
||
let orderAmountPice = 0
|
||
cardList.value.forEach((e: any) => {
|
||
e.devInfoVoList.forEach((g: any) => {
|
||
if (g.isChecked) {
|
||
orderAmountPice = g.num * g.dayLeasePrice * g.days + orderAmountPice
|
||
}
|
||
})
|
||
})
|
||
return orderAmountPice
|
||
})
|
||
|
||
// 提交按钮
|
||
const onCartSubmit = async () => {
|
||
ElMessage.closeAll()
|
||
if (amountDevice.value < 1) {
|
||
ElMessage({
|
||
showClose: false,
|
||
message: '请选择装备',
|
||
type: 'error',
|
||
})
|
||
return
|
||
}
|
||
if (!protocolChecked.value) {
|
||
ElMessage({
|
||
showClose: false,
|
||
message: '请阅读公司合同',
|
||
type: 'error',
|
||
})
|
||
return
|
||
}
|
||
|
||
let isDays = false
|
||
try {
|
||
amountDeviceList.value.forEach((e: any) => {
|
||
if (e.days < 1) {
|
||
ElMessage({
|
||
showClose: false,
|
||
message: '有装备租期未选择或租期为0，请重新选择后再提交',
|
||
type: 'error',
|
||
})
|
||
isDays = true
|
||
throw new Error()
|
||
}
|
||
})
|
||
} catch (error) {}
|
||
|
||
if (isDays) return
|
||
|
||
// 组装参数
|
||
const detailsList = amountDeviceList.value.map((e: any) => {
|
||
return {
|
||
maId: e.maId,
|
||
id: e.id,
|
||
rentBeginTime: e.rentBeginTime + ' ' + '00:00:00',
|
||
rentEndTime: e.rentEndTime + ' ' + '00:00:00',
|
||
manageType: e.manageType,
|
||
days: e.days,
|
||
num: e.num,
|
||
costs: e.num * e.days * e.dayLeasePrice,
|
||
}
|
||
})
|
||
|
||
const submitParams = {
|
||
cost: orderAmountPice.value,
|
||
detailsList,
|
||
}
|
||
|
||
const res: any = await submitBookCarApi(submitParams)
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
showClose: false,
|
||
message: '提交成功',
|
||
type: 'success',
|
||
})
|
||
allKey.value++
|
||
|
||
getBookCarDetailsData()
|
||
}
|
||
// console.log(res, '预约车提交结果')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 10px;
|
||
background: #eeeff6;
|
||
font-size: 14px;
|
||
|
||
.cart-title {
|
||
margin-top: 20px;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.cart-title div:first-child {
|
||
width: 5px;
|
||
height: 20px;
|
||
background-color: #4fabfe;
|
||
}
|
||
|
||
.cart-th {
|
||
margin: 15px 0;
|
||
div {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.cart-tbody {
|
||
background: #fff;
|
||
padding: 8px 12px;
|
||
margin: 10px;
|
||
|
||
.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;
|
||
font-size: 13px;
|
||
div {
|
||
text-align: center;
|
||
}
|
||
|
||
.goods-info {
|
||
display: flex;
|
||
align-content: center;
|
||
|
||
img {
|
||
width: 160px;
|
||
height: 100px;
|
||
}
|
||
|
||
.goods-code {
|
||
margin-left: 10px;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.protocol-handle {
|
||
background: #fff;
|
||
padding: 8px 12px;
|
||
margin: 10px;
|
||
font-size: 13px;
|
||
|
||
.checkbox-container a {
|
||
color: #ff4800;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
</style>
|