add: TODO#134181 dateTimePicker

Mila

2022-01-17 8ece1a33dd0776e8a3cc94d3ac4faf8c6f7ff03c

add: TODO#134181 dateTimePicker

 PAMapp/assets/scss/vendors/_elementUI.scss

@@ -15,3 +15,4 @@
@import './elementUI/tree';
@import './elementUI/upload';
@import './elementUI/textarea';
@import './elementUI/dateTimePicker';

 PAMapp/assets/scss/vendors/elementUI/_dateTimePicker.scss

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,82 @@
.pam-date.el-input,.pam-time.el-input {
    .el-input__inner {
        padding-left: 10px;
        height: 46px;
        border: 1px solid #707070;
    }

    .el-input__prefix {
        left:auto;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: $PRIMARY_BLACK;
    }
    .el-input__suffix {
        right: 25px;
    }
}

.pam-date.el-input {
    width: 58%;
}
.pam-time.el-input {
    width: 38%;
}

.pam-time-popper {
    .time-select-item {
        font-size: 18px;

        &.selected {
            color: $CORAL;
        }
    }
}
.pam-date-popper {
    .el-date-picker__header {
        .el-picker-panel__icon-btn:hover, .el-date-picker__header-label:hover {
            color: $CORAL;
        }
    }
    .el-picker-panel__body {
        .el-picker-panel__content {
            .el-date-table {
                .el-date-table__row {
                    td.today span {
                        color: $CORAL;
                    }
                    td.current span {
                        background-color: $CORAL;
                    }
                    td.available:hover {
                        color: $CORAL;
                    }
                }
            }
            .el-year-table {
                td.current .cell {
                    color: $CORAL;
                }
                td.today .cell {
                    color: $CORAL;
                }
                td.available .cell:hover {
                    color: $CORAL;
                }
            }
            .el-month-table {
                td.current .cell {
                    color: $CORAL;
                }
                td.today .cell {
                    color: $CORAL;
                }
                td .cell:hover {
                    color: $CORAL;
                }
            }

        }
    }
}

 PAMapp/components/DateTimePicker.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,43 @@


<template>
    <div class="dateTime">
        <UiDatePicker @changeDate="changeDateTime($event, 'date')"></UiDatePicker>
        <UiTimePicker @changeTime="changeDateTime($event, 'time')"></UiTimePicker>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Vue } from "nuxt-property-decorator";

@Component
export default class DateTimePicker extends Vue {
    changeDate!: Date;
    changeTime!: string;

    @Emit('changeDateTime')
    changeDateTime(event, type) {
        if (type === 'date') {
            this.changeDate = event;
        }
        if (type === 'time') {
            this.changeTime = event;
        }
        if (this.changeDate && this.changeTime) {
            const timeArray = this.changeTime.split(':');
            const interViewTime = this.changeDate.setHours(+timeArray[0], +timeArray[1]);
            return new Date(interViewTime);
        }
        return '';
    }
}
</script>

<style lang="scss" scoped>
.dateTime {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 20px;
}
</style>

 PAMapp/components/Interview/InterviewAdd.vue

@@ -6,18 +6,17 @@
      </div>

      <div class="mdTxt mb-10">約訪時間</div>
      <div class="date-input">
          2022/01/10 09:00
          <i class="icon-calender icon"></i>
      </div>
      <DateTimePicker
        @changeDateTime="interviewTime = $event"
      ></DateTimePicker>

      <div class="mdTxt mb-10">約訪紀錄</div>
      <div class="mdTxt mb-10 mt-10">約訪紀錄</div>
      <el-input type="textarea" :rows="5" placeholder="約訪通知" resize="none">
      </el-input>

      <div class="edit-appointment-record-btn">
          <el-button>取消</el-button>
          <el-button>確定</el-button>
          <el-button :disabled="!interviewTime">確定</el-button>
      </div>
  </div>
</template>
@@ -28,6 +27,8 @@

