From 497f54b264eba626b77e79fec2ca6947ccae19e4 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 14 十二月 2021 15:45:23 +0800
Subject: [PATCH] refactor: myAppointmentList
---
PAMapp/store/index.ts | 41 +++++++++----
PAMapp/assets/ts/models/client.model.ts | 21 +++++++
PAMapp/assets/ts/api/appointment.ts | 31 ----------
PAMapp/pages/myAppointmentList.vue | 67 ++++++++++++---------
PAMapp/assets/ts/services/appointment.service.ts | 14 ++++
5 files changed, 102 insertions(+), 72 deletions(-)
diff --git a/PAMapp/assets/ts/api/appointment.ts b/PAMapp/assets/ts/api/appointment.ts
index b324059..84bcded 100644
--- a/PAMapp/assets/ts/api/appointment.ts
+++ b/PAMapp/assets/ts/api/appointment.ts
@@ -2,14 +2,6 @@
import { AppointmentLog } from '../models/appointment.model';
-// ���������
-export function getMyAppointmentList():Promise<ClientInfo[]> {
- const headers = {
- Authorization: 'Bearer ' + localStorage.getItem('id_token')
- }
- return http.get('/consultant/getMyAppointment', {headers}).then(res => res.data);
-}
-
// 璅�撌脰蝯�
export function markAsContact(appointmentId: number) {
const headers = {
@@ -42,27 +34,4 @@
Authorization: 'Bearer ' + localStorage.getItem('id_token')
}
return http.post('/appointment/recordRead/' + appointmentId, undefined, {headers})
-}
-
-
-export interface ClientInfo {
- id : number,
- phone : string,
- email : string,
- contactType : string,
- gender : string,
- age : string,
- job : string,
- requirement : string,
- communicateStatus: string,
- hopeContactTime : string,
- otherRequirement : string,
- appointmentDate : Date,
- agentNo : string,
- customerId : number,
- name : string,
- consultantViewTime: Date,
- consultantReadTime: Date,
- contactTime : Date,
- satisfactionScore: number
}
diff --git a/PAMapp/assets/ts/models/client.model.ts b/PAMapp/assets/ts/models/client.model.ts
new file mode 100644
index 0000000..e6a0488
--- /dev/null
+++ b/PAMapp/assets/ts/models/client.model.ts
@@ -0,0 +1,21 @@
+export interface ClientInfo {
+ id : number,
+ phone : string,
+ email : string,
+ contactType : string,
+ gender : string,
+ age : string,
+ job : string,
+ requirement : string,
+ communicateStatus : string,
+ hopeContactTime : string,
+ otherRequirement : string,
+ appointmentDate : string,
+ agentNo : string,
+ customerId : number,
+ name : string,
+ consultantViewTime: string,
+ consultantReadTime: string,
+ contactTime : string,
+ satisfactionScore : number
+}
diff --git a/PAMapp/assets/ts/services/appointment.service.ts b/PAMapp/assets/ts/services/appointment.service.ts
new file mode 100644
index 0000000..227918b
--- /dev/null
+++ b/PAMapp/assets/ts/services/appointment.service.ts
@@ -0,0 +1,14 @@
+import { http } from "./httpClient";
+
+import { ClientInfo } from "../models/client.model";
+
+class AppointmentService {
+
+ // ���������
+ async getMyAppointmentList(): Promise<ClientInfo[]> {
+ return http.get('/consultant/getMyAppointment').then(res => res.data);
+ }
+
+}
+
+export default new AppointmentService();
diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
index 103b62a..ba395a1 100644
--- a/PAMapp/pages/myAppointmentList.vue
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -22,15 +22,16 @@
<NuxtChild></NuxtChild>
</div>
+ <!-- DIALOG -->
<PopUpFrame
- :isOpen.sync="showNewAppointmentNumber"
+ :isOpen.sync="showNewAppointmentHint"
>
<div class="text--center mdTxt">
- <p class="mb-50">雿�� <span class="text--primary">{{newAppointmentNumber}}</span> �������</p>
+ <p class="mb-50">雿�� <span class="text--primary">{{ newAppointmentSum }}</span> �������</p>
<div class="text--center">
<el-button
type="primary"
- @click="showNewAppointmentNumber = false"
+ @click="showNewAppointmentHint = false"
>������</el-button>
</div>
</div>
@@ -40,37 +41,31 @@
<script lang="ts">
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
-import { allAppointmentsView, ClientInfo } from '~/assets/ts/api/appointment';
+
import * as _ from 'lodash';
+
+import { ClientInfo } from '~/assets/ts/models/client.model';
@Component({
layout: 'home',
middleware: 'myAppointmentMiddleware'
})
export default class ClientReservedList extends Vue {
+
activeTabName = 'appointmentList';
appointmentList: ClientInfo[] = [];
contactedList: ClientInfo[] = [];
clients: ClientInfo[] = [];
- newAppointmentNumber: number = 0;
- showNewAppointmentNumber = false;
+ showNewAppointmentHint = false;
- @State('myAppointmentList') myAppointmentList!: ClientInfo[];
- @Action storeMyAppointmentList!: () => Promise<number>;
+ @State('myAppointmentList')
+ myAppointmentList!: ClientInfo[];
- mounted() {
- this.storeMyAppointmentList().then(newDataLength => {
- this.newAppointmentNumber = newDataLength;
- if (this.newAppointmentNumber > 0) {
- this.showNewAppointmentNumber = true;
- allAppointmentsView().then(res => res);
- }
- });
+ @State('myNewAppointmentSum')
+ newAppointmentSum!: number;
- if (this.$route.name) {
- this.activeTabName = this.$route.name.split('-')[1]
- }
- }
+ @Action
+ storeMyAppointmentList!: () => Promise<number>;
@Watch('myAppointmentList')
onMyAppointmentListChange() {
@@ -81,25 +76,39 @@
.filter(item => item.communicateStatus !== 'contacted');
}
- tabClick(path: string) {
- this.activeTabName = path;
- this.$router.push('/myAppointmentList/' + this.activeTabName)
+ //////////////////////////////////////////////////////////////////////
+
+ mounted() {
+ this.setActivatedTab();
+ this.storeMyAppointmentList();
+ this.showNewAppointmentHint = this.newAppointmentSum > 0;
}
- get route(): string{
- const routeName = this.$route.name;
- return routeName ? routeName:'';
- };
+ //////////////////////////////////////////////////////////////////////
get bannerClassName() {
- return this.routeFormatBannerClass(this.route);
+ const routeName = this.$route.name || '';
+ return this.routeFormatBannerClass(routeName);
};
+ tabClick(path: string) {
+ this.activeTabName = path;
+ this.$router.push(`/myAppointmentList/${this.activeTabName}`);
+ }
+
+ //////////////////////////////////////////////////////////////////////
// format to {page}-banner or pam-no-banner tag
private routeFormatBannerClass(route: string): string {
const needBannerTags = ['myAppointmentList-appointmentList', 'myAppointmentList-contactedList'];
return _.includes(needBannerTags, route) ? route + '-banner' : 'pam-no-banner';
};
+
+ private setActivatedTab(): void {
+ const routeFullName = this.$route.name;
+ if (routeFullName) {
+ this.activeTabName = routeFullName.split('-')[1];
+ }
+ }
}
</script>
@@ -131,4 +140,4 @@
margin: 30px auto;
}
}
-</style>
\ No newline at end of file
+</style>
diff --git a/PAMapp/store/index.ts b/PAMapp/store/index.ts
index d075c4f..74ff925 100644
--- a/PAMapp/store/index.ts
+++ b/PAMapp/store/index.ts
@@ -1,12 +1,15 @@
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'
-import { ClientInfo, getMyAppointmentList, getMyReviewLog } from '~/assets/ts/api/appointment';
+import { getMyReviewLog } from '~/assets/ts/api/appointment';
import { recommend, AgentOfStrictQuery, addFavoriteConsultant, deleteConsultant, strictQuery } from '~/assets/ts/api/consultant';
import { getFavoriteFromStorage, setFavoriteToStorage } from '~/assets/ts/storageConsultant';
-import myConsultantService from '~/assets/ts/services/my-consultant.service';
+import myConsultantService from '~/assets/ts/services/my-consultant.service';
+import appointmentService from '~/assets/ts/services/appointment.service';
+
import { Consultant } from '~/assets/ts/models/consultant.model';
import { AppointmentLog } from '~/assets/ts/models/appointment.model';
+import { ClientInfo } from '~/assets/ts/models/client.model';
@Module
export default class Store extends VuexModule {
recommendList: Consultant[] = [];
@@ -14,6 +17,7 @@
myConsultantList: Consultant[] = [];
myAppointmentList: ClientInfo[] = [];
+ myNewAppointmentSum: number = 0;
myAppointmentReviewLogList: AppointmentLog[] = [];
@@ -21,27 +25,38 @@
return this.context.getters['localStorage/isUserLogin'];
}
- @Mutation updateRecommend(data: Consultant[]) {
+ @Mutation
+ updateRecommend(data: Consultant[]) {
this.recommendList = data;
}
- @Mutation updateConsultantList(data: Consultant[]) {
+ @Mutation
+ updateConsultantList(data: Consultant[]) {
this.myConsultantList = data;
}
- @Mutation updateStrictQueryList(data: AgentOfStrictQuery[]) {
+ @Mutation
+ updateStrictQueryList(data: AgentOfStrictQuery[]) {
this.strictQueryList = data;
}
- @Mutation updateMyAppointmentList(data: ClientInfo[]) {
+ @Mutation
+ updateMyAppointmentList(data: ClientInfo[]) {
this.myAppointmentList = data;
}
- @Mutation updateMyAppointmentReviewLog(data: AppointmentLog[]) {
+ @Mutation
+ updateMyNewAppointmentSum(newAppointmentSum: number) {
+ this.myNewAppointmentSum = newAppointmentSum;
+ }
+
+ @Mutation
+ updateMyAppointmentReviewLog(data: AppointmentLog[]) {
this.myAppointmentReviewLogList = data;
}
- @Action storeRecommendList() {
+ @Action
+ storeRecommendList() {
recommend().then(data => {
this.context.commit('updateRecommend', data)
})
@@ -109,10 +124,11 @@
}
@Action
- async storeMyAppointmentList() {
- return await getMyAppointmentList().then((data) => {
+ storeMyAppointmentList(): void {
+ appointmentService.getMyAppointmentList().then((data) => {
+ const newAppointmentSum = data.filter(item => !item.consultantViewTime || item.consultantViewTime === null).length;
this.context.commit('updateMyAppointmentList', data);
- return data.filter(item => !item.consultantViewTime || item.consultantViewTime === null).length
+ this.context.commit('updateMyNewAppointmentSum', newAppointmentSum);
});
}
@@ -130,7 +146,8 @@
});
}
- @Action updateMyAppointment(myAppointment: ClientInfo) {
+ @Action
+ updateMyAppointment(myAppointment: ClientInfo) {
const data = this.myAppointmentList.filter(item => item.id !== myAppointment.id);
data.unshift(myAppointment);
this.context.commit('updateMyAppointmentList', data)
--
Gitblit v1.8.0