| | |
| | | placeholder="請輸入關鍵字" |
| | | class="mb-10 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="closed-appointment__tag-filter"> |
| | | <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> |
| | |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { Vue, Component, Watch, State, namespace } from 'nuxt-property-decorator'; |
| | | 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 localStorage = namespace('localStorage'); |
| | | const appointmentStore = namespace('appointment.store'); |
| | | const localStorage = namespace('localStorage'); |
| | | |
| | | @Component |
| | | export default class ClientClosedList extends Vue { |
| | | |
| | | @State('myAppointmentList') |
| | | @appointmentStore.State('myAppointmentList') |
| | | myAppointmentList!: Appointment[]; |
| | | |
| | | @localStorage.Getter |
| | | currentAppointmentIdFromMsg!: string; |
| | | |
| | | closedItemSum = 0; |
| | | closedList: Appointment[] = []; |
| | | contactStatus= ContactStatus; |
| | | currentPage : number = 1; |
| | | doneItemSum = 0; |
| | | |
| | | closedItemSum = 0; |
| | | currentPage = 1; |
| | | doneItemSum = 0; |
| | | itemSum = 0; |
| | | keyWord = ''; |
| | | |
| | | closedList: Appointment[] = []; |
| | | filterList : Appointment[] = []; |
| | | itemSum = 0; |
| | | keyWord : string = ''; |
| | | pageList : Appointment[] = []; |
| | | selectedClosedCategory: 'all' | 'done' | 'closed' = 'all'; |
| | | |
| | |
| | | @Watch('myAppointmentList') |
| | | onMyAppointmentListChange() { |
| | | this.closedList = (this.myAppointmentList || []) |
| | | .filter(item => item.communicateStatus === this.contactStatus.DONE || item.communicateStatus === this.contactStatus.CLOSE) |
| | | .map((item) => ({...item, sortTime: new Date(item.contactTime)})) |
| | | .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; |
| | |
| | | } else { |
| | | this.filterList = this.closedList; |
| | | } |
| | | this.filterList = this.filterList.filter(item => { |
| | | return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord) |
| | | }) |
| | | |
| | | if (this.keyWord) { |
| | | this.filterList = this.filterList.filter(item => { |
| | | return item?.name?.match(this.keyWord) || item?.requirement?.match(this.keyWord) |
| | | }) |
| | | } |
| | | |
| | | } |
| | | |
| | | changePage(pageList: Appointment[]): void { |
| | |
| | | .closed-appointment__tag-filter { |
| | | display: flex; |
| | | .el-radio { |
| | | border-color: $PRIMARY_BLACK; |
| | | border-width: 2px; |
| | | 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: #D0D0CE; |
| | | background-color: $CORAL; |
| | | .el-radio__label { |
| | | color : $PRIMARY_WHITE !important; |
| | | } |
| | | } |
| | | .el-radio__input { |
| | | display: none; |