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/components/Client/ClientCard.vue | 131 +++++++++++++++++++++++++++++++++----------
1 files changed, 101 insertions(+), 30 deletions(-)
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>
--
Gitblit v1.8.0