refactor component: phoneContactTimePicker

Tomas

2021-12-27 d178464332e352b3fe4df583f0575b1eea38783b

refactor component: phoneContactTimePicker

 PAMapp/components/phoneContactTimePicker.vue

@@ -40,7 +40,7 @@
            :options="weekOptions.options"
            :nameOfSelectAll="weekOptions.selectAll">
          </MultiSelectBtn>
          <div class="pam-popUp-confirm-bolck mt-30">
          <div class="pam-popUp-confirm-block  mt-30">
            <button class="pam-select-confirm"
              :class="[initPickerControl.selectWeekOptions.length?'el-button--primary' :'is-disabled']"
              @click="confirmByStep_1">
@@ -58,7 +58,7 @@
          :options="timesOfDayOptions.options"
          :nameOfSelectAll="timesOfDayOptions.selectAll">
        </MultiSelectBtn>
        <div class="pam-popUp-confirm-bolck mt-30">
        <div class="pam-popUp-confirm-block  mt-30">
          <button class="pam-select-confirm"
            :class="[initPickerControl.selectTimesOptions.length ?'el-button--primary' :'is-disabled']"
            @click="confirmByStep_2">
@@ -71,80 +71,57 @@

<script lang="ts">
  import { Component,PropSync,Vue } from "nuxt-property-decorator";

  import * as _ from "lodash";

  import { weekDays } from "~/shared/const/week-days";
  import { dayTimeFrames } from "~/shared/const/day-time-frames";

import { OptionBtnDto } from "./singleSelectBtn.vue";
  @Component
  export default class PhoneContactTimePicker extends Vue {
    @PropSync('scheduleList',{type:Array,default:()=>[]}) syncScheduleList!:scheduleDto[];

    @PropSync('scheduleList',{type:Array,default:()=>[]})
    syncScheduleList!:scheduleDto[];

    private weekOptions ={
      selectAll:'每天',
      options:[
        {
          title:'星期一',
          label:'星期一'
        },
         {
          title:'星期二',
          label:'星期二'
        },
         {
          title:'星期三',
          label:'星期三'
        },
         {
          title:'星期四',
          label:'星期四'
        },
         {
          title:'星期五',
          label:'星期五'
        }, {
          title:'星期六',
          label:'星期六'
        },
         {
          title:'星期日',
          label:'星期日'
        },
      ],
      options  : weekDays,
    };

    private timesOfDayOptions ={
      selectAll:'全天',
      options:[
        {
          title:'9:00~12:00',
          label:'9:00~12:00',
        },
        {
          title:'12:00~14:00',
           label:'12:00~14:00',
        },
        {
          title:'14:00~18:00',
           label:'14:00~18:00',
        },
        {
          title:'18:00~21:00',
          label:'18:00~21:00',
        }
      ],
      options  : dayTimeFrames,
    };
    private dialogWidth="376px";
    private selectedSchedule!:scheduleDto;

    // popUp frame
    private isOpenByStep_1=false;
    private isOpenByStep_2=false;
    private popUpTitle='';
    private initPickerControl={
      selectWeekOptions:[] as string[],
      selectTimesOptions:[] as string[],
    }

    // popUp frame
    private dialogWidth      : string = "376px";
    private isOpenByStep_1   : boolean = false;
    private isOpenByStep_2   : boolean = false;
    private popUpTitle       : string= '';
    private selectedSchedule!: scheduleDto;

    //////////////////////////////////////////////////////////////////////


    openPopUp(schedule:scheduleDto,index:number):void{
      this.isOpenByStep_1 = true;
      this.popUpTitle = this.titleFormatByIndex(index);
      this.selectedSchedule = schedule;
      this.initPickerControl = _.cloneDeep(schedule);
    }

    addNewSchedule(): void {
      const newScheduleDto={
        selectWeekOptions:[],
        selectTimesOptions:[],
      }
      this.syncScheduleList.push(newScheduleDto)
    }

    confirmByStep_1():void{
@@ -158,16 +135,9 @@
      this.selectedSchedule.selectWeekOptions = this.getOptionsBySort(this.weekOptions.options,this.initPickerControl.selectWeekOptions);
      this.selectedSchedule.selectTimesOptions = this.getOptionsBySort(this.timesOfDayOptions.options,this.initPickerControl.selectTimesOptions);
    }
    getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]):string[]{

    private getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]): string[] {
      return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
      // return
    }
    addNewSchedule():void{
      const newScheduleDto={
        selectWeekOptions:[],
        selectTimesOptions:[],
      }
      this.syncScheduleList.push(newScheduleDto)
    }

    deleteScheduleItem(index:number):void{
@@ -176,26 +146,30 @@

    checkFormHasDone(item:scheduleDto):boolean{
      if (!item) return false;
      return item.selectWeekOptions?.length>0 && item.selectTimesOptions?.length>0;
      return item.selectWeekOptions?.length > 0
          && item.selectTimesOptions?.length > 0;
    }

    titleFormatByIndex(index:number):string{
      const chineseNumber = ['一','二','三','四','五','六','七','八','九','十']
      return '時段'+chineseNumber[index];
    }

    optionsFormat(options:OptionBtnDto[],needToCompareList:OptionDto):string{
      return _.isEqual(options.length,needToCompareList.options.length) ? needToCompareList.selectAll: _.join(options,',');
    }
  }

  export interface scheduleDto{
    selectWeekOptions:string[]|[];
    selectTimesOptions:string[]|[];
  }
  type scheduleKey = keyof scheduleDto

  interface OptionDto{
    selectAll:string,
    options:string[],
  }

</script>

<style lang="scss" scoped>
@@ -205,7 +179,7 @@
    display: flex;
    justify-content: center;
  }
  .pam-popUp-confirm-bolck{
  .pam-popUp-confirm-block {
    display: flex;
    justify-content: center;
  }

 PAMapp/shared/const/day-time-frames.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,18 @@
export const dayTimeFrames = [
  {
    title:'9:00~12:00',
    label:'9:00~12:00',
  },
  {
    title:'12:00~14:00',
     label:'12:00~14:00',
  },
  {
    title:'14:00~18:00',
     label:'14:00~18:00',
  },
  {
    title:'18:00~21:00',
    label:'18:00~21:00',
  }
];

 PAMapp/shared/const/week-days.ts

¤ñ¹ï·sÀÉ®×
@@ -0,0 +1,29 @@
export const weekDays = [
  {
    title:'星期一',
    label:'星期一'
  },
   {
    title:'星期二',
    label:'星期二'
  },
   {
    title:'星期三',
    label:'星期三'
  },
   {
    title:'星期四',
    label:'星期四'
  },
   {
    title:'星期五',
    label:'星期五'
  }, {
    title:'星期六',
    label:'星期六'
  },
   {
    title:'星期日',
    label:'星期日'
  },
];