update: TODO#134382 [顧問管理流程] 刪除/編輯約訪紀錄

Mila

2022-01-18 b1b1fa9058a8e7df07c25cf6d5be1678a042ab7e

 PAMapp/components/Interview/InterviewAdd.vue

@@ -1,76 +1,228 @@
<template>
  <div class="edit-appointment-record">
      <div class="edit-appointment-record-date">
          <span>今天 11:00 建立</span>
          <span>今天 11:00 更新</span>
      <div class="edit-appointment-record-date" v-if="interviewId">
          <span>{{interviewRecord.createdDate | formatDate}} 建立</span>
          <span>{{interviewRecord.lastModifiedDate | formatDate}} 更新</span>
      </div>
      <el-row class="mdTxt mb-10">
          <el-col :xs="16" :sm="20">約訪時間</el-col>
          <el-col :xs="8" :sm="4" class="text--right" v-if="interviewId">
              <span
                v-if="!isEdit"
                class="mr-10 text--primary text--underline cursor--pointer"
                @click="showCancelPopUp = true"
              >刪除</span>
              <span
                v-if="!isEdit"
                class="text--primary text--underline cursor--pointer"
                @click="isEdit = !isEdit"
              >編輯</span>
          </el-col>
      </el-row>
      <template v-if="!interviewId || isEdit">
          <DateTimePicker
            @changeDateTime="interviewTime = $event"
            :defaultValue="defaultValue"
          ></DateTimePicker>
      </template>
      <template v-else>
          <div class="mdTxt lighter mt-20">
              {{formatInterviewDate}}
          </div>
      </template>

      <div class="mdTxt mb-10 mt-30">約訪紀錄</div>
      <template v-if="!interviewId || isEdit">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="請輸入約訪紀錄"
            resize="none"
            v-model="content"
        >
        </el-input>
      </template>
      <template v-else>
          <div class="mdTxt lighter mt-20">
              {{content}}
          </div>
      </template>
      <div class="edit-appointment-record-btn" v-if="!interviewId || isEdit">
          <el-button @click="cancel">取消</el-button>
          <el-button
            :disabled="!interviewTime || !content"
            @click="saveInterviewRecord"
          >確定</el-button>
      </div>

      <div class="mdTxt mb-10">約訪時間</div>
      <DateTimePicker
        @changeDateTime="interviewTime = $event"
      ></DateTimePicker>

      <div class="mdTxt mb-10 mt-10">約訪紀錄</div>
      <el-input
        type="textarea"
        :rows="5"
        placeholder="請輸入約訪紀錄"
        resize="none"
        v-model="content"
      <PopUpFrame :isOpen.sync="showCancelPopUp"
         @closePopUp="showCancelPopUp = false"
      >
      </el-input>

      <div class="edit-appointment-record-btn">
          <el-button>取消</el-button>
          <el-button :disabled="!interviewTime || !content" @click="createInterviewRecord">確定</el-button>
      </div>

      <PopUpFrame :isOpen.sync="isConfirmPopup"
        @closePopUp="closeConfirmPopup">
        <div class="text--center mdTxt">新增成功</div>
        <div class="text--center mdTxt">是否刪除此筆約訪記錄？</div>
        <div class="text--center mt-30">
            <el-button @click="closeConfirmPopup" type="primary">確定</el-button>
            <el-button @click="showCancelPopUp = false">否</el-button>
            <el-button @click="deleteInterviewRecord" type="primary">是</el-button>
        </div>
    </PopUpFrame>
      </PopUpFrame>

      <PopUpFrame :isOpen.sync="showConfirmPopup"
        @closePopUp="closePopup">
        <div class="text--center mdTxt">{{confirmTxt}}！</div>
        <div class="text--center mt-30">
            <el-button @click="closePopup" type="primary">確定</el-button>
        </div>
      </PopUpFrame>

      <PopUpFrame :isOpen.sync="showFutureDateConfirmPopup"
        @closePopUp="closePopup">
        <div class="text--center mdTxt">{{confirmTxt}}！</div>
        <div class="text--center mdTxt">立即發送約訪通知？</div>
        <div class="text--center mt-30">
            <el-button @click="closePopup">先不發送</el-button>
            <el-button @click="showInterviewMsgPopup = true" type="primary">傳送約訪通知</el-button>
        </div>
      </PopUpFrame>

      <InterviewMsg
        :isVisible.sync="showInterviewMsgPopup"
        @closeDialog="closePopup"
      ></InterviewMsg>
  </div>
