[ Update ] 修正 commit:bd9d8a6b0ed6204a9bb2708fe6a894f51cc52c94 資訊 i css 寫法錯誤

劉鈞霖

2021-11-19 f34aa90e8f838a8ca09dfc1aec4fa13bbb04af1c

 PAMapp/components/phoneContactTimePicker.vue

@@ -4,7 +4,7 @@
  <div>
    <div class="mt-10" v-for="(scheduleDto,index) in syncScheduleList" :key="index">
      <div class="mdTxt">{{titleFormatByIndex(index)}}</div>
      <div class="pam-contact-schedule cursor--pointer" @click="openPopUp(scheduleDto,index)">
      <div class="pam-contact-schedule cursor--pointer fix-chrome-click--issue" @click="openPopUp(scheduleDto,index)">
        <div class="pam-contact-schedule__text">
          <template v-if="checkFormHasDone(scheduleDto)">
            <p>{{optionsFormat(scheduleDto.selectWeekOptions,weekOptions)}}</p>
@@ -33,7 +33,6 @@

    <PopUpFrame class="pam-popUpFrame" 
      :isOpen.sync="isOpenByStep_1"
      :model="isOpenByStep_1"
      :drawerSize="drawerSize"
      :dialogWidth="dialogWidth">
        <div class="pam-popUp-title">{{popUpTitle}}</div>
@@ -42,8 +41,8 @@
            :options="weekOptions.options" 
            :nameOfSelectAll="weekOptions.selectAll">
          </MultiSelectBtn>
          <div class="pam-popUp-confirm-bolck">
            <button class="pam-select-confirm mt-30" 
          <div class="pam-popUp-confirm-bolck pam-paragraph">
            <button class="pam-select-confirm" 
              :class="[initPickerControl.selectWeekOptions.length?'el-button--primary' :'is-disabled']"  
              @click="confirmByStep_1">
              確定
@@ -61,8 +60,8 @@
          :options="timesOfDayOptions.options" 
          :nameOfSelectAll="timesOfDayOptions.selectAll">
        </MultiSelectBtn>
        <div class="pam-popUp-confirm-bolck">
          <button class="pam-select-confirm mt-30" 
        <div class="pam-popUp-confirm-bolck pam-paragraph">
          <button class="pam-select-confirm" 
            :class="[initPickerControl.selectTimesOptions.length ?'el-button--primary' :'is-disabled']"  
            @click="confirmByStep_2">
            確定
@@ -75,18 +74,64 @@
<script lang="ts">
  import { Component,PropSync,Vue } from "nuxt-property-decorator";
  import * as _ from "lodash";
import { OptionBtnDto } from "./singleSelectBtn.vue";
  @Component
  export default class PhoneContactTimePicker extends Vue {
    @PropSync('scheduleList',{type:Array,default:()=>[]}) syncScheduleList!:scheduleDto[];
    private weekOptions ={
      selectAll:'每天',
      options:['禮拜一','禮拜二','禮拜三','禮拜四','禮拜五','禮拜六','禮拜日'],
      options:[
        {
          title:'禮拜一',
          label:'禮拜一'
        },
         {
          title:'禮拜二',
          label:'禮拜二'
        },
         {
          title:'禮拜三',
          label:'禮拜三'
        },
         {
          title:'禮拜四',
          label:'禮拜四'
        },
         {
          title:'禮拜五',
          label:'禮拜五'
        }, {
          title:'禮拜六',
          label:'禮拜六'
        },
         {
          title:'禮拜日',
          label:'禮拜日'
        },
      ],
    };
    private timesOfDayOptions ={
      selectAll:'全天',
      options:['9:00~12:00','12:00~14:00','14:00~18:00','18:00~21:00'],
      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',
        }
      ],
    };
    private drawerSize="40%";
    private drawerSize="'50%'";
    private dialogWidth="376px";
    private selectedSchedule!:scheduleDto;

@@ -98,7 +143,6 @@
      selectWeekOptions:[] as string[],
      selectTimesOptions:[] as string[],
    }
    
    openPopUp(schedule:scheduleDto,index:number):void{
      this.isOpenByStep_1 = true;
      this.popUpTitle = this.titleFormatByIndex(index);
@@ -117,8 +161,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:string[],selectedOptions:string[]):string[]{
      return options.filter( o => _.includes(selectedOptions,o));
    getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]):string[]{
      return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
      // return 
    }
    addNewSchedule():void{
      const newScheduleDto={
@@ -140,7 +185,7 @@
      const chineseNumber = ['一','二','三','四','五','六','七','八','九','十']
      return '時段'+chineseNumber[index];
    }
    optionsFormat(options:string[],needToCompareList:OptionDto):string{
    optionsFormat(options:OptionBtnDto[],needToCompareList:OptionDto):string{
      return _.isEqual(options.length,needToCompareList.options.length) ? needToCompareList.selectAll: _.join(options,',');
    }
  }