From da6fcce812c99892029ea54b7703f96ce92e37aa Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期一, 27 十二月 2021 10:20:53 +0800
Subject: [PATCH] page refactor: appointment-list child components
---
PAMapp/components/phoneContactTimePicker.vue | 104 ++++++++++++++++++++++++++++++++++++---------------
1 files changed, 73 insertions(+), 31 deletions(-)
diff --git a/PAMapp/components/phoneContactTimePicker.vue b/PAMapp/components/phoneContactTimePicker.vue
index 04578be..9382daa 100644
--- a/PAMapp/components/phoneContactTimePicker.vue
+++ b/PAMapp/components/phoneContactTimePicker.vue
@@ -4,19 +4,19 @@
<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>
<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,45 +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"
- :model="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>
@@ -75,18 +72,63 @@
<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 dialogWidth="376px";
private selectedSchedule!:scheduleDto;
@@ -98,7 +140,6 @@
selectWeekOptions:[] as string[],
selectTimesOptions:[] as string[],
}
-
openPopUp(schedule:scheduleDto,index:number):void{
this.isOpenByStep_1 = true;
this.popUpTitle = this.titleFormatByIndex(index);
@@ -117,8 +158,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={
@@ -133,14 +175,15 @@
}
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{
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,',');
}
}
@@ -198,7 +241,6 @@
.pam-add-schedule{
color: $PRIMARY_RED;
margin-top: 10px;
- margin-bottom: 30px;
font-size: 20px;
&.disable{
color:$LIGHT_GREY;
--
Gitblit v1.8.0