<template>
|
<div>
|
<div class="pam-cus-tabs mb-30">
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'consultantList'}"
|
@click="clickTab('consultantList')"
|
>顧問清單
|
<span class="p">({{consultantList.length}})</span>
|
</div>
|
<div
|
class="cus-tab-item"
|
:class="{'is-active': activeTabName === 'contactedList'}"
|
@click="clickTab('contactedList')"
|
>已聯絡
|
<span class="p">({{contactedList.length}})</span>
|
</div>
|
</div>
|
|
<NuxtChild
|
:contactedList="contactedList"
|
:consultantList="consultantList"
|
></NuxtChild>
|
|
</div>
|
</template>
|
|
<script lang='ts'>
|
import { Vue, Component, Watch, State, Action } from 'nuxt-property-decorator';
|
import { Consultant, ConsultantWithAppointmentId } from '~/shared/models/consultant.model';
|
|
@Component
|
export default class myConsultantList extends Vue {
|
|
@State('myConsultantList')
|
myConsultantList!: Consultant[];
|
|
@Action
|
storeConsultantList!: any;
|
|
activeTabName : string = 'consultantList';
|
consultantList: Consultant[] = [];
|
contactedList : ConsultantWithAppointmentId[] = [];
|
|
//////////////////////////////////////////////////////////////////////
|
|
beforeRouteEnter(to: any, from: any, next: any) {
|
next((vm: any) => {
|
if (to.name === 'myConsultantList') {
|
vm.$router.push('myConsultantList/consultantList');
|
return;
|
}
|
})
|
}
|
|
mounted() {
|
this.storeConsultantList();
|
|
if (this.$route.name) {
|
this.activeTabName = this.$route.name.split('-')[1]
|
}
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
@Watch('myConsultantList')
|
onMyConsultantListChange() {
|
this.setList();
|
}
|
|
private setList() {
|
// reset contacted list
|
this.contactedList = [];
|
|
// format consultant list
|
this.consultantList = (this.myConsultantList || [])
|
.filter(item => item.contactStatus !== 'contacted')
|
.map((item) => ({ ...item, formatDate: new Date(item.updateTime || item.createTime)}))
|
.sort((preItem, nextItem) => +nextItem.formatDate - +preItem.formatDate );
|
|
// format contacted list
|
this.myConsultantList.filter((consultant) => consultant.appointments!.length)
|
.forEach((consultant) => {
|
consultant.appointments!.forEach((appointment) => {
|
const consultantWithAppointmentId: ConsultantWithAppointmentId = {
|
...consultant,
|
appointmentId: appointment.id,
|
appointmentDate: appointment.appointmentDate,
|
appointmentScore: appointment.satisfactionScore,
|
appointmentStatus: appointment.communicateStatus,
|
};
|
this.contactedList.push(consultantWithAppointmentId);
|
})
|
});
|
|
this.contactedList = this.contactedList
|
.filter((appointment) => appointment['appointmentStatus'] === 'contacted')
|
.map((appointment) => ({ ...appointment, sortTime: new Date(appointment.appointmentDate)}))
|
.sort((preAppointment, nextAppointment) => +nextAppointment.sortTime - +preAppointment.sortTime);
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
clickTab(path: string) {
|
this.activeTabName = path;
|
this.$router.push('/myConsultantList/' + this.activeTabName)
|
}
|
|
|
}
|
</script>
|
