From 17efddc6a667670dca682bf36b51a43e99615e6d Mon Sep 17 00:00:00 2001 From: k94314517 <8417338+k94314517@user.noreply.gitee.com> Date: 星期三, 16 十月 2024 15:59:38 +0800 Subject: [PATCH] 代码初始化 --- admin/src/components/operation/OperCarUseBookParamWindow.vue | 145 +++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 129 insertions(+), 16 deletions(-) diff --git a/admin/src/components/operation/OperCarUseBookParamWindow.vue b/admin/src/components/operation/OperCarUseBookParamWindow.vue index 4aa942d..c571bcb 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" @@ -119,7 +119,7 @@ :picker-options="{ disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; - } + }, }" @change="seletedDate" > @@ -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"> @@ -170,7 +172,6 @@ value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="pickerOptions" - default-time="08:00:00" @change="seletedShiwaiDate" > </el-date-picker> @@ -182,7 +183,6 @@ value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="pickerOptions" - default-time="08:00:00" @change="seletedShiwaiDate" > </el-date-picker> @@ -191,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> @@ -214,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> @@ -232,9 +267,10 @@ 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, @@ -262,19 +298,22 @@ endTime: '', memberIds: [] }, + activeInfo: {}, + isShowDetail: false, + carBookInfo: {}, pickerOptions: { disabledDate: (time) => { - if (this.form.startTime && this.form.endTime) { + if (this.form.startTime) { const minTime = new Date(this.form.startTime).getTime() - 8.64e7 - const maxTime = new Date(this.form.endTime).getTime() + const maxTime = this.form.endTime ? new Date(this.form.endTime).getTime() : '' return ( - time.getTime() < minTime || time.getTime() > maxTime + // maxTime ? time.getTime() < minTime || time.getTime() > maxTime : time.getTime() < minTime + time.getTime() < minTime ) } else { return time.getTime() < Date.now() - 8.64e7 } - }, - selectableRange: '00:00:00 - 23:59:59' + } }, pickerOptions2: { disabledDate: (time) => { @@ -282,7 +321,7 @@ const minTime = new Date(this.form.startTime).getTime() const maxTime = new Date(this.form.endTime).getTime() return ( - time.getTime() < minTime || time.getTime() > maxTime + time.getTime() < minTime - 8.64e7 || time.getTime() > maxTime ) } else { return time.getTime() < Date.now() - 8.64e7 @@ -303,11 +342,24 @@ } } }, + computed: { + + }, watch: { 'form.planUseDate': { 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 + } + }, + deep: true, + immediate: true + }, + 'form.startTime': { + handler (newValue, oldValue) { + if (newValue) { + this.$set(this.pickerOptions, 'selectableRange', this.form.startTime.slice(11, 19) + ' - ' + '23:59:59') // this.startPickerOptions = this.startPickerOptions } }, @@ -360,12 +412,26 @@ 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 } }, + 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) { @@ -378,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) { + 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') @@ -454,12 +533,13 @@ }, initData () { getCarList({ - type: 1 + type: 0 }).then(res => { this.carsList = res }) findTypeMemberInfo({ - type: '2' + type: '2', + companyType: 1 }).then(res => { this.memberList = res || [] }) @@ -528,6 +608,10 @@ background-color: #cccccc; color: #999999; } + .hasSub { + color: #fff; + background: #cccccc; + } } .color_op { display: flex; @@ -553,6 +637,10 @@ color: #fff; width: 120px; text-align: center; + cursor: pointer; + } + .disable{ + background: #cccccc; } } .have_info { @@ -589,4 +677,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