update: TODO#131539 [我的顧問清單] 預約單可以修改/取消

Mila

2021-12-08 eda85197a4a979d33815481d07eebbc67df078b2

update: TODO#131539 [我的顧問清單] 預約單可以修改/取消

 PAMapp/assets/ts/api/consultant.ts

@@ -133,6 +133,22 @@
    return service.post('/satisfaction/create', data ,{headers});
}

// 取消預約
export function cancelAppointment(appointment: number) {
    const headers = {
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
    return service.delete('/appointment/'+appointment ,{headers});
}

// 編輯預約
export function editAppointment(editAppointmentParams: editAppointmentParams) {
    const headers = {
        Authorization: 'Bearer ' + localStorage.getItem('id_token')
    }
    return service.put('/appointment', editAppointmentParams, {headers});
}

export interface FastQueryParams {
    gender             : string,
    communicationStyles: string[],
@@ -231,3 +247,16 @@
    appointmentId:number,
    score:number,
}

export interface editAppointmentParams {
    id: number,
    phone: string,
    email: string,
    contactType: string,
    gender: string,
    age: string,
    job: string,
    requirement: string,
    hopeContactTime: string,
    otherRequirement: null
}

 PAMapp/components/Consultant/ConsultantCard.vue

@@ -82,6 +82,11 @@
                    <el-button type="primary" 
                        @click.native="reviewsBtn = true">給予滿意度評分</el-button>
                </div>

                <div v-if="agentInfo.contactStatus === 'reserved'" class="text--center mt-10">
                    <el-button @click="isCancelPopup = true">取消預約</el-button>
                    <el-button @click="edit" type="primary">編輯</el-button>
                </div>
            </div>
        </Ui-Dialog>
        <PopUpFrame :isOpen.sync="reviewsBtn" drawerSize='30%'>
@@ -99,12 +104,20 @@
                </div>
            </div>
        </PopUpFrame>

        <PopUpFrame :isOpen.sync="isCancelPopup">
            <div class="text--center mdTxt">是否取消此筆預約？</div>
            <div class="text--center mt-30">
                <el-button @click="isCancelPopup = false">取消</el-button>
                <el-button @click="cancel" type="primary">確定</el-button>
            </div>
        </PopUpFrame>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit, Action, State } from 'nuxt-property-decorator';
import { getAppointmentDetail, UserReviewsConsultantsParams, userReviewsConsultants  } from '~/assets/ts/api/consultant';
import { Vue, Component, Prop, Action } from 'nuxt-property-decorator';
import { getAppointmentDetail, UserReviewsConsultantsParams, userReviewsConsultants, cancelAppointment, AppointmentRequests  } from '~/assets/ts/api/consultant';
import { Consultant, Appointment } from '~/assets/ts/models/consultant.model';
import { isLogin } from '~/assets/ts/auth';
import { isMobileDevice } from '~/assets/ts/device';
@@ -138,6 +151,7 @@
    status = false;
    width: string = '';
    inputScore = 0;
    isCancelPopup = false;
    
    get latestContactedAppointment(): Appointment | null {
        if (!(this.agentInfo && this.agentInfo.appointments && this.agentInfo.appointments.length)) return null;
@@ -145,6 +159,12 @@
                                                        .filter((appointment) => appointment.communicateStatus === 'contacted')
                                                        .sort((preAppointment, nextAppointment) => +nextAppointment.appointmentDate - +preAppointment.appointmentDate);
        return contactedAppointments[0];
    }

    get latestReservedAppointment(): Appointment {
        return this.agentInfo.appointments!
                .filter((appointment) => appointment.communicateStatus !== 'contacted')
                .sort((preAppointment, nextAppointment) => +nextAppointment.appointmentDate - +preAppointment.appointmentDate)[0];
    }
    
    appointmentDetail: any = {
@@ -215,12 +235,9 @@
    }

    openPopUp() {
    const latestReservedAppointment = this.agentInfo.appointments!
                                        .filter((appointment) => appointment.communicateStatus !== 'contacted')
                                        .sort((preAppointment, nextAppointment) => +nextAppointment.appointmentDate - +preAppointment.appointmentDate)[0];
        getAppointmentDetail(this.latestContactedAppointment 
                            ? this.latestContactedAppointment.id 
                            : latestReservedAppointment.id).then(res => {
                            : this.latestReservedAppointment.id).then(res => {
            this.appointmentDetail = {
                ...this.appointmentDetail,
                ...res.data
@@ -252,6 +269,19 @@
            this.storeConsultantList();
        });
    }

    cancel() {
        cancelAppointment(this.latestReservedAppointment.id).then(res => {
            this.storeConsultantList();
            this.isVisibleDialog = false;
            this.isCancelPopup = false;
        });
    }

    edit() {
        this.isVisibleDialog = false;
        this.$router.push({path: `/questionnaire/${this.agentInfo.agentNo}`, query: {'edit': 'true'}});
    }
}

</script>

 PAMapp/pages/questionnaire/_agentNo.vue

@@ -92,7 +92,7 @@
        <el-button type="primary"
          :disabled="isDisabledSubmitBtn"
          @click.native="sentDemand">
          送出
          {{isEditBtn ? '更新' : '送出'}}
        </el-button>
      </div>
    </div>
@@ -124,20 +124,32 @@
          </el-button>
        </div>
    </PopUpFrame>

    <PopUpFrame :isOpen.sync="isEditPopup">
      <div class="text--middle mt-30 sendReserve-txt">是否繼續編輯預約單？</div>
      <div class="text--center mdTxt">
        <el-button @click="$router.go(-1)">返回</el-button>
        <el-button @click="isEditPopup = false" type="primary">編輯</el-button>
      </div>
    </PopUpFrame>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'nuxt-property-decorator';
  import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,RegisterInfo } from '~/assets/ts/api/consultant';
  import { getRequestsFromStorage, setRequestsToStorage, getRequestQuestionFromStorage, removeRequestQuestionFromStorage  } from '~/assets/ts/storageRequests';
  import { Gender } from '~/assets/ts/models/enum/Gender';
  import { ContactType } from '~/assets/ts/models/enum/ContactType';
