Merge branch 'pollex-dev' into sit

wayne

2022-01-26 6fa4bba623713c396432ba8b863846883d6a1906

 PAMapp/pages/myAppointmentList.vue

@@ -1,21 +1,28 @@
<template>
    <div>
        <div class="pam-myAppointment-banner"></div>
      <div class="pam-myAppointment-banner"></div>
        <div class="pam-container">
            <div class="pam-cus-tabs mb-30">
            <div class="pam-cus-tabs mb-10">
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'appointmentList'}"
                    @click="clickTab('appointmentList')"
                >客戶預約
                    <span class="p">({{appointmentList.length}})</span>
                >
                  <span class="smTxt">未聯絡({{ appointmentItemSum }})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'contactedList'}"
                    @click="clickTab('contactedList')"
                >已聯絡
                    <span class="p">({{contactedList.length}})</span>
                >
                  <span class="smTxt">約訪中({{ contactedItemSum }})</span>
                </div>
                <div
                    class="cus-tab-item"
                    :class="{'is-active': activeTabName === 'closedList'}"
                    @click="clickTab('closedList')"
                >
                  <span class="smTxt">結案({{ closedItemSum }})</span>
                </div>
            </div>

@@ -28,7 +35,7 @@
             :isOpen.sync="showNewAppointmentHint"
        >
            <div class="text--center mdTxt">
                <p class="mb-50">你有 <span class="text--primary">{{ newAppointmentSum }}</span> 則新的預約</p>
                <p class="mb-50">您有 <span class="text--primary">{{ newAppointmentSum }}</span> 則新的預約</p>
                <div class="text--center">
                    <el-button
                        type="primary"
@@ -45,9 +52,11 @@

import * as _ from 'lodash';

import { ClientInfo } from '~/shared/models/client.model';
import { Appointment } from '~/shared/models/appointment.model';
import { ContactStatus } from '~/shared/models/enum/contact-status';

const localStorage = namespace('localStorage');
const appointmentStore = namespace('appointment.store');

@Component({
    layout: 'home',
@@ -55,14 +64,23 @@
})
export default class ClientReservedList extends Vue {

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

    @State('myNewAppointmentSum')
    @appointmentStore.Getter('newAppointmentSum')
    newAppointmentSum!: number;

    @Action
    storeMyAppointmentList!: () => Promise<number>;
    @appointmentStore.Getter('appointmentItemSum')
    appointmentItemSum!: number;

    @appointmentStore.Getter('contactedItemSum')
    contactedItemSum!: number;

    @appointmentStore.Getter('closedItemSum')
    closedItemSum!: number;

    @appointmentStore.Action
    getMyAppointmentList!: () => Promise<Appointment[]>;

    @localStorage.Mutation
    storageClearAppointmentIdFromMsg!: () => void;
@@ -70,16 +88,14 @@
    @localStorage.Getter
    currentAppointmentIdFromMsg!: string;

    activeTabName         : string       = 'appointmentList';
    appointmentList       : ClientInfo[] = [];
    clients               : ClientInfo[] = [];
    contactedList         : ClientInfo[] = [];
    showNewAppointmentHint: boolean      = false;
    activeTabName          : string        = 'appointmentList';
    contactStatus          = ContactStatus;
    showNewAppointmentHint: boolean        = false;

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

    mounted() {
      this.storeMyAppointmentList();
      this.getMyAppointmentList();
    }

    destroyed() {
@@ -90,12 +106,6 @@

    @Watch('myAppointmentList')
    onMyAppointmentListChange(): void {
        this.contactedList = this.myAppointmentList
            .filter(item => item.communicateStatus === 'contacted');

        this.appointmentList = this.myAppointmentList
            .filter(item => item.communicateStatus !== 'contacted');

        if (this.currentAppointmentIdFromMsg) {
            this.redirectAppointmentStatus();
        }
@@ -106,7 +116,13 @@
            .findIndex(item => item.id === +this.currentAppointmentIdFromMsg);
        if (currentAppointmentIndex > -1) {
            const communicateStatus = this.myAppointmentList[currentAppointmentIndex].communicateStatus;
            const pathName = communicateStatus === 'reserved' ? 'appointmentList' : 'contactedList';
            let pathName = 'closedList'
            if (communicateStatus === this.contactStatus.RESERVED || communicateStatus === this.contactStatus.PICKED) {
              pathName = 'contactedList';
            }
            if (communicateStatus === this.contactStatus.CONTACTED) {
              pathName = 'contactedList';
            }
            this.$router.push(
                {
                    path: '/myAppointmentList/' + pathName,
@@ -121,7 +137,7 @@
      this.showNewAppointmentHint = this.newAppointmentSum > 0;
    }

    @Watch('$route')
    @Watch('$route', {immediate: true})
    onRouteChange() {
        const routeFullName = this.$route.name;
        if (routeFullName) {
@@ -143,7 +159,7 @@

    // format to {page}-banner or pam-no-banner tag
    private routeFormatBannerClass(route: string): string {
        const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-contactedList'];
        const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-closedList'];
        return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
    };
}