From be45e7dffcf53381b8bd8a562eb5fb8474470763 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期二, 28 十二月 2021 17:01:06 +0800
Subject: [PATCH] refactor: agentInfo/edit
---
PAMapp/pages/agentInfo/edit/_agentNo.vue | 301 +++++++++++++++----------------------------------
PAMapp/shared/const/agent-communication-style-list.ts | 1
PAMapp/shared/const/agent-expert-list.ts | 1
3 files changed, 96 insertions(+), 207 deletions(-)
diff --git a/PAMapp/pages/agentInfo/edit/_agentNo.vue b/PAMapp/pages/agentInfo/edit/_agentNo.vue
index 61aa91c..e5c3bbf 100644
--- a/PAMapp/pages/agentInfo/edit/_agentNo.vue
+++ b/PAMapp/pages/agentInfo/edit/_agentNo.vue
@@ -56,13 +56,13 @@
<UiField :span="12" icon="calender" label="����風" style="display:flex">
<el-input v-model="editInfoValue.seniorityYear" class="seniority-input"></el-input>撟�
<el-select style="width:60px" v-model="editInfoValue.seniorityMonth" class="seniority-input">
- <el-option
+ <el-option
v-for="(month) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
:value="month"
:key="month">
{{ month }}
- </el-option>
- </el-select>���
+ </el-option>
+ </el-select>���
</UiField>
</el-row>
@@ -86,29 +86,33 @@
</div>
</el-col>
</el-row>
+
<el-row
type="flex"
class="pam-paragraph">
- <el-checkbox
+ <UiField icon="flag" label="皞�◢�">
+ <el-checkbox
v-model="editInfoValue.communicationStyle"
- :label="communicateStyle"
- :key="index"
+ :label="communicateStyle"
+ :key="index"
v-for="(communicateStyle, index) in communicationStyleList">
</el-checkbox>
-
+ </UiField>
+
</el-row>
<el-row
type="flex"
class="pam-paragraph">
<UiField icon="flag" label="撠����">
- <el-checkbox
- v-model="editInfoValue.expert"
- :label="item.name"
- :key="item.id"
- v-for="item in expertList">
+ <el-checkbox
+ v-model="editInfoValue.expertise"
+ :label="expert"
+ :key="index"
+ v-for="(expert, index) in expertList">
</el-checkbox>
</UiField>
</el-row>
+
<el-row
type="flex"
class="pam-paragraph">
@@ -168,12 +172,12 @@
import { AgentInfo } from '~/shared/models/agent-info.model';
import { hideReviews } from '~/shared/const/hide-reviews';
-import { Role } from '~/shared/models/enum/Role';
import { AgentInfoSetting } from '~/shared/models/account.model';
+import { Role } from '~/shared/models/enum/Role';
+import { agentExpertList } from '~/shared/const/agent-expert-list';
+import { agentCommunicationStyleList } from '~/shared/const/agent-communication-style-list';
const localStorage = namespace('localStorage');
-
-const testImgBase64 =""
@Component
export default class AgentInfoComponent extends Vue {
@@ -182,17 +186,16 @@
currentRole!:string | null;
_agentInfoSetting!: AgentInfoSetting;
- agentInfo!:AgentInfo
- role = Role;
- isAlertFieldInfo = false;
- fieldInfoTitle = '';
- fieldInfoDesc = '';
- hideReviews = hideReviews ;
+ agentInfo! : AgentInfo
+ fieldInfoDesc : string = '';
+ fieldInfoTitle : string = '';
+ hideReviews : boolean = hideReviews ;
+ isAlertFieldInfo: boolean = false;
editInfoValue = {
agentNo : '',
name : '',
- expert : [] as string[],
+ expertise : [] as string[],
title : '',
serveArea : '',
companyAddress : '',
@@ -202,43 +205,11 @@
experiences : '',
awards : '',
communicationStyle: [] as string[],
- }
-
- formValidStatus = {
- name : true,
- title : true,
- companyAddress: true,
- serveArea : true,
- seniorityYear : true,
- seniorityMonth: true,
- expert : true,
- concept : true,
- experience : true,
- awards : true,
- communicationStyle:true
};
- expertList=[
- {
- name:'�摨瑁����'
- },
- {
- name:'摮戊��'
- },
- {
- name:'鞈閬��'
- },
- {
- name:'璅暑��隡�'
- },
- {
- name:'靽�瑼�/閬��'
- },
- {
- name:'����'}
- ];
-
- communicationStyleList: string[] = ['雓寞��祕', '��翰銝餃��', '���', '�隢◢頞�'];
+ communicationStyleList: string[] = agentCommunicationStyleList;
+ expertList: string[] = agentExpertList;
+ role = Role;
//////////////////////////////////////////////////////////////////////
@@ -250,7 +221,37 @@
}
mounted(){
- this.setAgentInfo(this.agentInfo);
+ this.setAgentInfo(this.agentInfo);
+ }
+
+ private setAgentInfo(agentInfo: AgentInfo): void {
+ const [agentYear, _yearUnit , agentMonth, _monthUnit] = agentInfo.seniority.split(" ");
+
+ this._agentInfoSetting = {
+ agentNo : agentInfo.agentNo||'',
+ name : agentInfo.name || '',
+ expertise : agentInfo.expertise || [],
+ title : agentInfo.title || '',
+ role : agentInfo.role||'',
+ serveArea : agentInfo.serveArea || '',
+ gender : agentInfo.gender||'',
+ phoneNumber : agentInfo.phoneNumber||'',
+ companyAddress : agentInfo.companyAddress || '',
+ seniorityYear : agentYear? +agentYear : 0,
+ seniorityMonth : agentMonth ? +agentMonth : 0,
+ concept : agentInfo.concept || '',
+ experiences : agentInfo.experiences || '',
+ awards : agentInfo.awards || '',
+ communicationStyle: agentInfo.communicationStyle || '',
+ photoBase64 : '',
+ };
+
+ this.editInfoValue = {
+ ...this._agentInfoSetting,
+ expertise : _.cloneDeep(this._agentInfoSetting.expertise),
+ // TODO: 蝣箄��垢甇斗���垢���隞�" , "���� [Tomas, 2021/12/28]
+ communicationStyle : this._agentInfoSetting.communicationStyle.split('��')
+ }
}
//////////////////////////////////////////////////////////////////////
@@ -271,158 +272,44 @@
////////////////////////////////////////////////////////////
- private setAgentInfo(agentInfo: AgentInfo): void {
- const [agentYear, _yearUnit , agentMonth, _monthUnit] = agentInfo.seniority.split(" ");
-
- this._agentInfoSetting = {
- agentNo : agentInfo.agentNo||'',
- name : agentInfo.name || '',
- expertise : agentInfo.expertise || [],
- title : agentInfo.title || '',
- role : agentInfo.role||'',
- serveArea : agentInfo.serveArea || '',
- gender : agentInfo.gender||'',
- phoneNumber : agentInfo.phoneNumber||'',
- companyAddress : agentInfo.companyAddress || '',
- seniorityYear : agentYear? +agentYear : 0,
- seniorityMonth : agentMonth ? +agentMonth: 0,
- concept : agentInfo.concept || '',
- experiences : agentInfo.experiences || '',
- awards : agentInfo.awards || '',
- communicationStyle: agentInfo.communicationStyle || '',
- photoBase64 : '',
- };
- this.editInfoValue.agentNo
- this.editInfoValue.name = this._agentInfoSetting.name!;
- this.editInfoValue.title = this._agentInfoSetting.title!;
- this.editInfoValue.serveArea = this._agentInfoSetting.serveArea
- this.editInfoValue.companyAddress = this._agentInfoSetting.companyAddress;
- this.editInfoValue.seniorityYear = this._agentInfoSetting.seniorityYear;
- this.editInfoValue.seniorityMonth = this._agentInfoSetting.seniorityMonth;
- this.editInfoValue.expert = _.cloneDeep(this._agentInfoSetting.expertise);
- this.editInfoValue.concept = this._agentInfoSetting.concept;
- this.editInfoValue.experiences = this._agentInfoSetting.experiences;
- this.editInfoValue.awards = this._agentInfoSetting.awards;
- this.editInfoValue.communicationStyle = this._agentInfoSetting.communicationStyle.split(',');
-
- }
-
- get nameValid():boolean {
- this.formValidStatus.name = this.editInfoValue.name ? true : false;
- return this.formValidStatus.name;
- }
-
- get titleValid():boolean{
- this.formValidStatus.title = this.editInfoValue.title ? true : false ;
- return this.formValidStatus.title;
- }
-
- get companyAddressValid() : boolean{
- this.formValidStatus.companyAddress = this.editInfoValue.companyAddress ? true : false;
- return this.formValidStatus.companyAddress;
- }
-
- get serveAreaValid():boolean{
- this.formValidStatus.serveArea = this.editInfoValue.serveArea ? true : false;
- return this.formValidStatus.serveArea;
- }
-
- get conceptValid():boolean{
- this.formValidStatus.concept = this.editInfoValue.concept ? true : false;
- return this.formValidStatus.concept;
- }
-
- get experienceValid():boolean{
- this.formValidStatus.experience = this.editInfoValue.experiences ? true : false;
- return this.formValidStatus.experience;
- }
-
- get awardsValid():boolean{
- this.formValidStatus.awards = this.editInfoValue.awards ? true : false ;
- return this.formValidStatus.awards;
- }
-
- get seniorityYearValid():boolean{
- this.formValidStatus.seniorityYear = this.editInfoValue.seniorityYear ? true : false;
- return this.formValidStatus.seniorityYear;
- }
-
- get seniorityMonthValid():boolean{
- this.formValidStatus.seniorityMonth = this.editInfoValue.seniorityMonth ? true : false;
- return this.formValidStatus.seniorityYear;
- }
-
- get communicationStyleValid():boolean{
- this.formValidStatus.communicationStyle = this.editInfoValue.communicationStyle ? true : false;
- return this.formValidStatus.seniorityMonth;
- }
-
- get expertValid():boolean{
- this.formValidStatus.expert = this.editInfoValue.expert ? true : false;
- return this.formValidStatus.expert;
- }
-
get isSubmitBtnDisabled(): boolean {
- const isFormValid = this.formValidStatus.name
- && this.formValidStatus.title
- && this.formValidStatus.companyAddress
- && this.formValidStatus.serveArea
- && this.formValidStatus.concept
- && this.formValidStatus.experience
- && this.formValidStatus.awards
- && this.formValidStatus.seniorityYear
- && this.formValidStatus.seniorityMonth
- && this.formValidStatus.expert
- && this.formValidStatus.communicationStyle;
- return !isFormValid
- }
-
-
-
- editAgentInfoSetting(): void {
- const editSettingInfo: any = {
- agentNo :this.agentInfo.agentNo,
- name : this.editInfoValue.name,
- expertise : this.editInfoValue.expert,
- title : this.editInfoValue.title,
- role : this.agentInfo.role,
- serveArea : this.editInfoValue.serveArea,
- gender : this.agentInfo.gender,
- phoneNumber : this.agentInfo.phoneNumber,
- companyAddress : this.editInfoValue.companyAddress,
- seniorityYear : this.editInfoValue.seniorityYear,
- seniorityMonth : this.editInfoValue.seniorityMonth,
- concept : this.editInfoValue.concept,
- experiences : this.editInfoValue.experiences,
- awards : this.editInfoValue.awards,
- communicationStyle: this.editInfoValue.communicationStyle.join(','),
- photoBase64 : ''
- }
+ const isFormValid = this.editInfoValue.name
+ && this.editInfoValue.title
+ && this.editInfoValue.companyAddress
+ && this.editInfoValue.serveArea
+ && this.editInfoValue.concept
+ && this.editInfoValue.experiences
+ && this.editInfoValue.awards
+ && this.editInfoValue.seniorityYear
+ && this.editInfoValue.seniorityMonth
+ && this.editInfoValue.expertise
+ && this.editInfoValue.communicationStyle;
+ return !isFormValid
+ }
- accountSettingService.editAgentInfoSetting(editSettingInfo).then((res: AgentInfoSetting) => {
- console.log(editSettingInfo)
- });
- }
- // handleRemove(file) {
- // console.log(file);
- // }
- // handlePictureCardPreview(file) {
- // this.photoBase64 = file.url;
- // this.dialogVisible = true;
- // }
- // handleDownload(file) {
- // console.log(file);
- // }
-
+
+
+ editAgentInfoSetting(): void {
+ const editSettingInfo: any = {
+ ...this.editInfoValue,
+ communicationStyle: this.editInfoValue.communicationStyle.join('��'),
+ photoBase64 : '',
+ }
+
+ accountSettingService.editAgentInfoSetting(editSettingInfo).then((res: AgentInfoSetting) => {
+ console.log(editSettingInfo)
+ });
+ }
+
}
</script>
<style lang="scss">
.pam-icon {
- font-size: 15px;
+ font-size : 15px;
padding-right: 8px;
- color: $PRUDENTIAL_GREY;
+ color : $PRUDENTIAL_GREY;
&.icon--primary {
color: $PRIMARY_RED;
}
@@ -437,9 +324,9 @@
font-size: 12px;
}
.pam-field__title {
- font-size: 16px;
+ font-size : 16px;
font-weight: bold;
- display: flex;
+ display : flex;
align-items: center;
}
}
@@ -458,13 +345,13 @@
}
.pam-field-experts {
- display: flex;
+ display : flex;
flex-wrap: wrap;
}
.pam-progress__label {
justify-content: space-between;
- flex-wrap: wrap;
+ flex-wrap : wrap;
line-height: 24px;
}
.account-confirm{
@@ -473,8 +360,8 @@
}
.seniority-input{
- width:50px;
+ width : 50px;
margin-right: 5px;
}
-</style>
\ No newline at end of file
+</style>
diff --git a/PAMapp/shared/const/agent-communication-style-list.ts b/PAMapp/shared/const/agent-communication-style-list.ts
new file mode 100644
index 0000000..75c41a7
--- /dev/null
+++ b/PAMapp/shared/const/agent-communication-style-list.ts
@@ -0,0 +1 @@
+export const agentCommunicationStyleList = ['雓寞��祕', '��翰銝餃��', '���', '�隢◢頞�'];
diff --git a/PAMapp/shared/const/agent-expert-list.ts b/PAMapp/shared/const/agent-expert-list.ts
new file mode 100644
index 0000000..2926d45
--- /dev/null
+++ b/PAMapp/shared/const/agent-expert-list.ts
@@ -0,0 +1 @@
+export const agentExpertList = ['�摨瑁����', '摮戊��', '鞈閬��', '璅暑��隡�', '靽�瑼�/閬��', '����'];
--
Gitblit v1.8.0