From ed4b2b7c67443b83abdc7aaf99e784a79d2e0a4f Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 20 一月 2022 17:04:24 +0800
Subject: [PATCH] Merge branch 'Phase3' of https://192.168.0.10:8443/r/pcalife/PAM into Phase3
---
PAMapp/pages/appointment/_appointmentId/close/index.vue | 208 ++++++++++++++++++++++++++++++++++++++++++++--------
1 files changed, 176 insertions(+), 32 deletions(-)
diff --git a/PAMapp/pages/appointment/_appointmentId/close/index.vue b/PAMapp/pages/appointment/_appointmentId/close/index.vue
index f67a0b3..973e48a 100644
--- a/PAMapp/pages/appointment/_appointmentId/close/index.vue
+++ b/PAMapp/pages/appointment/_appointmentId/close/index.vue
@@ -14,30 +14,37 @@
<template v-if="appointmentCloseInfo.selectCloseOption === 'done'">
<el-row
type="flex"
+ 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"
placeholder="隢撓�"
type="text">
- <!-- <el-input
- type="input"
- placeholder="隢撓�"
- v-model="appointmentCloseInfo.planCode">
- </el-input> -->
</UiField>
</el-row>
<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 @changeDateTime="appointmentCloseDate = $event"></DateTimePicker>
</UiField>
</el-row>
</template>
@@ -45,25 +52,28 @@
<template v-if="appointmentCloseInfo.selectCloseOption === 'close'">
<el-row
class="pam-paragraph">
- <UiField label="���漱����" :labelSize="20">
+ <UiField label="���漱����" :labelSize="20" class="required">
</UiField>
+ <div class="appointment-client-detail-close__selectbox">
<select
class="appointment-client-detail-close__select"
- name="failReason" id="failReason" v-model="appointmentCloseInfo.failReason">
+ 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 style="display: flex" class="mt-10">
- <div style="display: flex" class="mt-10">
-
- <input
- v-if="appointmentCloseInfo.failReason === 'other'"
- class="appointment-client-detail-close__input"
- v-model="appointmentCloseInfo.otherFailReason"
- placeholder="隢撓�������50摮��"
- type="text">
- </div>
+ <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>
</el-row>
</template>
@@ -75,7 +85,7 @@
type="textarea"
:rows="3"
placeholder="隢撓�"
- v-model="appointmentCloseInfo.archivedDate"
+ v-model="appointmentCloseInfo.remark"
resize="none">
</el-input>
@@ -96,26 +106,48 @@
justify="center"
class="pam-paragraph">
<el-button @click="$router.go(-1)">����</el-button>
- <el-button @click="$router.go(-1)">蝣箄��</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 { Appointment, ToCloseAppointment, ToDoneAppointment } from '~/shared/models/appointment.model';
+import { ContactStatus } from '~/shared/models/enum/contact-status';
+
+import appointmentService from '~/shared/services/appointment.service';
+
+const appointmentStore = namespace('appointment.store');
@Component
export default class AppointmentDetailCloseComponent extends Vue {
+ @appointmentStore.Action
+ updateAppointmentDetail!: () => Appointment;
+
+ contactStatus = ContactStatus;
+
+ appointmentCloseDate = '';
+ isShowSuccessAlert = false;
+
appointmentCloseInfo = {
- archivedDate : '',
- failReason : 'other',
- otherFailReason : '',
- planCode : '',
- remark : '',
- selectCloseOption: 'done',
+ closedOtherReason : '',
+ closedReason : 'other',
+ planCode : '',
+ policyEntryDate : this.appointmentCloseDate,
+ policyholderIdentityId: '',
+ remark : '',
+ selectCloseOption : 'done',
};
closeOptions = [
@@ -131,10 +163,83 @@
appointmentFailReason = [
{
+ key: '�瘜蝜怠恥�',
+ value: 'cannot_to_contact_customer'
+ },
+ {
+ key: '�蝝垣閰�',
+ value: 'only_consultation'
+ },
+ {
+ key: '�������',
+ value: 'no_suitable_commodity'
+ },
+ {
+ key: '�靽���- 擃��瓷���璆�',
+ value: 'prohibited_factors'
+ },
+ {
+ key: '蝬����',
+ value: 'economy'
+ },
+ {
key: '�隞�',
value: 'other'
- }
+ },
];
+
+ closeAppointment(): void {
+ const appointmentId = +this.$route.params.appointmentId;
+ if (this.appointmentCloseInfo.selectCloseOption === 'done') {
+ const toDoneAppointment: ToDoneAppointment = {
+ appointmentId : appointmentId,
+ contactStatus : this.contactStatus.DONE,
+ planCode : this.appointmentCloseInfo.planCode,
+ policyEntryDate : this.appointmentCloseInfo.policyEntryDate,
+ policyholderIdentityId: this.appointmentCloseInfo.policyholderIdentityId,
+ }
+ appointmentService.closeAppointment(toDoneAppointment).then((res) => res);
+ this.isShowSuccessAlert = true;
+ } else {
+ const toCloseAppointment: ToCloseAppointment = {
+ appointmentId : appointmentId,
+ closedOtherReason: this.appointmentCloseInfo.closedOtherReason,
+ closedReason : this.appointmentCloseInfo.closedReason,
+ contactStatus : this.contactStatus.CLOSE,
+ remark : this.appointmentCloseInfo.remark,
+ }
+ appointmentService.closeAppointment(toCloseAppointment).then((res) => res);
+ this.isShowSuccessAlert = true;
+ }
+ }
+
+ closeAlert(){
+ this.isShowSuccessAlert = false ;
+ this.$router.push(`/myAppointmentList/contactedList`);
+ }
+
+ get isSubmitBtnDisabled() {
+ const {
+ selectCloseOption,
+ policyholderIdentityId,
+ planCode,
+ closedReason,
+ closedOtherReason
+ } = this.appointmentCloseInfo;
+ // this.appointmentCloseInfo.policyEntryDate 銝行��齒瘜��澆 this.appointmentCloseDate
+ if (selectCloseOption === 'done') {
+ return !policyholderIdentityId || !this.identityIdValid || !planCode || !this.appointmentCloseDate
+ } else if (closedReason === 'other' || closedReason === 'no_suitable_commodity') {
+ return !closedOtherReason
+ }
+ return false
+ }
+
+ get identityIdValid() {
+ const rule = /^[A-Z]\d{9}$/;
+ const identityId = this.appointmentCloseInfo.policyholderIdentityId;
+ return identityId ? rule.test(identityId) : true;
+ }
}
</script>
@@ -148,8 +253,47 @@
font-size: 20px;
padding : 10px 20px;
width : 100%;
+ box-sizing: border-box;
&::placeholder {
color: $MID_GREY;
}
+ &.is-invalid {
+ border-color: $PRIMARY_RED !important;
+ }
}
+.appointment-client-detail-close__selectbox {
+ position: relative;
+
+ & .appointment-client-detail-close__select{
+ appearance: none;
+ }
+ & .down-icon {
+ position: absolute;
+ right: 7px;
+ bottom: 10px;
+ }
+}
+.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: 20px;
+ font-weight: bold;
+ position: absolute;
+ color: #FF0000;
+ transform: translateX(-5px);
+ z-index: 5;
+ }
+ }
</style>
--
Gitblit v1.8.0