保誠-保戶業務員媒合平台
HelenHuang
2022-03-08 4e38731870a97b6944b57b6c0ae5876d5f109a05
PAMapp/pages/appointment/_appointmentId/close/index.vue
@@ -15,9 +15,9 @@
        <el-row
          type="flex"
          class="pam-paragraph" style="flex-direction: column">
          <UiField label="保戶身分證字號" :labelSize="20" class="required">
          <UiField label="身分證字號/居留證字號" :labelSize="20" class="required">
            <input
              class="appointment-client-detail-close__input"
              class="appointment-client-detail-close__input mt-10"
              :class="{'is-invalid':!identityIdValid}"
              v-model="appointmentCloseInfo.policyholderIdentityId"
              placeholder="請輸入"
@@ -33,7 +33,7 @@
          class="pam-paragraph">
          <UiField label="商品代碼Plan Code" :labelSize="20" class="required">
            <input
              class="appointment-client-detail-close__input"
              class="appointment-client-detail-close__input mt-10"
              v-model="appointmentCloseInfo.planCode"
              placeholder="請輸入"
              type="text">
@@ -43,9 +43,10 @@
        <el-row
          type="flex"
          class="pam-paragraph">
          <UiField label="進件時間" :labelSize="20">
          <UiField label="進件時間" :labelSize="20" class="required">
            <DateTimePicker
              :defaultValue="appointmentCloseInfo.policyEntryDate"
              class="mt-10"
              @changeDateTime="appointmentCloseDate = $event"></DateTimePicker>
          </UiField>
        </el-row>
@@ -55,26 +56,16 @@
        <el-row
          class="pam-paragraph">
          <UiField label="未成交原因" :labelSize="20" class="required">
            <UiSelect :closeReason.sync="appointmentCloseInfo.closedReason"
              :options="appointmentFailReason" class="mt-10"/>
          </UiField>
            <div class="appointment-client-detail-close__select-box">
              <select
                class="appointment-client-detail-close__select"
                name="closedReason" id="closedReason" v-model="appointmentCloseInfo.closedReason">
                <option :value="failReason.value" v-for="(failReason, index) in appointmentFailReason" :key="index">
                  {{ failReason.key }}
                </option>
              </select>
              <i class="icon-down down-icon"></i>
            </div>
            <div class="mt-10">
              <input
                v-if="appointmentCloseInfo.closedReason === 'other'
                    || appointmentCloseInfo.closedReason === 'no_suitable_commodity'"
                class="appointment-client-detail-close__input"
                v-model="appointmentCloseInfo.closedOtherReason"
                placeholder="請輸入原因,限50字。"
                type="text">
            </div>
          <input
            v-if="appointmentCloseInfo.closedReason === 'other'
                || appointmentCloseInfo.closedReason === 'no_suitable_commodity'"
            class="appointment-client-detail-close__input mt-10"
            v-model="appointmentCloseInfo.closedOtherReason"
            placeholder="請輸入原因,限50字。"
            type="text">
        </el-row>
      </template>
@@ -83,6 +74,7 @@
        class="pam-paragraph">
        <UiField label="備註" :labelSize="20">
          <el-input
          class="mt-10"
            type="textarea"
            :rows="3"
            placeholder="請輸入"
@@ -206,14 +198,54 @@
        contactStatus    : this.contactStatus.CLOSE,
        remark           : this.appointmentCloseInfo.remark,
      }
      appointmentService.closeAppointment(toCloseAppointment).then((_) => this.updateAppointmentDetail(appointmentId));
      this.isShowSuccessAlert = true;
      appointmentService.closeAppointment(toCloseAppointment).then((_) => {
        this.updateAppointmentDetail(appointmentId);
        this.isShowSuccessAlert = true;
      });
    }
  }
  closeAlert(){
    this.isShowSuccessAlert = false ;
    this.$router.push(`/myAppointmentList/contactedList`);
  }
  checkIdentityId(id) {
    const tab = 'ABCDEFGHJKLMNPQRSTUVXYWZIO';
    const weight = [9, 8, 7, 6, 5, 4, 3, 2, 1, 1];
    if (id.length !== 10) return false;
    let i = tab.indexOf(id.charAt(0)) + 10;
    if (i === 9) return false;
    let sum = Math.floor((i % 100) / 10) + (i % 10) * 9;
    for (i = 1; i < 10; i += 1) {
      let v = parseInt(id.charAt(i), 10);
      if (i === 1 && Number.isNaN(v)) {
        switch (id.charAt(i)) {
          case 'A':
            v = 0;
            break;
          case 'B':
            v = 1;
            break;
          case 'C':
            v = 2;
            break;
          case 'D':
            v = 3;
            break;
          default:
            return false;
        }
      } else if (i === 1 && ([1, 2, 8, 9].indexOf(v) === -1)) {
        return false;
      }
      if (i > 1 && Number.isNaN(v)) return false;
      sum += v * weight[i];
    }
    if (sum % 10 !== 0) return false;
    return true;
  }
  get isSubmitBtnDisabled() {
@@ -226,7 +258,7 @@
      remark
    } = this.appointmentCloseInfo;
    if (selectCloseOption === this.contactStatus.DONE) {
      return !policyholderIdentityId || !this.identityIdValid || !planCode || !this.appointmentCloseDate || !remark
      return !policyholderIdentityId || !this.identityIdValid || !planCode || !this.appointmentCloseDate
    } else if (closedReason === 'other' || closedReason === 'no_suitable_commodity') {
      return !closedOtherReason
    }
@@ -234,9 +266,8 @@
  }
  get identityIdValid() {
    const rule = /^[A-Z]\d{9}$/;
    const identityId = this.appointmentCloseInfo.policyholderIdentityId;
    return identityId ? rule.test(identityId) : true;
    return identityId ? this.checkIdentityId(identityId) : true;
  }
}
@@ -244,8 +275,7 @@
<style lang="scss" scoped>
.appointment-close__remark,
.appointment-client-detail-close__input,
.appointment-client-detail-close__select {
.appointment-client-detail-close__input {
  border-radius: 5px;
  border   : 1px solid #707070;
  font-size: 20px;
@@ -257,18 +287,6 @@
  }
  &.is-invalid {
    border-color: $PRIMARY_RED !important;
  }
}
.appointment-client-detail-close__select-box {
  position: relative;
  & .appointment-client-detail-close__select{
    appearance: none;
  }
  & .down-icon {
    position: absolute;
    right: 7px;
    bottom: 10px;
  }
}
.invite-review{
@@ -286,11 +304,11 @@
    &::before {
      content: '*';
      font-size: 20px;
      font-size: 15px;
      font-weight: bold;
      position: absolute;
      color: #FF0000;
      transform: translateX(-5px);
      transform: translateX(-2px);
      z-index: 5;
    }
  }