import { Vue, Component, State, Action, Watch } from 'nuxt-property-decorator';
import { addFavoriteConsultant, appointmentDemand, AppointmentParams, AppointmentRequests ,editAppointment,RegisterInfo } from '~/assets/ts/api/consultant';
import { getRequestQuestionFromStorage, getRequestsFromStorage, removeRequestQuestionFromStorage, setRequestsToStorage } from '~/assets/ts/storageRequests';
  import _ from 'lodash';
  import { isLogin } from '~/assets/ts/auth';
import { Consultant } from '~/assets/ts/models/consultant.model';
import { ContactType } from '~/assets/ts/models/enum/ContactType';
import { Gender } from '~/assets/ts/models/enum/Gender';

  @Component
  export default class Questionnaire extends Vue {
    @State('myConsultantList') myConsultantList!: Consultant[];
    @Action storeConsultantList!: () => Promise<number>;

    genderOptions=[
      {
        title:'男性',
@@ -255,6 +267,10 @@

    showDrawer= false;
    sendReserve = false;
    isEditPopup = false;
    isEditBtn = false;

    appointmentId = 0;

    beforeRouteEnter(to: any, from: any, next: any) {
      next(vm => {
@@ -267,6 +283,12 @@
          vm.$router.push('/login');
        }
      })
    }

    async fetch() {
      if (isLogin()) {
        await this.storeConsultantList();
      };
    }

    mounted(): void {
@@ -325,7 +347,12 @@
    }

    sentDemand() {
      if (this.isEditBtn) {
        this.sentEditAppointmentDemand();
      } else {
      addFavoriteConsultant([this.$route.params.agentNo]).then(res => this.sentAppointmentDemand());
      }

    }

    private sentAppointmentDemand() {
@@ -337,6 +364,21 @@
        };

        appointmentDemand(data).then(res => {
            this.sendReserve = true;
            this.myRequest.hopeContactTime = [];
            setRequestsToStorage(this.myRequest);
        });
    }

    private sentEditAppointmentDemand() {
      const info = {
          ...this.myRequest,
          requirement: _.map(this.myRequest.requirement,o=>o).toString(),
          hopeContactTime: this.myRequest.phone && this.phoneValid ? this.getHopeContactTime() :'',
          id: this.appointmentId,
          otherRequirement: null
        }
        editAppointment(info).then(res => {
            this.sendReserve = true;
            this.myRequest.hopeContactTime = [];
            setRequestsToStorage(this.myRequest);
@@ -355,6 +397,71 @@
        this.$router.push('/')
    }

    private getLatestReserved(agentNo) {
      const agentInfo = this.myConsultantList.filter(item => item.agentNo === agentNo);

      const appointmentInfo = agentInfo.length > 0 && agentInfo[0].appointments
        ? agentInfo[0].appointments!
          .filter((appointment) => appointment.communicateStatus !== 'contacted')
          .sort((preAppointment, nextAppointment) => {
              return +nextAppointment.appointmentDate - +preAppointment.appointmentDate
          })[0]
        : null;

      return this.getReservedData(appointmentInfo);
    }

    private getReservedData(appointmentInfo) {
      if (appointmentInfo) {
        const hopeContactTime = appointmentInfo!.hopeContactTime.split("'")
              .filter(item => item && item !== ',');
        this.appointmentId = appointmentInfo.id;
        return {
            age: appointmentInfo.age,
            agentNo: appointmentInfo.agentNo,
            contactType: appointmentInfo.contactType,
            email: appointmentInfo.email || '',
            gender: appointmentInfo.gender,
            hopeContactTime: hopeContactTime.map(item => {
                const info = item.split('、');
                return {
                    selectWeekOptions: info[0].split(','),
                    selectTimesOptions: info[1].split(',')
                }
            }),
            job: appointmentInfo.job,
            phone: appointmentInfo.phone || '',
            requirement: appointmentInfo.requirement.split(',')
          }
      } else {
        return {
          age: '',
          agentNo: '',
          contactType: '',
          email: '',
          gender: '',
          hopeContactTime: [],
          job: '',
          phone: '',
          requirement: []
        }
      }
    }

    @Watch('myConsultantList') onMyConsultantListChange() {
      if (this.isLogin && this.myConsultantList.length > 0) {
          const editAppointment = this.getLatestReserved(this.$route.params.agentNo);

          if (editAppointment.agentNo) {
            this.myRequest = JSON.parse(JSON.stringify(editAppointment));
            if (!this.$route.query || this.$route.query.edit !== 'true') {
              this.isEditPopup = true;
            }
            this.isEditBtn = true;
            return;
          }
      }
    }
  }
</script>

@@ -420,10 +527,6 @@
    margin-top:30px;
    display: flex;
    justify-content: center;
}

.el-button+.el-button{
    margin-left: 0;
}

.datepicker{