From b4d6944076f1df6eedaae35c4c2a7072fe988e8a Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 30 四月 2024 15:34:02 +0800
Subject: [PATCH] update: package-lock.json

---
 PAMapp/pages/myAppointmentList/closedList.vue |  102 +++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 82 insertions(+), 20 deletions(-)

diff --git a/PAMapp/pages/myAppointmentList/closedList.vue b/PAMapp/pages/myAppointmentList/closedList.vue
index 16cd405..42a54e1 100644
--- a/PAMapp/pages/myAppointmentList/closedList.vue
+++ b/PAMapp/pages/myAppointmentList/closedList.vue
@@ -1,18 +1,23 @@
 <template>
-    <div>
+    <div class="pam-closed-appointment-list">
         <el-input
             type="text"
             placeholder="隢撓���摮�"
-            class="mb-30 pam-clientReserved-input"
+            class="mb-10 pam-clientReserved-input"
             v-model="keyWord"
-            @keyup.enter.native="search"
+            @input="search"
         >
             <i
                 slot="suffix"
                 class="icon-search search cursor--pointer"
-                @click="search"
             ></i>
         </el-input>
+
+        <div class="closed-appointment__tag-filter mb-10">
+          <el-radio v-model="selectedClosedCategory" :label="'all'" border>��({{ itemSum }})</el-radio>
+          <el-radio v-model="selectedClosedCategory" :label="'done'" border>��漱({{ doneItemSum }})</el-radio>
+          <el-radio v-model="selectedClosedCategory" :label="'closed'" border>���漱({{ closedItemSum }})</el-radio>
+        </div>
 
         <ClientList
             :clients="pageList"
@@ -28,28 +33,36 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch, State, namespace } from 'nuxt-property-decorator';
+import { Vue, Component, Watch, namespace } from 'nuxt-property-decorator';
 
 import { Appointment } from '~/shared/models/appointment.model';
 import { ContactStatus } from '~/shared/models/enum/contact-status';
 
 
-const localStorage = namespace('localStorage');
-@Component
-export default class ClientContactedList extends Vue {
+const appointmentStore = namespace('appointment.store');
+const localStorage     = namespace('localStorage');
 
-    @State('myAppointmentList')
+@Component
+export default class ClientClosedList extends Vue {
+
+    @appointmentStore.State('myAppointmentList')
     myAppointmentList!: Appointment[];
 
     @localStorage.Getter
     currentAppointmentIdFromMsg!: string;
 
-    contactedList: Appointment[] = [];
-    filterList   : Appointment[] = [];
-    keyWord      : string       = '';
-    pageList     : Appointment[] = [];
-    currentPage  : number = 1;
     contactStatus= ContactStatus;
+
+    closedItemSum = 0;
+    currentPage   = 1;
+    doneItemSum   = 0;
+    itemSum       = 0;
+    keyWord       = '';
+
+    closedList: Appointment[] = [];
+    filterList   : Appointment[] = [];
+    pageList     : Appointment[] = [];
+    selectedClosedCategory: 'all' | 'done' | 'closed' = 'all';
 
     //////////////////////////////////////////////////////////////////////
 
@@ -61,12 +74,14 @@
 
     @Watch('myAppointmentList')
     onMyAppointmentListChange() {
-        this.contactedList = (this.myAppointmentList || [])
-            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE)
-            .map((item) => ({...item, sortTime: new Date(item.contactTime)}))
+        this.closedList = (this.myAppointmentList || [])
+            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE || item.communicateStatus === this.contactStatus.CANCEL)
+            .map((item) => ({...item, sortTime: new Date(item.lastModifiedDate)}))
             .sort((prevItem, nextItem) => +nextItem.sortTime - +prevItem.sortTime);
-        this.filterList = this.contactedList;
-
+        this.filterList = this.closedList;
+        this.itemSum = this.closedList.length;
+        this.doneItemSum = this.closedList.filter((item) => item.communicateStatus === this.contactStatus.DONE).length;
+        this.closedItemSum = this.closedList.filter((item) => item.communicateStatus === this.contactStatus.CLOSE).length;
         this.getCurrentPage();
     }
 
@@ -78,12 +93,28 @@
         }
     }
 
+    @Watch('selectedClosedCategory')
+    onSelectedClosedCategoryChanges() {
+      this.search();
+    }
+
     //////////////////////////////////////////////////////////////////////
 
     search(): void {
-        this.filterList = this.contactedList.filter(item => {
+      if (this.selectedClosedCategory === this.contactStatus.DONE) {
+        this.filterList = this.closedList.filter((item) => item.communicateStatus === this.contactStatus.DONE);
+      } else if (this.selectedClosedCategory === this.contactStatus.CLOSE) {
+        this.filterList = this.closedList.filter((item) => item.communicateStatus === this.contactStatus.CLOSE);
+      } else {
+        this.filterList = this.closedList;
+      }
+
+      if (this.keyWord) {
+        this.filterList = this.filterList.filter(item => {
             return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
         })
+      }
+
     }
 
     changePage(pageList: Appointment[]): void {
@@ -92,3 +123,34 @@
 
 }
 </script>
+
+<style lang="scss">
+.pam-closed-appointment-list {
+  .closed-appointment__tag-filter {
+    display: flex;
+    .el-radio {
+      border-color: $LIGHT_GREY;
+      border-radius: 30px;
+      border-width: 1px;
+      font-size   : 16px;
+      margin-left : 0 !important;
+      margin-right: 10px;
+      padding     : 10px;
+      @extend .fix-chrome-click--issue;
+      &.is-checked {
+        background-color: $CORAL;
+        .el-radio__label {
+          color  : $PRIMARY_WHITE !important;
+        }
+      }
+      .el-radio__input {
+        display: none;
+      }
+      .el-radio__label {
+        color  : $PRIMARY_BLACK !important;
+        padding: 0px !important;
+      }
+    }
+  }
+}
+</style>

--
Gitblit v1.8.0