Merge branch 'master' of ssh://192.168.0.10:29418/pcalife/PAM

Jack

2021-11-26 aa5b8b8266912d4b02d432049a66d29f56245115

 PAMapp/components/careerSelect.vue

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,149 @@
<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" drawerSize='60%'>
        <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-10" v-if="career === '其他'">
            <input 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;
      }
    }
  }
  .pam-career__other-input{
    height: 50px;
    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__confirm{
    width: 120px;
    height: 50px;
    margin-top: 30px;
  }

</style>