| | |
| | | <template> |
| | | <GlobalWindow |
| | | :title="title" |
| | | width="1000px" |
| | | :visible.sync="visible" |
| | | :confirm-working="isWorking" |
| | | @confirm="confirm" |
| | | > |
| | | <GlobalWindow :title="title" width="1000px" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"> |
| | | <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" @change="changeType" style="width: 80px" :label="0">å¸å
ç¨è½¦</el-radio> |
| | | <el-radio v-model="form.type" @change="changeType" style="width: 80px" :label="1">å¸å¤ç¨è½¦</el-radio> |
| | | </el-form-item> |
| | | <el-form-item label="éæ©è½¦è¾" prop="carId"> |
| | | <el-select v-model="form.carId" @change="clearTime" placeholder="éæ©è½¦è¾"> |
| | | <el-option |
| | | v-for="item in carsList" |
| | | :key="item.id" |
| | | :label="item.code" |
| | | :value="item.id" |
| | | > |
| | | <el-option v-for="item in carsList" :key="item.id" :label="item.code" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="ç¨è½¦æ¶é´" prop="startTime"> |
| | | <div |
| | | v-if="form.startTime && form.endTime" |
| | | class="sel_btn text" |
| | | @click="openTime" |
| | | > |
| | | <div v-if="form.startTime && form.endTime" class="sel_btn text" @click="openTime"> |
| | | {{ form.startTime }}-{{ form.endTime }} |
| | | </div> |
| | | <div v-else class="sel_btn" @click="openTime">éæ©æ¶é´</div> |
| | | </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" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | :picker-options="pickerOptions" |
| | | default-time="08:00:00" |
| | | type="datetime" |
| | | placeholder="éæ©æ¥ææ¶é´" |
| | | /> |
| | | <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-date-picker v-if="form.type == '0'" :disabled="!form.startTime" v-model="form.planUseDate" |
| | | format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="éæ©æ¥ææ¶é´" /> |
| | | <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" type="datetime" placeholder="éæ©æ¥ææ¶é´" /> |
| | | </el-form-item> |
| | | <el-form-item label="ç®çå°" prop="addr"> |
| | | <el-input v-model="form.addr" placeholder="请è¾å
¥å
容"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="ä¹è½¦äººå" prop="memberIds"> |
| | | <el-select |
| | | v-model="form.memberIds" |
| | | multiple |
| | | filterable |
| | | placeholder="è¯·éæ©" |
| | | > |
| | | <el-option |
| | | v-for="item in memberList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | <el-select v-model="form.memberIds" multiple filterable placeholder="è¯·éæ©"> |
| | | <el-option v-for="item in memberList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="ç¨è½¦äºç±" prop="content"> |
| | | <el-input |
| | | v-model="form.content" |
| | | type="textarea" |
| | | placeholder="请è¾å
¥" |
| | | :rows="4" |
| | | ></el-input> |
| | | <el-input v-model="form.content" type="textarea" placeholder="请è¾å
¥" :rows="4"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="tip_wrap"> |
| | |
| | | </div> |
| | | |
| | | <!-- å¸å
--> |
| | | <el-dialog |
| | | title="éæ©ç¨è½¦æ¶é´" |
| | | :visible.sync="isShowTime" |
| | | append-to-body |
| | | width="640px" |
| | | > |
| | | <el-dialog title="éæ©ç¨è½¦æ¶é´" :visible.sync="isShowTime" append-to-body width="640px"> |
| | | <el-form :model="form" ref="modalRef" class="el_form" :rules="rules"> |
| | | <el-form-item label="ç¨è½¦æ¥æ" prop="dateDay"> |
| | | <el-date-picker |
| | | v-model="form.dateDay" |
| | | value-format="yyyy-MM-dd" |
| | | type="date" |
| | | placeholder="éæ©æ¥æ" |
| | | <el-date-picker v-model="form.dateDay" value-format="yyyy-MM-dd" type="date" placeholder="éæ©æ¥æ" |
| | | :picker-options="{ |
| | | disabledDate(time) { |
| | | return time.getTime() < Date.now() - 8.64e7; |
| | | return time.getTime() < Date.now() - 8.64e7 * 7; |
| | | }, |
| | | }" |
| | | @change="seletedDate" |
| | | > |
| | | }" @change="seletedDate"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="ç¨è½¦æ¶é´" prop="dateDay"> |
| | | <div> |
| | | <div class="time_list"> |
| | | <div |
| | | class="item" |
| | | :class="{ |
| | | disable: item.isUse == 1, |
| | | <div class="item" :class="{ |
| | | disable: item.pastFlag, |
| | | active: item.checked == '1', |
| | | hasSub: item.carUseBookId, |
| | | }" |
| | | @click="datetimeClick(item, i)" |
| | | v-for="(item, i) in timeList" |
| | | :key="i" |
| | | > |
| | | }" @click="datetimeClick(item, i)" v-for="(item, i) in timeList" :key="i"> |
| | | {{ item.startHours }} - {{ item.endHours }} |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <div style="text-align: left;"> |
| | | <div>已鿩ï¼{{ selDatetime }}</div> |
| | | <div class="red">{{ selPastDatetime }}</div> |
| | | </div> |
| | | <div class="btn" @click="subTime">确认æ¶é´</div> |
| | | </span> |
| | | </el-dialog> |
| | | <!-- å¸å¤ --> |
| | | <el-dialog |
| | | title="éæ©ç¨è½¦æ¶é´" |
| | | :visible.sync="isShowShiwai" |
| | | append-to-body |
| | | width="600px" |
| | | :before-close="clearTime" |
| | | > |
| | | <el-dialog title="éæ©ç¨è½¦æ¶é´" :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"> |
| | | <el-date-picker |
| | | v-model="form.startTime" |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="datetime" |
| | | :default-time="defaultTime" |
| | | :picker-options="pickerOptionsNow" |
| | | @change="seletedShiwaiDate(1)" |
| | | > |
| | | <el-date-picker v-model="form.startTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" |
| | | type="datetime" :default-time="defaultTime" :picker-options="pickerOptionsNow" |
| | | @change="seletedShiwaiDate(1)"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="ç¨è½¦ç»ææ¶é´" prop="endTime"> |
| | | <el-date-picker |
| | | v-model="form.endTime" |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | type="datetime" |
| | | :default-time="defaultTime" |
| | | :picker-options="pickerOptions" |
| | | @change="seletedShiwaiDate" |
| | | > |
| | | <el-date-picker v-model="form.endTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" |
| | | type="datetime" :default-time="defaultTime" :picker-options="pickerOptions" @change="seletedShiwaiDate"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | |
| | | <span> |
| | | {{ item.startTime.slice(5, 16) }}è³{{ |
| | | item.endTime.slice(5, 16) |
| | | }}</span |
| | | > |
| | | }}</span> |
| | | </div> |
| | | <div class="line"> |
| | | <span>ç®çå°</span> |
| | |
| | | </span> |
| | | </el-dialog> |
| | | <!-- 详æ
--> |
| | | <el-dialog |
| | | title="éæ©ç¨è½¦æ¶é´" |
| | | :visible.sync="isShowDetail" |
| | | append-to-body |
| | | width="600px" |
| | | > |
| | | <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 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> |
| | | <div class="line"> |
| | | <div class="label">ç³è¯·äºº</div> |
| | | <div class="value">{{ activeInfo.memberName }} <span class="primaryColor ml12">{{ activeInfo.memberPhone }}</span></div> |
| | | <div class="value">{{ activeInfo.memberName }} <span class="primaryColor ml12">{{ activeInfo.memberPhone |
| | | }}</span></div> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | timeList: [], |
| | | defaultTime: dayjs().format('HH:mm:ss'), |
| | | selDatetime: '', |
| | | selPastDatetime: '', |
| | | colorOptions: [ |
| | | { color: this.$store.state.primaryColor, name: '已鿩' }, |
| | | { color: '#F7F7F7', name: 'å¯é¢çº¦' }, |
| | |
| | | }, |
| | | pickerOptionsNow: { |
| | | disabledDate: (time) => { |
| | | return time.getTime() < Date.now() - 8.64e7; |
| | | return time.getTime() < Date.now() - 8.64e7 * 7 |
| | | } |
| | | }, |
| | | // éªè¯è§å |
| | |
| | | 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 |
| | | } |
| | | }, |
| | | // watch: { |
| | | // 'form.planUseDate': { |
| | | // handler (newValue, oldValue) { |
| | | // if (newValue) { |
| | | // this.$set(this.pickerOptions, 'selectableRange', this.form.startTime.slice(11, 16) + ' - ' + this.form.endTime.slice(11, 16)) |
| | | // // this.startPickerOptions = this.startPickerOptions |
| | | // } |
| | | // }, |
| | | // deep: true, |
| | | // immediate: true |
| | | // } |
| | | // }, |
| | | created () { |
| | | this.initData() |
| | | }, |
| | |
| | | form.memberNames = memberList.map(i => i.name).join(',') |
| | | form.memberList = memberList |
| | | form.memberIds = form.memberIds.join(',') |
| | | form.startTime = form.startTime + ':00' |
| | | form.planUseDate = form.planUseDate + ':00' |
| | | form.endTime = form.endTime + ':59' |
| | | if (valid) { |
| | | carUseBookCraete({ |
| | | ...form |
| | |
| | | this.isShowShiwai = true |
| | | } |
| | | }, |
| | | changeType() { |
| | | this.$set(this.form, 'startTime', '') |
| | | this.$set(this.form, 'endTime', '') |
| | | this.$set(this.form, 'planUseDate', '') |
| | | this.$nextTick(() => { |
| | | this.$refs.formRef.clearValidate() |
| | | }) |
| | | }, |
| | | clearTime () { |
| | | this.isShowShiwai = false |
| | | this.$set(this.form, 'startTime', '') |
| | |
| | | if (selTimeList.length === 0) { |
| | | return this.$tip.error('请å
éæ©ç¨è½¦æ¶é´æ®µ') |
| | | } |
| | | this.$set(this.form, 'startTime', selTimeList[0].startTime) |
| | | this.$set(this.form, 'endTime', selTimeList[selTimeList.length - 1].endTime) |
| | | this.$set(this.form, 'startTime', selTimeList[0].startTime.slice(0, 16)) |
| | | this.$set(this.form, 'endTime', selTimeList[selTimeList.length - 1].endTime.slice(0, 16)) |
| | | this.isShowTime = false |
| | | this.$set(this.form, 'planUseDate', null) |
| | | this.$set(this.form, 'planUseDate', selTimeList[0].startTime.slice(0, 16)) |
| | | this.$forceUpdate() |
| | | } else { |
| | | this.$refs.modalRef.validate((valid) => { |
| | |
| | | if (new Date(form.startTime).getTime() > new Date(form.endTime).getTime()) { |
| | | return this.$tip.error('ç»ææ¶é´åºå¤§äºå¼å§æ¶é´') |
| | | } |
| | | this.$set(this.form, 'planUseDate', form.startTime) |
| | | this.$forceUpdate() |
| | | this.isShowShiwai = false |
| | | }) |
| | | } |
| | | console.log('form', this.form) |
| | | |
| | | }, |
| | | datetimeClick (item, index) { |
| | | if (item.carUseBookId) { |
| | |
| | | // console.log('selTimeList', selTimeList); |
| | | if (selTimeLists.length === 0) { |
| | | this.selDatetime = '' |
| | | this.selPastDatetime = '' |
| | | } else { |
| | | let pastList = selTimeLists.filter(i => i.pastFlag) |
| | | if(pastList.length > 0){ |
| | | this.selPastDatetime = 'å½åéæ©å
å«å·²ç»è¿å»æ¶é´ï¼è¯·ç¡®è®¤ååæäº¤ï¼' |
| | | }else{ |
| | | this.selPastDatetime = '' |
| | | } |
| | | this.selDatetime = this.form.dateDay.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[selTimeLists.length - 1].endHours |
| | | } |
| | | }, |
| | |
| | | this.selDatetime = form.startTime + ' - ' + form.endTime |
| | | carUseBookList({ |
| | | carId: form.carId, |
| | | startTime: form.startTime, |
| | | endTime: form.endTime |
| | | startTime: form.startTime + ':00', |
| | | endTime: form.endTime + ':59' |
| | | }).then(res => { |
| | | this.info = res || [] |
| | | }) |
| | |
| | | }).then(res => { |
| | | this.timeList = res || [] |
| | | this.timeList.forEach((i, j) => { |
| | | i.pastFlag = new Date().getTime() > new Date(i.startTime).getTime() |
| | | i.checked = '0', |
| | | i.index = j |
| | | }) |
| | | |
| | | }) |
| | | }, |
| | | initData () { |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | @import "@/assets/style/variables.scss"; |
| | | |
| | | div { |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .modal_wrap { |
| | | display: flex; |
| | | padding: 20px 0; |
| | | |
| | | .el_form { |
| | | flex: 1; |
| | | |
| | | .sel_btn { |
| | | width: 100%; |
| | | height: 32px; |
| | |
| | | box-sizing: border-box; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .text { |
| | | color: #606266; |
| | | } |
| | | } |
| | | |
| | | .tip_wrap { |
| | | flex: 1; |
| | | margin-left: 30px; |
| | | padding: 0 30px; |
| | | |
| | | h1 { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | div { |
| | | line-height: 28px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .time_list { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | |
| | | .item { |
| | | margin-right: 8px; |
| | | margin-bottom: 8px; |
| | |
| | | border: #cccccc solid 1px; |
| | | cursor: pointer; |
| | | } |
| | | .active { |
| | | border-color: $primary-color; |
| | | background-color: #f6f9fe; |
| | | color: $primary-color; |
| | | } |
| | | |
| | | |
| | | .disable { |
| | | color: #fff; |
| | | border-color: #cccccc; |
| | | background-color: #cccccc; |
| | | } |
| | | .active { |
| | | border-color: $primary-color; |
| | | background-color: #f6f9fe; |
| | | color: $primary-color; |
| | | } |
| | | .hasSub { |
| | | border-color: #bed6f9; |
| | |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .color_op { |
| | | display: flex; |
| | | |
| | | .item { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 10px; |
| | | |
| | | .box { |
| | | margin-right: 4px; |
| | | width: 16px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .dialog-footer { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | |
| | | .btn { |
| | | height: 42px; |
| | | line-height: 42px; |
| | |
| | | text-align: center; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .disable{ |
| | | background: #cccccc; |
| | | } |
| | | } |
| | | |
| | | .have_info { |
| | | padding: 0 0 60px; |
| | | |
| | | .tit { |
| | | color: #ed4545; |
| | | margin: 20px 0 12px; |
| | | } |
| | | |
| | | .content { |
| | | background: #f7f7f7; |
| | | border-radius: 8px; |
| | | padding: 15px 15px 5px; |
| | | margin-bottom: 10px; |
| | | |
| | | .card { |
| | | margin-bottom: 15px; |
| | | font-weight: 500; |
| | |
| | | background: #f7f7f7; |
| | | padding: 0; |
| | | } |
| | | |
| | | .line { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | | |
| | | span { |
| | | &:nth-of-type(1) { |
| | | width: 80px; |
| | | color: #888888; |
| | | } |
| | | |
| | | &:nth-of-type(2) { |
| | | flex: 1; |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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; |
| | | } |