<template>
|
<div class="pam-closed-appointment-list">
|
<el-input
|
type="text"
|
placeholder="請輸入關鍵字"
|
class="mb-10 pam-clientReserved-input"
|
v-model="keyWord"
|
@input="search"
|
>
|
<i
|
slot="suffix"
|
class="icon-search search cursor--pointer"
|
></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"
|
:title="'closedList'"
|
></ClientList>
|
|
<UiPagination
|
:totalList="filterList"
|
:currentPage="currentPage"
|
@changePage="changePage"
|
></UiPagination>
|
</div>
|
</template>
|
|
<script lang="ts">
|
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 appointmentStore = namespace('appointment.store');
|
const localStorage = namespace('localStorage');
|
|
@Component
|
export default class ClientClosedList extends Vue {
|
|
@appointmentStore.State('myAppointmentList')
|
myAppointmentList!: Appointment[];
|
|
@localStorage.Getter
|
currentAppointmentIdFromMsg!: string;
|
|
contactStatus= ContactStatus;
|
|
closedItemSum = 0;
|
currentPage = 1;
|
doneItemSum = 0;
|
itemSum = 0;
|
keyWord = '';
|
|
closedList: Appointment[] = [];
|
filterList : Appointment[] = [];
|
pageList : Appointment[] = [];
|
selectedClosedCategory: 'all' | 'done' | 'closed' = 'all';
|
|
//////////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.onMyAppointmentListChange();
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
@Watch('myAppointmentList')
|
onMyAppointmentListChange() {
|
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.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();
|
}
|
|
private getCurrentPage() {
|
const currentIndex = this.filterList.findIndex(item => item.id === +this.currentAppointmentIdFromMsg);
|
const pageSize = 5;
|
if (currentIndex > -1) {
|
this.currentPage = Math.ceil((currentIndex + 1) / pageSize);
|
}
|
}
|
|
@Watch('selectedClosedCategory')
|
onSelectedClosedCategoryChanges() {
|
this.search();
|
}
|
|
//////////////////////////////////////////////////////////////////////
|
|
search(): void {
|
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 {
|
this.pageList = pageList;
|
}
|
|
}
|
</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>
|
