|  |  |  | 
|---|
|  |  |  | <h1>注意事项:</h1> | 
|---|
|  |  |  | <div>1、公司车辆外出需办理用车申请表,经批准后方可外出(借出)。</div> | 
|---|
|  |  |  | <div>2、市外用车需领导审核。</div> | 
|---|
|  |  |  | <div> | 
|---|
|  |  |  | <!-- <div> | 
|---|
|  |  |  | 3、借出车辆必须遵守交通规则,安全行驶。对于车辆发生交通意外,对当事人及第三方造成人身伤害及损失,公司可以协助处理保险公司赔偿相关事宜,但不承担任何责任和费用。 | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div> | 
|---|
|  |  |  | 4、公司借给申请人用车,申请借车人为第一责任人,不允许转借给其他人使用,若要借给他人使用。责任人要承担全部责任。 | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> --> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | title="选择用车时间" | 
|---|
|  |  |  | :visible.sync="isShowTime" | 
|---|
|  |  |  | append-to-body | 
|---|
|  |  |  | width="600px" | 
|---|
|  |  |  | width="640px" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-form :model="form" ref="modalRef" class="el_form" :rules="rules"> | 
|---|
|  |  |  | <el-form-item label="用车日期" prop="dateDay"> | 
|---|
|  |  |  | 
|---|
|  |  |  | v-for="(item, i) in timeList" | 
|---|
|  |  |  | :key="i" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {{ item.startHours }}-{{ item.endHours }} | 
|---|
|  |  |  | {{ item.startHours }} - {{ item.endHours }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | <el-form-item label="用车开始时间" prop="startTime"> | 
|---|
|  |  |  | <el-date-picker | 
|---|
|  |  |  | v-model="form.startTime" | 
|---|
|  |  |  | format="yyyy-MM-dd HH:mm" | 
|---|
|  |  |  | format="yyyy-MM-dd HH:mm:ss" | 
|---|
|  |  |  | value-format="yyyy-MM-dd HH:mm:ss" | 
|---|
|  |  |  | type="datetime" | 
|---|
|  |  |  | :picker-options="pickerOptions" | 
|---|
|  |  |  | @change="seletedShiwaiDate" | 
|---|
|  |  |  | :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" | 
|---|
|  |  |  | 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" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | memberList: [], | 
|---|
|  |  |  | timeList: [], | 
|---|
|  |  |  | defaultTime: dayjs().format('HH:mm:ss'), | 
|---|
|  |  |  | selDatetime: '', | 
|---|
|  |  |  | colorOptions: [ | 
|---|
|  |  |  | { color: this.$store.state.primaryColor, name: '已选择' }, | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | selectableRange: '00:00:00 - 23:59:59' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | pickerOptionsNow: { | 
|---|
|  |  |  | disabledDate: (time) => { | 
|---|
|  |  |  | return time.getTime() < Date.now() - 8.64e7; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 验证规则 | 
|---|
|  |  |  | rules: { | 
|---|
|  |  |  | type: [{ required: true, message: '请选择', trigger: 'change' }], | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | this.isShowTime = true | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.clearTime() | 
|---|
|  |  |  | this.selDatetime = '' | 
|---|
|  |  |  | this.isShowShiwai = true | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 
|---|
|  |  |  | seletedDate (e) { | 
|---|
|  |  |  | this.gettimes() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | seletedShiwaiDate () { | 
|---|
|  |  |  | seletedShiwaiDate (str) { | 
|---|
|  |  |  | const { form } = this | 
|---|
|  |  |  | if(str && str == 1){ | 
|---|
|  |  |  | this.$set(this.form, 'endTime', '') | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (form.startTime && form.endTime) { | 
|---|
|  |  |  | this.selDatetime = form.startTime + '-' + form.endTime | 
|---|
|  |  |  | this.selDatetime = form.startTime + ' - ' + form.endTime | 
|---|
|  |  |  | carUseBookList({ | 
|---|
|  |  |  | carId: form.carId, | 
|---|
|  |  |  | startTime: form.startTime, | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | initData () { | 
|---|
|  |  |  | getCarList({ | 
|---|
|  |  |  | type: 1 | 
|---|
|  |  |  | type: 0 | 
|---|
|  |  |  | }).then(res => { | 
|---|
|  |  |  | this.carsList = res | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | 
|---|
|  |  |  | div { | 
|---|
|  |  |  | line-height: 28px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .time_list { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | width: 154px; | 
|---|
|  |  |  | height: 32px; | 
|---|
|  |  |  | line-height: 32px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | background: #f7f7f7; | 
|---|
|  |  |  | border-radius: 4px; | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | margin-right: 8px; | 
|---|
|  |  |  | margin-bottom: 8px; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | line-height: 14px; | 
|---|
|  |  |  | width: 124px; | 
|---|
|  |  |  | height: 36px; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | border-radius: 5px; | 
|---|
|  |  |  | color: #111; | 
|---|
|  |  |  | border: #cccccc solid 1px; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .active { | 
|---|
|  |  |  | background-color: $primary-color; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | border-color: $primary-color; | 
|---|
|  |  |  | background-color: #f6f9fe; | 
|---|
|  |  |  | color: $primary-color; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .disable { | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | border-color: #cccccc; | 
|---|
|  |  |  | background-color: #cccccc; | 
|---|
|  |  |  | color: #999999; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .hasSub { | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | background: #cccccc; | 
|---|
|  |  |  | border-color: #bed6f9; | 
|---|
|  |  |  | background-color: #bed6f9; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .color_op { | 
|---|