From 402fc0d27fa33a9d3702223cbe3970e3d42f9e75 Mon Sep 17 00:00:00 2001 From: HelenHuang <LinHuang@pollex.com.tw> Date: 星期四, 28 四月 2022 10:25:58 +0800 Subject: [PATCH] Fixed #138325 結案後應該不能新增紀錄 --- PAMapp/components/Interview/InterviewMsg.vue | 235 +++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 175 insertions(+), 60 deletions(-) diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue index 98d0ea9..3a51fea 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,98 +7,213 @@ :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="mdTxt text--primary text--underline">蝺刻摩</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 type="textarea" - :rows="9" + :autosize="true" placeholder="蝝赤�" resize="none" + v-model="interviewContent.customContent"> + </el-input> + + <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="mdTxt mt-30 mb-10">����赤��挾</div> - <div class="date-input"> - 2022/01/10 09:00 - <i class="icon-calender icon"></i> - </div> <div class="msg-dialog-btn"> - <el-button>���</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 { AppointmentLog } from '~/shared/models/appointment.model'; -import { Vue, Component, Prop, PropSync, Emit } from 'nuxt-property-decorator'; -import authService from '~/shared/services/auth.service'; +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; @Prop({default:'90%'}) dialogWidth!:string; + @Prop() + client!: Appointment; + + @Prop() + defaultValue!: string; + + @Watch('defaultValue', { immediate: true }) + onDefaultValueChange(): void { + if (this.defaultValue) { + this.interviewContent.interviewTime = this.defaultValue; + } + } + @Emit('closeDialog') closeDialog() { return; } - interviewTxt = ""; + @loginStore.State + loginConsultant!: AgentInfo; + + isShowSuccessAlert = false; + interviewTxt = ''; + + @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() { + this.interviewContent.customContent = `�憟踝��靽���像����憿批��${this.loginConsultant.name}嚗�������; + } + + addInterview() { + const appointmentInformation: ToInformAppointment = { + appointmentId: this.client.id, + 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{ -.date-input { - align-items : center; - background-color: #fff; - border : 1px solid #707070; - border-radius : 5px; - display : flex; - font-size : 20px; - height : 46px; - margin-bottom : 30px; - padding-left : 20px; - padding-right : 20px; + .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; + } } -.icon { - color : $PRIMARY_RED; - display : flex; - flex : 1; - justify-content: flex-end; -} - </style> -- Gitblit v1.8.0