From 65c09b0bde45fc9f8f0fcf085082684e3c765975 Mon Sep 17 00:00:00 2001
From: Mila <Mila@pollex.com.tw>
Date: 星期四, 18 十一月 2021 17:42:20 +0800
Subject: [PATCH] updat TODO#130484 所在地區選擇器增加確認按鈕

---
 PAMapp/components/phoneContactTimePicker.vue |   71 +++++++++++++++++++++++++++++------
 1 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/PAMapp/components/phoneContactTimePicker.vue b/PAMapp/components/phoneContactTimePicker.vue
index 04578be..278b929 100644
--- a/PAMapp/components/phoneContactTimePicker.vue
+++ b/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,',');
     }
   }

--
Gitblit v1.8.0