Update#134171 更新傳送約訪通知元件

HelenHuang

2022-01-14 5a693d8488b710085d8b4e5641fbbbb332edef43

Update#134171 更新傳送約訪通知元件

 PAMapp/components/Client/ClientCard.vue

@@ -55,7 +55,7 @@
                    class="smTxt_bold fix-chrome-click--issue"
                    :class="{'unread-txt': reservedTxt === '未讀', 'read-txt': reservedTxt !== '未讀'}"
                >{{ reservedTxt }}</div> -->
                <div class="invite-msg smTxt_bold">
                <div class="invite-msg smTxt_bold" @click.stop="showMsgDialog">
                    å‚³é€ç´„訪通知
                </div>
                <div
@@ -128,6 +128,8 @@
                <el-button @click="markAppointment">標註為已連絡</el-button>
            </div>
        </Ui-Dialog>

        <InterviewMsg :isVisible.sync="isMsgDialog"></InterviewMsg>
    </div>
</template>

@@ -172,6 +174,7 @@
    storageClearAppointmentIdFromMsg!: () => void;

    isVisibleDialog = false;
    isMsgDialog = false;
    dialogWidth = '';
    hideReviews = hideReviews;

@@ -208,6 +211,9 @@
      this.$router.push(`/appointment/${this.client.id}`);
    }

    showMsgDialog(): void {
      this.isMsgDialog = true;
    }
    get newAppointment(): boolean {
      return !this.client.consultantViewTime
            && this.client.communicateStatus === 'reserved';

 PAMapp/components/Interview/InterviewMsg.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,104 @@
<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :width="dialogWidth"
      @close="closeDialog"
      :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>

      <el-input
        type="textarea"
        :rows="9"
        placeholder="約訪通知"
        resize="none"
        v-model="interviewTxt">
        </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>

      <div class="msg-dialog-btn">
        <el-button>傳送</el-button>
      </div>

        </el-dialog>
  </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';

@Component
export default class InterviewAdd extends Vue {
    @PropSync('isVisible')
    dialogVisible!: boolean;

    @Prop({default:'90%'})
    dialogWidth!:string;

    @Emit('closeDialog')
    closeDialog() {
        return;
    }

    interviewTxt = "";
}
</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;
}

.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;
}

</style>

 PAMapp/pages/appointment/_appointmentId/index.vue

@@ -44,9 +44,9 @@
      </div>

      <div class="client-detail-action">
        <!-- <el-button @click="closeAppointment" >結案</el-button>
        <el-button @click="sendMsg" style="margin-left: 0px">通知/約訪</el-button> -->
        <el-button>發送滿意度</el-button>
        <el-button @click="closeAppointment" >結案</el-button>
        <el-button @click="sendMsg" style="margin-left: 0px">通知/約訪</el-button>
        <!-- <el-button>發送滿意度</el-button> -->
      </div>

    </section>
@@ -69,35 +69,7 @@

    </section>


    <UiDialog
    :isVisible.sync="isVisibleDialog"
    class="msg-dialog">
      <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"
        placeholder="約訪通知"
        resize="none"
        validate-event = "false"
        v-model="interviewTxt">
        </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>

      <div class="msg-dialog-btn">
        <el-button>傳送</el-button>
      </div>
    </UiDialog>
    <InterviewMsg :isVisible.sync="isVisibleDialog"></InterviewMsg>


    <section class="mt-30">
@@ -216,32 +188,6 @@
    }
  }
}
.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;
}
.close-appointment-detail{
  background-color: #fff;
  display: flex;
@@ -256,4 +202,5 @@
  justify-content: space-between;
  flex: 1;
}

</style>