From 9e72c5414d8ca7c79aabf1057a91f7e6c1e085ef Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期一, 17 一月 2022 14:31:36 +0800
Subject: [PATCH] update: 顧問_預約單列表 - 結案頁籤增加 filter tab-bar
---
PAMapp/pages/myAppointmentList/closedList.vue | 74 +++++++++++++++++++++++++++++++------
1 files changed, 62 insertions(+), 12 deletions(-)
diff --git a/PAMapp/pages/myAppointmentList/closedList.vue b/PAMapp/pages/myAppointmentList/closedList.vue
index 16cd405..a6336b7 100644
--- a/PAMapp/pages/myAppointmentList/closedList.vue
+++ b/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>
--
Gitblit v1.8.0