add: 預約單新增/編輯頁面

Tomas

2022-01-13 4de470e1876995ffad09fbcb072081382a05d833

add: 預約單新增/編輯頁面

 PAMapp/components/Interview/InterviewAdd.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,78 @@
<template>
  <div class="edit-appointment-record">
      <div class="edit-appointment-record-date">
          <span>今天 11:00 å»ºç«‹</span>
          <span>今天 11:00 æ›´æ–°</span>
      </div>

      <div class="mdTxt mb-10">約訪時間</div>
      <div class="date-input">
          2022/01/10 09:00
          <i class="icon-calender icon"></i>
      </div>

      <div class="mdTxt mb-10">約訪紀錄</div>
      <el-input type="textarea" :rows="5" placeholder="約訪通知" resize="none">
      </el-input>

      <div class="edit-appointment-record-btn">
          <el-button>取消</el-button>
          <el-button>確定</el-button>
      </div>
  </div>
</template>
<script lang="ts">
import { AppointmentLog } from '~/shared/models/appointment.model';
import { Vue, Component, Prop } from 'nuxt-property-decorator';
import authService from '~/shared/services/auth.service';

@Component
export default class InterviewAdd extends Vue {
    // @Prop()
    // myAppointmentReviewLogList!: AppointmentLog[];

    // isUserLogin = false;

    //////////////////////////////////////////////////////////////////////
    // mounted() {
    //   this.isUserLogin = authService.isUserLogin();
    // }

}
</script>

<style lang="scss" scoped>
.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>

 PAMapp/pages/appointment/_appointmentId/index.vue

@@ -45,7 +45,7 @@

      <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="$router.go(-1)" style="margin-left: 0px">通知/約訪</el-button>
      </div>

    </section>

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

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,14 @@
<template>
  <InterviewAdd></InterviewAdd>
</template>
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';

@Component
export default class EditAppointmentInterview extends Vue {

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

</style>

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

@@ -1,25 +1,5 @@
<template>
    <div class="edit-appointment-record">
        <div class="edit-appointment-record-date">
            <span>今天 11:00 å»ºç«‹</span>
            <span>今天 11:00 æ›´æ–°</span>
        </div>

        <div class="mdTxt mb-10">約訪時間</div>
        <div class="date-input">
            2022/01/10 09:00
            <i class="icon-calender icon"></i>
        </div>

        <div class="mdTxt mb-10">約訪紀錄</div>
        <el-input type="textarea" :rows="5" placeholder="約訪通知" resize="none">
        </el-input>

        <div class="edit-appointment-record-btn">
            <el-button>取消</el-button>
            <el-button>確定</el-button>
        </div>
    </div>
  <InterviewAdd></InterviewAdd>
</template>
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';
@@ -30,37 +10,5 @@
}
</script>
<style lang="scss" scoped>
.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>