From f316bd2d97efb54ef48fde17b4e38fba2fc7b1aa Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期四, 11 一月 2024 17:17:01 +0800 Subject: [PATCH] project: remove lodash library --- PAMapp/components/Consultant/ConsultantCard.vue | 227 +++++++++++++++++++++++++++++++++----------------------- 1 files changed, 135 insertions(+), 92 deletions(-) diff --git a/PAMapp/components/Consultant/ConsultantCard.vue b/PAMapp/components/Consultant/ConsultantCard.vue index a6cf709..29105c4 100644 --- a/PAMapp/components/Consultant/ConsultantCard.vue +++ b/PAMapp/components/Consultant/ConsultantCard.vue @@ -1,22 +1,33 @@ <template> <div> - <el-row type="flex" class="rowStyle" :class="{'new': !agentInfo.customerViewTime }"> + <el-row type="flex" class="rowStyle" :class="{'new': !agentInfo.customerViewTime && $route.name !== 'myConsultantList-contactedList' }"> <el-col class="flex_column pl-5" :xs="5" :sm="3"> <UiAvatar :size="50" :agentNo="agentInfo.agentNo" @click.native="showAgentDetail(agentInfo.agentNo)" ></UiAvatar> - <!-- TODO:���遛��漲 --> - <div v-if="!hideReviews"> - <i class="icon-star pam-icon icon--yellow satisfaction" v-if="notScoreAppointmentYet"></i> - <span v-if="notScoreAppointmentYet"> - {{ agentInfo.satisfactionScore }} - </span> - <div class="unfilled text--center " - style="display:flex" - v-if="notScoreAppointmentYet">�憛�<br />皛踵�漲</div> - <span v-if="agentInfo.contactStatus !== 'contacted'">{{ agentInfo.avgScore }}</span> + <div v-if="!hideReviews" style="display: flex; justify-content: flex-start; align-items: center; margin-top: 6px; font-size: 12px"> + <i v-if="isAppointment ? agentInfo.appointmentScore : agentInfo.avgScore" + class="icon-star pam-icon icon--yellow satisfaction" + style="margin-top: 0"></i> + <template v-if="isAppointment"> + <template v-if="agentInfo.appointmentStatus === 'closed' + || agentInfo.appointmentStatus === 'done'"> + <span v-if="agentInfo.appointmentScore"> + {{ agentInfo.appointmentScore }} + </span> + <div class="unfilled text--center " + style="display:flex" + v-else>�憛�<br />皛踵�漲</div> + </template> + </template> + <template v-else> + <span v-if="agentInfo.avgScore">{{ agentInfo.avgScore }}</span> + <span class="unfilled text--center " + style="display:flex" v-else>撠<br />皛踵�漲</span> + </template> + </div> </el-col> <el-col :xs="10" :sm="15"> @@ -31,10 +42,10 @@ <div class="delete" v-if="showRemoveBtn" - @click="removeAgent" + @click="isRemoveAgentPopup = true" >蝘駁</div> <div - v-if="notScoreAppointmentYet" + v-if="notScoreAppointmentYet && (agentInfo.appointmentStatus === 'closed' || agentInfo.appointmentStatus === 'done')" class="text--primary text--underline cursor--pointer xsTxt text--bold" @click="reviewsBtn = true">蝯虫�遛��漲閰��</div> </el-col> @@ -45,7 +56,7 @@ :class="actionBtnStyle" >{{ actionBtnLabel }}</el-button> <div class="updateTime mt-10"> - {{ agentInfo.updateTime | formatDate }} + {{ (isAppointment ? agentInfo.appointmentLastModifiedDate : agentInfo.updateTime) | formatDate }} </div> </el-col> </el-row> @@ -53,34 +64,35 @@ <Ui-Dialog :isVisible.sync="isVisibleDialog" :width="width" - class="pam-myDemand-dialog" + class="pam-myDemand-dialog pam-dialog-reserved" > <div v-if="appointmentDetail"> <h5 class="subTitle text--center mb-30">������</h5> - <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}}</p> - <div class="dialogInfo"> + <p class="smTxt">{{appointmentDetail.appointmentDate | formatDate}} 撱箇��</p> + <div class="reserved-info"> <p>憪��{appointmentDetail.name}}</p> <p>�閰梧�{appointmentDetail.phone}}</p> <p>Email嚗{appointmentDetail.email}}</p> <p>�批嚗{gender}}</p> <p>撟湧翩嚗{appointmentDetail.age | toAgeLabel }}</p> <p>�璆哨�{appointmentDetail.job}}</p> - <p>��瘙�{appointmentDetail.requirement.split(',').join('��')}}</p> + <p>隢株岷�撘�{appointmentDetail.consultationMethod | toConsultationMethod }}</p> + <p>��瘙�{appointmentDetail.requirement ? appointmentDetail.requirement.split(',').join('��') : '--'}}</p> <p v-for="(item, index) in hopeContactTime" :key="index" >��蝯⊥�挾{{index + 1 | formatNumber}}嚗{ item | formatHopeContactTime }}</p> - <div v-if="appointmentDetail.satisfactionScore"> + <div v-if="appointmentDetail.appointmentScore"> <div class="mdTxt mt-10 mb-10">皛踵�漲</div> <el-rate - :value="appointmentDetail.satisfactionScore" + :value="appointmentDetail.appointmentScore" class="pam-myDemand-dialog__rate" disabled> </el-rate> </div> </div> - <div v-if="notScoreAppointmentYet" class="dialogInfo-btn"> + <div v-if="notScoreAppointmentYet && (agentInfo.appointmentStatus === 'closed' || agentInfo.appointmentStatus === 'done')" class="reserved-btn"> <el-button type="primary" @click.native="reviewsBtn = true">蝯虫�遛��漲閰��</el-button> </div> @@ -92,11 +104,11 @@ </div> </Ui-Dialog> - <PopUpFrame :isOpen.sync="reviewsBtn"> - <div class="mdTxt"> + <PopUpFrame :isOpen.sync="reviewsBtn" class="reviewDialog-content"> + <div class="mdTxt pam-dialog-review"> 靽憿批�遛��漲 <span class="hint">������</span> - <div class="mt-30 reviewDialog-content"> + <div class="mt-30 review-content"> <UiAvatar :size="80" :agentNo="agentInfo.agentNo"></UiAvatar> <div class="review-text">撠憿批�� <span class="text--primary">{{agentInfo.name}}</span> @@ -104,11 +116,11 @@ </div> </div> - <div class="dialogInfo-score"> + <div class="review-score"> <el-rate v-model="inputScore" class="pam-rate mt-30"></el-rate> </div> - <div class="dialogInfo-btn"> + <div class="review-btn"> <el-button type="primary" :disabled="!inputScore" @@ -125,10 +137,18 @@ </div> </PopUpFrame> - <PopUpFrame :isOpen.sync="isConfirmPopup"> - <div class="text--center mdTxt">撌脫����迨蝑���</div> + <PopUpFrame :isOpen.sync="isConfirmPopup"> + <div class="text--center mdTxt">撌脫��{confirmTxt}}</div> <div class="text--center mt-30"> <el-button @click="isConfirmPopup = false" type="primary">蝣箏��</el-button> + </div> + </PopUpFrame> + + <PopUpFrame :isOpen.sync="isRemoveAgentPopup"> + <div class="text--center mdTxt">��蝘駁憿批�� <span class="text--primary">{{agentInfo.name}}</span>嚗�</div> + <div class="text--center mt-30"> + <el-button @click="isRemoveAgentPopup = false">�</el-button> + <el-button @click="removeAgent" type="primary">�</el-button> </div> </PopUpFrame> </div> @@ -143,7 +163,8 @@ import { hideReviews } from '~/shared/const/hide-reviews'; import { Consultant, ConsultantWithAppointmentId } from '~/shared/models/consultant.model'; import { Appointment } from '~/shared/models/appointment.model'; -import { UserReviewsConsultantsParams } from '~/shared/models/reviews.model'; +import { SatisfactionType } from '~/shared/models/enum/satisfaction-type'; +import { UserReviewParams } from '~/shared/models/reviews.model'; const localStorage = namespace('localStorage'); @Component({ @@ -154,15 +175,15 @@ return upperNumber[index]; } }, - formatHopeContactTime(item: string): string { + formatHopeContactTime(item: string): string { if (item) { - const [hopeDay, hopeTime] = item.split('��'); - const day = hopeDay.split(',').length > 6 ? '銝����' : hopeDay; - const time = hopeTime.split(',').length > 3 ? '銝����' : hopeTime; - return `${day}��${time}`; - } - return ''; + const [hopeDay, hopeTime] = item.split('��'); + const day = hopeDay.split(',').length > 6 ? '銝����' : hopeDay; + const time = hopeTime.split(',').length > 3 ? '銝����' : hopeTime; + return `${day}��${time}`; } + return ''; // 靽格迤嚗宏� if (item) ��� + }, } }) export default class ConsultantCard extends Vue { @@ -181,6 +202,8 @@ isCancelPopup = false; hideReviews = hideReviews; isConfirmPopup = false; + isRemoveAgentPopup = false; + confirmTxt = ''; appointmentDetail: any = { age : '', @@ -202,22 +225,23 @@ otherRequirement : null, phone : "", requirement : '', - satisfactionScore : 0, + appointmentScore : 0, }; get notScoreAppointmentYet(): boolean { const isAppointment = !!this.agentInfo['appointmentStatus']; - if (!isAppointment) return false; - return !this.agentInfo['appointmentScore']; + return isAppointment + ? !this.agentInfo['appointmentScore'] + : !this.agentInfo.avgScore } get isAppointment(): boolean { return !!this.agentInfo['appointmentStatus']; } - get latestReservedAppointment(): Appointment { + get latestNotClosedAppointment(): Appointment { return this.agentInfo.appointments! - .filter((appointment) => appointment.communicateStatus !== 'contacted') + .filter((appointment) => appointment.communicateStatus === 'reserved' || appointment.communicateStatus === 'contacted') .map((reversedAppointment) => { return { ...reversedAppointment, @@ -246,25 +270,34 @@ } return '' } - get actionBtnLabel() { - const isAppointment = !!this.agentInfo['appointmentStatus']; - if (isAppointment) { - if (this.agentInfo['appointmentStatus'] === 'contacted') { - return '撌脰蝯�'; - } - if (this.agentInfo['appointmentStatus'] === 'reserved') { - return '撌脤���'; - } - } else { - if (this.agentInfo.contactStatus === 'contacted') { - return '撌脰蝯�'; - } - if (this.agentInfo.contactStatus === 'reserved') { - return '撌脤���'; - } + get actionBtnLabel() { + const isAppointment = !!this.agentInfo['appointmentStatus']; + + if (isAppointment) { + if (this.agentInfo['appointmentStatus'] === 'contacted') { + return '撌脰蝯�'; } - return '�脰����'; + if (this.agentInfo['appointmentStatus'] === 'reserved') { + return '撌脤���'; + } + if (this.agentInfo['appointmentStatus'] === 'done') { + return '撌脫�漱'; + } + if (this.agentInfo['appointmentStatus'] === 'closed') { + return '���漱'; + } + } else { + if (this.agentInfo.contactStatus === 'contacted') { + return '撌脰蝯�'; + } + if (this.agentInfo.contactStatus === 'reserved') { + return '撌脤���'; + } } + + return '�脰����'; + } + get actionBtnStyle() { const isAppointment = !!this.agentInfo['appointmentStatus']; @@ -274,6 +307,12 @@ } if (this.agentInfo['appointmentStatus'] === 'reserved') { return 'reservedBtn'; + } + if (this.agentInfo['appointmentStatus'] === 'done') { + return 'doneBtn'; + } + if (this.agentInfo['appointmentStatus'] === 'closed') { + return 'closedBtn'; } } else { if (this.agentInfo.contactStatus === 'contacted') { @@ -313,12 +352,12 @@ const isAppointment = !!this.agentInfo['appointmentStatus']; const appointmentId = isAppointment ? this.agentInfo['appointmentId'] - : this.latestReservedAppointment.id; + : this.latestNotClosedAppointment.id; appointmentService.getAppointmentDetail(appointmentId!).then(res => { this.appointmentDetail = { ...res, - satisfactionScore: this.agentInfo['appointmentScore'], + appointmentScore: this.agentInfo['appointmentScore'], }; this.width = UtilsService.isMobileDevice() ? '80%' : ''; this.isVisibleDialog = true; @@ -327,6 +366,12 @@ removeAgent() { this.removeFromMyConsultantList(this.agentInfo.agentNo).then((removeOk) => { + this.isRemoveAgentPopup = false; + setTimeout(() => { + this.confirmTxt = '蝘駁憿批��'; + this.isConfirmPopup = true; + }, 300); + }); } @@ -338,13 +383,14 @@ const isAppointment = !!this.agentInfo['appointmentStatus']; const appointmentId = isAppointment ? this.agentInfo['appointmentId'] - : this.latestReservedAppointment.id; + : this.latestNotClosedAppointment.id; - const reviewParams: UserReviewsConsultantsParams = { + const reviewParams: UserReviewParams = { appointmentId: appointmentId, score: this.inputScore, + type : SatisfactionType.APPOINTMENT, } - this.appointmentDetail.satisfactionScore = this.inputScore; + this.appointmentDetail.appointmentScore = this.inputScore; reviewsService.userReviewsConsultants(reviewParams).then((res) => { this.reviewsBtn = false; @@ -353,12 +399,14 @@ } cancel() { - appointmentService.cancelAppointment(this.latestReservedAppointment.id).then(res => { + appointmentService.cancelAppointment(this.latestNotClosedAppointment.id).then(res => { this.storeConsultantList(); this.isVisibleDialog = false; this.isCancelPopup = false; setTimeout(() => { + this.confirmTxt = '���迨蝑���'; this.isConfirmPopup = true; + }, 300); }); } @@ -410,6 +458,7 @@ } .delete { + display: inline-block; color: $PRIMARY_RED; font-size: 14px; font-weight: bold; @@ -438,6 +487,28 @@ } } + .doneBtn { + color: $BEIGE; + border-color: $BEIGE; + + &:focus { + color: $PRIMARY_WHITE; + background-color: $BEIGE; + opacity: 0.5; + } + } + + .closedBtn { + color: $PRUDENTIAL_GREY; + border-color: $PRUDENTIAL_GREY; + + &:focus { + color: $PRIMARY_WHITE; + background-color: $PRUDENTIAL_GREY; + opacity: 0.5; + } + } + .updateTime { font-size: 12px; font-weight: bold; @@ -451,32 +522,4 @@ flex-direction: column; justify-content: space-between; } - - .dialogInfo { - font-size: 20px; - overflow-y:scroll; - height: 400px; - } - .dialogInfo-btn{ - display: flex; - justify-content: center; - } - .dialogInfo-score{ - display: flex; - justify-content: center; - margin-bottom: 30px; - } - .reviewDialog-content { - display: flex; - flex-direction: row; - justify-content: space-evenly; - - .review-text { - width: 60%; - line-height: 28px; - @extend .p; - @extend .text--lighter; - } - } - </style> -- Gitblit v1.8.0