[ Update ] : 修正錯誤訊息 css ，新增顧問登入查看帳號資訊

劉鈞霖

2021-12-01 a7b7bc7f3a29dd6d435ff3320211e7edbba81bdf

[ Update ] : 修正錯誤訊息 css ，新增顧問登入查看帳號資訊

 PAMapp/assets/scss/vendors/elementUI/_messageBox.scss

@@ -7,15 +7,27 @@
        flex-direction: column;
        justify-content: space-between;
        width:300px;
        min-height: 150px;
        max-height: 300px;
        .el-message-box__content{
            padding: 15px;
            font-size: 18px;
            .message-header{
              color: $PRIMARY_BLACK;
              text-align: center;
              font-size: 20px;
              font-weight: bolder;
            }
            .message-content{
              max-height: 150px;
              overflow: auto;
              margin-top: 10px;
              color: $PRIMARY_BLACK;
              letter-spacing: 2px;
            }
            .el-message-box__message p{
                text-align: center;
                color: $PRIMARY_BLACK;
                letter-spacing: 2px;
                font-size: 20px;
              text-align: center;
              font-size: 20px;
              font-weight: bolder;
              color: $PRIMARY_BLACK;
            }
        }


 PAMapp/assets/ts/api/share.ts

@@ -47,15 +47,14 @@
  if(!_.includes(notRequireInterceptorErrorUrl,error.config.url)){
    switch (error.response.status) {
      case 401:
        ErrorMessageBox('登入逾時').then(()=>{
          window.$nuxt.$store.commit('localStorage/storageClear');
        Promise.all([ErrorMessageBox('登入逾時'),window.$nuxt.$store.dispatch('localStorage/actionStorageClear')]).then(()=>{
          location.href='/';
        });
        break;

      default:
        ErrorMessageBox('', error);
        break;
    }

  }
};

 PAMapp/assets/ts/errorService.ts

@@ -8,7 +8,8 @@
  return MessageBox({
    message: errorMsg
              ? errorMsg
              : `系統發生錯誤: ${errorObj?.response?.status} <p/><p/> ${errorObj?.response?.data?.detail}`,
              : `<div class="message-header"> 系統發生錯誤: ${errorObj?.response?.status} </div>
                  <div class="message-content">${errorObj?.response?.data?.detail}</div>`,
    dangerouslyUseHTMLString: true,
    showClose:false,
    showConfirmButton:true,

 PAMapp/components/BackActionBar.vue

@@ -34,7 +34,7 @@
          featureLabel = '我的顧問清單';
          break;
        case 'agentInfo':
          featureLabel = '業務員資訊'
          featureLabel = _.isEqual(this.currentRole,Role.ADMIN) ? '查看帳號資訊' : '業務員資訊'
          break;
        default:
          featureLabel = '回首頁';

 PAMapp/components/NavBar.vue

@@ -45,6 +45,7 @@
    @roleStorage.Mutation storageClearRecommendConsultant!: () => void;
    @roleStorage.Getter idToken!: string | null;
    @roleStorage.Getter currentRole!: string | null;
    @roleStorage.Getter consultantId!: string | null;

    navBarList = [{
        authorityOfRoleList: [Role.NOT_LOGIN],
@@ -58,7 +59,7 @@
      },
      {
        authorityOfRoleList:[Role.ADMIN],
        routeUrl: '/consultantAccountSetting',
        routeUrl: '/agentInfo/',
        title: '查看帳號資訊',
      },
      {
@@ -96,15 +97,17 @@

    routerNavigateTo(url: string): void {
      (this.$refs.dropdown as any).hide();
      _.isEqual(url, '') ? this.fakeLogout() : this.$router.push(url);
      _.isEqual(url,'')
        ? this.logout()
        : this.$router.push(_.isEqual(url,'/agentInfo/') ? url+this.consultantId :url);
    }

    pushRouterByLoginRole(): void {
      const link = _.isEqual(this.currentRole, Role.ADMIN) ? '/myAppointmentList/appointmentList' : '/';
      this.$router.push(link);
    }
    // TODO: 僅OTP認證開發前 暫時使用
    fakeLogout(): void {

    logout(): void {
      this.storageClear();
      this.storageClearQuickFilter();
      this.storageClearRecommendConsultant();

 PAMapp/pages/agentInfo/_agentNo.vue

@@ -144,7 +144,9 @@
        </UiField>
      </el-row>


      <AddAndReservedBtns
        v-if="currentRole!==role.ADMIN"
        :cusClass="'pam-paragraph'"
        :agentInfo="agentInfo"
        @openPopUp="alertAddSuccess"
@@ -182,11 +184,15 @@

<script lang="ts">
import { Context } from '@nuxt/types';
import { namespace } from 'nuxt-property-decorator';
import { Vue, Component } from 'vue-property-decorator';
import { getConsultantDetail } from '~/assets/ts/api/consultant';

import { Role } from '~/assets/ts//models/enum/Role';
const roleStorage = namespace('localStorage');
@Component
export default class AgentInfoComponent extends Vue {
  @roleStorage.Getter currentRole!:string|null;
  role = Role;
  agentInfo!: AgentInfo;
  isAlertAddSuccess = false;
  isAlertFieldInfo = false;

 PAMapp/pages/consultantLogin/index.vue

@@ -69,7 +69,7 @@
  export default class ConsultantLogin extends Vue {
    @roleStorage.Mutation storageIdToken!: (token: string) => void;
    @roleStorage.Mutation storageRole!: (role: string) => void;

    @roleStorage.Mutation storageConsultantId!:(id:string) => void;
    isRememberUserName = false;
    isShowPassword = false;
    imgSrc = '';
@@ -126,6 +126,7 @@
      logInToConsultant(this.consultantDto).then(res => {
        this.storageIdToken(res.data.id_token);
        this.storageRole(Role.ADMIN);
        this.storageConsultantId(this.consultantDto.username)
        this.storeUserName();
        this.$router.push('/myAppointmentList/appointmentList');
      }).catch((error:AxiosError)=>{
@@ -139,8 +140,9 @@
          const errorMsg = error.response.data.detail;
          ErrorMessageBox(errorMsg);
          break;

        default:
          ErrorMessageBox();
          ErrorMessageBox('',error);
          break;
      }
    }

 PAMapp/pages/login/index.vue

@@ -504,8 +504,7 @@
  private checkHttpErrorStatus(error:any):void{
    switch (error.response.status) {
        case 401:
          const errorMsg = error.response.data.detail;
          ErrorMessageBox(errorMsg);
          ErrorMessageBox('',error);
          break;
        case 403:
          this.registerDialogVisible = true;
@@ -517,7 +516,7 @@
          }, 1000);
          break;
        default:
          ErrorMessageBox();
          ErrorMessageBox('',error);
          break;
      }
  }

 PAMapp/store/localStorage.ts

@@ -1,9 +1,10 @@
import { Selected } from '~/components/QuickFilter/QuickFilterSelector.vue';
import { Module, Mutation, VuexModule } from 'vuex-module-decorators';
import { Module, Mutation, VuexModule ,Action } from 'vuex-module-decorators';
@Module
export default class LocalStorage extends VuexModule {
  id_token = localStorage.getItem('id_token');
  role_State= localStorage.getItem('current_role');
  current_role= localStorage.getItem('current_role');
  consultant_id = localStorage.getItem('consultant_id');
  quickFilterSelectedItem = localStorage.getItem('quickFilter');
  recommendConsultantItem = localStorage.getItem('recommendConsultantItem');

@@ -12,12 +13,18 @@
  };

  get currentRole(): string|null {
    return this.role_State;
    return this.current_role;
  };

  get consultantId():string|null{
    return this.consultant_id;
  }

  get quickFilterSelectedData(): Selected[] {
    return JSON.parse(this.quickFilterSelectedItem || '[]') as Selected[];
  }



  @Mutation storageIdToken(token: string): void {
    localStorage.setItem('id_token', token);
@@ -26,8 +33,13 @@

  @Mutation storageRole(role:string): void {
    localStorage.setItem('current_role', role);
    this.role_State = localStorage.getItem('current_role');
    this.current_role = localStorage.getItem('current_role');
  };

  @Mutation storageConsultantId(id:string):void{
    localStorage.setItem('consultant_id', id);
    this.consultant_id = localStorage.getItem('consultant_id');
  }

  @Mutation storageQuickFilter(selected: string): void {
    localStorage.setItem('quickFilter', selected);
@@ -44,9 +56,12 @@
    localStorage.removeItem('userInfo');
    localStorage.removeItem('id_token');
    localStorage.removeItem('current_role');
    localStorage.removeItem('consultant_id');
    this.id_token = localStorage.getItem('id_token');
    this.role_State = localStorage.getItem('current_role');
    this.current_role = localStorage.getItem('current_role');
    this.consultant_id = localStorage.getItem('consultant_id');
  }


  @Mutation storageClearQuickFilter() {
    localStorage.removeItem('quickFilter');
@@ -58,4 +73,8 @@
    this.recommendConsultantItem = localStorage.getItem('recommendConsultantItem');
  }

  @Action actionStorageClear(): void {
    this.context.commit("storageClear");
  }

}