update: 串接預約單流程(新增採訪紀錄, 結案頁面, 預約單列表細節)

Tomas

2022-01-12 943b8dfc3fd82d76d46cde1834972270d4aa868a

update: 串接預約單流程(新增採訪紀錄, 結案頁面, 預約單列表細節)

 PAMapp/components/Appointment/AppointmentInterviewList.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,116 @@
<template>
    <div>
      <div class="interview__header">
          <div class="mdTxt">約訪紀錄</div>
          <div class="mdTxt text--underline text--primary"
          @click="addInterview">+新增</div>
      </div>

      <template v-if="!interviewList.length">
          <div class="record-card record-card--empty">
            ç„¡ç´„訪紀錄
          </div>
      </template>

      <template v-if="interviewList.length">
        <div class="interview--future">

            <div class="record-card">
                <div class="record-card-date">
                    <span class="bold">01/10</span>
                    <span class="mt-5 line-space">09:00</span>
                </div>
                <div class="record-card-content">
                    <span>預計提醒客戶約在公司樓下咖啡廳，推薦熊安心醫療險與防疫保單</span>
                </div>
            </div>
        </div>

        <section class="interview--past">
            <div class="record-card">
                <div class="record-card-date">
                    <span class="bold">01/08</span>
                    <span class="mt-5 line-space">09:00</span>
                </div>
                <div class="record-card-content">
                    <span>王聰明回信提供電話號碼，去電推薦預約時間</span>
                </div>
            </div>
        </section>

        <section class="more-log-action">
                <div class="mdTxt text--primary text--underline">展開看更多</div>
        </section>
      </template>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator';

@Component
export default class AppointmentInterviewList extends Vue {

  interviewList = [];

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

  addInterview(): void {
    const appointmentId = this.$route.params.appointmentId;
    this.$router.push(`/appointment/${appointmentId}/interview/new`);
  }

}
</script>

<style lang="scss" scoped>
.interview__header {
  display        : flex;
  justify-content: space-between;
  margin-bottom  : 10px;
}
.interview--future{
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 17px;
    margin-bottom: 17px;
    .record{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
}
.record-card {
    height: 62px;
    border: 1px solid #707070;
    border-radius: 5px;
    display: flex;
    border-bottom: 1px solid #000;
    .record-card-date{
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
    }
    .record-card-content{
        height: 42px;
        margin-top: 10px;
        margin-right: 10px;
        line-height: 1.2;
    }
  &.record-card--empty {
    align-items     : center;
    background-color: #fff;
    color           : $MID_GREY;
    justify-content : center;
  }
}
.line-space{
    letter-spacing: 1px;
}
.more-log-action{
    margin-top: 30px;
    display: flex;
    justify-content:flex-end;
}
</style>

 PAMapp/components/Appointment/AppointmentRecord.vue

Àɮפw§R°£

 PAMapp/components/Appointment/AppointmentRecordList.vue

File was renamed from PAMapp/components/Appointment/AppointmentRecordLog.vue
@@ -1,7 +1,7 @@
<template>
    <div class="record-log-component">
        <div class="mdTxt mt-30 mb-10">系統通知紀錄</div>
        

            <section class="record-log-card">
                <div class="record-log-card-date-container">
                    <div class="record-log-card-date-container-circle">
@@ -36,7 +36,7 @@
import { Vue, Component, Prop } from 'nuxt-property-decorator';

@Component
export default class AppointmentRecordLog extends Vue {
export default class AppointmentRecordList extends Vue {

}
</script>
@@ -87,4 +87,4 @@
    justify-content:flex-end;
}

</style>
</style>

 PAMapp/components/BackActionBar.vue

@@ -76,7 +76,13 @@
          break;
        case 'appointment':
          const appointmentFeatureLabel = this.$route.name.includes('close') ? '結案' : '預約資訊';
          featureLabel = appointmentFeatureLabel;
          const inInterview = this.$route.name.includes('interview');
          const addNewInterview = this.$route.name.includes('new');
          if (inInterview) {
            featureLabel = addNewInterview ? '新增約訪紀錄' : '編輯約訪紀錄';
          } else {
            featureLabel = appointmentFeatureLabel;
          }
          break;
      }
      return featureLabel;

 PAMapp/components/Client/ClientCard.vue

@@ -6,7 +6,7 @@
            class="rowStyle cursor--pointer"
            justify="space-between"
            :class="{'new': newAppointment }"
            @click.native="openDetail"
            @click.native="viewDetail"
        >
        <div class="test">
            <div class="unread" v-if="isReserved">
