保誠-保戶業務員媒合平台
Tomas
2021-12-22 abfd26bb700d93a92da6a04703b0187d4acaaeb5
PAMapp/components/phoneContactTimePicker.vue
@@ -11,12 +11,12 @@
            <p>{{optionsFormat(scheduleDto.selectTimesOptions,timesOfDayOptions)}}</p>
          </template>
          <template v-else>
            請選擇
            請選擇
          </template>
        </div>
        <div class="pam-contact-schedule__icon">
          <i v-if="checkFormHasDone(scheduleDto)"
            class="icon-delet"
          <i v-if="checkFormHasDone(scheduleDto)"
            class="icon-delet"
            :class="{'disable':syncScheduleList.length===1}"
            @click.stop="deleteScheduleItem(index)">
          </i>
@@ -25,44 +25,42 @@
      </div>
    </div>
    <div class="pam-add-schedule cursor--pointer"
      :class="{'disable':!checkFormHasDone(syncScheduleList[syncScheduleList.length-1])|| syncScheduleList.length ===7}"
      :class="{'disable':!checkFormHasDone(syncScheduleList[syncScheduleList && syncScheduleList.length && syncScheduleList.length - 1])|| syncScheduleList.length ===7}"
      @click="addNewSchedule">
      <i class="icon-add"></i>
      新增時段
    </div>
    <PopUpFrame class="pam-popUpFrame"
    <PopUpFrame class="pam-popUpFrame"
      :isOpen.sync="isOpenByStep_1"
      :drawerSize="drawerSize"
      :dialogWidth="dialogWidth">
        <div class="pam-popUp-title">{{popUpTitle}}</div>
          <MultiSelectBtn class="mt-30"
            :mutiSelect.sync="initPickerControl.selectWeekOptions"
            :options="weekOptions.options"
          <MultiSelectBtn class="mt-30"
            :mutiSelect.sync="initPickerControl.selectWeekOptions"
            :options="weekOptions.options"
            :nameOfSelectAll="weekOptions.selectAll">
          </MultiSelectBtn>
          <div class="pam-popUp-confirm-bolck">
            <button class="pam-select-confirm mt-30"
              :class="[initPickerControl.selectWeekOptions.length?'el-button--primary' :'is-disabled']"
          <div class="pam-popUp-confirm-bolck mt-30">
            <button class="pam-select-confirm"
              :class="[initPickerControl.selectWeekOptions.length?'el-button--primary' :'is-disabled']"
              @click="confirmByStep_1">
              確定
            </button>
          </div>
    </PopUpFrame>
    <PopUpFrame class="pam-popUpFrame"
    <PopUpFrame class="pam-popUpFrame"
      :isOpen.sync="isOpenByStep_2"
      :drawerSize="drawerSize"
      :dialogWidth="dialogWidth">
        <div class="pam-popUp-title">{{popUpTitle}}</div>
        <MultiSelectBtn class="mt-30"
          :mutiSelect.sync="initPickerControl.selectTimesOptions"
          :options="timesOfDayOptions.options"
        <MultiSelectBtn class="mt-30"
          :mutiSelect.sync="initPickerControl.selectTimesOptions"
          :options="timesOfDayOptions.options"
          :nameOfSelectAll="timesOfDayOptions.selectAll">
        </MultiSelectBtn>
        <div class="pam-popUp-confirm-bolck">
          <button class="pam-select-confirm mt-30"
            :class="[initPickerControl.selectTimesOptions.length ?'el-button--primary' :'is-disabled']"
        <div class="pam-popUp-confirm-bolck mt-30">
          <button class="pam-select-confirm"
            :class="[initPickerControl.selectTimesOptions.length ?'el-button--primary' :'is-disabled']"
            @click="confirmByStep_2">
            確定
          </button>
@@ -82,31 +80,31 @@
      selectAll:'每天',
      options:[
        {
          title:'禮拜一',
          label:'禮拜一'
          title:'星期一',
          label:'星期一'
        },
         {
          title:'禮拜二',
          label:'禮拜二'
          title:'星期二',
          label:'星期二'
        },
         {
          title:'禮拜三',
          label:'禮拜三'
          title:'星期三',
          label:'星期三'
        },
         {
          title:'禮拜四',
          label:'禮拜四'
          title:'星期四',
          label:'星期四'
        },
         {
          title:'禮拜五',
          label:'禮拜五'
          title:'星期五',
          label:'星期五'
        }, {
          title:'禮拜六',
          label:'禮拜六'
          title:'星期六',
          label:'星期六'
        },
         {
          title:'禮拜日',
          label:'禮拜日'
          title:'星期日',
          label:'星期日'
        },
      ],
    };
@@ -131,7 +129,6 @@
        }
      ],
    };
    private drawerSize="40%";
    private dialogWidth="376px";
    private selectedSchedule!:scheduleDto;
@@ -143,7 +140,6 @@
      selectWeekOptions:[] as string[],
      selectTimesOptions:[] as string[],
    }
    openPopUp(schedule:scheduleDto,index:number):void{
      this.isOpenByStep_1 = true;
      this.popUpTitle = this.titleFormatByIndex(index);
@@ -164,7 +160,7 @@
    }
    getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]):string[]{
      return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
      // return
      // return
    }
    addNewSchedule():void{
      const newScheduleDto={
@@ -179,7 +175,8 @@
    }
    checkFormHasDone(item:scheduleDto):boolean{
      return item.selectWeekOptions.length>0 && item.selectTimesOptions.length>0;
      if (!item) return false;
      return item.selectWeekOptions?.length>0 && item.selectTimesOptions?.length>0;
    }
    titleFormatByIndex(index:number):string{
@@ -244,7 +241,6 @@
  .pam-add-schedule{
    color: $PRIMARY_RED;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 20px;
     &.disable{
        color:$LIGHT_GREY;