@Component
export default class InterviewAdd extends Vue {
    interviewTime = '';

    // @Prop()
    // myAppointmentReviewLogList!: AppointmentLog[];

@@ -51,18 +52,6 @@
        justify-content: space-between;
        margin-bottom  : 26px;
    }
}
.date-input {
    align-items     : center;
    background-color: #fff;
    border          : 1px solid #707070;
    border-radius   : 5px;
    display         : flex;
    font-size       : 20px;
    height          : 46px;
    margin-bottom   : 30px;
    padding-left    : 20px;
    padding-right   : 20px;
}
.icon {
    color          : $PRIMARY_RED;

 PAMapp/components/Interview/InterviewMsg.vue

@@ -20,22 +20,19 @@
        v-model="interviewTxt">
        </el-input>
      <div class="mdTxt mt-30 mb-10">預計約訪時段</div>
      <div class="date-input">
            2022/01/10 09:00
            <i class="icon-calender icon"></i>
        </div>
      <DateTimePicker
        @changeDateTime="interviewTime = $event"
      ></DateTimePicker>

      <div class="msg-dialog-btn">
        <el-button>傳送</el-button>
        <el-button :disabled="!interviewTime">傳送</el-button>
      </div>

        </el-dialog>
  </div>
</template>
<script lang="ts">
import { AppointmentLog } from '~/shared/models/appointment.model';
import { Vue, Component, Prop, PropSync, Emit } from 'nuxt-property-decorator';
import authService from '~/shared/services/auth.service';
import { Vue, Component, Prop, PropSync, Emit, Action } from 'nuxt-property-decorator';

@Component
export default class InterviewAdd extends Vue {
@@ -45,12 +42,17 @@
    @Prop({default:'90%'})
    dialogWidth!:string;

    @Prop()
    appointmentId!: number;

    @Emit('closeDialog')
    closeDialog() {
        return;
    }

    interviewTxt = "";
    interviewTime = '';

}
</script>

@@ -80,25 +82,6 @@
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.date-input {
    align-items     : center;
    background-color: #fff;
    border          : 1px solid #707070;
    border-radius   : 5px;
    display         : flex;
    font-size       : 20px;
    height          : 46px;
    margin-bottom   : 30px;
    padding-left    : 20px;
    padding-right   : 20px;
}
.icon {
    color          : $PRIMARY_RED;
    display        : flex;
    flex           : 1;
    justify-content: flex-end;
}

</style>

 PAMapp/components/Ui/UiDatePicker.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,28 @@
<template>
    <el-date-picker
        class="pam-date cursor--pointer"
        popper-class="pam-date-popper"
        v-model="dateValue"
        :clearable="false"
        type="date"
        format="yyyy/MM/dd"
        placeholder="選擇日期"
        prefix-icon="icon-down"
        @change="changeDate"
    >
    </el-date-picker>
</template>

<script lang="ts">
import { Component, Emit, Vue } from "nuxt-property-decorator";

@Component
export default class UiDatePicker extends Vue {
    dateValue = '';

    @Emit('changeDate')
    changeDate() {
        return this.dateValue;
    }
}
</script>

 PAMapp/components/Ui/UiTimePicker.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,33 @@
<template>
    <el-time-select
        class="pam-time cursor--pointer"
        popper-class="pam-time-popper"
        v-model="timeValue"
        :clearable="false"
        :picker-options="pickerOptions"
        placeholder="選擇時間"
        prefix-icon="icon-down"
        value-format="timestamp"
        @change="changeTime"
    >
    </el-time-select>
</template>

<script lang="ts">
import { Component, Emit, Vue } from "nuxt-property-decorator";

@Component
export default class UiTimePicker extends Vue {
    timeValue = '';
    pickerOptions = {
        start: '09:00',
        step: '00:15',
        end: '21:00'
    }

    @Emit('changeTime')
    changeTime() {
        return this.timeValue;
    }
}
</script>