From a3716f72066d25d745f4d5103ff23a553c3e102b Mon Sep 17 00:00:00 2001 From: wayne <wayne8692wayne8692@gmail.com> Date: 星期四, 17 二月 2022 11:41:19 +0800 Subject: [PATCH] Merge branch 'sit' into uat --- PAMapp/components/careerSelect.vue | 120 +++++++++++++++++++++++++++++++++++------------------------- 1 files changed, 70 insertions(+), 50 deletions(-) diff --git a/PAMapp/components/careerSelect.vue b/PAMapp/components/careerSelect.vue index c1ae2c7..3a0f848 100644 --- a/PAMapp/components/careerSelect.vue +++ b/PAMapp/components/careerSelect.vue @@ -1,6 +1,6 @@ <template> <div> - <div class="mdTxt pt-10 pb-10">�璆�</div> + <div class="mdTxt pt-10 pb-10">���璆�</div> <div class="ques-career__select" @click="openPopUp"> <div class="ques-career__select-input"> <span v-if="!syncCareerSelect">隢���</span> @@ -10,9 +10,9 @@ <i class="icon-down down-icon"></i> </div> </div> - <PopUpFrame :isOpen.sync="showJobDrawer"> + <PopUpFrame :isOpen.sync="showJobDrawer" :dialogWidth="'400px'"> <div class="pam-career"> - <div class="subTitle">�璆�</div> + <div class="subTitle">���璆�</div> <el-radio-group class="pam-single__select--col" v-model="career" @change="handleChange"> <el-radio-button v-for="(career,index) in options" :key="index" @@ -20,14 +20,16 @@ {{career.title}} </el-radio-button> </el-radio-group> - <div class="mt-10" v-if="career === '�隞�'"> - <input class="pam-career__other-input" + <div class="mt-20 h-50 pam-career__other"> + <input + v-if="career === '�隞�'" + class="pam-career__other-input" :class="{'warning':!career_Other}" v-model="career_Other" > </div> <el-button type="primary" class="pam-career__confirm" - :disabled="isCareerVerifyFailed" + :disabled="!isCareerValid" @click="patchCareer"> 蝣箏�� </el-button> @@ -35,19 +37,23 @@ </PopUpFrame> </div> - </template> <script lang="ts"> import { Component , PropSync , Vue} from "vue-property-decorator"; import * as _ from 'lodash'; + @Component export default class CareerSelect extends Vue { - @PropSync('careerSelect',{ type: String, default :''}) syncCareerSelect! :string; + + @PropSync('careerSelect',{ type: String, default :''}) + syncCareerSelect! :string; + showJobDrawer = false; - career=''; - career_Other=''; - options= [ + career = ''; + career_Other = ''; + + options = [ { title:'憭', label:'憭' @@ -61,21 +67,21 @@ label:'�隞�' } ]; - get isCareerVerifyFailed():boolean{ - return !this.career || (_.isEqual(this.career,'�隞�')&&!this.career_Other) ; - } - handleChange(event:any):void{ + + ////////////////////////////////////////////////////////////////////// + + handleChange(event:any): void{ if(event !== '�隞�'){ - this.career_Other=''; + this.career_Other = ''; } } - openPopUp():void{ + openPopUp(): void{ this.showJobDrawer = true; this.patchInitValue(); } - patchInitValue():void{ + patchInitValue(): void{ if(this.syncCareerSelect){ if(_.includes(['憭','��'],this.syncCareerSelect)){ this.career = this.syncCareerSelect; @@ -86,64 +92,78 @@ } } - patchCareer():boolean { + patchCareer(): void { this.showJobDrawer = false; - this.syncCareerSelect = this.career === '�隞�' ? _.cloneDeep(this.career_Other):_.cloneDeep(this.career); - return true; + this.syncCareerSelect = this.career === '�隞�' + ? _.cloneDeep(this.career_Other) + : _.cloneDeep(this.career); + } + + get isCareerValid(): boolean { + return !!(this.career === '�隞�' + ? this.career_Other + : this.career); } } </script> <style lang="scss" scoped> .pam-career{ - display: flex; + display : flex; flex-direction: column; - align-items: center; + align-items : center; } .ques-career__select{ - position: relative; - height: 50px; + position : relative; + height : 50px; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 15px; - border-radius:10px; - border:1px solid #D0D0CE ; - background-color: $PRIMARY_WHITE; + -moz-box-sizing : border-box; + box-sizing : border-box; + padding : 15px; + border-radius : 10px; + border : 1px solid #D0D0CE ; + background-color : $PRIMARY_WHITE; .ques-career__select-input{ width: 90%; } .ques-career__select--icon{ position: absolute; - top: 0px; - right: 15px; + top : 0px; + right : 15px; .down-icon{ - color:#ED1B2E; - font-size: 25px; - display: flex; + color : #ED1B2E; + font-size : 25px; + display : flex; justify-content: flex-end; - padding-top: 11px; - margin-left: -20px; + padding-top : 11px; + margin-left : -20px; } } } - .pam-career__other-input{ + .h-50 { height: 50px; + } + .pam-career__other { width: 100%; - border: 1px #CCCCCC solid; - width: 300px; - padding-left: 15px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - &.warning{ - border: 1px $PRIMARY_RED solid; + .pam-career__other-input { + height : 50px; + border : 1px #CCCCCC solid; + width : 100%; + padding-left : 15px; + -webkit-box-sizing: border-box; + -moz-box-sizing : border-box; + box-sizing : border-box; + border-radius : 10px; + &.warning{ + border: 1px $PRIMARY_RED solid; + } } + } .pam-career__confirm{ - width: 120px; - height: 50px; - margin-top: 30px; + width : 120px; + height : 50px; + margin-top: 20px; } </style> -- Gitblit v1.8.0