update: 顧問_預約單列表 - 結案頁籤增加 filter tab-bar

Tomas

2022-01-17 9e72c5414d8ca7c79aabf1057a91f7e6c1e085ef

update: 顧問_預約單列表 - 結案頁籤增加 filter tab-bar

 PAMapp/pages/myAppointmentList/closedList.vue

@@ -1,9 +1,9 @@
<template>
    <div>
    <div class="pam-closed-appointment-list">
        <el-input
            type="text"
            placeholder="請輸入關鍵字"
            class="mb-30 pam-clientReserved-input"
            class="mb-10 pam-clientReserved-input"
            v-model="keyWord"
            @keyup.enter.native="search"
        >
@@ -13,6 +13,12 @@
                @click="search"
            ></i>
        </el-input>

        <div class="closed-appointment__tag-filter">
          <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"
@@ -36,7 +42,7 @@

const localStorage = namespace('localStorage');
@Component
export default class ClientContactedList extends Vue {
export default class ClientClosedList extends Vue {

    @State('myAppointmentList')
    myAppointmentList!: Appointment[];
@@ -44,12 +50,16 @@
    @localStorage.Getter
    currentAppointmentIdFromMsg!: string;

    contactedList: Appointment[] = [];
    closedItemSum = 0;
    closedList: Appointment[] = [];
    contactStatus= ContactStatus;
    currentPage  : number = 1;
    doneItemSum = 0;
    filterList   : Appointment[] = [];
    itemSum = 0;
    keyWord      : string       = '';
    pageList     : Appointment[] = [];
    currentPage  : number = 1;
    contactStatus= ContactStatus;
    selectedClosedCategory: 'all' | 'done' | 'closed' = 'all';

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

@@ -61,12 +71,14 @@

    @Watch('myAppointmentList')
    onMyAppointmentListChange() {
        this.contactedList = (this.myAppointmentList || [])
        this.closedList = (this.myAppointmentList || [])
            .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE)
            .map((item) => ({...item, sortTime: new Date(item.contactTime)}))
            .sort((prevItem, nextItem) => +nextItem.sortTime - +prevItem.sortTime);
        this.filterList = this.contactedList;

        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();
    }

@@ -78,12 +90,24 @@
        }
    }

    @Watch('selectedClosedCategory')
    onSelectedClosedCategoryChanges() {
      this.search();
    }

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

    search(): void {
        this.filterList = this.contactedList.filter(item => {
            return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
        })
      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;
      }
      this.filterList = this.filterList.filter(item => {
          return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord)
      })
    }

    changePage(pageList: Appointment[]): void {
@@ -92,3 +116,29 @@

}
</script>

<style lang="scss">
.pam-closed-appointment-list {
  .closed-appointment__tag-filter {
    display: flex;
    .el-radio {
      border-color: $PRIMARY_BLACK;
      border-width: 2px;
      font-size   : 16px;
      margin-left : 0 !important;
      margin-right: 10px;
      padding     : 10px;
      &.is-checked {
        background-color: #D0D0CE;
      }
      .el-radio__input {
        display: none;
      }
      .el-radio__label {
        color  : $PRIMARY_BLACK !important;
        padding: 0px !important;
      }
    }
  }
}
</style>