From 1377e545f9c63291e15c6640f290e012991c1213 Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期一, 08 七月 2024 09:28:36 +0800 Subject: [PATCH] 最新版本 --- admin/src/components/operation/OperCarUseBookParamWindow.vue | 124 +++++++++++++++++++++++++++++++--------- 1 files changed, 95 insertions(+), 29 deletions(-) diff --git a/admin/src/components/operation/OperCarUseBookParamWindow.vue b/admin/src/components/operation/OperCarUseBookParamWindow.vue index 4aeb788..d8bc84d 100644 --- a/admin/src/components/operation/OperCarUseBookParamWindow.vue +++ b/admin/src/components/operation/OperCarUseBookParamWindow.vue @@ -9,8 +9,12 @@ <div class="modal_wrap"> <el-form :model="form" ref="formRef" class="el_form" :rules="rules"> <el-form-item label="鐢ㄨ溅鑼冨洿" prop="type"> - <el-radio v-model="form.type" style="width: 80px;" :label="0">甯傚唴鐢ㄨ溅</el-radio> - <el-radio v-model="form.type" style="width: 80px;" :label="1">甯傚鐢ㄨ溅</el-radio> + <el-radio v-model="form.type" style="width: 80px" :label="0" + >甯傚唴鐢ㄨ溅</el-radio + > + <el-radio v-model="form.type" style="width: 80px" :label="1" + >甯傚鐢ㄨ溅</el-radio + > </el-form-item> <el-form-item label="閫夋嫨杞﹁締" prop="carId"> <el-select v-model="form.carId" placeholder="閫夋嫨杞﹁締"> @@ -35,16 +39,27 @@ </el-form-item> <el-form-item label="棰勮鍑哄彂鏃堕棿" prop="planUseDate"> <el-date-picker + v-if="form.type == '0'" :disabled="!form.startTime" v-model="form.planUseDate" - format="yyyy-MM-dd HH:mm:ss" + format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" default-time="08:00:00" type="datetime" placeholder="閫夋嫨鏃ユ湡鏃堕棿" - > - </el-date-picker> + /> + <el-date-picker + v-if="form.type == '1'" + :disabled="!form.startTime" + v-model="form.planUseDate" + format="yyyy-MM-dd HH:mm" + value-format="yyyy-MM-dd HH:mm:ss" + :picker-options="pickerOptions2" + default-time="08:00:00" + type="datetime" + placeholder="閫夋嫨鏃ユ湡鏃堕棿" + /> </el-form-item> <el-form-item label="鐩殑鍦�" prop="addr"> <el-input v-model="form.addr" placeholder="璇疯緭鍏ュ唴瀹�"></el-input> @@ -78,8 +93,12 @@ <h1>娉ㄦ剰浜嬮」锛�</h1> <div>1銆佸叕鍙歌溅杈嗗鍑洪渶鍔炵悊鐢ㄨ溅鐢宠琛紝缁忔壒鍑嗗悗鏂瑰彲澶栧嚭锛堝�熷嚭锛夈��</div> <div>2銆佸競澶栫敤杞﹂渶棰嗗瀹℃牳銆�</div> - <div>3銆佸�熷嚭杞﹁締蹇呴』閬靛畧浜ら�氳鍒欙紝瀹夊叏琛岄┒銆傚浜庤溅杈嗗彂鐢熶氦閫氭剰澶栵紝瀵瑰綋浜嬩汉鍙婄涓夋柟閫犳垚浜鸿韩浼ゅ鍙婃崯澶憋紝鍏徃鍙互鍗忓姪澶勭悊淇濋櫓鍏徃璧斿伩鐩稿叧浜嬪疁锛屼絾涓嶆壙鎷呬换浣曡矗浠诲拰璐圭敤銆�</div> - <div>4銆佸叕鍙稿�熺粰鐢宠浜虹敤杞︼紝鐢宠鍊熻溅浜轰负绗竴璐d换浜猴紝涓嶅厑璁歌浆鍊熺粰鍏朵粬浜轰娇鐢紝鑻ヨ鍊熺粰浠栦汉浣跨敤銆傝矗浠讳汉瑕佹壙鎷呭叏閮ㄨ矗浠汇��</div> + <div> + 3銆佸�熷嚭杞﹁締蹇呴』閬靛畧浜ら�氳鍒欙紝瀹夊叏琛岄┒銆傚浜庤溅杈嗗彂鐢熶氦閫氭剰澶栵紝瀵瑰綋浜嬩汉鍙婄涓夋柟閫犳垚浜鸿韩浼ゅ鍙婃崯澶憋紝鍏徃鍙互鍗忓姪澶勭悊淇濋櫓鍏徃璧斿伩鐩稿叧浜嬪疁锛屼絾涓嶆壙鎷呬换浣曡矗浠诲拰璐圭敤銆� + </div> + <div> + 4銆佸叕鍙稿�熺粰鐢宠浜虹敤杞︼紝鐢宠鍊熻溅浜轰负绗竴璐d换浜猴紝涓嶅厑璁歌浆鍊熺粰鍏朵粬浜轰娇鐢紝鑻ヨ鍊熺粰浠栦汉浣跨敤銆傝矗浠讳汉瑕佹壙鎷呭叏閮ㄨ矗浠汇�� + </div> </div> </div> @@ -97,6 +116,11 @@ value-format="yyyy-MM-dd" type="date" placeholder="閫夋嫨鏃ユ湡" + :picker-options="{ + disabledDate(time) { + return time.getTime() < Date.now() - 8.64e7; + }, + }" @change="seletedDate" > </el-date-picker> @@ -146,7 +170,6 @@ value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="pickerOptions" - default-time="08:00:00" @change="seletedShiwaiDate" > </el-date-picker> @@ -158,7 +181,6 @@ value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :picker-options="pickerOptions" - default-time="08:00:00" @change="seletedShiwaiDate" > </el-date-picker> @@ -185,8 +207,8 @@ <span>{{ item.memberIds.split(",").length }}浜�</span> </div> <div class="line"> - <text>鐢ㄨ溅浜嬬敱</text> - <text>{{ item.content }}</text> + <span>鐢ㄨ溅浜嬬敱</span> + <span>{{ item.content }}</span> </div> <div class="line"> <span>鐢宠浜�</span> @@ -210,11 +232,12 @@ import { allList as getCarList } from '@/api/business/cars' import { carCanReservationDate, carUseBookCraete, carUseBookList } 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, @@ -233,19 +256,37 @@ carsList: [], form: { type: 0, + startTime: '', + endTime: '', memberIds: [] }, 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 = this.form.endTime ? new Date(this.form.endTime).getTime() : '' return ( + // maxTime ? time.getTime() < minTime || time.getTime() > maxTime : time.getTime() < minTime time.getTime() < minTime ) } else { return time.getTime() < Date.now() - 8.64e7 } } + }, + pickerOptions2: { + disabledDate: (time) => { + if (this.form.startTime && this.form.endTime) { + const minTime = new Date(this.form.startTime).getTime() + const maxTime = new Date(this.form.endTime).getTime() + return ( + time.getTime() < minTime - 8.64e7 || time.getTime() > maxTime + ) + } else { + return time.getTime() < Date.now() - 8.64e7 + } + }, + selectableRange: '00:00:00 - 23:59:59' }, // 楠岃瘉瑙勫垯 rules: { @@ -260,11 +301,36 @@ } } }, - created () { + 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 + } + }, + deep: true, + immediate: true + } + }, + created() { this.initData() }, methods: { - open () { + open() { this.title = '鏂板缓鍏姟杞︾敤杞︾敵璇�' this.form = { type: 0, @@ -275,7 +341,7 @@ }) this.visible = true }, - confirm () { + confirm() { const form = JSON.parse(JSON.stringify(this.form)) this.$refs.formRef.validate((valid) => { const memberList = [] @@ -299,7 +365,7 @@ } }) }, - openTime () { + openTime() { const { form } = this if (!form.carId) { return this.$tip.error('璇峰厛閫夋嫨杞﹁締') @@ -310,7 +376,7 @@ this.isShowShiwai = true } }, - subTime () { + subTime() { if (this.form.type === 0) { const selTimeList = this.timeList.filter(i => i.checked == '1') if (selTimeList.length === 0) { @@ -327,7 +393,7 @@ }) } }, - datetimeClick (item, index) { + datetimeClick(item, index) { if (item.isUse == '1') return const { timeList } = this const selTimeList = timeList.filter(i => i.checked == '1') @@ -368,10 +434,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 @@ -384,7 +450,7 @@ }) } }, - gettimes () { + gettimes() { const { form } = this carCanReservationDate({ dateDay: form.dateDay, @@ -393,11 +459,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 => { @@ -415,7 +481,7 @@ <style scoped lang="scss"> @import "@/assets/style/variables.scss"; -div{ +div { box-sizing: border-box; } .modal_wrap { @@ -444,10 +510,10 @@ flex: 1; margin-left: 30px; padding: 0 30px; - h1{ + h1 { margin-bottom: 20px; } - div{ + div { line-height: 28px; } } @@ -501,7 +567,7 @@ } } .have_info { - padding: 0 0 120px; + padding: 0 0 60px; .tit { color: #ed4545; margin: 20px 0 12px; @@ -522,7 +588,7 @@ .line { display: flex; margin-bottom: 10px; - text { + span { &:nth-of-type(1) { width: 80px; color: #888888; -- Gitblit v1.9.3