<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="!isCareerValid"
|
@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:'其他'
|
}
|
];
|
|
//////////////////////////////////////////////////////////////////////
|
|
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(): void {
|
this.showJobDrawer = false;
|
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;
|
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>
|
