From a3716f72066d25d745f4d5103ff23a553c3e102b Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期四, 17 二月 2022 11:41:19 +0800
Subject: [PATCH] Merge branch 'sit' into uat
---
PAMapp/components/Interview/InterviewAdd.vue | 269 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 269 insertions(+), 0 deletions(-)
diff --git a/PAMapp/components/Interview/InterviewAdd.vue b/PAMapp/components/Interview/InterviewAdd.vue
new file mode 100644
index 0000000..145c41f
--- /dev/null
+++ b/PAMapp/components/Interview/InterviewAdd.vue
@@ -0,0 +1,269 @@
+<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 confirm-btn">
+ <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;
+ }
+ }
+.confirm-btn{
+ display: flex;
+ justify-content: center;
+}
+</style>
--
Gitblit v1.8.0