From b261a0d05f9617132296bfc1ec9e29a60e32940b Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期五, 29 四月 2022 14:05:00 +0800
Subject: [PATCH] Fixed#138352 [顧問端] 約訪通知 : 通知內容、預覽通知內容調整
---
PAMapp/components/Interview/InterviewMsg.vue | 269 +++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 208 insertions(+), 61 deletions(-)
diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue
index e0f35a7..93bf51b 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,245 @@
: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>
- <div class="date-input">
- 2022/01/10 09:00
- <i class="icon-calender icon"></i>
+
+ <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>���</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 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.loginConsultant.name+"嚗��������"+"\n"+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 ='';
+ }
+
+ 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;
-}
-.icon {
- color : $PRIMARY_RED;
- display : flex;
- flex : 1;
- justify-content: flex-end;
-}
+ .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