refactor component: careerSelect

Tomas

2021-12-27 176b380f392efab0a84dd79560dca22e8053d0e4

refactor component: careerSelect

 PAMapp/components/careerSelect.vue

@@ -29,14 +29,13 @@
          </div>
          <el-button type="primary"
            class="pam-career__confirm"
            :disabled="isCareerVerifyFailed"
            :disabled="!isCareerValid"
            @click="patchCareer">
              確定
          </el-button>
        </div>
      </PopUpFrame>
  </div>


</template>

@@ -46,11 +45,15 @@

  @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:'外勤'
@@ -64,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;
@@ -89,44 +92,51 @@
      }
    }

    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;
      }
    }
  }
@@ -136,14 +146,14 @@
  .pam-career__other {
    width: 100%;
    .pam-career__other-input {
      height: 50px;
      border: 1px #CCCCCC solid;
      width: 100%;
      padding-left: 15px;
      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;
      -moz-box-sizing   : border-box;
      box-sizing        : border-box;
      border-radius     : 10px;
      &.warning{
        border: 1px $PRIMARY_RED solid;
      }
@@ -151,8 +161,8 @@

  }
  .pam-career__confirm{
    width: 120px;
    height: 50px;
    width     : 120px;
    height    : 50px;
    margin-top: 20px;
  }