From 6ec0118f26788b14e0a95ec0e48c392a5758526b Mon Sep 17 00:00:00 2001 From: Tomas <tomasysh@gmail.com> Date: 星期五, 18 三月 2022 10:20:48 +0800 Subject: [PATCH] update: 更新約訪通知彈窗機制 --- PAMapp/components/Interview/InterviewMsg.vue | 106 +++++++++++++++++++++++++++++++++------------------- 1 files changed, 67 insertions(+), 39 deletions(-) diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue index 61aaa8d..be1e0ce 100644 --- a/PAMapp/components/Interview/InterviewMsg.vue +++ b/PAMapp/components/Interview/InterviewMsg.vue @@ -7,8 +7,29 @@ :lock-scroll="false" > <div class="subTitle msg-dialog-title">蝝赤�</div> - <div class="send-msg-nav"> + + <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 class="ml-10"> + <label for="addContactInfo" style="color: #ED1B2E; font-size: 18px; cursor: pointer"> + <input + style="display: none" + type="checkbox" + id="addContactInfo" + @click="interviewContent.addContactInfo = !interviewContent.addContactInfo" + value="addContactInfo"> + <i class="pr-5" :class="interviewContent.addContactInfo ?'icon-checkbox-1': 'icon-checkbox'"></i>銝�雿萄�蝜怨��� + </label> + </div> </div> <el-input @@ -16,17 +37,21 @@ :autosize="true" placeholder="蝝赤�" resize="none" - v-model="interviewTxt"> + v-model="interviewContent.customContent"> </el-input> - <div v-if="client.phone"> - <div class="mdTxt mt-30 mb-10 required">����赤��挾</div> - <DateTimePicker - @changeDateTime="interviewTime = $event" - :isPastDateDisabled="true" - :defaultValue="defaultValue" - ></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="msg-dialog-btn"> <el-button @click="addInterview" :disabled="isBtnDisabled">���</el-button> @@ -45,7 +70,7 @@ </div> </template> <script lang="ts"> -import { Vue, Component, Prop, PropSync, Emit, namespace } 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'; @@ -75,6 +100,13 @@ @Prop() defaultValue!: string; + @Watch('defaultValue', { immediate: true }) + onDefaultValueChange(): void { + if (this.defaultValue) { + this.interviewContent.interviewTime = this.defaultValue; + } + } + @Emit('closeDialog') closeDialog() { return; @@ -84,30 +116,40 @@ loginConsultant!: AgentInfo; isShowSuccessAlert = false; + interviewTxt = ''; - interviewTxt = ""; - interviewTime = ''; + @Watch('interviewContent', { immediate: true, deep: true }) + onInterviewContentChange(): void { + 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()}��; + } + this.interviewTxt = this.interviewContent.customContent + "\n" + ( this.client.phone || this.defaultValue ? ("�����銝膩������蝜�"+ "\n" + (this.interviewContent.formattedInterviewTime || "(撠����赤��挾)")): "") + "\n" +"隞乩����閰梯�Ⅳ/Email嚗�"+"\n" + (this.loginConsultant.phoneNumber || '(撠���閰梯�Ⅳ)') + "\n" + (this.loginConsultant.email|| '撠���� Email') + "\n" +"�甇斗���靘選����蝜恬�����"; + } else { + this.interviewTxt = this.interviewContent.customContent; + } + } + + interviewContent = { + addContactInfo: true, + interviewTime: '', + formattedInterviewTime: '', + customContent: '', + }; + ////////////////////////////////////////////////////////////////////// mounted() { - if(this.loginConsultant.phoneNumber && this.loginConsultant.email) - { - this.interviewTxt = "�憟踝��靽���像����憿批��" + this.loginConsultant.name + "嚗�����������銝膩������蝜�"+"\n"+"隞乩����閰梯�Ⅳ/Email嚗�"+"\n" + this.loginConsultant.phoneNumber + "\n" + this.loginConsultant.email + "\n"+"�甇斗���靘選����蝜恬�����"} - else if (!this.loginConsultant.phoneNumber && this.loginConsultant.email) - { - this.interviewTxt = "�憟踝��靽���像����憿批��" + this.loginConsultant.name + "嚗�����������銝膩������蝜�"+"\n"+"隞乩����mail嚗�"+"\n" + this.loginConsultant.email + "\n"+"�甇斗���靘選����蝜恬�����" - } - else - this.interviewTxt = "�憟踝��靽���像����憿批��" + this.loginConsultant.name + "嚗�����������銝膩������蝜�"+"\n"+"隞乩����閰梯�Ⅳ嚗�"+"\n" + this.loginConsultant.phoneNumber + "\n"+"�甇斗���靘選����蝜恬�����" + this.interviewContent.customContent = `�憟踝��靽���像����憿批��${this.loginConsultant.name}嚗�������; } addInterview() { - const message = this.getMessage(); const appointmentInformation: ToInformAppointment = { appointmentId: this.client.id, email : this.client?.email, - interviewDate: this.interviewTime, - message, + interviewDate: this.defaultValue, + message : this.interviewTxt, phone : this.client?.phone, }; appointmentService.informAppointment(appointmentInformation).then((_) => { @@ -122,22 +164,8 @@ this.getMyAppointmentList(); } - private getMessage(): string { - const targetDate = new Date(this.interviewTime); - const interviewTime = `${targetDate.getFullYear()}撟�${targetDate.getMonth() + 1}���${targetDate.getDate()}� ${targetDate.getHours()}���${targetDate.getMinutes()}��; - let result = ''; - if(this.loginConsultant.phoneNumber && this.loginConsultant.email) { - result = "�憟踝��靽���像����憿批��" + this.loginConsultant.name + "嚗�����������銝膩������蝜�"+"\n" + interviewTime + "\n" +"隞乩����閰梯�Ⅳ/Email嚗�"+"\n" + this.loginConsultant.phoneNumber + "\n" + this.loginConsultant.email + "\n"+"�甇斗���靘選����蝜恬�����"} - else if (!this.loginConsultant.phoneNumber && this.loginConsultant.email) { - result = "�憟踝��靽���像����憿批��" + this.loginConsultant.name + "嚗�����������銝膩������蝜�"+"\n" + interviewTime + "\n" +"隞乩����mail嚗�"+"\n" + this.loginConsultant.email + "\n"+"�甇斗���靘選����蝜恬�����" - } else { - result = "�憟踝��靽���像����憿批��" + this.loginConsultant.name + "嚗�����������銝膩������蝜�"+"\n" + interviewTime + "\n" +"隞乩����閰梯�Ⅳ嚗�"+"\n" + this.loginConsultant.phoneNumber + "\n"+"�甇斗���靘選����蝜恬�����" - } - return result; - } - get isBtnDisabled() :Boolean { - const isFormValid = this.client.phone ? this.interviewTxt && this.interviewTime :this.interviewTxt + const isFormValid = this.client.phone ? this.interviewTxt && this.interviewContent.formattedInterviewTime : this.interviewTxt return !isFormValid } -- Gitblit v1.8.0