<template>
|
<div class="edit-appointment-record">
|
<div class="edit-appointment-record-date" v-if="interviewId && interviewRecord">
|
<span>{{interviewRecord.createdDate | formatDate}} 建立</span>
|
<span>{{interviewRecord.lastModifiedDate | formatDate}} 更新</span>
|
</div>
|
<el-row class="mdTxt mb-10">
|
<el-col :xs="16" :sm="20">
|
<span :class="{'required': !interviewId || isEdit}">約訪時間</span>
|
</el-col>
|
<el-col :xs="8" :sm="4" class="text--right" v-if="interviewId">
|
<span
|
v-if="!isEdit"
|
class="mr-10 text--primary cursor--pointer"
|
@click="showCancelPopUp = true"
|
><i class="icon-delet"></i></span>
|
<span
|
v-if="!isEdit"
|
class="text--primary cursor--pointer"
|
@click="isEdit = !isEdit"
|
><i class="icon-edit"></i></span>
|
</el-col>
|
</el-row>
|
<template v-if="!interviewId || isEdit">
|
<DateTimePicker
|
@changeDateTime="interviewTime = $event"
|
:defaultValue="defaultValue"
|
></DateTimePicker>
|
</template>
|
<template v-else>
|
<div class="fs-20 mt-20">
|
{{formatInterviewDate}}
|
</div>
|
</template>
|
|
<div class="mdTxt mb-10 mt-30" :class="{'required': !interviewId || isEdit}">約訪紀錄</div>
|
<template v-if="!interviewId || isEdit">
|
<el-input
|
type="textarea"
|
:rows="5"
|
placeholder="請輸入約訪紀錄"
|
resize="none"
|
v-model="content"
|
>
|
</el-input>
|
</template>
|
<template v-else>
|
<div class="fs-20 mt-20">
|
{{content}}
|
</div>
|
</template>
|
<div class="edit-appointment-record-btn" v-if="!interviewId || isEdit">
|
<el-button @click="cancel">取消</el-button>
|
<el-button
|
:disabled="!interviewTime || !content"
|
@click="saveInterviewRecord"
|
>確定</el-button>
|
</div>
|
|
<PopUpFrame :isOpen.sync="showCancelPopUp"
|
@closePopUp="showCancelPopUp = false"
|
>
|
<div class="text--center mdTxt">是否刪除此筆約訪記錄？</div>
|
<div class="text--center mt-30">
|
<el-button @click="showCancelPopUp = false">否</el-button>
|
<el-button @click="deleteInterviewRecord" type="primary">是</el-button>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame :isOpen.sync="showConfirmPopup"
|
@closePopUp="closePopup">
|
<div class="text--center mdTxt">{{confirmTxt}}！</div>
|
<div class="text--center mt-30">
|
<el-button @click="closePopup" type="primary">確定</el-button>
|
</div>
|
</PopUpFrame>
|
|
<PopUpFrame :isOpen.sync="showFutureDateConfirmPopup"
|
@closePopUp="closePopup">
|
<div class="text--center mdTxt">{{confirmTxt}}！</div>
|
<div class="text--center mdTxt">立即發送約訪通知？</div>
|
<div class="text--center mt-30" style="display:flex">
|
<el-button @click="closePopup">先不發送</el-button>
|
<el-button @click="showInterviewMsgPopup = true" type="primary">傳送約訪通知</el-button>
|
</div>
|
</PopUpFrame>
|
|
<InterviewMsg
|
:isVisible.sync="showInterviewMsgPopup"
|
:client="appointmentDetail"
|
:defaultValue="interviewTime"
|
@closeDialog="closePopup"
|
></InterviewMsg>
|
</div>
|
</template>
|
<script lang="ts">
|
import { Appointment, InterviewRecord, InterviewRecordInfo } from '~/shared/models/appointment.model';
|
import { Vue, Component, Watch, namespace } from 'nuxt-property-decorator';
|
import appointmentService from '~/shared/services/appointment.service';
|
|
const appointmentStore = namespace('appointment.store');
|
|
@Component
|
export default class InterviewAdd extends Vue {
|
|
@appointmentStore.State
|
appointmentDetail!: Appointment;
|
|
@appointmentStore.Action
|
updateAppointmentDetail!: (id: number) => Appointment;
|
|
interviewTime = '';
|
content = '';
|
|
interviewId = '';
|
appointmentId = '';
|
confirmTxt: '新增成功' | '編輯成功' | '刪除成功' = '新增成功';
|
|
isEdit = false;
|
|
showConfirmPopup = false;
|
showCancelPopUp = false;
|
showInterviewMsgPopup = false;
|
showFutureDateConfirmPopup = false;
|
|
defaultValue = '';
|
|
interviewRecord!: InterviewRecord;
|
|
////////////////////////////////////////////////////////////////////
|
|
mounted() {
|
this.interviewId = this.$route.params.interviewId;
|
this.appointmentId = this.$route.params.appointmentId;
|
|
this.onAppointmentDetailChange();
|
}
|
|
////////////////////////////////////////////////////////////////////
|
|
@Watch('appointmentDetail', {immediate: true})
|
onAppointmentDetailChange() {
|
if (this.appointmentDetail && this.appointmentDetail.id === +this.appointmentId) {
|
this.interviewRecord = this.appointmentDetail.interviewRecordDTOs
|
.filter(item => item.id === +this.interviewId)[0];
|
|
if (this.interviewRecord && this.interviewId) {
|
this.content = this.interviewRecord.content;
|
this.defaultValue = this.interviewRecord.interviewDate;
|
}
|
}
|
}
|
|
////////////////////////////////////////////////////////////////////
|
|
saveInterviewRecord() {
|
const interviewRecordInfo: InterviewRecordInfo = {
|
content: this.content,
|
interviewDate: this.interviewTime,
|
appointmentId: +this.appointmentId
|
};
|
if (!this.interviewId) {
|
this.createdRecord(interviewRecordInfo);
|
} else {
|
const updateInterviewRecord = {
|
...interviewRecordInfo,
|
id: +this.interviewId
|
}
|
this.updateRecord(updateInterviewRecord);
|
}
|
}
|
|
private createdRecord(interviewRecordInfo) {
|
appointmentService.createInterviewRecord(interviewRecordInfo).then(res => {
|
this.showPopUp('新增成功');
|
});
|
}
|
|
private updateRecord(updateInterviewRecord) {
|
appointmentService.updateInterviewRecord(updateInterviewRecord).then(res => {
|
this.showPopUp('編輯成功');
|
});
|
}
|
|
private showPopUp(confirmTxt) {
|
this.confirmTxt = confirmTxt;
|
this.updateAppointmentDetail(+this.appointmentId);
|
|
if (new Date(this.interviewTime).getTime() >= new Date().getTime()) {
|
this.showFutureDateConfirmPopup = true;
|
} else {
|
this.showConfirmPopup = true;
|
}
|
}
|
|
deleteInterviewRecord() {
|
appointmentService.deleteInterviewRecord(this.interviewId).then(res => {
|
this.confirmTxt = '刪除成功';
|
this.showConfirmPopup = true;
|
this.updateAppointmentDetail(+this.appointmentId);
|
});
|
}
|
|
cancel() {
|
if (this.interviewId) {
|
this.content = this.interviewRecord.content;
|
this.defaultValue = this.interviewRecord.interviewDate;
|
this.isEdit = false;
|
} else {
|
this.$router.go(-1);
|
}
|
}
|
|
closePopup() {
|
this.$router.go(-1);
|
}
|
|
////////////////////////////////////////////////////////////////////
|
|
get formatInterviewDate() {
|
const interviewDate = new Date(this.interviewRecord.interviewDate);
|
const hours = interviewDate.getHours();
|
const minutes = interviewDate.getMinutes();
|
return `${interviewDate.getFullYear()}/${interviewDate.getMonth() + 1}/${interviewDate.getDate()} ${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
|
}
|
|
}
|
</script>
|
|
<style lang="scss" >
|
.edit-appointment-record {
|
padding-left : 10px;
|
padding-right: 10px;
|
.edit-appointment-record-date{
|
color : #68737A;
|
display : flex;
|
justify-content: space-between;
|
margin-bottom : 26px;
|
}
|
}
|
.edit-appointment-record-btn{
|
margin-top: 30px;
|
display: flex;
|
justify-content: center;
|
}
|
.el-textarea__inner {
|
border: 1px solid #707070;
|
padding: 10px 20px;
|
font-size: 20px;
|
&::placeholder {
|
font-size: 20px;
|
}
|
}
|
.required {
|
position: relative;
|
|
&::before {
|
content: '*';
|
position: absolute;
|
color: #FF0000;
|
transform: translate(-12px, 0);
|
z-index: 5;
|
}
|
}
|
|
</style>
|
