From d8b50d6626e96854016bdcabfbaaad09ec35b66d Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期五, 12 十一月 2021 17:48:54 +0800
Subject: [PATCH] TODO#130023 [顧問端-客戶預約清單] 串接 api
---
PAMapp/components/Consultant/ConsultantCard.vue | 11 -
/dev/null | 36 ------
PAMapp/pages/myAppointmentList/appointmentList.vue | 50 ++++++++
PAMapp/components/Client/ClientList.vue | 4
PAMapp/pages/index.vue | 19 ++
PAMapp/components/Client/ClientCard.vue | 53 +++++---
PAMapp/pages/myAppointmentList/contactedList.vue | 53 ++++++++
PAMapp/assets/ts/api/consultant.ts | 41 +++++-
PAMapp/pages/myAppointmentList.vue | 59 +++++++++
9 files changed, 249 insertions(+), 77 deletions(-)
diff --git a/PAMapp/assets/ts/api/consultant.ts b/PAMapp/assets/ts/api/consultant.ts
index 6865bb2..c761f2f 100644
--- a/PAMapp/assets/ts/api/consultant.ts
+++ b/PAMapp/assets/ts/api/consultant.ts
@@ -5,10 +5,7 @@
import Router from 'vue-router';
export const service = axios.create({
- baseURL: 'http://localhost:8080/api',
- headers: {
- Authorization: 'Bearer ' + localStorage.getItem('id_token')
- }
+ baseURL: 'http://localhost:8080/api'
})
service.interceptors.request.use(function (config: AxiosRequestConfig) {
@@ -35,7 +32,10 @@
// ���“���
export function getFavoriteConsultant() {
- return service.get('/consultant/favorite');
+ const headers = {
+ Authorization: 'Bearer ' + localStorage.getItem('id_token')
+ }
+ return service.get('/consultant/favorite', {headers});
}
// 敹恍�祟�
@@ -50,7 +50,10 @@
// ��憿批��
export function addFavoriteConsultant(agentNoList: string[]) {
- return service.post('/consultant/favorite', {agentNoList})
+ const headers = {
+ Authorization: 'Bearer ' + localStorage.getItem('id_token')
+ }
+ return service.post('/consultant/favorite', {agentNoList}, {headers})
}
// ����岷���
@@ -61,6 +64,14 @@
//憿批�底蝝啗���
export function getConsultantDetail(agentNo:string){
return service.get('/consultant/detail', {params:{agentNo:agentNo}})
+}
+
+// ���������
+export function getMyAppointmentList():Promise<AxiosResponse<ClientInfo>> {
+ const headers = {
+ Authorization: 'Bearer ' + localStorage.getItem('id_token')
+ }
+ return service.get('/consultant/getMyAppointment', {headers});
}
export interface Consultants {
agentNo: string,
@@ -114,4 +125,22 @@
updateTime: null;
seniority: string;
new: boolean;
+}
+
+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
}
\ No newline at end of file
diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index 5594a0e..477cf7f 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -7,18 +7,18 @@
src=""
class="cursor--pointer"
></el-avatar>
- <div class="satisfaction">
+ <!-- <div class="satisfaction">
<i class="icon-star pam-icon icon--yellow satisfaction"></i>
<span>{{'1'}}</span>
- </div>
+ </div> -->
</el-col>
<el-col :xs="14" :sm="15">
<div class="smTxt_bold name">{{client.name}}</div>
<div class="message">������</div>
<div class="professionals">
- <template v-if="client.requirements.length > 0">
+ <template v-if="client.requirement">
<span
- v-for="(item, index) in client.requirements"
+ v-for="(item, index) in requirements"
:key="index"
class="professionalsTxt"
>#{{item}}</span>
@@ -46,18 +46,18 @@
>
<h5 class="subTitle text--center mb-30"
>{{isReserved ? '������' : '撌脰蝯∟���'}}</h5>
- <p class="smTxt text-right">隞予 10:00</p>
+ <p class="smTxt text-right">{{client.appointmentDate | formatDate}}</p>
<div class="dialogTxt">
<p>憪��{client.name}}</p>
- <p>�閰梧��0912345678</p>
- <p>Email嚗�</p>
+ <p>�閰梧�{client.phone}}</p>
+ <p>Email嚗{client.email}}</p>
<p>�批嚗{client.gender === 'male' ? '���' : '憟單��'}}</p>
<p>撟湧翩嚗{client.age}}</p>
- <p>�璆哨����璆�</p>
+ <p>�璆哨�{client.job}}</p>
<p>��瘙�{client.requirements}}</p>
- <p>��蝯⊥�挾銝�嚗���,��� 18:00~21:00</p>
- <div class="mt-30 text--center">
- <el-button>{{isReserved ? '璅酉�撌脤��蝯�' : '��遛��漲'}}</el-button>
+ <p>��蝯⊥�挾銝�嚗{hopeContactTime}}</p>
+ <div class="mt-30 text--center" v-if="isReserved">
+ <el-button>璅酉�撌脤��蝯�</el-button>
</div>
</div>
</Ui-Dialog>
@@ -66,25 +66,40 @@
<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import { ClientInfo } from '~/assets/ts/api/consultant';
import { isMobileDevice } from '~/assets/ts/device';
-import { Clients } from '~/pages/clientReservedList.vue';
@Component
export default class ClientList extends Vue {
- @Prop() client!: Clients;
+ @Prop() client!: ClientInfo;
isVisibleDialog = false;
width = '';
+ get requirements() {
+ return this.client.requirement.split(',');
+ }
+
+ get hopeContactTime() {
+ return this.client.hopeContactTime.slice(1, this.client.hopeContactTime.length - 1)
+ }
get time() {
- const hours = this.client.time.getHours();
- const minutes = this.client.time.getMinutes();
- return `${hours} : ${minutes}`
+ if (this.client.appointmentDate) {
+ const newDate = new Date(this.client.appointmentDate);
+ const hours = newDate.getHours();
+ const minutes = newDate.getMinutes();
+ return `${hours} : ${minutes}`
+ }
+ return ''
}
get date() {
- const month = this.client.time.getMonth();
- const date = this.client.time.getDate();
- return `${month} / ${date}`
+ if (this.client.appointmentDate) {
+ const newDate = new Date(this.client.appointmentDate);
+ const month = newDate.getMonth();
+ const date = newDate.getDate();
+ return `${month} / ${date}`
+ }
+ return ''
}
get isReserved() {
diff --git a/PAMapp/components/Client/ClientList.vue b/PAMapp/components/Client/ClientList.vue
index 8669ca7..b2c541f 100644
--- a/PAMapp/components/Client/ClientList.vue
+++ b/PAMapp/components/Client/ClientList.vue
@@ -17,11 +17,11 @@
<script lang='ts'>
import { Vue, Component, Prop } from 'nuxt-property-decorator';
-import { Clients } from '~/pages/clientReservedList.vue';
+import { ClientInfo } from '~/assets/ts/api/consultant';
@Component
export default class ClientList extends Vue {
- @Prop() clients!: Clients[];
+ @Prop() clients!: ClientInfo[];
@Prop() title!: string;
}
</script>
diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue
index 46be292..d74a6eb 100644
--- a/PAMapp/components/Consultant/ConsultantCard.vue
+++ b/PAMapp/components/Consultant/ConsultantCard.vue
@@ -38,7 +38,7 @@
@click="reserveCommunication"
:class="agentInfo.contactStatus + 'Btn'"
>{{ contactTxt }}</el-button>
- <div class="updateTime">{{updateTime}}</div>
+ <div class="updateTime" v-if="updateTime">{{updateTime | formatDate}}</div>
</el-col>
</el-row>
</el-col>
@@ -87,15 +87,8 @@
}
get updateTime() {
- const newDate = new Date(this.agentInfo.updateTime);
- let year = newDate.getFullYear();
- let month = newDate.getMonth() + 1;
- let date = newDate.getDate();
- let hours = newDate.getHours();
- let minutes = newDate.getMinutes();
- return isLogin() ? `${year}/${month}/${date} ${hours} : ${minutes}` : ''
+ return isLogin() ? this.agentInfo.updateTime : '';
}
-
reserveCommunication() {
const contactStatus = this.agentInfo.contactStatus;
if (contactStatus !== 'reserved' && contactStatus !== 'contacted') {
diff --git a/PAMapp/pages/clientReservedList.vue b/PAMapp/pages/clientReservedList.vue
deleted file mode 100644
index df10ac4..0000000
--- a/PAMapp/pages/clientReservedList.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
- <div>
- <div class="pam-cus-tabs mb-30">
- <div
- class="cus-tab-item"
- :class="{'is-active': activeTabName === 'reservedList'}"
- @click="tabClick('reservedList')"
- >摰Ｘ����
- <span class="p">({{reservedList.length}})</span>
- </div>
- <div
- class="cus-tab-item"
- :class="{'is-active': activeTabName === 'contactedList'}"
- @click="tabClick('contactedList')"
- >撌脰蝯�
- <span class="p">({{contactedList.length}})</span>
- </div>
- </div>
-
- <NuxtChild
- :contactedList="contactedList"
- :reservedList="reservedList"
- ></NuxtChild>
- </div>
-</template>
-
-<script lang="ts">
-import { Context } from '@nuxt/types';
-import { Vue, Component } from 'nuxt-property-decorator';
-
-@Component
-export default class ClientReservedList extends Vue {
- activeTabName = 'reservedList';
- reservedList: Clients[] = [];
- contactedList: Clients[] = [];
- clients: Clients[] = [];
-
- async asyncData(context: Context) {
- let reservedList: Clients[] = [];
- let contactedList: Clients[] = [];
- let clients: Clients[] = [];
-
- await context.$service.home.clientReservedList().then((result: Clients[]) => {
- clients = result;
- })
-
- contactedList = clients.filter(item => item.communicateStatus === 'contacted');
- reservedList = clients.filter(item => item.communicateStatus === 'reserved');
-
- return {
- clients,
- contactedList,
- reservedList
- }
- }
-
- tabClick(path: string) {
- this.activeTabName = path;
- this.$router.push('/clientReservedList/' + this.activeTabName)
- }
-}
-
-export interface Clients {
- name: string,
- clientId: string,
- phone: string,
- time: Date,
- gender: string,
- age: string,
- job: string,
- requirements: string[],
- communicateStatus: string
-}
-</script>
\ No newline at end of file
diff --git a/PAMapp/pages/clientReservedList/contactedList.vue b/PAMapp/pages/clientReservedList/contactedList.vue
deleted file mode 100644
index 0fb1a23..0000000
--- a/PAMapp/pages/clientReservedList/contactedList.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
- <div>
- <el-input
- type="text"
- placeholder="隢撓���摮�"
- class="mb-30 pam-clientReserved-input"
- >
- <i slot="suffix" class="icon-search search cursor--pointer"></i>
- </el-input>
-
- <ClientList
- :clients="pageList"
- :title="'contactedList'"
- ></ClientList>
-
- <UiPagination
- :totalList="contactedList"
- @changePage="changePage"
- ></UiPagination>
- </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'nuxt-property-decorator';
-import { Clients } from '../clientReservedList.vue';
-
-@Component
-export default class ClientContactedList extends Vue {
- @Prop() contactedList!: Clients[];
- pageList: Clients[] = [];
-
- changePage(pageList: Clients[]) {
- this.pageList = pageList;
- }
-}
-</script>
\ No newline at end of file
diff --git a/PAMapp/pages/clientReservedList/reservedList.vue b/PAMapp/pages/clientReservedList/reservedList.vue
deleted file mode 100644
index 90ff3f6..0000000
--- a/PAMapp/pages/clientReservedList/reservedList.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
- <div>
- <el-input
- type="text"
- placeholder="隢撓���摮�"
- class="mb-30 pam-clientReserved-input"
- >
- <i slot="suffix" class="icon-search search cursor--pointer"></i>
- </el-input>
-
- <ClientList
- :clients="pageList"
- :title="'reservedList'"
- ></ClientList>
-
- <UiPagination
- :totalList="reservedList"
- @changePage="changePage"
- ></UiPagination>
- </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'nuxt-property-decorator';
-import { Clients } from '../clientReservedList.vue';
-
-@Component
-export default class ClientReservedList extends Vue {
- @Prop() reservedList!: Clients[];
- pageList: Clients[] = [];
-
- changePage(pageList: Clients[]) {
- this.pageList = pageList;
- }
-}
-</script>
\ No newline at end of file
diff --git a/PAMapp/pages/index.vue b/PAMapp/pages/index.vue
index 6b0c73c..7a5053b 100644
--- a/PAMapp/pages/index.vue
+++ b/PAMapp/pages/index.vue
@@ -1,6 +1,7 @@
<template>
<div>
- <el-button @click="login">��</el-button>
+ <el-button @click="login('user')">摰Ｘ��</el-button>
+ <el-button @click="login('admin')">憿批��</el-button>
<el-button @click="remove">��</el-button>
<Ui-Carousel></Ui-Carousel>
<div class="page-container">
@@ -93,15 +94,23 @@
}
// TODO: ��TP隤����� ���蝙�
- login() {
+ login(account: string) {
const user = {
- username: "user",
- password: "user"
+ username: account,
+ password: account
}
login(user).then((res) => {
localStorage.setItem('id_token', res.data.id_token);
- this.$router.go(0);
+
+ if (account === 'admin') {
+ this.$router.push('/myAppointmentList/appointmentList');
+ } else {
+ this.$router.go(0);
+ }
+
})
+
+
}
// TODO: ��TP隤����� ���蝙�
diff --git a/PAMapp/pages/myAppointmentList.vue b/PAMapp/pages/myAppointmentList.vue
new file mode 100644
index 0000000..9db3ceb
--- /dev/null
+++ b/PAMapp/pages/myAppointmentList.vue
@@ -0,0 +1,59 @@
+<template>
+ <div>
+ <div class="pam-cus-tabs mb-30">
+ <div
+ class="cus-tab-item"
+ :class="{'is-active': activeTabName === 'appointmentList'}"
+ @click="tabClick('appointmentList')"
+ >摰Ｘ����
+ <span class="p">({{appointmentList.length}})</span>
+ </div>
+ <div
+ class="cus-tab-item"
+ :class="{'is-active': activeTabName === 'contactedList'}"
+ @click="tabClick('contactedList')"
+ >撌脰蝯�
+ <span class="p">({{contactedList.length}})</span>
+ </div>
+ </div>
+
+ <NuxtChild
+ :contactedList="contactedList"
+ :appointmentList="appointmentList"
+ ></NuxtChild>
+ </div>
+</template>
+
+<script lang="ts">
+import { Context } from '@nuxt/types';
+import { Vue, Component } from 'nuxt-property-decorator';
+import { ClientInfo, getMyAppointmentList } from '~/assets/ts/api/consultant';
+
+@Component
+export default class ClientReservedList extends Vue {
+ activeTabName = 'appointmentList';
+ appointmentList: ClientInfo[] = [];
+ contactedList: ClientInfo[] = [];
+ clients: ClientInfo[] = [];
+
+ async asyncData(context: Context) {
+ let appointmentList: ClientInfo[] = [];
+ let contactedList: ClientInfo[] = [];
+ let clients: ClientInfo[] = [];
+ await getMyAppointmentList().then((res: any) => clients = res.data)
+
+ contactedList = clients.filter(item => item.communicateStatus === 'contacted');
+ appointmentList = clients.filter(item => item.communicateStatus === 'reserved');
+ return {
+ clients,
+ contactedList,
+ appointmentList
+ }
+ }
+
+ tabClick(path: string) {
+ this.activeTabName = path;
+ this.$router.push('/myAppointmentList/' + this.activeTabName)
+ }
+}
+</script>
\ No newline at end of file
diff --git a/PAMapp/pages/myAppointmentList/appointmentList.vue b/PAMapp/pages/myAppointmentList/appointmentList.vue
new file mode 100644
index 0000000..0a9286a
--- /dev/null
+++ b/PAMapp/pages/myAppointmentList/appointmentList.vue
@@ -0,0 +1,50 @@
+<template>
+ <div>
+ <el-input
+ type="text"
+ placeholder="隢撓���摮�"
+ class="mb-30 pam-clientReserved-input"
+ v-model="keyWord"
+ >
+ <i slot="suffix" class="icon-search search cursor--pointer" @click="search"></i>
+ </el-input>
+
+ <ClientList
+ :clients="pageList"
+ :title="'reservedList'"
+ ></ClientList>
+
+ <UiPagination
+ :totalList="filterList"
+ @changePage="changePage"
+ ></UiPagination>
+ </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import { ClientInfo } from '~/assets/ts/api/consultant';
+
+@Component
+export default class ClientReservedList extends Vue {
+ @Prop({default: []}) appointmentList!: ClientInfo[];
+ pageList: ClientInfo[] = [];
+ keyWord: string = '';
+ filterList: ClientInfo[] = [];
+
+ mounted() {
+ this.filterList = JSON.parse(JSON.stringify(this.appointmentList))
+ }
+
+ changePage(pageList: ClientInfo[]) {
+ this.pageList = pageList;
+ }
+
+ search() {
+ this.filterList = this.appointmentList.filter(item => {
+ return item.name.match(this.keyWord) || item.requirement.match(this.keyWord)
+ })
+ }
+
+}
+</script>
\ No newline at end of file
diff --git a/PAMapp/pages/myAppointmentList/contactedList.vue b/PAMapp/pages/myAppointmentList/contactedList.vue
new file mode 100644
index 0000000..d061c83
--- /dev/null
+++ b/PAMapp/pages/myAppointmentList/contactedList.vue
@@ -0,0 +1,53 @@
+<template>
+ <div>
+ <el-input
+ type="text"
+ placeholder="隢撓���摮�"
+ class="mb-30 pam-clientReserved-input"
+ v-model="keyWord"
+ >
+ <i
+ slot="suffix"
+ class="icon-search search cursor--pointer"
+ @click="search"
+ ></i>
+ </el-input>
+
+ <ClientList
+ :clients="pageList"
+ :title="'contactedList'"
+ ></ClientList>
+
+ <UiPagination
+ :totalList="filterList"
+ @changePage="changePage"
+ ></UiPagination>
+ </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'nuxt-property-decorator';
+import { ClientInfo } from '~/assets/ts/api/consultant';
+
+@Component
+export default class ClientContactedList extends Vue {
+ @Prop({default: []}) contactedList!: ClientInfo[];
+ pageList: ClientInfo[] = [];
+ keyWord: string = '';
+ filterList: ClientInfo[] = [];
+
+ mounted() {
+ this.filterList = JSON.parse(JSON.stringify(this.contactedList));
+ }
+
+ changePage(pageList: ClientInfo[]) {
+ this.pageList = pageList;
+ }
+
+ search() {
+ this.filterList = this.contactedList.filter(item => {
+ return item.name.match(this.keyWord) || item.requirement.match(this.keyWord)
+ })
+ }
+}
+</script>
\ No newline at end of file
--
Gitblit v1.8.0