fixed TODO#134578 約訪通知 : 預計約訪時段不可選擇過去時間

Mila

2022-01-22 a973040ec6b1d92b1440132d77fe41072585c1a0

fixed TODO#134578 約訪通知 : 預計約訪時段不可選擇過去時間

 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>


 PAMapp/components/Interview/InterviewAdd.vue

@@ -86,6 +86,7 @@
      <InterviewMsg
        :isVisible.sync="showInterviewMsgPopup"
        :client="appointmentDetail"
        :defaultValue="interviewTime"
        @closeDialog="closePopup"
      ></InterviewMsg>
  </div>

 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;

 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>

 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>