</template>
<script lang="ts">
import { AppointmentLog, InterviewRecordInfo } from '~/shared/models/appointment.model';
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import authService from '~/shared/services/auth.service';
import { InterviewRecord, InterviewRecordInfo } from '~/shared/models/appointment.model';
import { Vue, Component, Prop, State, Mutation, Watch, Action } from 'nuxt-property-decorator';
import appointmentService from '~/shared/services/appointment.service';

@Component
export default class InterviewAdd extends Vue {
    @State
    interviewRecord!: InterviewRecord;

    @Mutation
    updateInterviewRecord!: (data: InterviewRecord) => void;

    @Mutation
    clearInterviewRecord!: () => void;

    interviewTime = '';
    content = '';
    isConfirmPopup = false;

    // @Prop()
    // myAppointmentReviewLogList!: AppointmentLog[];
    interviewId = '';
    appointmentId = '';
    confirmTxt: '新增成功' | '編輯成功' | '刪除成功' = '新增成功';

    // isUserLogin = false;
    isEdit = false;

    //////////////////////////////////////////////////////////////////////
    // mounted() {
    //   this.isUserLogin = authService.isUserLogin();
    // }
    showConfirmPopup = false;
    showCancelPopUp = false;
    showInterviewMsgPopup = false;
    showFutureDateConfirmPopup = false;

    createInterviewRecord() {
    defaultValue!: Date;

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

    mounted() {
        this.interviewId = this.$route.params.interviewId;
        this.appointmentId = this.$route.params.appointmentId;
        const isEditPage = this.interviewId && this.interviewRecord;
        if (isEditPage) {
            this.checkInterviewRecord();
        }
    }

    private checkInterviewRecord() {
        if (this.interviewRecord.appointmentId !== +this.appointmentId
                || this.interviewRecord.id !== +this.interviewId) {
            appointmentService.getAppointmentDetail(+this.appointmentId).then((data) => {
                const currentInterviewRecord = data.interviewRecordDTOs.filter(item => item.id === +this.interviewId)[0];
                this.updateInterviewRecord(currentInterviewRecord);
            })
        }
    }

    destroyed() {
        this.clearInterviewRecord();
    }

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

    @Watch('interviewRecord', {immediate: true})
    watchInterviewRecord() {
        if (this.interviewRecord && this.interviewRecord.content) {
            this.content = this.interviewRecord.content;
            this.defaultValue = new Date(this.interviewRecord.interviewDate);
        }
    }

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

    saveInterviewRecord() {
        const interviewRecordInfo: InterviewRecordInfo = {
            content: this.content,
            interviewDate: this.interviewTime,
            appointmentId: +this.$route.params.appointmentId
            appointmentId: +this.appointmentId
        };
        if (!this.interviewId) {
            this.createdRecord(interviewRecordInfo);
        } else {
            const updateInterviewRecord = {
                ...interviewRecordInfo,
                id: +this.interviewId
            }
            this.updateRecord(updateInterviewRecord);
        }
        appointmentService.createInterviewRecord(interviewRecordInfo).then(res => {
            this.isConfirmPopup = true;
        });

    }

    closeConfirmPopup() {
        this.isConfirmPopup = false;
        this.$router.go(-1);
    private createdRecord(interviewRecordInfo) {
        appointmentService.createInterviewRecord(interviewRecordInfo).then(res => {
            this.confirmTxt = '新增成功'
            this.showPopUp();
        });
    }

    private updateRecord(updateInterviewRecord) {
        appointmentService.updateInterviewRecord(updateInterviewRecord).then(res => {
            this.confirmTxt = '編輯成功';
            this.showPopUp();
        });
    }

    private showPopUp() {
        if (new Date(this.interviewTime).getTime() >= new Date().getTime()) {
            this.showFutureDateConfirmPopup = true;
        } else {
            this.showConfirmPopup = true;
        }
    }

    closePopup() {
        this.$router.push(`/appointment/${this.appointmentId}`);
    }

    deleteInterviewRecord() {
        appointmentService.deleteInterviewRecord(this.interviewId).then(res => {
            this.confirmTxt = '刪除成功';
            this.showConfirmPopup = true;
        });
    }

    cancel() {
        if (this.interviewId) {
           this.content = this.interviewRecord.content;
           this.defaultValue = new Date(this.interviewRecord.interviewDate);
           this.isEdit = false;
        } else {
           this.$router.push(`/appointment/${this.appointmentId}`);
        }
    }

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

    get formatInterviewDate() {
        const interviewDate = new Date(this.interviewRecord.interviewDate);
        return `${interviewDate.getFullYear()}/${interviewDate.getMonth() + 1}/${interviewDate.getDate()} ${interviewDate.getHours()}:${interviewDate.getMinutes()}`;
    }

}