From 1ac23eec19591f05ead299ec489e7f025a2c7627 Mon Sep 17 00:00:00 2001 From: HelenHuang <LinHuang@pollex.com.tw> Date: 星期四, 31 三月 2022 11:45:04 +0800 Subject: [PATCH] Fixed : UiDatePicker - icon 位置修改 --- PAMapp/pages/agentInfo/edit/_agentNo.vue | 100 +++++++++++++++++++++++++++++++++---------------- 1 files changed, 67 insertions(+), 33 deletions(-) diff --git a/PAMapp/pages/agentInfo/edit/_agentNo.vue b/PAMapp/pages/agentInfo/edit/_agentNo.vue index 1ed9e6c..e004b9a 100644 --- a/PAMapp/pages/agentInfo/edit/_agentNo.vue +++ b/PAMapp/pages/agentInfo/edit/_agentNo.vue @@ -1,5 +1,5 @@ <template> - <div class="edit-agent-info-page"> + <div class="edit-agent-info-page" v-if="!!agentInfo"> <el-row type="flex" @@ -68,6 +68,27 @@ </el-col> </el-row> + <el-row + type="flex" + class="pam-paragraph"> + <el-col :span="24" class="pam-field"> + <div class="pam-field__label pam-progress__label"> + <div> + <div class="pam-field__title mb-10"> + <i class="pam-icon icon-comment" + ></i>靽∠拳 + <span class="hint text--bold" v-show="!emailValid">靽∠拳�撘�炊</span> + <span class="hint text--bold" v-show="editInfoValue.email.length === 0">靽∠拳�敹‵</span> + </div> + </div> + <el-input + v-model="editInfoValue.email" + :class="{'is-invalid': !emailValid}" + ></el-input> + </div> + </el-col> + </el-row> + <el-row type="flex" @@ -104,18 +125,12 @@ <UiField :span="12" icon="time" label="��敺�����"> {{ agentInfo.latestLoginTime | formatDate }} </UiField> - <UiField :span="12" icon="calender" label="����風"> - <div class="mt-10" style="display: flex; align-items: center"> - <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 - 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>��� - </div> + <UiField :span="12" icon="calender" label="������" class="pam-editInfo-date-picker"> + <UiDatePicker + class="mt-10" + :defaultValue ="agentInfo.entryDate" + @changeDate="onChangeDate($event)" + ></UiDatePicker> </UiField> </el-row> @@ -263,14 +278,15 @@ const loginStore = namespace('login.store'); @Component -export default class AgentInfoComponent extends Vue { +export default class AgentInfoEditComponent extends Vue { - @localStorageTest.State('current_role') + @localStorageTest.State + current_role: any; @loginStore.Action - updateConsultantDetail!: (agentInfo: AgentInfo) => AgentInfo; + updateConsultantDetail!: (agentNo: string) => Promise<AgentInfo>; - _agentInfoSetting!: AgentInfoSetting; + defaultAgentInfoSetting!: AgentInfoSetting; agentInfo! : AgentInfo fieldInfoDesc : string = ''; fieldInfoTitle : string = ''; @@ -286,14 +302,14 @@ title : '', serveArea : [] as string[], companyAddress : '', - seniorityYear : 1, - seniorityMonth : 0, concept : '', experiences : '', awards : '', communicationStyle: [] as string[], photoBase64 : '', - phoneNumber : '' + phoneNumber : '', + email : '', + entryDate : '', }; communicationStyleList: string[] = agentCommunicationStyleList; @@ -357,8 +373,8 @@ } private setAgentInfo(agentInfo: AgentInfo): void { - const [agentYear, _yearUnit , agentMonth, _monthUnit] = agentInfo.seniority.split(" "); - this._agentInfoSetting = { + // const [agentYear, _yearUnit , agentMonth, _monthUnit] = agentInfo.seniority.split(" "); + this.defaultAgentInfoSetting = { agentNo : agentInfo.agentNo||'', name : agentInfo.name || '', expertise : agentInfo.expertise || [], @@ -368,22 +384,23 @@ 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 : '' + photoBase64 : '', + email : agentInfo.email || '', + entryDate : agentInfo.entryDate || '', }; this.editInfoValue = { - ...this._agentInfoSetting, - expertise : _.cloneDeep(this._agentInfoSetting.expertise), + ...this.defaultAgentInfoSetting, + expertise : _.cloneDeep(this.defaultAgentInfoSetting.expertise), // TODO: 蝣箄��垢甇斗���垢���隞�" , "���� [Tomas, 2021/12/28] - communicationStyle : this._agentInfoSetting.communicationStyle.split('��'), + communicationStyle : this.defaultAgentInfoSetting.communicationStyle.split('��'), } } + ////////////////////////////////////////////////////////////////////// @@ -392,11 +409,16 @@ ...this.editInfoValue, communicationStyle: this.editInfoValue.communicationStyle.join('��'), serveArea: this.editInfoValue.serveArea.join('��'), - } + }; + accountSettingService.editAgentInfoSetting(editSettingInfo).then((res: AgentInfoSetting) => { - this.updateConsultantDetail(editSettingInfo.agentNo); this.isInfoUpdate = true; + this.updateConsultantDetail(editSettingInfo.agentNo); }); + } + + onChangeDate(date: any): void { + this.editInfoValue.entryDate = date; } backToInfo() { @@ -426,7 +448,7 @@ //////////////////////////////////////////////////////////// get nameValid(): boolean { - return !!this.editAgentInfoSetting.name; + return !!this.defaultAgentInfoSetting?.name; } get phoneValid(): boolean { @@ -436,6 +458,11 @@ : true; } + get emailValid() { + const rule = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; + return this.editInfoValue.email ? rule.test(this.editInfoValue.email) : true; + } + get isSubmitBtnDisabled(): boolean { const isFormValid = this.editInfoValue.name && this.editInfoValue.title @@ -444,9 +471,10 @@ && this.editInfoValue.concept && this.editInfoValue.experiences && this.editInfoValue.phoneNumber.length - && this.editInfoValue.seniorityYear + && this.editInfoValue.entryDate && this.editInfoValue.expertise.length - && this.editInfoValue.communicationStyle.length; + && this.editInfoValue.communicationStyle.length + && this.editInfoValue.email.length; return !isFormValid } } @@ -516,4 +544,10 @@ padding-right: 20px; } +.pam-editInfo-date-picker{ + .pam-date.el-input { + width: 100%; + } +} + </style> -- Gitblit v1.8.0