Update: 移除約訪通知的編輯按鈕 & 修正立即約訪通知的按鈕跑版

HelenHuang

2022-01-21 6152f2c13addb67bc5f82c488df523c0d39eb246

 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,25 @@
        <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">預計約訪時段</div>
        <DateTimePicker
          @changeDateTime="interviewTime = $event"
        ></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,16 +42,23 @@
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, PropSync, Emit, Action } 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 { AgentInfo } from '~/shared/models/agent-info.model';

const loginStore = namespace('login.store');
const appointmentStore = namespace('appointment.store');

@Component
export default class InterviewMsg extends Vue {

    @Action
    storeMyAppointmentList!: () => Promise<number>;

    @appointmentStore.Action
    updateAppointmentDetail!: (id: number) => Appointment;

    @PropSync('isVisible')
    dialogVisible!: boolean;
@@ -66,15 +74,20 @@
        return;
    }

    @loginStore.State
    loginConsultant!: AgentInfo;

    isShowSuccessAlert = false;

    interviewTxt = "";
    interviewTime = '';

    //////////////////////////////////////////////////////////////////////

    mounted() {
      this.interviewTxt = "您好！我是保誠媒合平台的保險顧問" + this.loginConsultant.name + "，感謝您的預約！我預計會在下述的時間與您聯繫"+"\n"+"以下是我的電話號碼/Email："+"\n" + this.loginConsultant.phoneNumber + "\n" + this.loginConsultant.email + "\n"+"若此時間不方便，請與我聯繫！謝謝！"
    }

    addInterview() {
      console.log('client', this.client);
      const appointmentInformation: ToInformAppointment = {
        appointmentId: this.client.id,
        email        : this.client?.email,
@@ -84,6 +97,7 @@
      };
      appointmentService.informAppointment(appointmentInformation).then((_) => {
        this.isShowSuccessAlert = true ;
        this.updateAppointmentDetail(this.client.id);
      });
    }

@@ -93,39 +107,47 @@
      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{
<style lang="scss" >
.interview-msg-component{

  .msg-dialog-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    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>