From ae4db5435180c44b37f521c463b17f2023ac1d8c Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期五, 18 二月 2022 09:25:50 +0800
Subject: [PATCH] [update] 若顧問停用時，將無法登入 (文案待確認)
---
PAMapp/pages/appointment/_appointmentId/close/index.vue | 233 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 177 insertions(+), 56 deletions(-)
diff --git a/PAMapp/pages/appointment/_appointmentId/close/index.vue b/PAMapp/pages/appointment/_appointmentId/close/index.vue
index 2e15981..3fe2dae 100644
--- a/PAMapp/pages/appointment/_appointmentId/close/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/close/index.vue
@@ -11,23 +11,27 @@
</UiField>
</el-row>
- <template v-if="appointmentCloseInfo.selectCloseOption === 'done'">
+ <template v-if="appointmentCloseInfo.selectCloseOption === contactStatus.DONE">
<el-row
type="flex"
- class="pam-paragraph">
- <UiField label="靽頨怠�����" :labelSize="20">
+ class="pam-paragraph" style="flex-direction: column">
+ <UiField label="頨怠�����/撅�����" :labelSize="20" class="required">
<input
class="appointment-client-detail-close__input"
+ :class="{'is-invalid':!identityIdValid}"
v-model="appointmentCloseInfo.policyholderIdentityId"
placeholder="隢撓�"
type="text">
</UiField>
+ <div class="error mt-5 mb-5" v-show="!identityIdValid">
+ <span>頨怠����撘�炊</span>
+ </div>
</el-row>
<el-row
type="flex"
class="pam-paragraph">
- <UiField label="���誨蝣噗lan Code" :labelSize="20">
+ <UiField label="���誨蝣噗lan Code" :labelSize="20" class="required">
<input
class="appointment-client-detail-close__input"
v-model="appointmentCloseInfo.planCode"
@@ -39,38 +43,28 @@
<el-row
type="flex"
class="pam-paragraph">
- <UiField label="�脖辣����" :labelSize="20">
- <input
- class="appointment-client-detail-close__input"
- v-model="appointmentCloseInfo.planCode"
- placeholder="TBD: ����辣"
- type="text">
+ <UiField label="�脖辣����" :labelSize="20" class="required">
+ <DateTimePicker
+ :defaultValue="appointmentCloseInfo.policyEntryDate"
+ @changeDateTime="appointmentCloseDate = $event"></DateTimePicker>
</UiField>
</el-row>
</template>
- <template v-if="appointmentCloseInfo.selectCloseOption === 'close'">
+ <template v-if="appointmentCloseInfo.selectCloseOption === contactStatus.CLOSE">
<el-row
class="pam-paragraph">
- <UiField label="���漱����" :labelSize="20">
+ <UiField label="���漱����" :labelSize="20" class="required">
+ <UiSelect :closeReason.sync="appointmentCloseInfo.closedReason"
+ :options="appointmentFailReason"/>
</UiField>
- <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>
-
- <div style="display: flex" class="mt-10">
-
- <input
- v-if="appointmentCloseInfo.closedReason === 'other'"
- 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>
@@ -85,16 +79,6 @@
v-model="appointmentCloseInfo.remark"
resize="none">
</el-input>
-
- <!-- <textarea
- v-model="appointmentCloseInfo.archivedDate"
- class="appointment-close__remark"
- placeholder="隢撓�"
- name="remark"
- id="remark"
- wrap="off"
- rows="3">
- </textarea> -->
</UiField>
</el-row>
@@ -103,24 +87,43 @@
justify="center"
class="pam-paragraph">
<el-button @click="$router.go(-1)">����</el-button>
- <el-button @click="closeAppointment">蝣箄��</el-button>
+ <el-button @click="closeAppointment" :disabled="isSubmitBtnDisabled">蝣箄��</el-button>
</el-row>
+ <PopUpFrame :isOpen.sync="isShowSuccessAlert">
+ <div class="text--middle invite-review">
+ <div class="mb-30 mt-10">蝯����</div>
+ <el-button type="primary" @click="closeAlert">蝣箏��</el-button>
+ </div>
+ </PopUpFrame>
</div>
</template>
<script lang="ts">
+import { namespace } from 'nuxt-property-decorator';
import { Vue, Component } from 'vue-property-decorator';
-import { ToCloseAppointment, ToDoneAppointment } from '~/shared/models/appointment.model';
-import { ContactStatus } from '~/shared/models/enum/contact-status';
+import { Appointment, ToCloseAppointment, ToDoneAppointment } from '~/shared/models/appointment.model';
import appointmentService from '~/shared/services/appointment.service';
+import { appointmentFailReasonList } from '~/shared/const/appointment-fail-reason-list';
+import { ContactStatus } from '~/shared/models/enum/contact-status';
+
+const appointmentStore = namespace('appointment.store');
@Component
export default class AppointmentDetailCloseComponent extends Vue {
+ @appointmentStore.Action
+ updateAppointmentDetail!: (appointmentId: number) => Appointment;
+
+ @appointmentStore.State('appointmentDetail')
+ appointmentDetail!: Appointment;
+
contactStatus = ContactStatus;
+
+ appointmentCloseDate = '';
+ isShowSuccessAlert = false;
appointmentCloseInfo = {
closedOtherReason : '',
@@ -129,38 +132,62 @@
policyEntryDate : '',
policyholderIdentityId: '',
remark : '',
- selectCloseOption : 'done',
+ selectCloseOption : this.contactStatus.DONE,
};
closeOptions = [
{
title:'��漱',
- label: 'done',
+ label: this.contactStatus.DONE,
},
{
title:'���漱',
- label: 'close',
+ label: this.contactStatus.CLOSE,
}
];
- appointmentFailReason = [
- {
- key: '�隞�',
- value: 'other'
+ appointmentFailReason = appointmentFailReasonList;
+
+ //////////////////////////////////////////////////////////////////////
+
+ mounted() {
+ const appointmentId = +this.$route.params.appointmentId;
+ const closedInfo = this.appointmentDetail.appointmentClosedInfo;
+ if (this.appointmentDetail.id === appointmentId
+ && (this.appointmentDetail.communicateStatus === this.contactStatus.DONE
+ || this.appointmentDetail.communicateStatus === this.contactStatus.CLOSE
+ || this.appointmentDetail.communicateStatus === this.contactStatus.CANCEL)
+ ) {
+ this.appointmentCloseInfo = {
+ closedOtherReason : closedInfo?.closedOtherReason,
+ closedReason : closedInfo?.closedReason,
+ planCode : closedInfo?.planCode,
+ policyEntryDate : closedInfo?.policyEntryDate,
+ policyholderIdentityId: closedInfo?.policyholderIdentityId,
+ remark : closedInfo?.remark,
+ selectCloseOption : this.appointmentDetail.communicateStatus === this.contactStatus.DONE
+ ? this.contactStatus.DONE
+ : this.contactStatus.CLOSE
+ };
+ this.appointmentCloseDate = closedInfo?.policyEntryDate;
}
- ];
+ }
+
+ //////////////////////////////////////////////////////////////////////
closeAppointment(): void {
const appointmentId = +this.$route.params.appointmentId;
- if (this.appointmentCloseInfo.selectCloseOption === 'done') {
+ if (this.appointmentCloseInfo.selectCloseOption === this.contactStatus.DONE) {
const toDoneAppointment: ToDoneAppointment = {
appointmentId : appointmentId,
contactStatus : this.contactStatus.DONE,
planCode : this.appointmentCloseInfo.planCode,
- policyEntryDate : this.appointmentCloseInfo.policyEntryDate,
+ policyEntryDate : this.appointmentCloseDate,
policyholderIdentityId: this.appointmentCloseInfo.policyholderIdentityId,
+ remark : this.appointmentCloseInfo.remark,
}
- appointmentService.closeAppointment(toDoneAppointment).then((res) => res);
+ appointmentService.closeAppointment(toDoneAppointment).then((_) => this.updateAppointmentDetail(appointmentId));
+ this.isShowSuccessAlert = true;
} else {
const toCloseAppointment: ToCloseAppointment = {
appointmentId : appointmentId,
@@ -169,8 +196,76 @@
contactStatus : this.contactStatus.CLOSE,
remark : this.appointmentCloseInfo.remark,
}
- appointmentService.closeAppointment(toCloseAppointment).then((res) => res);
+ 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() {
+ const {
+ selectCloseOption,
+ policyholderIdentityId,
+ planCode,
+ closedReason,
+ closedOtherReason,
+ remark
+ } = this.appointmentCloseInfo;
+ if (selectCloseOption === this.contactStatus.DONE) {
+ return !policyholderIdentityId || !this.identityIdValid || !planCode || !this.appointmentCloseDate
+ } else if (closedReason === 'other' || closedReason === 'no_suitable_commodity') {
+ return !closedOtherReason
+ }
+ return false
+ }
+
+ get identityIdValid() {
+ const identityId = this.appointmentCloseInfo.policyholderIdentityId;
+ return identityId ? this.checkIdentityId(identityId) : true;
}
}
@@ -178,15 +273,41 @@
<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;
padding : 10px 20px;
width : 100%;
+ box-sizing: border-box;
&::placeholder {
color: $MID_GREY;
}
+ &.is-invalid {
+ border-color: $PRIMARY_RED !important;
+ }
}
+.invite-review{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+ .error {
+ @extend .smTxt_bold;
+ @extend .text--primary;
+ height: 16px;
+ }
+ .required {
+ position: relative;
+
+ &::before {
+ content: '*';
+ font-size: 15px;
+ font-weight: bold;
+ position: absolute;
+ color: #FF0000;
+ transform: translateX(-2px);
+ z-index: 5;
+ }
+ }
</style>
--
Gitblit v1.8.0