From a973040ec6b1d92b1440132d77fe41072585c1a0 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期六, 22 一月 2022 11:40:46 +0800
Subject: [PATCH] fixed TODO#134578 約訪通知 : 預計約訪時段不可選擇過去時間
---
PAMapp/components/Interview/InterviewAdd.vue | 1
PAMapp/components/Ui/UiTimePicker.vue | 69 ++++++++++++++++++++++++++++++----
PAMapp/components/Interview/InterviewMsg.vue | 5 ++
PAMapp/components/Ui/UiDatePicker.vue | 20 +++++++++
PAMapp/components/DateTimePicker.vue | 16 ++++++--
5 files changed, 98 insertions(+), 13 deletions(-)
diff --git a/PAMapp/components/DateTimePicker.vue b/PAMapp/components/DateTimePicker.vue
index 7916c77..f2a8763 100644
--- a/PAMapp/components/DateTimePicker.vue
+++ b/PAMapp/components/DateTimePicker.vue
@@ -4,25 +4,31 @@
<div class="dateTime">
<UiDatePicker
@changeDate="changeDateTime($event, 'date')"
+ :isPastDateDisabled="isPastDateDisabled"
:defaultValue="defaultValue"
></UiDatePicker>
<UiTimePicker
@changeTime="changeDateTime($event, 'time')"
:defaultValue="defaultValue"
+ :isPastDateDisabled="isPastDateDisabled"
+ :changeDate="changeDate"
></UiTimePicker>
</div>
</template>
<script lang="ts">
-import { Component, Emit, Prop, Vue } from "nuxt-property-decorator";
+import { Component, Emit, Prop, Vue, Watch } from "nuxt-property-decorator";
@Component
export default class DateTimePicker extends Vue {
- changeDate!: Date;
+ changeDate: Date | string = '';
changeTime!: string;
@Prop()
defaultValue!: string;
+
+ @Prop()
+ isPastDateDisabled!: boolean;
@Emit('changeDateTime')
changeDateTime(event, type) {
@@ -33,12 +39,14 @@
this.changeTime = event;
}
if (this.changeDate && this.changeTime) {
- const timeArray = this.changeTime.split(':');
- const interViewTime = this.changeDate.setHours(+timeArray[0], +timeArray[1]);
+ const hour = this.changeTime.split(':')[0];
+ const minute = this.changeTime.split(':')[1];
+ const interViewTime = new Date(this.changeDate).setHours(+hour, +minute);
return new Date(interViewTime);
}
return '';
}
+
}
</script>
diff --git a/PAMapp/components/Interview/InterviewAdd.vue b/PAMapp/components/Interview/InterviewAdd.vue
index d86d7a6..722db75 100644
--- a/PAMapp/components/Interview/InterviewAdd.vue
+++ b/PAMapp/components/Interview/InterviewAdd.vue
@@ -86,6 +86,7 @@
<InterviewMsg
:isVisible.sync="showInterviewMsgPopup"
:client="appointmentDetail"
+ :defaultValue="interviewTime"
@closeDialog="closePopup"
></InterviewMsg>
</div>
diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue
index 9695183..8d6de8d 100644
--- a/PAMapp/components/Interview/InterviewMsg.vue
+++ b/PAMapp/components/Interview/InterviewMsg.vue
@@ -23,6 +23,8 @@
<div class="mdTxt mt-30 mb-10">����赤��挾</div>
<DateTimePicker
@changeDateTime="interviewTime = $event"
+ :isPastDateDisabled="true"
+ :defaultValue="defaultValue"
></DateTimePicker>
</div>
@@ -69,6 +71,9 @@
@Prop()
client!: Appointment;
+ @Prop()
+ defaultValue!: string;
+
@Emit('closeDialog')
closeDialog() {
return;
diff --git a/PAMapp/components/Ui/UiDatePicker.vue b/PAMapp/components/Ui/UiDatePicker.vue
index ef89297..20132bc 100644
--- a/PAMapp/components/Ui/UiDatePicker.vue
+++ b/PAMapp/components/Ui/UiDatePicker.vue
@@ -8,13 +8,14 @@
format="yyyy/MM/dd"
placeholder="������"
prefix-icon="icon-down down-icon"
+ :picker-options="pickerOptions"
@change="changeDate"
>
</el-date-picker>
</template>
<script lang="ts">
-import { Component, Emit, Prop, Vue, Watch } from "nuxt-property-decorator";
+import { Component, Emit, Prop, PropSync, Vue, Watch } from "nuxt-property-decorator";
@Component
export default class UiDatePicker extends Vue {
@@ -22,6 +23,9 @@
@Prop()
defaultValue!: string;
+
+ @Prop({default: false})
+ isPastDateDisabled!: boolean;
@Emit('changeDate')
changeDate() {
@@ -35,5 +39,19 @@
this.changeDate();
}
}
+
+ get pickerOptions() {
+ if (this.isPastDateDisabled) {
+ return {
+ disabledDate(time: Date) {
+ const date = new Date();
+ const currentDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+ const pickedDate = `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()}`
+ return new Date(pickedDate).getTime() < new Date(currentDate).getTime();
+ }
+ }
+ }
+ }
+
}
</script>
\ No newline at end of file
diff --git a/PAMapp/components/Ui/UiTimePicker.vue b/PAMapp/components/Ui/UiTimePicker.vue
index 6803eae..b661e00 100644
--- a/PAMapp/components/Ui/UiTimePicker.vue
+++ b/PAMapp/components/Ui/UiTimePicker.vue
@@ -19,14 +19,17 @@
@Component
export default class UiTimePicker extends Vue {
timeValue = '';
- pickerOptions = {
- start: '09:00',
- step: '00:15',
- end: '21:00'
- }
@Prop()
defaultValue!: string;
+
+ @Prop({default: ''})
+ changeDate!: Date | string;
+
+ @Prop()
+ isPastDateDisabled!: boolean;
+
+ ///////////////////////////////////////////////////////////////////////
@Emit('changeTime')
changeTime() {
@@ -36,11 +39,61 @@
@Watch('defaultValue', {immediate: true})
updateDefault() {
if (this.defaultValue) {
- const hours = new Date(this.defaultValue).getHours();
- const minutes = new Date(this.defaultValue).getMinutes();
- this.timeValue = `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
+ const defaultDate = new Date(this.defaultValue);
+ this.timeValue = this.formatTimeString(defaultDate);
this.changeTime();
}
}
+
+ ///////////////////////////////////////////////////////////////////////
+
+ get pickerOptions() {
+ let minTime = '';
+ const currentDate = new Date();
+
+ if (this.isPastDateDisabled && this.changeDate && this.isPickedToday(currentDate)) {
+ minTime = this.formatTimeString(currentDate);
+ this.isPickedDisableTime(currentDate, minTime);
+ }
+
+ return {
+ start: '09:00',
+ step: '00:15',
+ end: '21:00',
+ minTime: minTime
+ }
+ }
+
+ private isPickedDisableTime(currentDate: Date, minTime: string) {
+ const currentTime = this.getTimeValue(currentDate, minTime);
+ const pickedTime = this.getTimeValue(currentDate, this.timeValue);
+ if (pickedTime < currentTime) {
+ this.timeValue = '';
+ this.changeTime();
+ }
+ }
+
+ private isPickedToday(currentDate: Date) {
+ const pickedDate = new Date(this.changeDate);
+ const today = this.formatDateString(currentDate);
+ const picked = this.formatDateString(pickedDate);
+ return today === picked;
+ }
+
+ private getTimeValue(date: Date, time: string) {
+ const hour = time.split(':')[0];
+ const minute = time.split(':')[1];
+ return date.setHours(+hour, +minute);
+ }
+
+ private formatDateString(date: Date) {
+ return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+ }
+
+ private formatTimeString(date: Date) {
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ return `${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
+ }
}
</script>
\ No newline at end of file
--
Gitblit v1.8.0