From 5a85dcab83e969d6b21c599b512a15117e9b8651 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 04 七月 2024 08:54:30 +0800
Subject: [PATCH] ''
---
admin/src/components/operation/OperCarUseBookParamWindow.vue | 139 ++++++++++++++++++++++++++++++++++++++++------
1 files changed, 120 insertions(+), 19 deletions(-)
diff --git a/admin/src/components/operation/OperCarUseBookParamWindow.vue b/admin/src/components/operation/OperCarUseBookParamWindow.vue
index d8bc84d..f78ebdd 100644
--- a/admin/src/components/operation/OperCarUseBookParamWindow.vue
+++ b/admin/src/components/operation/OperCarUseBookParamWindow.vue
@@ -17,7 +17,7 @@
>
</el-form-item>
<el-form-item label="閫夋嫨杞﹁締" prop="carId">
- <el-select v-model="form.carId" placeholder="閫夋嫨杞﹁締">
+ <el-select v-model="form.carId" @change="clearTime" placeholder="閫夋嫨杞﹁締">
<el-option
v-for="item in carsList"
:key="item.id"
@@ -133,6 +133,7 @@
:class="{
disable: item.isUse == 1,
active: item.checked == '1',
+ hasSub: item.carUseBookId,
}"
@click="datetimeClick(item, i)"
v-for="(item, i) in timeList"
@@ -161,6 +162,7 @@
:visible.sync="isShowShiwai"
append-to-body
width="600px"
+ :before-close="clearTime"
>
<el-form :model="form" ref="modalRef" class="el_form" :rules="rules">
<el-form-item label="鐢ㄨ溅寮�濮嬫椂闂�" prop="startTime">
@@ -189,7 +191,10 @@
<div class="have_info" v-if="info && info.length > 0">
<div class="tit">鎮ㄧ敵璇风殑鐢ㄨ溅鏃舵宸叉湁杞﹁締棰勭害</div>
<div class="content" v-for="(item, i) in info" :key="i">
- <div class="card">{{ item.carCode }}</div>
+ <div class="df_sb">
+ <span class="card" v-if="item.carCode">{{ item.carCode }}</span>
+ <span>{{ i + 1 }}/{{ info.length }}</span>
+ </div>
<div class="line">
<span>鐢ㄨ溅鏃舵</span>
<span>
@@ -212,16 +217,48 @@
</div>
<div class="line">
<span>鐢宠浜�</span>
- <span>{{ item.memberName }} {{ item.memberMobile }}</span>
+ <span>{{ item.memberName }} <span class="primaryColor">{{ item.memberMobile }}</span></span>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<div>宸查�夋嫨锛歿{ selDatetime }}</div>
- <div class="btn" @click="subTime">纭鏃堕棿</div>
+ <div class="btn" :class="{disable: info && info.length > 0}" @click="subTime">纭鏃堕棿</div>
</span>
</el-dialog>
+ <!-- 璇︽儏 -->
+ <el-dialog
+ title="閫夋嫨鐢ㄨ溅鏃堕棿"
+ :visible.sync="isShowDetail"
+ append-to-body
+ width="600px"
+ >
+ <div class="detail_modal">
+ <div class="title">杞﹁締棰勭害鎯呭喌</div>
+ <div class="h1" v-if="activeInfo.carCode">{{ activeInfo.carCode }}</div>
+ <div class="line">
+ <div class="label">棰勮鐢ㄨ溅鏃舵</div>
+ <div class="value" v-if="activeInfo.startTime">{{ activeInfo.startTime.slice(5, 16) }} - {{ activeInfo.endTime.slice(5, 16) }}</div>
+ </div>
+ <div class="line">
+ <div class="label">鐩殑鍦�</div>
+ <div class="value">{{ activeInfo.addr }}</div>
+ </div>
+ <div class="line">
+ <div class="label">涔樿溅浜烘暟</div>
+ <div class="value" v-if="activeInfo.memberIds">{{ activeInfo.memberIds.split(',').length }}浜�</div>
+ </div>
+ <div class="line">
+ <div class="label">鐢ㄨ溅浜嬬敱</div>
+ <div class="value">{{ activeInfo.content || '' }}</div>
+ </div>
+ <div class="line">
+ <div class="label">鐢宠浜�</div>
+ <div class="value">{{ activeInfo.memberName }} <span class="primaryColor ml12">{{ activeInfo.memberPhone }}</span></div>
+ </div>
+ </div>
+ </el-dialog>
</GlobalWindow>
</template>
@@ -230,14 +267,15 @@
import GlobalWindow from '@/components/common/GlobalWindow'
import { allList } from '@/api/business/member'
import { allList as getCarList } from '@/api/business/cars'
-import { carCanReservationDate, carUseBookCraete, carUseBookList } from '@/api/business/carUseBook'
+import { carCanReservationDate, carUseBookCraete, carUseBookList, detail } from '@/api/business/carUseBook'
import { findTypeMemberInfo } from '@/api/business/memberCard'
import dayjs from 'dayjs'
+
export default {
name: 'OperCarUseBookParamWindow',
extends: BaseOpera,
components: { GlobalWindow },
- data() {
+ data () {
return {
// 琛ㄥ崟鏁版嵁
isShowTime: false,
@@ -260,6 +298,9 @@
endTime: '',
memberIds: []
},
+ activeInfo: {},
+ isShowDetail: false,
+ carBookInfo: {},
pickerOptions: {
disabledDate: (time) => {
if (this.form.startTime) {
@@ -306,7 +347,7 @@
},
watch: {
'form.planUseDate': {
- handler(newValue, oldValue) {
+ handler (newValue, oldValue) {
if (newValue) {
this.$set(this.pickerOptions, 'selectableRange', this.form.startTime.slice(11, 19) + ' - ' + this.form.endTime.slice(11, 19))
// this.startPickerOptions = this.startPickerOptions
@@ -316,7 +357,7 @@
immediate: true
},
'form.startTime': {
- handler(newValue, oldValue) {
+ handler (newValue, oldValue) {
if (newValue) {
this.$set(this.pickerOptions, 'selectableRange', this.form.startTime.slice(11, 19) + ' - ' + '23:59:59')
// this.startPickerOptions = this.startPickerOptions
@@ -326,11 +367,11 @@
immediate: true
}
},
- created() {
+ created () {
this.initData()
},
methods: {
- open() {
+ open () {
this.title = '鏂板缓鍏姟杞︾敤杞︾敵璇�'
this.form = {
type: 0,
@@ -341,7 +382,7 @@
})
this.visible = true
},
- confirm() {
+ confirm () {
const form = JSON.parse(JSON.stringify(this.form))
this.$refs.formRef.validate((valid) => {
const memberList = []
@@ -365,18 +406,32 @@
}
})
},
- openTime() {
+ openTime () {
const { form } = this
if (!form.carId) {
return this.$tip.error('璇峰厛閫夋嫨杞﹁締')
}
if (this.form.type === 0) {
+ this.$set(this.form, 'dateDay', '')
+ this.timeList = []
this.isShowTime = true
} else {
+ this.clearTime()
this.isShowShiwai = true
}
},
- subTime() {
+ clearTime () {
+ this.isShowShiwai = false
+ this.$set(this.form, 'startTime', '')
+ this.$set(this.form, 'endTime', '')
+ this.$nextTick(() => {
+ if (this.$refs.modalRef) {
+ this.$refs.modalRef.clearValidate()
+ }
+ })
+ },
+ subTime () {
+ if (this.info && this.info.length > 0) return
if (this.form.type === 0) {
const selTimeList = this.timeList.filter(i => i.checked == '1')
if (selTimeList.length === 0) {
@@ -389,11 +444,24 @@
this.$forceUpdate()
} else {
this.$refs.modalRef.validate((valid) => {
+ const { form } = this
+ if (new Date(form.startTime).getTime() > new Date(form.endTime).getTime()) {
+ return this.$tip.error('缁撴潫鏃堕棿搴斿ぇ浜庡紑濮嬫椂闂�')
+ }
this.isShowShiwai = false
})
}
},
- datetimeClick(item, index) {
+ datetimeClick (item, index) {
+ if (item.carUseBookId) {
+ detail(
+ item.carUseBookId
+ ).then(res => {
+ this.activeInfo = res
+ this.isShowDetail = true
+ })
+ return
+ }
if (item.isUse == '1') return
const { timeList } = this
const selTimeList = timeList.filter(i => i.checked == '1')
@@ -434,10 +502,10 @@
this.selDatetime = this.form.dateDay.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[selTimeLists.length - 1].endHours
}
},
- seletedDate(e) {
+ seletedDate (e) {
this.gettimes()
},
- seletedShiwaiDate() {
+ seletedShiwaiDate () {
const { form } = this
if (form.startTime && form.endTime) {
this.selDatetime = form.startTime + '-' + form.endTime
@@ -450,7 +518,7 @@
})
}
},
- gettimes() {
+ gettimes () {
const { form } = this
carCanReservationDate({
dateDay: form.dateDay,
@@ -459,11 +527,11 @@
this.timeList = res || []
this.timeList.forEach((i, j) => {
i.checked = '0',
- i.index = j
+ i.index = j
})
})
},
- initData() {
+ initData () {
getCarList({
type: 1
}).then(res => {
@@ -539,6 +607,10 @@
background-color: #cccccc;
color: #999999;
}
+ .hasSub {
+ color: #fff;
+ background: #cccccc;
+ }
}
.color_op {
display: flex;
@@ -564,6 +636,10 @@
color: #fff;
width: 120px;
text-align: center;
+ cursor: pointer;
+ }
+ .disable{
+ background: #cccccc;
}
}
.have_info {
@@ -600,4 +676,29 @@
}
}
}
+.detail_modal {
+ padding: 20px 15px;
+ .title {
+ text-align: center;
+ font-weight: 600;
+ font-size: 16px;
+ margin-bottom: 20px;
+ }
+ .h1 {
+ font-weight: 600;
+ font-size: 16px;
+ margin-bottom: 16px;
+ }
+ .line {
+ display: flex;
+ margin-bottom: 10px;
+ .label {
+ width: 120px;
+ color: #888888;
+ }
+ .value {
+ color: #333333;
+ }
+ }
+}
</style>
--
Gitblit v1.9.3