<template>
|
<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>
|
<span v-else> {{syncCareerSelect}}</span>
|
</div>
|
<div class="ques-career__select--icon">
|
<i class="icon-down down-icon"></i>
|
</div>
|
</div>
|
<PopUpFrame :isOpen.sync="showJobDrawer" :dialogWidth="'400px'">
|
<div class="pam-career">
|
<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"
|
:label="career.label">
|
{{career.title}}
|
</el-radio-button>
|
</el-radio-group>
|
<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"
|
@click="patchCareer">
|
確定
|
</el-button>
|
</div>
|
</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;
|
showJobDrawer = false;
|
career='';
|
career_Other='';
|
options= [
|
{
|
title:'外勤',
|
label:'外勤'
|
},
|
{
|
title:'內勤',
|
label:'內勤'
|
},
|
{
|
title:'其他',
|
label:'其他'
|
}
|
];
|
get isCareerVerifyFailed():boolean{
|
return !this.career || (_.isEqual(this.career,'其他')&&!this.career_Other) ;
|
}
|
handleChange(event:any):void{
|
if(event !== '其他'){
|
this.career_Other='';
|
}
|
}
|
|
openPopUp():void{
|
this.showJobDrawer = true;
|
this.patchInitValue();
|
}
|
|
patchInitValue():void{
|
if(this.syncCareerSelect){
|
if(_.includes(['外勤','內勤'],this.syncCareerSelect)){
|
this.career = this.syncCareerSelect;
|
}else{
|
this.career = '其他';
|
this.career_Other = this.syncCareerSelect;
|
}
|
}
|
}
|
|
patchCareer():boolean {
|
this.showJobDrawer = false;
|
this.syncCareerSelect = this.career === '其他' ? _.cloneDeep(this.career_Other):_.cloneDeep(this.career);
|
return true;
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-career{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
.ques-career__select{
|
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;
|
.ques-career__select-input{
|
width: 90%;
|
}
|
.ques-career__select--icon{
|
position: absolute;
|
top: 0px;
|
right: 15px;
|
.down-icon{
|
color:#ED1B2E;
|
font-size: 25px;
|
display: flex;
|
justify-content: flex-end;
|
padding-top: 11px;
|
margin-left: -20px;
|
}
|
}
|
}
|
.h-50 {
|
height: 50px;
|
}
|
.pam-career__other {
|
width: 100%;
|
.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: 20px;
|
}
|
|
</style>
|
