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