| | |
| | | <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="請輸入" |
| | |
| | | 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"> |
| | |
| | | <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> |
| | |
| | | <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> |
| | | |
| | |
| | | class="pam-paragraph"> |
| | | <UiField label="備註" :labelSize="20"> |
| | | <el-input |
| | | class="mt-10" |
| | | type="textarea" |
| | | :rows="3" |
| | | placeholder="請輸入" |
| | |
| | | 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() { |
| | |
| | | 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 |
| | | } |
| | |
| | | } |
| | | |
| | | 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; |
| | | } |
| | | |
| | | } |
| | |
| | | |
| | | <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; |
| | |
| | | } |
| | | &.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{ |
| | |
| | | |
| | | &::before { |
| | | content: '*'; |
| | | font-size: 20px; |
| | | font-size: 15px; |
| | | font-weight: bold; |
| | | position: absolute; |
| | | color: #FF0000; |
| | | transform: translateX(-5px); |
| | | transform: translateX(-2px); |
| | | z-index: 5; |
| | | } |
| | | } |