Merge branch 'sit' into uat

wayne

2022-02-17 a3716f72066d25d745f4d5103ff23a553c3e102b

 PAMapp/pages/agentInfo/_agentNo.vue

@@ -3,14 +3,18 @@
      <el-row
        type="flex"
        justify="center">
        <UiAvatar :size="150" :fileName="agentInfo.img"></UiAvatar>
        <UiAvatar
          :size="150"
          :agentNo="agentInfo.agentNo">
        </UiAvatar>
      </el-row>

      <el-row
        type="flex"
        class="pt-10"
        justify="center"
        align="middle">
        align="middle" v-if="!hideReviews">
        <!-- TODO:隱藏滿意度 -->
          <i class="pam-icon icon--primary icon-star"></i>
          <h3 class="mdTxt">{{ agentInfo.avgScore }}</h3>
      </el-row>
@@ -20,6 +24,15 @@
        class="pt-10"
        justify="center">
        <h3 class="mdTxt">{{ agentName }}</h3>
      </el-row>

      <el-row
        v-if="currentRole === role.ADMIN"
        type="flex"
        class="pam-paragraph">
        <UiField :span="12" icon="phone" label="手機號碼">
          {{ agentInfo.phoneNumber }}
        </UiField>
      </el-row>

      <el-row
@@ -34,7 +47,7 @@
        type="flex"
        class="pam-paragraph">
        <UiField icon="company" label="服務地區">
          {{ agentInfo.serveArea }}
          {{ agentInfo.serveArea | toServeArea }}
        </UiField>
      </el-row>

@@ -109,12 +122,21 @@
        </el-col>
      </el-row>

      <div class="consultant-edit-btn">
        <UiField icon="flag" label="溝通風格">
          <div class="text--orange bold pr-10 "
            v-for="(communicationStyle, index) in displayCommunicationStyleList"
            :key="index">
              #{{ communicationStyle }}</div>
        </UiField>
    </div>

      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="flag" label="專長領域">
          <div class="pam-field-experts">
            <div class="text--orange bold pr-10" v-for="(expert, index) in agentInfo.expertises" :key="index">
            <div class="text--orange bold pr-10" v-for="(expert, index) in agentInfo.expertise" :key="index">
              #{{ expert }}
            </div>
          </div>
@@ -124,7 +146,7 @@
      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="comment" label="個人理念">
        <UiField icon="comment" label="個人理念" class="agent-info-textarea">
          {{ agentInfo.concept }}
        </UiField>
      </el-row>
@@ -132,9 +154,9 @@
      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="school" label="個人背景">
          <span v-for="(experience, index) in agentInfo.experiences" :key="index">
            {{ experience }}<span v-if="index !== agentInfo.experiences.length - 1">, </span>
        <UiField icon="school" label="個人背景" class="agent-info-textarea">
          <span>
            {{ agentInfo.experiences }}
          </span>
        </UiField>
      </el-row>
@@ -142,7 +164,7 @@
      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="trophy" label="得獎經歷">
        <UiField icon="trophy" label="得獎經歷" class="agent-info-textarea">
          {{ agentInfo.awards }}
        </UiField>
      </el-row>
@@ -181,6 +203,9 @@
            </div>
        </div>
    </PopUpFrame>
    <div class="consultant-edit-btn" v-if="currentRole === role.ADMIN">
      <el-button type="primary" @click.native="$router.push(`/agentInfo/edit/${agentInfo.agentNo}`)">編輯帳戶資訊</el-button>
    </div>
    </div>
</template>

@@ -188,33 +213,39 @@
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';

import myConsultantService from '~/shared/services/my-consultant.service';
import { AgentInfo } from '~/shared/models/agent-info.model';
import { hideReviews } from '~/shared/const/hide-reviews';
import { Role } from '~/shared/models/enum/Role';

const roleStorage = namespace('localStorage');

@Component
export default class AgentInfoComponent extends Vue {

  @roleStorage.Getter currentRole!:string|null;
  role = Role;

  agentInfo!: AgentInfo;
  role = Role;
  isAlertAddSuccess = false;
  isAlertFieldInfo = false;
  fieldInfoTitle = '';
  fieldInfoDesc = '';
  hideReviews = hideReviews ;

  //////////////////////////////////////////////////////////////////////

  async asyncData(context: Context) {
    const agentNo = context.route.params.agentNo;
    let agentInfo = {};
    await getConsultantDetail(agentNo).then((res) => agentInfo = res.data )
    return {
      agentInfo
      agentInfo: await myConsultantService.getConsultantDetail(agentNo).then((res) => res)
    }
  }

  get agentName(): string {
    return `${this.agentInfo.name}(${this.agentInfo.role})`;
  }
  //////////////////////////////////////////////////////////////////////

  alertAddSuccess() {
  alertAddSuccess(): void {
      this.isAlertAddSuccess = true;
  }

@@ -231,27 +262,17 @@
        break;
    }
  }

  get agentName(): string {
    return `${this.agentInfo.name}(${this.agentInfo.role})`;
  }

  get displayCommunicationStyleList(): string[] {
    return this.agentInfo.communicationStyle.split('、').filter((item) => item);
  }

}

interface AgentInfo {
  name            : string;
  agentNo         : string;
  role            : string;
  img             : string;
  avgScore        : number;
  title           : string;
  phoneNumber     : string;
  serveArea       : string;
  companyAddress  : string;
  lastestLoginTime: Date | null;
  seniority       : string;
  suitability     : number;
  evaluation      : number;
  expertises      : string[];
  concept         : string;
  experiences     : string[];
  awards          : string;
}
</script>

<style lang="scss">
@@ -303,5 +324,16 @@
  flex-wrap: wrap;
  line-height: 24px;
}
.consultant-edit-btn{
  display: flex;
  justify-content: center;
}

.pam-field{
  display: flex;
}
.agent-info-textarea{
  word-break: break-all;
  word-wrap: break-word;
}
</style>