From 5e5dd294d6f7b90940ca9e117c4254ab413b4ad8 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期二, 04 一月 2022 11:31:51 +0800
Subject: [PATCH] update TODO#133355 顧問-增加註記客戶備忘
---
PAMapp/shared/services/appointment.service.ts | 18 ++++
PAMapp/assets/scss/vendors/elementUI/_input.scss | 15 +++
PAMapp/components/Client/ClientCard.vue | 131 +++++++++++++++++++++++++-------
PAMapp/shared/models/client.model.ts | 47 ++++++-----
PAMapp/shared/models/appointment.model.ts | 12 +++
PAMapp/assets/scss/utilities/_heading.scss | 8 +-
PAMapp/assets/scss/utilities/_utilities.scss | 4 +
7 files changed, 179 insertions(+), 56 deletions(-)
diff --git a/PAMapp/assets/scss/utilities/_heading.scss b/PAMapp/assets/scss/utilities/_heading.scss
index e73182d..80f3b16 100644
--- a/PAMapp/assets/scss/utilities/_heading.scss
+++ b/PAMapp/assets/scss/utilities/_heading.scss
@@ -55,6 +55,10 @@
text-align: left;
}
+.text--right {
+ text-align: right;
+}
+
.text--primary {
color: $PRIMARY_RED;
}
@@ -96,10 +100,6 @@
font-size: 18px;
color: $ORANGE;
cursor: pointer;
-}
-
-.text--center {
- text-align: center;
}
.text--underline {
diff --git a/PAMapp/assets/scss/utilities/_utilities.scss b/PAMapp/assets/scss/utilities/_utilities.scss
index 42f6c90..39f3cac 100644
--- a/PAMapp/assets/scss/utilities/_utilities.scss
+++ b/PAMapp/assets/scss/utilities/_utilities.scss
@@ -44,6 +44,10 @@
margin-right: 30px;
}
+.my-10 {
+ margin:10px 0;
+}
+
.pt-30 {
padding-top: 30px;
}
diff --git a/PAMapp/assets/scss/vendors/elementUI/_input.scss b/PAMapp/assets/scss/vendors/elementUI/_input.scss
index 803028c..7bb8398 100644
--- a/PAMapp/assets/scss/vendors/elementUI/_input.scss
+++ b/PAMapp/assets/scss/vendors/elementUI/_input.scss
@@ -4,4 +4,19 @@
.input-radius > .el-input__inner {
border-radius: 10px;
+}
+
+.pam-appointment-textarea {
+ .el-textarea__inner {
+ border: 1px solid #DCDFE6;
+ padding: 10px 20px;
+ box-sizing: border-box;
+ border-radius: 5px;
+ font-size: 18px;
+
+ &:focus {
+ outline: none;
+ border: solid 1px $SKY_BLUE;
+ }
+ }
}
\ No newline at end of file
diff --git a/PAMapp/components/Client/ClientCard.vue b/PAMapp/components/Client/ClientCard.vue
index a91788f..4cc5f65 100644
--- a/PAMapp/components/Client/ClientCard.vue
+++ b/PAMapp/components/Client/ClientCard.vue
@@ -28,7 +28,7 @@
</el-col>
<el-col :xs="14" :sm="14" class="pl-10">
<div class="smTxt_bold name">{{ client.name }}</div>
- <div class="message">������</div>
+ <div class="my-10">������</div>
<div class="professionals">
<template v-if="client.requirement">
<span
@@ -67,11 +67,11 @@
>{{isReserved ? '������' : '撌脰蝯∟���'}}</h5>
<p v-if='isReserved'
- class="smTxt text-right"
+ class="smTxt text--right"
><span v-if="isRead">{{client.consultantReadTime | formatDate}}</span> 撌脰�</p>
<p
v-if="!isReserved"
- class="smTxt text-right"
+ class="smTxt text--right"
>{{client.contactTime | formatDate}} �蝯�</p>
<p class="smTxt">{{client.appointmentDate | formatDate}} ����</p>
@@ -86,10 +86,37 @@
<p v-for="(item, index) in hopeContactTime"
:key="index"
>��蝯⊥�挾{{index + 1 | formatNumber}}嚗�<span>{{ item | formatHopeContactTime}}</span></p>
+ </div>
+ <div class="memoStyle">
+ <div class="header">
+ <div class="mdTxt">�摰寞�膩</div>
+ <div
+ class="smTxt text--bold text--primary edit cursor--pointer text--underline"
+ @click='isEdit = !isEdit'
+ >蝺刻摩</div>
</div>
- <div class="mt-30 text--center" v-if="isReserved">
- <el-button @click="markAppointment">璅酉�撌脤��蝯�</el-button>
+
+ <el-input
+ class="mt-10 pam-appointment-textarea"
+ type="textarea"
+ :rows="3"
+ maxlength="100"
+ placeholder="隢撓�嚗��100摮��"
+ :disabled="!isEdit"
+ v-model="memo"
+ >
+ </el-input>
+
+ <div class="mt-10 smTxt text--bold text--primary text--right fixed-Height">
+ <template v-if="isEdit">
+ <span class="cursor--pointer" @click="cancelEditMemo">����</span>
+ <span class="pl-20 cursor--pointer" @click="saveMemo">�摮�</span>
+ </template>
</div>
+ </div>
+ <div class="mt-30 text--center" v-if="isReserved">
+ <el-button @click="markAppointment">璅酉�撌脤��蝯�</el-button>
+ </div>
</Ui-Dialog>
</div>
</template>
@@ -100,7 +127,7 @@
import appointmentService from '~/shared/services/appointment.service';
import UtilsService from '~/shared/services/utils.service';
import { hideReviews } from '~/shared/const/hide-reviews';
-import { ClientInfo } from '~/shared/models/client.model';
+import { AppointmentMemoInfo, ClientInfo } from '~/shared/models/client.model';
import myConsultantService from '~/shared/services/my-consultant.service';
import { ElRow } from 'element-ui/types/row';
@@ -138,6 +165,14 @@
dialogWidth = '';
hideReviews = hideReviews;
+ isEdit = false;
+ memoInfo: AppointmentMemoInfo = {
+ appointmentId: 0,
+ content: '',
+ id: 0
+ }
+ memo = '';
+
//////////////////////////////////////////////////////////////////////
@Watch('$route', {immediate: true})
@@ -149,6 +184,13 @@
}
//////////////////////////////////////////////////////////////////////
+
+ mounted() {
+ this.memoInfo = this.client.appointmentMemoList.length > 0
+ ? JSON.parse(JSON.stringify(this.client.appointmentMemoList[0]))
+ : {appointmentId: 0, content: '', id: 0};
+ this.memo = this.memoInfo.content;
+ }
get newAppointment(): boolean {
return !this.client.consultantViewTime
@@ -209,7 +251,6 @@
setTimeout(() => {
(this.$refs.clientCardRef as any).$el.classList.add('currentShowStyle');
}, 0)
-
this.dialogWidth = UtilsService.isMobileDevice() ? '80%' : '';
this.isVisibleDialog = true;
}
@@ -235,6 +276,7 @@
this.updateMyAppointment(updatedClient);
});
};
+ this.isEdit = false;
this.clearAppointmentIdFromMsg();
}
@@ -244,6 +286,46 @@
setTimeout(() => {
(this.$refs.clientCardRef as ElRow).$el.classList.remove('currentShowStyle')
},1000)
+ }
+
+ saveMemo() {
+ if (this.client.appointmentMemoList.length > 0) {
+ const params = {
+ content: this.memo,
+ id: this.client.appointmentMemoList[0].id
+ };
+ this.updateMemo(params);
+ return;
+ }
+
+ const params = {
+ content: this.memo,
+ appointmentId: this.client.id,
+ }
+ this.createMemo(params);
+ }
+
+ private createMemo(params) {
+ appointmentService.createMemo(params).then(memoRes => {
+ this.updateStoreMemo(memoRes);
+ });
+ }
+
+ private updateMemo(params) {
+ appointmentService.updateMemo(params).then(memoRes => {
+ this.updateStoreMemo(memoRes);
+ });
+ }
+
+ private updateStoreMemo(memoRes) {
+ this.memoInfo = memoRes;
+ this.memo = this.memoInfo.content;
+ this.isEdit = false;
+ }
+
+ cancelEditMemo() {
+ this.isEdit = false;
+ this.memo = this.memoInfo.content;
}
}
@@ -257,19 +339,15 @@
display: flex;
justify-content: space-between;
transition: background-color 0.5s;
-
&.new {
border-left: solid 4px $YELLOW;
}
-
&.currentShowStyle {
background-color: rgba(236, 195, 178, 0.5);
transition: background-color 0.5s;
}
-
.unread {
align-self: center;
-
.circle {
width: 10px;
height: 10px;
@@ -278,72 +356,65 @@
margin: auto;
}
}
-
.satisfaction {
font-size: 12px;
font-weight: bold;
margin-top: 5px;
-
.unfilled {
font-weight: lighter;
color: $MID_GREY;
}
}
-
- .message {
- margin:10px 0;
- }
-
.professionals {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-
.professionalsTxt {
font-size: 12px;
font-weight: bold;
margin-right: 5px;
}
-
.noProfessionalsTxt {
color: $PRUDENTIAL_GREY;
font-weight: lighter;
}
}
-
.contactInfo {
text-align: right;
.date {
font-size: 12px;
}
}
-
.unread-txt {
@extend .text--primary;
}
-
.read-txt {
color: $SKY_BLUE;
}
-
}
-
.flex-column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
-
.dialogTxt {
font-size: 20px;
overflow-y:scroll;
- max-height: 45vh;
+ max-height: 25vh;
@include desktop {
height: 400px;
}
}
-
- .text-right {
- text-align: right;
+ .memoStyle {
+ margin-top: 30px;
+ .header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: flex-end;
+ }
+ }
+ .fixed-Height {
+ height: 16px;
}
</style>
diff --git a/PAMapp/shared/models/appointment.model.ts b/PAMapp/shared/models/appointment.model.ts
index 1774dd6..b6daab1 100644
--- a/PAMapp/shared/models/appointment.model.ts
+++ b/PAMapp/shared/models/appointment.model.ts
@@ -93,3 +93,15 @@
selectWeekOptions : string[],
selectTimesOptions: string[]
}
+
+
+export interface createdMemoInfo {
+ content: string,
+ appointmentId: number
+}
+
+export interface updatedMemoInfo {
+ content: string,
+ /** memo id */
+ id: number
+}
\ No newline at end of file
diff --git a/PAMapp/shared/models/client.model.ts b/PAMapp/shared/models/client.model.ts
index ec70c33..e4ac0c8 100644
--- a/PAMapp/shared/models/client.model.ts
+++ b/PAMapp/shared/models/client.model.ts
@@ -1,22 +1,29 @@
export interface ClientInfo {
- age : string,
- agentNo : string,
- appointmentDate : string,
- communicateStatus : string,
- consultantReadTime: string,
- consultantViewTime: string,
- contactTime : string,
- contactType : string,
- customerId : number,
- email : string,
- gender : string,
- hopeContactTime : string,
- id : number,
- job : string,
- lastModifiedDate : string,
- name : string,
- otherRequirement : string,
- phone : string,
- requirement : string,
- satisfactionScore : number
+ age : string,
+ agentNo : string,
+ appointmentDate : string,
+ communicateStatus : string,
+ consultantReadTime : string,
+ consultantViewTime : string,
+ contactTime : string,
+ contactType : string,
+ customerId : number,
+ email : string,
+ gender : string,
+ hopeContactTime : string,
+ id : number,
+ job : string,
+ lastModifiedDate : string,
+ name : string,
+ otherRequirement : string,
+ phone : string,
+ requirement : string,
+ satisfactionScore : number,
+ appointmentMemoList: AppointmentMemoInfo[]
+}
+
+export interface AppointmentMemoInfo {
+ appointmentId: number,
+ content: string,
+ id: number
}
diff --git a/PAMapp/shared/services/appointment.service.ts b/PAMapp/shared/services/appointment.service.ts
index c8c6f9d..a21979c 100644
--- a/PAMapp/shared/services/appointment.service.ts
+++ b/PAMapp/shared/services/appointment.service.ts
@@ -1,7 +1,7 @@
import { http } from "./httpClient";
-import { ClientInfo } from "~/shared/models/client.model";
-import { AppointmentDetail, EditAppointmentParams } from "~/shared/models/appointment.model";
+import { AppointmentMemoInfo, ClientInfo } from "~/shared/models/client.model";
+import { AppointmentDetail, createdMemoInfo, EditAppointmentParams, updatedMemoInfo } from "~/shared/models/appointment.model";
class AppointmentService {
@@ -41,6 +41,20 @@
return http.put('/appointment', editAppointmentParams);
}
+ // �憓酉閮�
+ createMemo(memoInfo: createdMemoInfo): Promise<AppointmentMemoInfo> {
+ return http.post('/appointment/memo/create', memoInfo).then(res => res.data);
+ }
+
+ // 蝺刻摩閮餉��
+ updateMemo(memoInfo: updatedMemoInfo): Promise<AppointmentMemoInfo> {
+ return http.post('/appointment/memo/update', memoInfo).then(res => res.data);
+ }
+
+ // ��閮餉��
+ deleteMemo(appointmentMemoId: number) {
+ return http.delete(`/appointment/memo/${appointmentMemoId}`)
+ }
}
export default new AppointmentService();
--
Gitblit v1.8.0