| | |
| | | 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> |
| | | </el-input> |
| | | |
| | | <div class="mb-10"> |
| | | <a class="sort-indicator text--primary text--underline cursor--pointer" @click="changeSortType"> |
| | | <div class="mb-10 sort-indicator-container"> |
| | | <a class="sort-indicator cursor--pointer" @click="changeSortType"> |
| | | {{ this.sortType === 'DESC' ? '新->舊' : '舊->新' }} |
| | | <i v-if="isSortType" class="icon-sort-add"></i> |
| | | <i v-else class="icon-sort-decrease"></i> |
| | | </a> |
| | | </div> |
| | | |
| | | <ClientList |
| | | :clients="pageList" |
| | | :title="'contactedList'" |
| | | class="mt-10" |
| | | ></ClientList> |
| | | |
| | | <UiPagination |
| | |
| | | ////////////////////////////////////////////////////////////////////// |
| | | |
| | | search(): void { |
| | | this.filterList = this.contactedList.filter(item => { |
| | | return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord) |
| | | }) |
| | | if (this.keyWord) { |
| | | this.filterList = this.contactedList.filter(item => { |
| | | return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord) |
| | | }) |
| | | } else { |
| | | this.filterList = this.contactedList; |
| | | } |
| | | } |
| | | |
| | | changePage(pageList: Appointment[]): void { |
| | |
| | | } |
| | | } |
| | | |
| | | get isSortType () :boolean { |
| | | return this.sortType === 'DESC'; |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .sort-indicator-container{ |
| | | margin-bottom: 20px; |
| | | } |
| | | .sort-indicator{ |
| | | border-radius:30px; |
| | | border: 1px solid #D0D0CE; |
| | | background-color:#fff; |
| | | padding: 10px 20px; |
| | | color: #68737A; |
| | | } |
| | | </style> |