| | |
| | | placeholder="請輸入關鍵字" |
| | | class="mb-30 pam-clientReserved-input" |
| | | v-model="keyWord" |
| | | @keyup.enter.native="search" |
| | | @input="search" |
| | | > |
| | | <i slot="suffix" class="icon-search search cursor--pointer" @click="search"></i> |
| | | <i slot="suffix" class="icon-search search cursor--pointer"></i> |
| | | </el-input> |
| | | |
| | | <ClientList |
| | |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { Vue, Component, State, Watch, namespace } from 'nuxt-property-decorator'; |
| | | import { Vue, Component, Watch, namespace } from 'nuxt-property-decorator'; |
| | | |
| | | 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 localStorage = namespace('localStorage'); |
| | | const appointmentStore = namespace('appointment.store'); |
| | | @Component |
| | | export default class ClientReservedList extends Vue { |
| | | |
| | | @State('myAppointmentList') |
| | | myAppointmentList!: ClientInfo[]; |
| | | @appointmentStore.State('myAppointmentList') |
| | | myAppointmentList!: Appointment[]; |
| | | |
| | | @localStorage.Getter |
| | | currentAppointmentIdFromMsg!: string; |
| | | |
| | | appointmentList: ClientInfo[] = []; |
| | | filterList : ClientInfo[] = []; |
| | | keyWord : string = ''; |
| | | pageList : ClientInfo[] = []; |
| | | currentPage : number = 1; |
| | | @appointmentStore.Action |
| | | getAppointmentDetail!: () => Promise<Appointment>; |
| | | |
| | | appointmentList: Appointment[] = []; |
| | | currentPage : number = 1; |
| | | filterList : Appointment[] = []; |
| | | keyWord : string = ''; |
| | | pageList : Appointment[] = []; |
| | | |
| | | contactStatus = ContactStatus; |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | |
| | | |
| | | @Watch('myAppointmentList') |
| | | onMyAppointmentListChange(): void { |
| | | const unViewList = this.myAppointmentList |
| | | .filter((item) => item.communicateStatus !== 'contacted' && !item.consultantViewTime) |
| | | .map((item) => ({ ...item, sortTime: new Date(item.appointmentDate)})) |
| | | this.appointmentList = this.myAppointmentList |
| | | .filter(item => item.communicateStatus === this.contactStatus.RESERVED) |
| | | .map((item) => ({ ...item, sortTime: new Date(item.lastModifiedDate)})) |
| | | .sort((preItem, nextItem) => +nextItem.sortTime - +preItem.sortTime); |
| | | |
| | | const tempViewList = this.myAppointmentList |
| | | .filter(item => item.communicateStatus !== 'contacted' && item.consultantViewTime); |
| | | |
| | | // TODO: 後續如需針對 unreadList 做更細緻的排序,則需請後端提供判斷依據(例如: createTime)。[Tomas, 2021/12/16];å |
| | | const unreadList = tempViewList |
| | | .filter((item) => !item.consultantReadTime); |
| | | const readList = tempViewList |
| | | .filter((item) => item.consultantReadTime) |
| | | .map((item) => ({ ...item, sortTime: new Date(item.consultantReadTime)})) |
| | | .sort((preItem, nextItem) => +nextItem.sortTime - +preItem.sortTime); |
| | | |
| | | this.appointmentList = [...unViewList, ...unreadList, ...readList]; |
| | | this.filterList = this.appointmentList; |
| | | |
| | | this.getCurrentPage(); |
| | |
| | | } |
| | | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | search(): void { |
| | | this.filterList = this.appointmentList.filter(item => { |
| | | return item.name.match(this.keyWord) || item.requirement.match(this.keyWord) |
| | | }) |
| | | if (this.keyWord) { |
| | | this.filterList = this.appointmentList.filter(item => { |
| | | return item.name.match(this.keyWord) || item.requirement.match(this.keyWord); |
| | | }) |
| | | } else { |
| | | this.filterList = this.appointmentList; |
| | | } |
| | | |
| | | } |
| | | |
| | | changePage(pageList: ClientInfo[]): void { |
| | | changePage(pageList: Appointment[]): void { |
| | | this.pageList = pageList; |
| | | } |
| | | |