| | |
|---|
| | | ></ClientList> |
|---|
| | | |
|---|
| | | <UiPagination |
|---|
| | | :totalList="filterList" |
|---|
| | | :totalList="appointmentList" |
|---|
| | | @changePage="changePage" |
|---|
| | | ></UiPagination> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script lang="ts"> |
|---|
| | | import { Vue, Component, Prop } from 'nuxt-property-decorator'; |
|---|
| | | import { Vue, Component, Prop, State, Watch } from 'nuxt-property-decorator'; |
|---|
| | | import { ClientInfo } from '~/assets/ts/api/appointment'; |
|---|
| | | |
|---|
| | | @Component |
|---|
| | | export default class ClientReservedList extends Vue { |
|---|
| | | @Prop({default: []}) appointmentList!: ClientInfo[]; |
|---|
| | | @State('myAppointmentList') myAppointmentList!: ClientInfo[]; |
|---|
| | | |
|---|
| | | appointmentList: ClientInfo[] = []; |
|---|
| | | pageList: ClientInfo[] = []; |
|---|
| | | keyWord: string = ''; |
|---|
| | | filterList: ClientInfo[] = []; |
|---|
| | | |
|---|
| | | @Watch('myAppointmentList') |
|---|
| | | onMyAppointmentListChange() { |
|---|
| | | this.appointmentList = this.myAppointmentList |
|---|
| | | .filter(item => item.communicateStatus !== 'contacted') |
|---|
| | | .sort((a, b) => a.appointmentDate > b.appointmentDate ? -1 : 1);; |
|---|
| | | } |
|---|
| | | |
|---|
| | | mounted() { |
|---|
| | | this.filterList = JSON.parse(JSON.stringify(this.appointmentList)) |
|---|
| | | this.onMyAppointmentListChange(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | changePage(pageList: ClientInfo[]) { |
|---|
