From ffcf1c449974fffad5e827ab0dd2d3bb21327d5f Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期六, 05 八月 2023 17:46:45 +0800 Subject: [PATCH] Fixed: [弱掃] p13.2 Bad use of null-like value --- PAMapp/components/Interview/InterviewMsg.vue | 266 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 files changed, 222 insertions(+), 44 deletions(-) diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue index b9518c4..ac9f657 100644 --- a/PAMapp/components/Interview/InterviewMsg.vue +++ b/PAMapp/components/Interview/InterviewMsg.vue @@ -1,5 +1,5 @@ <template> - <div> + <div class="interview-msg-component"> <el-dialog :visible.sync="dialogVisible" :width="dialogWidth" @@ -7,35 +7,85 @@ :lock-scroll="false" > <div class="subTitle msg-dialog-title">蝝赤�</div> - <div class="send-msg-nav"> - <div class="mdTxt">��摰�</div> - <div class="mdTxt text--primary text--underline">蝺刻摩</div> + + <div v-if="!!client.phone"> + <div class="mdTxt mt-30 mb-10 required">����赤��挾</div> + <DateTimePicker + @changeDateTime="interviewContent.interviewTime = $event" + :isPastDateDisabled="true" + :defaultValue="defaultValue" + ></DateTimePicker> + </div> + + <div class="send-msg-nav mt-10" style="justify-content: flex-start; align-items: center ;"> + <div class="mdTxt">�隞��摰�</div> </div> <el-input type="textarea" - :rows="9" - placeholder="蝝赤�" + placeholder="隢撓��摰�" resize="none" - v-model="interviewTxt"> + rows="2" + v-model="interviewContent.customContent"> </el-input> - <div class="mdTxt mt-30 mb-10">����赤��挾</div> - <DateTimePicker - @changeDateTime="interviewTime = $event" - ></DateTimePicker> + + <div class="send-msg-nav mt-10"> + <div class="mdTxt">��汗��摰�</div> + </div> + + <!-- <el-input + type="textarea" + :autosize="true" + placeholder="��汗蝝赤�" + resize="none" + :disabled="true" + v-model="interviewTxt"> --> + <!-- </el-input> --> + <div class="interviewContent"> + <div style="padding:10px;line-height:25px"> + <i class="content">�憟踝��靽���像����憿批�{loginConsultant.name}}嚗��������</i><br/> + <el-input type="textarea" :placeholder="'\{{ 憒����������ㄐ憿舐內 }}'" resize="none" v-model="interviewContent.customContent" readonly :autosize="true" ></el-input><br/> + <i class="content">{{client.phone ||defaultValue ? ("�����銝膩������蝜�"+ "\n" + (this.interviewContent.formattedInterviewTime || "(撠����赤��挾)")): ""}}</i><br/> + <i class="content">隞乩����閰梯�Ⅳ/Email嚗{loginConsultant.phoneNumber || '撠���閰梯�Ⅳ'}} / {{loginConsultant.email || '撠���� Email'}}</i><br/> + <i class="content">�甇斗���靘選����蝜恬�����</i> + </div> + </div> <div class="msg-dialog-btn"> - <el-button :disabled="!interviewTime">���</el-button> + <el-button @click="addInterview" :disabled="isBtnDisabled">���</el-button> </div> </el-dialog> + + <PopUpFrame + :isOpen.sync="isShowSuccessAlert" + @closePopUp="closeAllDialog"> + <div class="text--middle invite-review"> + <div class="mb-30 mt-10">撌脩��赤�</div> + <div class="text--primary text--middle cursor--pointer text--underline" @click="closeAllDialog " :size="'250px'">������</div> + </div> + </PopUpFrame> </div> </template> <script lang="ts"> -import { Vue, Component, Prop, PropSync, Emit, Action } from 'nuxt-property-decorator'; +import { Vue, Component, Prop, PropSync, Emit, namespace, Watch } from 'nuxt-property-decorator'; + +import appointmentService from '~/shared/services/appointment.service'; +import { Appointment, ToInformAppointment } from '~/shared/models/appointment.model'; +import { AgentInfo } from '~/shared/models/agent-info.model'; + +const loginStore = namespace('login.store'); +const appointmentStore = namespace('appointment.store'); @Component -export default class InterviewAdd extends Vue { +export default class InterviewMsg extends Vue { + + @appointmentStore.Action + updateAppointmentDetail!: (id: number) => Appointment; + + @appointmentStore.Action + getMyAppointmentList!: () => Promise<Appointment[]>; + @PropSync('isVisible') dialogVisible!: boolean; @@ -43,45 +93,173 @@ dialogWidth!:string; @Prop() - appointmentId!: number; + client!: Appointment; + + @Prop() + defaultValue!: string; + + @Watch('defaultValue', { immediate: true }) + onDefaultValueChange(): void { + if (this.defaultValue) { + this.interviewContent.interviewTime = this.defaultValue; + } + } @Emit('closeDialog') closeDialog() { return; } - interviewTxt = ""; - interviewTime = ''; + @loginStore.State + loginConsultant!: AgentInfo; + + isShowSuccessAlert = false; + interviewTxt = ''; + + @Watch('interviewContent', { immediate: true, deep: true }) + onInterviewContentChange() { + if (this.interviewContent.addContactInfo) { + if (this.interviewContent.interviewTime) { + const targetDate = new Date(this.interviewContent.interviewTime); + this.interviewContent.formattedInterviewTime = `${targetDate.getFullYear()}撟�${targetDate.getMonth() + 1}���${targetDate.getDate()}� ${targetDate.getHours()}���${targetDate.getMinutes()}��; + } + if(this.loginConsultant.phoneNumber){ + let temp = ''; + for (var i=0;i<this.loginConsultant.phoneNumber.length;i++) { + let charCode = this.loginConsultant.phoneNumber.charCodeAt(i); + if(charCode <=126 && charCode>= 33) { + charCode += 65248; + } else if (charCode ===32) { + charCode =12288; + } + temp = temp + String.fromCharCode(charCode); + } + this.interviewTxt = "�憟踝��靽���像����憿批��"+this.loginConsultant.name+"嚗��������"+"\n"+this.interviewContent.customContent+ "\n" ��+ ( this.client.phone || this.defaultValue ? ("�����銝膩������蝜�"+ "\n" + (this.interviewContent.formattedInterviewTime || "(撠����赤��挾)")): "") + "\n" +"隞乩����閰梯�Ⅳ/Email嚗�"+"\n" + ( temp || '(撠���閰梯�Ⅳ)') + "\n" + (this.loginConsultant.email|| '撠���� Email') + "\n" +"�甇斗���靘選����蝜恬�����"; + } + } else { + // this.interviewTxt = this.interviewContent.customContent; + this.interviewTxt = "�憟踝��靽���像����憿批��"+this.loginConsultant.name+"嚗��������"+"\n"+this.interviewContent.customContent+ "\n" ��+ ( this.client.phone || this.defaultValue ? ("�����銝膩������蝜�"+ "\n" + (this.interviewContent.formattedInterviewTime || "(撠����赤��挾)")): "") + "\n" +"隞乩����mail嚗�"+"\n" + (this.loginConsultant.email|| '撠���� Email') + "\n" +"�甇斗���靘選����蝜恬�����"; + } + } + + interviewContent = { + addContactInfo: true, + interviewTime: '', + formattedInterviewTime: '', + customContent: '', + }; + + ////////////////////////////////////////////////////////////////////// + + mounted() { + this.interviewContent.customContent =''; + } + + addInterview() { + const appointmentInformation: ToInformAppointment = { + appointmentId: this.client?.id || 0, + email: this.client?.email || '', + interviewDate: this.interviewContent.interviewTime, + message: this.interviewTxt, + phone: this.client?.phone || '', + }; + appointmentService.informAppointment(appointmentInformation).then((_) => { + this.isShowSuccessAlert = true; + }); + } + + + closeAllDialog() { + this.isShowSuccessAlert = false ; + this.dialogVisible = false; + this.updateAppointmentDetail(this.client.id); + this.getMyAppointmentList(); + } + + get isBtnDisabled() :Boolean { + const isFormValid = this.client.phone ? this.interviewTxt && this.interviewContent.formattedInterviewTime : this.interviewTxt + return !isFormValid + } } </script> -<style lang="scss" scoped> -.msg-dialog-title{ - display: flex; - justify-content: center; - margin-bottom:30px; - color: $PRIMARY_BLACK; -} -.send-msg-nav{ - display: flex; - justify-content: space-between; - margin-bottom: 10px; - color: $PRIMARY_BLACK; -} -.el-dialog{ - width:90% -} -.el-textarea__inner{ - font-size: 20px; - padding:10px; - text-align: justify; - font-weight: 500; -} -.msg-dialog-btn{ - margin-top: 30px; - display: flex; - justify-content: center; -} +<style lang="scss" > +.interview-msg-component{ + .required { + position: relative; + &::before { + content: '*'; + position: absolute; + color: #FF0000; + transform: translate(-12px, 0); + } + } + .msg-dialog-title{ + display: flex; + justify-content: center; + margin-bottom:30px; + color: $PRIMARY_BLACK; + } + .send-msg-nav{ + display: flex; + justify-content: space-between; + margin-bottom: 10px; + color: $PRIMARY_BLACK; + } + .el-dialog{ + width:90% + } + .el-textarea__inner{ + font-size: 20px; + padding:10px; + text-align: justify; + font-weight: 600; + + } + .msg-dialog-btn{ + margin-top: 30px; + display: flex; + justify-content: center; + } + .invite-review{ + display: flex; + flex-direction: column; + align-items: center; + } + + .interviewContent { + border: 1px solid #D0D0CE; + border-radius: 4px; + overflow-y: auto; + height: 180px; + background-color:#F8F9FA; + textarea { + outline:none !important; + border: none; + background-color:transparent; + color: red; + } + ::placeholder { + color: red; + } + } + .content{ + font-size: 18px; + font-weight: bold; + color: #CCCCCC; + } + + .el-input__inner { + border:1px solid #707070; + border-radius:4px; + } + .interview-other-msg { + max-height: 80px; + overflow-y: auto; + margin-bottom: 5px; + margin-top: 5px; + } +} </style> -- Gitblit v1.8.0