From bcc6976e871d6aa664e301684b7a8871b2d727b7 Mon Sep 17 00:00:00 2001
From: HelenHuang <LinHuang@pollex.com.tw>
Date: 星期四, 30 十二月 2021 15:10:38 +0800
Subject: [PATCH] TODO 顧問編輯個人帳號資訊-多選樣式修改

---
 PAMapp/components/Ui/UiField.vue         |    1 
 PAMapp/pages/agentInfo/_agentNo.vue      |   23 +++++++
 PAMapp/pages/agentInfo/edit/_agentNo.vue |  106 ++++++++++++++++++++++++++++------
 3 files changed, 108 insertions(+), 22 deletions(-)

diff --git a/PAMapp/components/Ui/UiField.vue b/PAMapp/components/Ui/UiField.vue
index df98f3c..7e8a8c9 100644
--- a/PAMapp/components/Ui/UiField.vue
+++ b/PAMapp/components/Ui/UiField.vue
@@ -69,6 +69,7 @@
   }
   .pam-field__content {
     padding-top: 10px;
+    display: flex;
   }
 }
 </style>
diff --git a/PAMapp/pages/agentInfo/_agentNo.vue b/PAMapp/pages/agentInfo/_agentNo.vue
index 83feda0..7e6dfc0 100644
--- a/PAMapp/pages/agentInfo/_agentNo.vue
+++ b/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,8 +237,10 @@
     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>
diff --git a/PAMapp/pages/agentInfo/edit/_agentNo.vue b/PAMapp/pages/agentInfo/edit/_agentNo.vue
index 73029bf..c1e9801 100644
--- a/PAMapp/pages/agentInfo/edit/_agentNo.vue
+++ b/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>

--
Gitblit v1.8.0