From c0946457d311eb1ced63f7dcbcf4bc3f0e33c55a Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 19 一月 2022 16:43:01 +0800
Subject: [PATCH] fixed: BackActionBar - 預約單結案後顯示的 lable 應為'結案明細'
---
PAMapp/components/phoneContactTimePicker.vue | 276 +++++++++++++++++++++++++-----------------------------
1 files changed, 129 insertions(+), 147 deletions(-)
diff --git a/PAMapp/components/phoneContactTimePicker.vue b/PAMapp/components/phoneContactTimePicker.vue
index 973eacb..1055196 100644
--- a/PAMapp/components/phoneContactTimePicker.vue
+++ b/PAMapp/components/phoneContactTimePicker.vue
@@ -2,13 +2,13 @@
<template>
<div>
- <div class="mt-10" v-for="(scheduleDto,index) in syncScheduleList" :key="index">
- <div class="mdTxt">{{titleFormatByIndex(index)}}</div>
+ <div class="mt-10" v-for="(scheduleDto,index) in scheduleList" :key="index">
+ <div class="mdTxt">{{index | titleFormatByIndex}}</div>
<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>
- <p>{{optionsFormat(scheduleDto.selectTimesOptions,timesOfDayOptions)}}</p>
+ <p>{{ scheduleDto.selectWeekOptions | optionsFormat(weekOptions)}}</p>
+ <p>{{ scheduleDto.selectTimesOptions| optionsFormat(timesOfDayOptions)}}</p>
</template>
<template v-else>
隢���
@@ -17,53 +17,51 @@
<div class="pam-contact-schedule__icon">
<i v-if="checkFormHasDone(scheduleDto)"
class="icon-delet"
- :class="{'disable':syncScheduleList.length===1}"
- @click.stop="deleteScheduleItem(index)">
+ :class="{'disable':scheduleList.length===1}"
+ @click.stop="deleteScheduleByIndex(index)">
</i>
<i v-else class="icon-calender"></i>
</div>
</div>
</div>
<div class="pam-add-schedule cursor--pointer"
- :class="{'disable':!checkFormHasDone(syncScheduleList[syncScheduleList && syncScheduleList.length && syncScheduleList.length - 1])|| syncScheduleList.length ===7}"
+ :class="{'disable': !checkFormHasDone(scheduleList[scheduleList.length && scheduleList.length - 1]) || scheduleList.length===7 }"
@click="addNewSchedule">
<i class="icon-add"></i>
�憓�挾
</div>
<PopUpFrame class="pam-popUpFrame"
- :isOpen.sync="isOpenByStep_1"
- :drawerSize="drawerSize"
- :dialogWidth="dialogWidth">
- <div class="pam-popUp-title">{{popUpTitle}}</div>
+ dialogWidth="376px"
+ :isOpen.sync="isOpenByDayPopUp">
+ <div class="pam-popUp-title">{{scheduleIndex | titleFormatByIndex}}</div>
<MultiSelectBtn class="mt-30"
:mutiSelect.sync="initPickerControl.selectWeekOptions"
:options="weekOptions.options"
:nameOfSelectAll="weekOptions.selectAll">
</MultiSelectBtn>
- <div class="pam-popUp-confirm-bolck pam-paragraph">
+ <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">
+ @click="confirmBySelectDay">
蝣箏��
</button>
</div>
</PopUpFrame>
<PopUpFrame class="pam-popUpFrame"
- :isOpen.sync="isOpenByStep_2"
- :drawerSize="drawerSize"
- :dialogWidth="dialogWidth">
- <div class="pam-popUp-title">{{popUpTitle}}</div>
+ dialogWidth="376px"
+ :isOpen.sync="isOpenByTimePopUp">
+ <div class="pam-popUp-title">{{scheduleIndex | titleFormatByIndex}}</div>
<MultiSelectBtn class="mt-30"
:mutiSelect.sync="initPickerControl.selectTimesOptions"
:options="timesOfDayOptions.options"
:nameOfSelectAll="timesOfDayOptions.selectAll">
</MultiSelectBtn>
- <div class="pam-popUp-confirm-bolck pam-paragraph">
+ <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">
+ @click="confirmBySelectTime">
蝣箏��
</button>
</div>
@@ -72,181 +70,165 @@
</template>
<script lang="ts">
- import { Component,PropSync,Vue } from "nuxt-property-decorator";
+ import { Component, Prop, PropSync, Vue } from "nuxt-property-decorator";
+ import { dayTimeFrames } from "~/shared/const/day-time-frames";
+ import { OptionBtnDto, OptionDto } from "~/shared/models/optionBtnDto.model";
+ import { weekDays } from "~/shared/const/week-days";
import * as _ from "lodash";
-import { OptionBtnDto } from "./singleSelectBtn.vue";
- @Component
+ @Component({
+ filters:{
+ titleFormatByIndex(index:number):string{
+ const chineseNumber = ['銝�','鈭�','銝�','���','鈭�','�','銝�','�','銋�','���'];
+ return '��挾'+chineseNumber[index];
+ },
+ optionsFormat(selectedOptions:string[]|[], compareOptions:OptionDto): string{
+ return _.isEqual(selectedOptions.length,compareOptions.options.length)
+ ? compareOptions.selectAll
+ : _.join(selectedOptions,',');
+ },
+ }
+ })
export default class PhoneContactTimePicker extends Vue {
- @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:'蝳格�'
- },
- ],
- };
- 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',
- }
- ],
- };
- private drawerSize="'50%'";
- private dialogWidth="376px";
- private selectedSchedule!:scheduleDto;
+ @Prop({type:Array,default:()=>[]})
+ scheduleList!:scheduleDto[];
- // popUp frame
- private isOpenByStep_1=false;
- private isOpenByStep_2=false;
- private popUpTitle='';
- private initPickerControl={
- selectWeekOptions:[] as string[],
- selectTimesOptions:[] as string[],
+ weekOptions = {
+ selectAll: '瘥予',
+ options : weekDays,
+ };
+ timesOfDayOptions = {
+ selectAll: '�憭�',
+ options : dayTimeFrames,
+ };
+ initPickerControl:scheduleDto = {
+ selectWeekOptions : [],
+ selectTimesOptions: [],
}
+ popUpMode : TimePickerMode = TimePickerMode.NONE;
+ scheduleIndex : number = 0;
+
+ //////////////////////////////////////////////////////////////////////
+
+ get isOpenByDayPopUp(): boolean{
+ return _.isEqual(this.popUpMode , TimePickerMode.SELECT_DAY)
+ }
+
+ set isOpenByDayPopUp(value:boolean){
+ this.popUpMode = TimePickerMode.NONE;
+ }
+
+ get isOpenByTimePopUp(): boolean{
+ return _.isEqual(this.popUpMode , TimePickerMode.SELECT_TIME);
+ }
+
+ set isOpenByTimePopUp(value:boolean){
+ this.popUpMode = TimePickerMode.NONE;
+ }
+
+ //////////////////////////////////////////////////////////////////////
+
openPopUp(schedule:scheduleDto,index:number):void{
- this.isOpenByStep_1 = true;
- this.popUpTitle = this.titleFormatByIndex(index);
- this.selectedSchedule = schedule;
this.initPickerControl = _.cloneDeep(schedule);
+ this.popUpMode = TimePickerMode.SELECT_DAY;
+ this.scheduleIndex = index;
}
- confirmByStep_1():void{
- this.isOpenByStep_1=false;
- this.isOpenByStep_2=true;
+ confirmBySelectDay(): void {
+ this.popUpMode = TimePickerMode.SELECT_TIME;
}
- confirmByStep_2():void{
- this.isOpenByStep_2=false;
- // TODO: code ref
- this.selectedSchedule.selectWeekOptions = this.getOptionsBySort(this.weekOptions.options,this.initPickerControl.selectWeekOptions);
- this.selectedSchedule.selectTimesOptions = this.getOptionsBySort(this.timesOfDayOptions.options,this.initPickerControl.selectTimesOptions);
+ confirmBySelectTime(): void {
+ this.popUpMode = TimePickerMode.NONE;
+ // detect array change to parent
+ this.$set( this.scheduleList, this.scheduleIndex, this.initPickerFormatSort(this.initPickerControl) );
}
- getOptionsBySort(options:OptionBtnDto[],selectedOptions:string[]):string[]{
- return options.map( o => _.includes(selectedOptions,o.title) ? o.title :'').filter(String);
- // return
+
+ private initPickerFormatSort(initPickerControl:scheduleDto):scheduleDto{
+ _.keys(initPickerControl).forEach(keyName=>{
+ const options = _.isEqual(keyName,'selectWeekOptions') ? weekDays : dayTimeFrames;
+ initPickerControl[keyName] = this.getOptionsBySort(initPickerControl[keyName],options);
+ })
+ return initPickerControl;
}
- addNewSchedule():void{
+
+ // 鞈�������儔銝���������
+ private getOptionsBySort( selectedOptions:string[] , options:OptionBtnDto[]): string[] {
+ return options.map( o => _.includes(selectedOptions , o.label) ? o.label as string : '').filter(String);
+ }
+
+ addNewSchedule(): void {
const newScheduleDto={
selectWeekOptions:[],
selectTimesOptions:[],
}
- this.syncScheduleList.push(newScheduleDto)
+ this.scheduleList.push(newScheduleDto)
}
- deleteScheduleItem(index:number):void{
- this.syncScheduleList.splice(index,1);
+ deleteScheduleByIndex(index:number): void {
+ this.scheduleList.splice(index,1);
}
-
- checkFormHasDone(item:scheduleDto):boolean{
- if (!item) return false;
- 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,',');
+ checkFormHasDone(item:scheduleDto): boolean {
+ return item&&item.selectWeekOptions?.length > 0
+ && item.selectTimesOptions?.length > 0;
}
}
- export interface scheduleDto{
- selectWeekOptions:string[]|[];
- selectTimesOptions:string[]|[];
+ enum TimePickerMode{
+ SELECT_DAY="selectDay",
+ SELECT_TIME="selectTime",
+ NONE=""
}
- type scheduleKey = keyof scheduleDto
- interface OptionDto{
- selectAll:string,
- options:string[],
+ interface scheduleDto {
+ selectWeekOptions : string[]|[];
+ selectTimesOptions: string[]|[];
}
</script>
<style lang="scss" scoped>
.pam-popUp-title{
- font-size: 24px;
- color:$PRIMARY_BLACK;
- display: flex;
+ font-size : 24px;
+ color : $PRIMARY_BLACK;
+ display : flex;
justify-content: center;
}
- .pam-popUp-confirm-bolck{
- display: flex;
+ .pam-popUp-confirm-block {
+ display : flex;
justify-content: center;
}
.pam-contact-schedule{
- width: inherit;
- background:$PRIMARY_WHITE;
- border: 1px solid $LIGHT_GREY;
- padding: 12px 20px;
- border-radius: 10px;
- display: flex;
+ width : inherit;
+ background : $PRIMARY_WHITE;
+ border : 1px solid $LIGHT_GREY;
+ padding : 12px 20px;
+ border-radius : 10px;
+ display : flex;
justify-content: space-between;
- margin-top: 10px;
+ margin-top : 10px;
}
.pam-contact-schedule__text{
align-self: center;
- font-size: 20px;
- width: 85%;
+ font-size : 20px;
+ width : 85%;
word-break: break-all;
- color: $PRUDENTIAL_GREY;
+ color : $PRUDENTIAL_GREY;
}
.pam-contact-schedule__icon{
- width: 15%;
- display: flex;
- align-items: center;
+ width : 15%;
+ display : flex;
+ align-items : center;
justify-content: flex-end;
- color: $PRIMARY_RED;
- font-size: 25px;
+ color : $PRIMARY_RED;
+ font-size : 25px;
.disable{
- color:$LIGHT_GREY;
+ color : $LIGHT_GREY;
pointer-events: none;
}
}
.pam-add-schedule{
- color: $PRIMARY_RED;
+ color : $PRIMARY_RED;
margin-top: 10px;
- font-size: 20px;
+ font-size : 20px;
&.disable{
- color:$LIGHT_GREY;
+ color : $LIGHT_GREY;
pointer-events: none;
}
}
--
Gitblit v1.8.0