refactor: [顧問] 客戶預約清單

Tomas

2021-12-16 adac30f827fb9ea275c46bd3b22b8e770858cedf

refactor: [顧問] 客戶預約清單

 PAMapp/pages/myAppointmentList.vue

@@ -6,14 +6,14 @@
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'appointmentList'}"
                    @click="tabClick('appointmentList')"
                    @click="clickTab('appointmentList')"
                >客戶預約
                    <span class="p">({{appointmentList.length}})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="tabClick('contactedList')"
                    @click="clickTab('contactedList')"
                >已聯絡
                    <span class="p">({{contactedList.length}})</span>
                </div>
@@ -52,20 +52,8 @@
})
export default class ClientReservedList extends Vue {

    activeTabName = 'appointmentList';
    appointmentList: ClientInfo[] = [];
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];
    showNewAppointmentHint = false;

    @State('myAppointmentList')
    myAppointmentList!: ClientInfo[];

    @State('myNewAppointmentSum')
    newAppointmentSum!: number;

    @Action
    storeMyAppointmentList!: () => Promise<number>;

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
@@ -75,6 +63,20 @@
        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted');
    }

    @State('myNewAppointmentSum')
    newAppointmentSum!: number;

    activeTabName = 'appointmentList';
    appointmentList: ClientInfo[] = [];
    contactedList: ClientInfo[] = [];
    clients: ClientInfo[] = [];
    showNewAppointmentHint = false;

    get bannerClassName() {
        const routeName = this.$route.name || '';
        return this.routeFormatBannerClass(routeName);
    };

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

@@ -86,12 +88,11 @@

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

    get bannerClassName() {
        const routeName = this.$route.name || '';
        return this.routeFormatBannerClass(routeName);
    };
    @Action
    storeMyAppointmentList!: () => Promise<number>;

    tabClick(path: string) {

    clickTab(path: string): void {
      this.activeTabName = path;
      this.$router.push(`/myAppointmentList/${this.activeTabName}`);
    }

 PAMapp/pages/myAppointmentList/appointmentList.vue

@@ -29,40 +29,48 @@

@Component
export default class ClientReservedList extends Vue {
    @State('myAppointmentList') myAppointmentList!: ClientInfo[];

    @State('myAppointmentList')
    myAppointmentList!: ClientInfo[];

    appointmentList: ClientInfo[] = [];
    pageList: ClientInfo[] = [];
    keyWord: string = '';
    filterList: ClientInfo[] = [];

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        const unreadList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted' && !item.consultantReadTime)
            .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);

        const readList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted' && item.consultantReadTime)
            .sort((a, b) => a.consultantReadTime > b.consultantReadTime ? -1 : 1)

        this.appointmentList = unreadList.concat(readList);
        this.filterList = this.appointmentList;
    }
    //////////////////////////////////////////////////////////////////////

    mounted() {
        this.onMyAppointmentListChange();
    }

    changePage(pageList: ClientInfo[]) {
        this.pageList = pageList;
    //////////////////////////////////////////////////////////////////////

    @Watch('myAppointmentList')
    onMyAppointmentListChange(): void {
      const unreadList = this.myAppointmentList
          .filter((item) => item.communicateStatus !== 'contacted' && !item.consultantReadTime)
          .map((item) => ({ ...item, sortTime: new Date(item.appointmentDate)}))
          .sort((preItem, nextItem) => +nextItem.sortTime - +preItem.sortTime);

      const readList = this.myAppointmentList
          .filter(item => item.communicateStatus !== 'contacted' && item.consultantReadTime)
          .map((item) => ({ ...item, sortTime: new Date(item.consultantReadTime)}))
          .sort((preItem, nextItem) => +nextItem.sortTime - +preItem.sortTime);

      this.appointmentList = unreadList.concat(readList);
      this.filterList = this.appointmentList;
    }

    search() {
    search(): void {
        this.filterList = this.appointmentList.filter(item => {
            return item.name.match(this.keyWord) || item.requirement.match(this.keyWord)
        })
    }

    changePage(pageList: ClientInfo[]): void {
        this.pageList = pageList;
    }

}
</script>

 PAMapp/pages/myAppointmentList/contactedList.vue

@@ -33,33 +33,41 @@

@Component
export default class ClientContactedList extends Vue {
    @State('myAppointmentList') myAppointmentList!: ClientInfo[];

    @State('myAppointmentList')
    myAppointmentList!: ClientInfo[];

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === 'contacted')
            .map((item) => ({...item, sortTime: new Date(item.contactTime)}))
            .sort((prevItem, nextItem) => +nextItem - +prevItem);
        this.filterList = this.contactedList;
    }

    contactedList: ClientInfo[] = [];
    pageList: ClientInfo[] = [];
    keyWord: string = '';
    filterList: ClientInfo[] = [];

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === 'contacted')
            .sort((a, b) => a.contactTime > b.contactTime ? -1 : 1);
        this.filterList = this.contactedList;
    }
    //////////////////////////////////////////////////////////////////////

    mounted() {
        this.onMyAppointmentListChange();
    }

    changePage(pageList: ClientInfo[]) {
        this.pageList = pageList;
    }
    //////////////////////////////////////////////////////////////////////

    search() {
    search(): void {
        this.filterList = this.contactedList.filter(item => {
            return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
        })
    }

    changePage(pageList: ClientInfo[]): void {
        this.pageList = pageList;
    }

}
</script>