TODO 顧問編輯個人帳號資訊-多選樣式修改

HelenHuang

2021-12-30 bcc6976e871d6aa664e301684b7a8871b2d727b7

TODO 顧問編輯個人帳號資訊-多選樣式修改

 PAMapp/components/Ui/UiField.vue

@@ -69,6 +69,7 @@
  }
  .pam-field__content {
    padding-top: 10px;
    display: flex;
  }
}
</style>

 PAMapp/pages/agentInfo/_agentNo.vue

@@ -113,6 +113,15 @@
        </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">
@@ -213,11 +222,14 @@
  fieldInfoTitle = '';
  fieldInfoDesc = '';
  hideReviews = hideReviews ;

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

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

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

  async asyncData(context: Context) {
@@ -225,7 +237,9 @@
    return {
      agentInfo: await myConsultantService.getConsultantDetail(agentNo).then((res) => res)
    }
    
  }
 

  alertAddSuccess(): void {
      this.isAlertAddSuccess = true;
@@ -301,4 +315,9 @@
  display: flex;
  justify-content: center;
}

.pam-field{
  display: flex;
}

</style>

 PAMapp/pages/agentInfo/edit/_agentNo.vue

@@ -92,26 +92,42 @@
      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="flag" label="溝通風格">
        <el-checkbox
            v-model="editInfoValue.communicationStyle"
            :label="communicateStyle"
            :key="index"
            v-for="(communicateStyle, index) in communicationStyleList">
          </el-checkbox>
        </UiField>
        <el-col :span="24" class="pam-field">
          <div class="pam-field__label pam-progress__label">
            <div>
              <div class="pam-field__title">
                <i class="pam-icon icon-flag"
                  ></i>溝通風格  <span class="hint text--bold">(可複選,最多2項)</span>
              </div>
            </div>
            <MultiSelectBtn class="mt-30"
            :mutiSelect.sync="editInfoValue.communicationStyle"
            :options="agentCommunicationStyleList"
            @change="selectCommunicationStyles"
            >
            </MultiSelectBtn>
          </div>
        </el-col>
      </el-row>

      <el-row
        type="flex"
        class="pam-paragraph">
        <UiField icon="flag" label="專長領域">
          <el-checkbox
            v-model="editInfoValue.expertise"
            :label="expert"
            :key="index"
            v-for="(expert, index) in expertList">
          </el-checkbox>
        </UiField>
        <el-col :span="24" class="pam-field">
          <div class="pam-field__label pam-progress__label">
            <div>
              <div class="pam-field__title">
                <i class="pam-icon icon-flag"
                  ></i>專長領域  <span class="hint text--bold">(可複選)</span>
              </div>
            </div>
            <MultiSelectBtn class="mt-30"
            :mutiSelect.sync="editInfoValue.expertise"
            :options="agentExpertList"
            >
            </MultiSelectBtn>
          </div>
        </el-col>
      </el-row>

      <el-row
@@ -220,8 +236,50 @@
  };
  
  communicationStyleList: string[] = agentCommunicationStyleList;
  expertList: string[] = agentExpertList;
  role           = Role;
  agentExpertList = [
    {
        title:'健康與保障',
        label:'健康與保障'
    },
    {
        title:'子女教育',
        label:'子女教育'
    },
    {
        title:'資產規劃',
        label:'資產規劃'
    },
    {
        title:'樂活退休',
        label:'樂活退休'
    },
    {
        title:'保單健檢/規劃',
        label:'保單健檢/規劃'
    },
    {
        title:'分紅保單',
        label:'分紅保單'
    }];

  agentCommunicationStyleList = [
    {
        title:'謹慎務實',
        label:'謹慎務實'
    },
    {
        title:'明快主動',
        label:'明快主動'
    },
    {
        title:'耐心傾聽',
        label:'耐心傾聽'
    },
    {
        title:'健談風趣',
        label:'健談風趣'
    }];

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

@@ -282,6 +340,12 @@
    this.isInfoUpdate = false
    this.$router.push(`/agentInfo/${this.agentInfo.agentNo}`);
    }

  selectCommunicationStyles(): void {
    if (this.editInfoValue.communicationStyle.length > 2) {
            this.editInfoValue.communicationStyle.shift();
        }
  }
  alertFieldInfo(field: string): void {
    this.isAlertFieldInfo = true;
    switch(field) {
@@ -305,9 +369,8 @@
                        && this.editInfoValue.experiences
                        && this.editInfoValue.awards
                        && this.editInfoValue.seniorityYear
                        && this.editInfoValue.seniorityMonth
                        && this.editInfoValue.expertise
                        && this.editInfoValue.communicationStyle;
                        && this.editInfoValue.expertise.length
                        && this.editInfoValue.communicationStyle.length;
      return !isFormValid
  }
}
@@ -372,4 +435,7 @@
  width       : 50px;
  margin-right: 5px;
}
.el-input--suffix .el-input__inner {
  padding-right: 20px;
}
</style>