From 8481d8e25454b145ad1e38b411c9e6a0d7034d67 Mon Sep 17 00:00:00 2001 From: HelenHuang <LinHuang@pollex.com.tw> Date: 星期六, 22 一月 2022 12:47:58 +0800 Subject: [PATCH] Update:[顧問流程]-樣式變更 & Fixed#134591 [ 顧問管理流程 ] 約訪中 : 新增約訪紀錄文字跑版 --- PAMapp/components/Interview/InterviewMsg.vue | 142 ++++++++++++++++++++++++++--------------------- 1 files changed, 79 insertions(+), 63 deletions(-) diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue index 7d671ce..17837dc 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" @@ -9,24 +9,27 @@ <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> <el-input type="textarea" - :rows="9" + :autosize="true" placeholder="蝝赤�" resize="none" v-model="interviewTxt"> </el-input> - <div class="mdTxt mt-30 mb-10">����赤��挾</div> - <DateTimePicker - @changeDateTime="interviewTime = $event" - ></DateTimePicker> + <div v-if="client.phone"> + <div class="mdTxt mt-30 mb-10 required">����赤��挾</div> + <DateTimePicker + @changeDateTime="interviewTime = $event" + :isPastDateDisabled="true" + :defaultValue="defaultValue" + ></DateTimePicker> + </div> <div class="msg-dialog-btn"> - <el-button @click="addInterview" :disabled="!interviewTime">���</el-button> + <el-button @click="addInterview" :disabled="isBtnDisabled">���</el-button> </div> </el-dialog> @@ -41,29 +44,23 @@ </div> </template> <script lang="ts"> -import { Vue, Component, Prop, PropSync, Emit, namespace } from 'nuxt-property-decorator'; +import { Vue, Component, Prop, PropSync, Emit, Action, namespace } from 'nuxt-property-decorator'; import appointmentService from '~/shared/services/appointment.service'; import { Appointment, ToInformAppointment } from '~/shared/models/appointment.model'; -import { ContactStatus } from '~/shared/models/enum/contact-status'; +import { AgentInfo } from '~/shared/models/agent-info.model'; +const loginStore = namespace('login.store'); const appointmentStore = namespace('appointment.store'); @Component export default class InterviewMsg extends Vue { - @appointmentStore.Action - getMyAppointmentList!: () => Promise<Appointment[]>; - + @Action + storeMyAppointmentList!: () => Promise<number>; @appointmentStore.Action - updateMyAppointmentList!:(appointment: Appointment) => Appointment[]; - - @appointmentStore.Action - updateAppointmentDetail!: (appointmentId: number) => Promise<Appointment>; - - @appointmentStore.State - appointmentDetail!: Appointment; + updateAppointmentDetail!: (id: number) => Appointment; @PropSync('isVisible') dialogVisible!: boolean; @@ -74,18 +71,26 @@ @Prop() client!: Appointment; + @Prop() + defaultValue!: string; + @Emit('closeDialog') closeDialog() { return; } - interviewTime = ''; - interviewTxt = ''; + @loginStore.State + loginConsultant!: AgentInfo; + isShowSuccessAlert = false; - contactStatus = ContactStatus; - + interviewTxt = ""; + interviewTime = ''; ////////////////////////////////////////////////////////////////////// + + mounted() { + this.interviewTxt = "�憟踝��靽���像����憿批��" + this.loginConsultant.name + "嚗�����������銝膩������蝜�"+"\n"+"隞乩����閰梯�Ⅳ/Email嚗�"+"\n" + this.loginConsultant.phoneNumber + "\n" + this.loginConsultant.email + "\n"+"�甇斗���靘選����蝜恬�����" + } addInterview() { const appointmentInformation: ToInformAppointment = { @@ -95,57 +100,68 @@ message : this.interviewTxt, phone : this.client?.phone, }; - appointmentService.informAppointment(appointmentInformation).then((_) => { this.isShowSuccessAlert = true ; - const updatedAppointment = { - ...this.appointmentDetail, - communicateStatus: this.contactStatus.CONTACTED, - }; - this.updateMyAppointmentList(updatedAppointment); - this.updateAppointmentDetail(updatedAppointment.id); + this.updateAppointmentDetail(this.client.id); }); } closeAllDialog() { this.isShowSuccessAlert = false ; this.dialogVisible = false; - this.getMyAppointmentList(); + this.storeMyAppointmentList(); + } + + get isBtnDisabled() :Boolean { + const isFormValid = this.client.phone ? this.interviewTxt && this.interviewTime :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; -} -.invite-review{ - display: flex; - flex-direction: column; - align-items: 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; + } +} </style> -- Gitblit v1.8.0