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 | 105 ++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 85 insertions(+), 20 deletions(-)
diff --git a/PAMapp/components/Interview/InterviewMsg.vue b/PAMapp/components/Interview/InterviewMsg.vue
index 2a81ac3..be1e0ce 100644
--- a/PAMapp/components/Interview/InterviewMsg.vue
+++ b/PAMapp/components/Interview/InterviewMsg.vue
@@ -7,9 +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="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
@@ -17,15 +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">����赤��挾</div>
- <DateTimePicker
- @changeDateTime="interviewTime = $event"
- ></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>
@@ -34,7 +60,8 @@
</el-dialog>
<PopUpFrame
- :isOpen.sync="isShowSuccessAlert">
+ :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>
@@ -43,7 +70,7 @@
</div>
</template>
<script lang="ts">
-import { Vue, Component, Prop, PropSync, Emit, Action, 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';
@@ -55,11 +82,11 @@
@Component
export default class InterviewMsg extends Vue {
- @Action
- storeMyAppointmentList!: () => Promise<number>;
-
@appointmentStore.Action
updateAppointmentDetail!: (id: number) => Appointment;
+
+ @appointmentStore.Action
+ getMyAppointmentList!: () => Promise<Appointment[]>;
@PropSync('isVisible')
dialogVisible!: boolean;
@@ -70,6 +97,16 @@
@Prop()
client!: Appointment;
+ @Prop()
+ defaultValue!: string;
+
+ @Watch('defaultValue', { immediate: true })
+ onDefaultValueChange(): void {
+ if (this.defaultValue) {
+ this.interviewContent.interviewTime = this.defaultValue;
+ }
+ }
+
@Emit('closeDialog')
closeDialog() {
return;
@@ -79,37 +116,56 @@
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() {
- this.interviewTxt = "�憟踝��靽���像����憿批��" + this.loginConsultant.name + "嚗�����������銝膩������蝜�"+"\n"+"隞乩����閰梯�Ⅳ/Email嚗�"+"\n" + this.loginConsultant.phoneNumber + "\n" + this.loginConsultant.email + "\n"+"�甇斗���靘選����蝜恬�����"
+ this.interviewContent.customContent = `�憟踝��靽���像����憿批��${this.loginConsultant.name}嚗�������;
}
addInterview() {
const appointmentInformation: ToInformAppointment = {
appointmentId: this.client.id,
email : this.client?.email,
- interviewDate: this.interviewTime,
+ interviewDate: this.defaultValue,
message : this.interviewTxt,
phone : this.client?.phone,
};
appointmentService.informAppointment(appointmentInformation).then((_) => {
this.isShowSuccessAlert = true ;
- this.updateAppointmentDetail(this.client.id);
});
}
closeAllDialog() {
this.isShowSuccessAlert = false ;
this.dialogVisible = false;
- this.storeMyAppointmentList();
+ this.updateAppointmentDetail(this.client.id);
+ this.getMyAppointmentList();
}
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
}
@@ -119,6 +175,15 @@
<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;
--
Gitblit v1.8.0