From 0e27da107dd3329b4d0c11ce7d0173c3bd1358e9 Mon Sep 17 00:00:00 2001
From: Jack <jack.su@pollex.com.tw>
Date: 星期三, 19 一月 2022 19:06:52 +0800
Subject: [PATCH] Merge branch 'Phase3' of ssh://dev.pollex.com.tw:29418/pcalife/PAM into Phase3

---
 PAMapp/components/Appointment/AppointmentRecordList.vue |  103 ++++++---------------------------------------------
 1 files changed, 12 insertions(+), 91 deletions(-)

diff --git a/PAMapp/components/Appointment/AppointmentRecordList.vue b/PAMapp/components/Appointment/AppointmentRecordList.vue
index 15e880d..39b2835 100644
--- a/PAMapp/components/Appointment/AppointmentRecordList.vue
+++ b/PAMapp/components/Appointment/AppointmentRecordList.vue
@@ -2,42 +2,11 @@
     <div class="record-log-component">
         <div class="mdTxt mt-30 mb-10">蝟餌絞�蝝����</div>
 
-            <div v-for="(item, index) in displayLogs"
-                :key="index">
-                <section
-                    class="record-log-card"
-                >
-                    <div class="record-log-card-date-container">
-                        <div class="record-log-card-date-container-circle">
-                            <div class="xxsTxt bold line-height">{{item.createdDate | formatYear}}</div>
-                            <div>
-                                <UiDateFormat
-                                    class="xxsTxt bold line-height"
-                                    :date="item.createdDate"
-                                    onlyShowSection="DAY" />
-                            </div>
-                            <div>
-                                <UiDateFormat
-                                    class="xxsTxt mt-4 line-space"
-                                    :date="item.createdDate"
-                                    onlyShowSection="TIME" />
-                            </div>
-                        </div>
-                    </div>
-                        <div class="record-log-msg">
-                            <div>���赤�
-                                <span v-if="item.email && item.phone">(���陛閮�mail)</span>
-                                <span v-else-if="item.email">(Email)</span>
-                                <span v-else>(���陛閮�)</span>
-                            </div>
-                            <div class="mt-10">���{item.interviewDate | formatDate}}</div>
-                        </div>
-                </section>
-                <div class="time-line"></div>
-            </div>
+            <InterviewRecordCard :noticeLogsList="displayLogs.slice(0, 3)"></InterviewRecordCard>
 
-            <section class="more-log-action">
+            <section class="text--right mt-30" v-if="displayLogs.length > 3">
                 <div class="pam-link-button--lg"
+                @click="readMoreBtn"
                 >撅��憭�</div>
             </section>
     </div>
@@ -47,15 +16,7 @@
 import { Vue, Component, Prop, Watch } from 'nuxt-property-decorator';
 import { NoticeLogs } from '~/shared/models/appointment.model';
 
-@Component({
-    filters: {
-        formatYear(value) {
-            if (value) {
-                return new Date(value).getFullYear();
-            }
-        }
-    }
-})
+@Component
 export default class AppointmentRecordList extends Vue {
 
     @Prop()
@@ -63,6 +24,8 @@
 
     appointmentId: string       = '';
     displayLogs  : NoticeLogs[] = [];
+
+    //////////////////////////////////////////////////////////////////////
 
     mounted() {
         this.appointmentId = this.$route.params.appointmentId;
@@ -79,53 +42,11 @@
       }
     }
 
+    //////////////////////////////////////////////////////////////////////
+
+    readMoreBtn() {
+        this.$router.push(`/appointment/${this.appointmentId}/recordList`);
+    }
+
 }
 </script>
-
-<style lang="scss" scoped>
-.record-log-component{
-    display: flex;
-    flex-direction: column;
-    .record-log-card{
-        display: flex;
-        .record-log-card-date-container{
-            position:relative;
-            .record-log-card-date-container-circle{
-                display: flex;
-                flex-direction: column;
-                width: 56px;
-                height: 56px;
-                border-radius: 50%;
-                border:1px solid $PRIMARY_BLACK;
-                justify-content: center;
-                align-items: center;
-                align-content: center;
-            }
-        }
-    }
-}
-.mt-4{
-    margin-top: 4px;
-}
-.line-space{
-    letter-spacing: 1px;
-}
-.line-height{
-    line-height:1.2;
-}
-.time-line{
-    border-left: 1px solid black;
-    height: 30px;
-    margin-left: 28px;
-
-}
-.record-log-msg{
-    margin-left: 13px;
-    margin-top: 10px;
-}
-.more-log-action{
-    display: flex;
-    justify-content:flex-end;
-}
-
-</style>

--
Gitblit v1.8.0