From c5a0ff2661fe362dddbe88c6a28d19c48c24c39b Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 21 十月 2024 20:39:32 +0800
Subject: [PATCH] 最新版本541200007
---
admin/src/components/operation/OperCarUseBookParamWindow.vue | 267 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 223 insertions(+), 44 deletions(-)
diff --git a/admin/src/components/operation/OperCarUseBookParamWindow.vue b/admin/src/components/operation/OperCarUseBookParamWindow.vue
index 4aeb788..980be80 100644
--- a/admin/src/components/operation/OperCarUseBookParamWindow.vue
+++ b/admin/src/components/operation/OperCarUseBookParamWindow.vue
@@ -9,11 +9,15 @@
<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="閫夋嫨杞﹁締">
+ <el-select v-model="form.carId" @change="clearTime" placeholder="閫夋嫨杞﹁締">
<el-option
v-for="item in carsList"
:key="item.id"
@@ -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銆佸叕鍙稿�熺粰鐢宠浜虹敤杞︼紝鐢宠鍊熻溅浜轰负绗竴璐ｄ换浜猴紝涓嶅厑璁歌浆鍊熺粰鍏朵粬浜轰娇鐢紝鑻ヨ鍊熺粰浠栦汉浣跨敤銆傝矗浠讳汉瑕佹壙鎷呭叏閮ㄨ矗浠汇��</div>
+ <div>
+ 3銆佸�熷嚭杞﹁締蹇呴』閬靛畧浜ら�氳鍒欙紝瀹夊叏琛岄┒銆傚浜庤溅杈嗗彂鐢熶氦閫氭剰澶栵紝瀵瑰綋浜嬩汉鍙婄涓夋柟閫犳垚浜鸿韩浼ゅ鍙婃崯澶憋紝鍏徃鍙互鍗忓姪澶勭悊淇濋櫓鍏徃璧斿伩鐩稿叧浜嬪疁锛屼絾涓嶆壙鎷呬换浣曡矗浠诲拰璐圭敤銆�
+ </div>
+ <div>
+ 4銆佸叕鍙稿�熺粰鐢宠浜虹敤杞︼紝鐢宠鍊熻溅浜轰负绗竴璐ｄ换浜猴紝涓嶅厑璁歌浆鍊熺粰鍏朵粬浜轰娇鐢紝鑻ヨ鍊熺粰浠栦汉浣跨敤銆傝矗浠讳汉瑕佹壙鎷呭叏閮ㄨ矗浠汇��
+ </div>
</div>
</div>
@@ -88,7 +107,7 @@
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">
@@ -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>
@@ -109,12 +133,13 @@
:class="{
disable: item.isUse == 1,
active: item.checked == '1',
+ hasSub: item.carUseBookId,
}"
@click="datetimeClick(item, i)"
v-for="(item, i) in timeList"
:key="i"
>
- {{ item.startHours }}-{{ item.endHours }}
+ {{ item.startHours }} - {{ item.endHours }}
</div>
</div>
</div>
@@ -137,28 +162,29 @@
: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"
+ format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
- :picker-options="pickerOptions"
- default-time="08:00:00"
- @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"
- default-time="08:00:00"
@change="seletedShiwaiDate"
>
</el-date-picker>
@@ -167,7 +193,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>
@@ -185,21 +214,53 @@
<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>
- <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>
@@ -208,8 +269,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,
@@ -222,6 +285,7 @@
memberList: [],
timeList: [],
+ defaultTime: dayjs().format('HH:mm:ss'),
selDatetime: '',
colorOptions: [
{ color: this.$store.state.primaryColor, name: '宸查�夋嫨' },
@@ -233,18 +297,44 @@
carsList: [],
form: {
type: 0,
+ startTime: '',
+ 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 = 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'
+ },
+ pickerOptionsNow: {
+ disabledDate: (time) => {
+ return time.getTime() < Date.now() - 8.64e7;
}
},
// 楠岃瘉瑙勫垯
@@ -258,6 +348,21 @@
memberIds: [{ type: 'array', required: true, message: '璇烽�夋嫨', trigger: 'change' }],
content: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }]
}
+ }
+ },
+ 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
}
},
created () {
@@ -305,12 +410,27 @@
return this.$tip.error('璇峰厛閫夋嫨杞﹁締')
}
if (this.form.type === 0) {
+ this.$set(this.form, 'dateDay', '')
+ this.timeList = []
this.isShowTime = true
} else {
+ this.clearTime()
+ this.selDatetime = ''
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) {
@@ -323,11 +443,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')
@@ -371,10 +504,13 @@
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,
@@ -399,12 +535,13 @@
},
initData () {
getCarList({
- type: 1
+ type: 0
}).then(res => {
this.carsList = res
})
findTypeMemberInfo({
- type: '2'
+ type: '2',
+ companyType: 1
}).then(res => {
this.memberList = res || []
})
@@ -415,7 +552,7 @@
<style scoped lang="scss">
@import "@/assets/style/variables.scss";
-div{
+div {
box-sizing: border-box;
}
.modal_wrap {
@@ -444,35 +581,48 @@
flex: 1;
margin-left: 30px;
padding: 0 30px;
- h1{
+ h1 {
margin-bottom: 20px;
}
- div{
+ 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 {
+ border-color: #bed6f9;
+ background-color: #bed6f9;
+ color: #fff;
+ }
}
.color_op {
display: flex;
@@ -498,10 +648,14 @@
color: #fff;
width: 120px;
text-align: center;
+ cursor: pointer;
+ }
+ .disable{
+ background: #cccccc;
}
}
.have_info {
- padding: 0 0 120px;
+ padding: 0 0 60px;
.tit {
color: #ed4545;
margin: 20px 0 12px;
@@ -522,7 +676,7 @@
.line {
display: flex;
margin-bottom: 10px;
- text {
+ span {
&:nth-of-type(1) {
width: 80px;
color: #888888;
@@ -534,4 +688,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