update: TODO#134585 串接 顧問主動發送滿意度 API

Mila

2022-01-21 1592d266eb7cea3a096c17d4ae3c0d01c679da7b

 PAMapp/pages/appointment/_appointmentId/index.vue

@@ -1,13 +1,13 @@
<template>
  <div class="appointment-client-detail-page">
    <div class="date-detail">
      <!-- TODO: 要依據不同 step 顯示不同 Date [Tomas, 2022/1/11] -->
      <div>{{ appointmentDetail.appointmentDate }}</div>
      <div>{{ appointmentDetail.consultantReadTime }}</div>
      <div>{{ appointmentDetail.appointmentDate | formatDate }}</div>
      <div>{{ appointmentDetail.consultantReadTime | formatDate }}</div>
    </div>

    <AppointmentProgress
      class="mt-10"
      :currentStep="appointmentDetail.communicateStatus"
      :currentStep="appointmentProgress"
    ></AppointmentProgress>

    <section class="client-detail">
@@ -22,7 +22,7 @@
          </div>
        </div>
        <div class="client-detail-info__information">
          <div>{{ appointmentDetail.age || '--' }}歲</div>
          <div>{{ appointmentDetail.age | toAgeLabel }}</div>
          <div>{{ appointmentDetail.phone }}</div>
          <div class="text--underline">
            {{ appointmentDetail.email }}
@@ -31,57 +31,82 @@
      </div>

      <div class="client-detail-demand mt-10">
        <div class="client-detail-demand__demand-list">

        <div class="client-detail-demand__demand-list mb-10">
          <div class="client-detail-demand__demand-list-label">需求</div>
          <div>{{ appointmentDetail.requirement }}</div>
          <div class="client-detail-demand__demand-list-content">{{ appointmentDetail.requirement }}</div>
        </div>
        <div class="client-detail-demand__hope-contact-time">

        <div class="client-detail-demand__demand-list">
          <div class="client-detail-demand__demand-list-label">聯絡<br />時段</div>
          <div>星期一 17:00 ~ 19:00</div>
          <!-- TODO: 多筆聯絡時段如何呈現 && 跑版問題 [Tomas. 2021/1/12] -->
          <!-- <div>{{ appointmentDetail.hopeContactTime }}</div> -->
          <div class="client-detail-demand__demand-list-content">
            <div v-for="(hopeContactTime, index) in hopeContactTimeList" :key="index"
              :class="{'mt-10': index > 0, 'pb-10': true, 'hope-contact-time__line': index + 1 < hopeContactTimeList.length }">
              <div v-for="(item, index) in getHopeContactTimeContent(hopeContactTime)" :key="index" :class="{'mt-10': index < 0 }">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="client-detail-action">
      <div class="client-detail-action" v-if="showWhenAppointmentHasClosed">
        <el-button @click="inviteReview">發送滿意度</el-button>
      </div>

      <div class="client-detail-action" v-else>
        <el-button @click="closeAppointment" >結案</el-button>
        <el-button @click="$router.go(-1)" style="margin-left: 0px">通知/採訪</el-button>
        <el-button @click="sendMsg" style="margin-left: 0px">通知/約訪</el-button>
      </div>

    </section>

    <template v-if="showWhenAppointmentHasClosed">
      <AppointmentClosedInfo :appointmentDetail="appointmentDetail" />
    </template>

    <InterviewMsg
      :isVisible.sync="isVisibleDialog"
      :client="appointmentDetail">
    </InterviewMsg>


    <section class="mt-30">
      <AppointmentInterviewList />
      <AppointmentInterviewList :interviewList="appointmentDetail.interviewRecordDTOs" />
    </section>

    <section class="mt-30">
      <AppointmentRecordList />
      <AppointmentRecordList :noticeLogs="appointmentDetail.appointmentNoticeLogs" />
    </section>

  </div>
</template>

<script lang="ts">
import { Context } from '@nuxt/types';

import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'nuxt-property-decorator';

import appointmentService from '~/shared/services/appointment.service';
import { AppointmentDetail } from '~/shared/models/appointment.model';
import { Appointment } from '~/shared/models/appointment.model';
import { ContactStatus } from '~/shared/models/enum/contact-status';

import reviewsService from '~/shared/services/reviews.service';


const appointmentStore = namespace('appointment.store');

@Component
export default class AppointmentDetailComponent extends Vue {

  appointmentDetail!: AppointmentDetail;
  @appointmentStore.State('appointmentDetail')
  appointmentDetail!: Appointment;

  //////////////////////////////////////////////////////////////////////
  @appointmentStore.Getter('appointmentProgress')
  appointmentProgress!: ContactStatus;

  async asyncData(context: Context) {
    const appointmentId = +context.route.params.appointmentId;
    return {
      appointmentDetail: await appointmentService.getAppointmentDetail(appointmentId).then((res) => res)
    }
  }
  isVisibleDialog = false;
  interviewTxt = "";
  contactStatus = ContactStatus;


  //////////////////////////////////////////////////////////////////////

@@ -89,10 +114,36 @@
    this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
  }

  sendMsg():void {
    this.isVisibleDialog = true;
  }

  editAppointmentHasClosed(): void{
    this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
  }

  get showWhenAppointmentHasClosed(): boolean {
    return this.appointmentDetail.communicateStatus === this.contactStatus.DONE
        || this.appointmentDetail.communicateStatus === this.contactStatus.CLOSE
        || this.appointmentDetail.communicateStatus === this.contactStatus.CANCEL;
  }

  get hopeContactTimeList(): any[] {
    return this.appointmentDetail.hopeContactTime.split("','")
  }

  getHopeContactTimeContent(hopeContactTimeString: string): string[] {
    const result = hopeContactTimeString.replace("'", '').split('、');
    return result;
  }

  inviteReview(): void {
    reviewsService.sendSatisfactionToClient(this.appointmentDetail.id).then(res => res);
  }
}
</script>

<style lang="scss" scoped>
<style lang="scss">
.appointment-client-detail-page{
  .date-detail{
    display        : flex;
@@ -152,9 +203,17 @@
        display: flex;
      }
      .client-detail-demand__demand-list-label {
        @extend .mr-10;
        @extend .mdTxt;
        @extend .mb-10;
        @extend .mdTxt;
        @extend .mr-10;
        color     : $DARK_BLUE;
        flex-basis: auto;
        min-width : 40px;
      }
      .client-detail-demand__demand-list-content {
        text-align: justify;
        text-justify: auto;
        word-break: break-all;
      }
    }
    .client-detail-action {
@@ -162,4 +221,22 @@
    }
  }
}
.close-appointment-detail{
  background-color: #fff;
  display: flex;
  margin-top: 30px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  font-size: 20px;
}
.close-appointment-detail-nav{
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.hope-contact-time__line {
  border-bottom: 1px solid #CCCCCC;
}

</style>