From b1b1fa9058a8e7df07c25cf6d5be1678a042ab7e Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 18 一月 2022 14:27:07 +0800
Subject: [PATCH] update: TODO#134382 [顧問管理流程] 刪除/編輯約訪紀錄

---
 PAMapp/pages/appointment/_appointmentId/index.vue |   77 ++++++++++++++++++++++++++++++++++----
 1 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/PAMapp/pages/appointment/_appointmentId/index.vue b/PAMapp/pages/appointment/_appointmentId/index.vue
index 41290f7..2957175 100644
--- a/PAMapp/pages/appointment/_appointmentId/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/index.vue
@@ -1,10 +1,10 @@
 <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>
+    <!-- TODO: re-send api to update progress [Tomas, 2022/1/17 17:02] -->
     <AppointmentProgress
       class="mt-10"
       :currentStep="appointmentDetail.communicateStatus"
@@ -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 }}
@@ -43,15 +43,44 @@
         </div>
       </div>
 
-      <div class="client-detail-action">
+      <div class="client-detail-action" v-if="showWhenAppointmentHasClosed">
+        <el-button >��遛��漲</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>
 
+    <section class="close-appointment-detail" v-if="showWhenAppointmentHasClosed">
+
+        <div class="close-appointment-detail-nav">
+          <div class="mdTxt">蝯�撘�</div>
+          <div class="mdTxt text--primary text--underline cursor--pointer" @click="editAppointmentHasClosed">蝺刻摩</div>
+        </div>
+        <span class="mt-10 mb-30">��漱</span>
+
+        <div class="mdTxt mb-10">靽頨思遢霅���</div>
+        <div class="mb-30">A123456789</div>
+        <div class="mdTxt mb-10">���誨蝣噗lan Code</div>
+        <div class="mb-30">8888888</div>
+        <div class="mdTxt mb-10">�脖辣����</div>
+        <div class="mb-30">2021/12/2</div>
+        <div class="mdTxt mb-10">��酉</div>
+        <div class="">蝝赤4甈∴�恥�敺�迭��窄�憭Ｕ��</div>
+
+    </section>
+
+    <InterviewMsg
+      :isVisible.sync="isVisibleDialog"
+      :client="appointmentDetail">
+    </InterviewMsg>
+
+
     <section class="mt-30">
-      <AppointmentInterviewList />
+      <AppointmentInterviewList :interviewList="appointmentDetail.interviewRecordDTOs" />
     </section>
 
     <section class="mt-30">
@@ -68,11 +97,15 @@
 
 import appointmentService from '~/shared/services/appointment.service';
 import { AppointmentDetail } from '~/shared/models/appointment.model';
+import { ContactStatus } from '~/shared/models/enum/contact-status';
 
 @Component
 export default class AppointmentDetailComponent extends Vue {
 
   appointmentDetail!: AppointmentDetail;
+  isVisibleDialog = false;
+  interviewTxt = "";
+  contactStatus = ContactStatus;
 
   //////////////////////////////////////////////////////////////////////
 
@@ -89,10 +122,23 @@
     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;
+  }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .appointment-client-detail-page{
   .date-detail{
     display        : flex;
@@ -162,4 +208,19 @@
     }
   }
 }
+.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;
+}
+
 </style>

--
Gitblit v1.8.0