Update#133801 [ 傳送約訪通知 -元件 ]

HelenHuang

2022-01-13 0425323930ab444bcd74ef56009440629426b391

Update#133801 [ 傳送約訪通知 -元件 ]

 PAMapp/pages/appointment/_appointmentId/index.vue

@@ -45,10 +45,41 @@

      <div class="client-detail-action">
        <el-button @click="closeAppointment" >結案</el-button>
        <el-button @click="$router.go(-1)" style="margin-left: 0px">通知/約訪</el-button>
        <el-button @click="sendMsg" style="margin-left: 0px">通知/約訪</el-button>
      </div>

    </section>

    <UiDialog
    :isVisible.sync="isVisibleDialog"
    :width="width"
    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>


    <section class="mt-30">
      <AppointmentInterviewList />
@@ -73,7 +104,8 @@
export default class AppointmentDetailComponent extends Vue {

  appointmentDetail!: AppointmentDetail;

  isVisibleDialog = false;
  interviewTxt = "";
  //////////////////////////////////////////////////////////////////////

  async asyncData(context: Context) {
@@ -89,10 +121,13 @@
    this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
  }

  sendMsg():void{
    this.isVisibleDialog = true;
  }
}
</script>

<style lang="scss" scoped>
<style lang="scss">
.appointment-client-detail-page{
  .date-detail{
    display        : flex;
@@ -162,4 +197,30 @@
    }
  }
}
.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>

 PAMapp/pages/appointment/_appointmentId/interview/new/index.vue

@@ -9,6 +9,38 @@

}
</script>
<style lang="scss" scoped>

<style lang="scss" >
.edit-appointment-record {
    padding-left : 10px;
    padding-right: 10px;
    .edit-appointment-record-date{
        color          : #68737A;
        display        : flex;
        justify-content: space-between;
        margin-bottom  : 26px;
    }
}
.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;
}
.edit-appointment-record-btn{
    margin-top: 30px;
    display: flex;
    justify-content: center;
}
</style>