@@ -202,6 +202,12 @@
        this.memo = this.memoInfo.content;
    }

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

    viewDetail(): void {
      this.$router.push(`/appointment/${this.client.id}`);
    }

    get newAppointment(): boolean {
      return !this.client.consultantViewTime
            && this.client.communicateStatus === 'reserved';

 PAMapp/components/Ui/UiField.vue

@@ -68,26 +68,25 @@
}
</script>


<style lang="scss" scoped>
.pam-field {
  display: flex;
  display       : flex;
  flex-direction: column;
  .pam-field__label {
    display: flex;
    align-items: center;
    display    : flex;
    .pam-icon {
      font-size: 12px;
    }
    .pam-field__title {
      font-weight: bold;
      display: flex;
      align-items: center;
      display    : flex;
      font-weight: bold;
    }
  }
  .pam-field__content {
    display    : flex;
    padding-top: 10px;
    display: flex;
  }
}
</style>

 PAMapp/pages/appointment/_appointmentId/close/index.vue

@@ -21,6 +21,11 @@
              v-model="appointmentCloseInfo.planCode"
              placeholder="請輸入"
              type="text">
              <!-- <el-input
                type="input"
                placeholder="請輸入"
                v-model="appointmentCloseInfo.planCode">
              </el-input> -->
          </UiField>
        </el-row>

@@ -51,6 +56,7 @@
              </select>

              <div style="display: flex" class="mt-10">

                <input
                  v-if="appointmentCloseInfo.failReason === 'other'"
                  class="appointment-client-detail-close__input"
@@ -65,7 +71,15 @@
        type="flex"
        class="pam-paragraph">
        <UiField label="備註" :labelSize="20">
          <textarea
          <el-input
            type="textarea"
            :rows="3"
            placeholder="請輸入"
            v-model="appointmentCloseInfo.archivedDate"
            resize="none">
          </el-input>

          <!-- <textarea
            v-model="appointmentCloseInfo.archivedDate"
            class="appointment-close__remark"
            placeholder="請輸入"
@@ -73,7 +87,7 @@
            id="remark"
            wrap="off"
            rows="3">
          </textarea>
          </textarea> -->
        </UiField>
      </el-row>


 PAMapp/pages/appointment/_appointmentId/index.vue

@@ -6,6 +6,7 @@
      <div>{{ appointmentDetail.consultantReadTime }}</div>
    </div>
    <AppointmentProgress
      class="mt-10"
      :currentStep="appointmentDetail.communicateStatus"
    ></AppointmentProgress>

@@ -14,16 +15,18 @@
      <div class="client-detail-info">
        <div class="client-detail-info__avatar">
          <div class="circle">
            {{ appointmentDetail.name }}
            {{ appointmentDetail.name || 'NO NAME' }}
            <div class="sm-circle">
              {{ appointmentDetail.gender === 'male' ? '男' : '女'}}
            </div>
          </div>
        </div>
        <div class="client-detail-info__information">
          <div>{{ appointmentDetail.age }}æ­²</div>
          <div>{{ appointmentDetail.age || '--' }}æ­²</div>
          <div>{{ appointmentDetail.phone }}</div>
          <div class="text--underline">{{ appointmentDetail.email }}</div>
          <div class="text--underline">
            {{ appointmentDetail.email }}
          </div>
        </div>
      </div>

@@ -34,18 +37,26 @@
        </div>
        <div class="client-detail-demand__hope-contact-time">
          <div class="client-detail-demand__demand-list-label">聯絡<br />時段</div>
          <div>{{ appointmentDetail.hopeContactTime }}</div>
          <div>星期一 17:00 ~ 19:00</div>
          <!-- TODO: å¤šç­†è¯çµ¡æ™‚段如何呈現 && è·‘版問題 [Tomas. 2021/1/12] -->
          <!-- <div>{{ appointmentDetail.hopeContactTime }}</div> -->
        </div>
      </div>

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

    </section>

    <section class="mt-30">
      <AppointmentInterviewList />
    </section>

    <section class="mt-30">
      <AppointmentRecordList />
    </section>

  </div>
</template>
@@ -72,6 +83,12 @@
    }
  }

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

  closeAppointment(): void {
    this.$router.push(`/appointment/${this.appointmentDetail.id}/close`);
  }

}
</script>


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

File was renamed from PAMapp/pages/appointment/EditAppointmentRecord.vue
@@ -25,7 +25,7 @@
import { Vue, Component } from 'nuxt-property-decorator';

@Component
export default class EditAppointmentRecord extends Vue {
export default class NewAppointmentInterview extends Vue {

}
</script>
@@ -63,4 +63,4 @@
    display: flex;
    justify-content: center;
}
</style>
</style>