From 857c922d4f3542cb543b8b99600bf9c48ffa24b9 Mon Sep 17 00:00:00 2001
From: weisheng <1780903673@qq.com>
Date: Sat, 6 Apr 2024 00:44:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8DCalenda?=
 =?UTF-8?q?r=E9=83=A8=E5=88=86=E6=96=87=E5=AD=97=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E6=97=B6=E5=88=87=E6=8D=A2=E5=9B=BD=E9=99=85=E5=8C=96=E6=9C=AA?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E5=9B=BD=E9=99=85=E5=8C=96=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../monthPanel/month-panel.vue                | 105 +++++++++++-------
 .../components/wd-calendar-view/utils.ts      |  23 ++--
 .../wd-calendar-view/yearPanel/year-panel.vue |  52 ++++-----
 .../components/wd-calendar/wd-calendar.vue    |  56 ++++------
 4 files changed, 122 insertions(+), 114 deletions(-)

diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
index 080593a6a..94a4ab107 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
@@ -13,7 +13,7 @@
       @scroll="monthScroll"
       :scroll-top="scrollTop"
     >
-      <view v-for="(item, index) in months(minDate, maxDate)" :key="index" :id="`month${index}`">
+      <view v-for="(item, index) in months" :key="index" :id="`month${index}`">
         <month
           :type="type"
           :date="item.date"
@@ -60,7 +60,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { debounce, isArray, isEqual, isNumber, requestAnimationFrame } from '../../common/util'
 import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
 import Month from '../month/month.vue'
@@ -71,13 +71,48 @@ import type { CalendarItem } from '../types'
 const props = defineProps(monthPanelProps)
 const { translate } = useTranslate('calendar-view')
 
-const title = ref<string>('')
 const scrollTop = ref<number>(0) // 滚动位置
-const timeValue = ref<string[] | number[]>([])
-const timeData = ref<Array<CalendarItem[]>>([])
+const scrollIndex = ref<number>(0) // 当前显示的月份索引
+const timeValue = ref<number[]>([]) // 当前选中的时分秒
+
 const timeType = ref<MonthPanelTimeType>('') // 当前时间类型，是开始还是结束
 const innerValue = ref<string | number | (number | null)[]>('') // 内部保存一个值，用于判断新老值，避免监听器触发
 
+// 时间picker的列数据
+const timeData = computed<Array<CalendarItem[]>>(() => {
+  let timeColumns: Array<CalendarItem[]> = []
+  if (props.type === 'datetime' && isNumber(props.value)) {
+    const date = new Date(props.value)
+    date.setHours(timeValue.value[0])
+    date.setMinutes(timeValue.value[1])
+    date.setSeconds(props.hideSecond ? 0 : timeValue.value[2])
+    const dateTime = date.getTime()
+    timeColumns = getTime(dateTime) || []
+  } else if (isArray(props.value) && props.type === 'datetimerange') {
+    const [start, end] = props.value!
+    const dataValue = timeType.value === 'start' ? start : end
+    const date = new Date(dataValue || '')
+    date.setHours(timeValue.value[0])
+    date.setMinutes(timeValue.value[1])
+    date.setSeconds(props.hideSecond ? 0 : timeValue.value[2])
+    const dateTime = date.getTime()
+    const finalValue = [start, end]
+    if (timeType.value === 'start') {
+      finalValue[0] = dateTime
+    } else {
+      finalValue[1] = dateTime
+    }
+    timeColumns = getTime(finalValue, timeType.value) || []
+  }
+  return timeColumns
+})
+
+// 标题
+const title = computed(() => {
+  return formatMonthTitle(months.value[scrollIndex.value].date)
+})
+
+// 周标题
 const weekLabel = computed(() => {
   return (index: number) => {
     return getWeekLabel(index - 1)
@@ -91,18 +126,15 @@ const scrollHeight = computed(() => {
 })
 
 // 月份日期和月份高度
-const months = computed(() => {
-  return (minDate: number, maxDate: number): MonthInfo[] => {
-    let months = getMonths(minDate, maxDate).map((month) => {
-      const offset = (7 + new Date(month).getDay() - props.firstDayOfWeek) % 7
-      const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1)
-      return {
-        height: (offset + totalDay > 35 ? 64 * 6 : 64 * 5) + 45,
-        date: month
-      }
-    })
-    return months
-  }
+const months = computed<MonthInfo[]>(() => {
+  return getMonths(props.minDate, props.maxDate).map((month) => {
+    const offset = (7 + new Date(month).getDay() - props.firstDayOfWeek) % 7
+    const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1)
+    return {
+      height: (offset + totalDay > 35 ? 64 * 6 : 64 * 5) + 45,
+      date: month
+    }
+  })
 })
 
 watch(
@@ -110,7 +142,7 @@ watch(
   (val) => {
     if (
       (val === 'datetime' && props.value) ||
-      (val === 'datetimerange' && typeof props.value === 'object' && props.value && props.value.length > 0 && props.value[0])
+      (val === 'datetimerange' && isArray(props.value) && props.value && props.value.length > 0 && props.value[0])
     ) {
       setTime(props.value, 'start')
     }
@@ -126,7 +158,7 @@ watch(
   (val) => {
     if (isEqual(val, innerValue.value)) return
 
-    if ((props.type === 'datetime' && val) || (props.type === 'datetimerange' && val && typeof val === 'object' && val.length > 0 && val[0])) {
+    if ((props.type === 'datetime' && val) || (props.type === 'datetimerange' && val && isArray(val) && val.length > 0 && val[0])) {
       setTime(val, 'start')
     }
   },
@@ -136,7 +168,7 @@ watch(
   }
 )
 
-onBeforeMount(() => {
+onMounted(() => {
   scrollIntoView()
 })
 
@@ -164,14 +196,12 @@ function scrollIntoView() {
       activeDate = Date.now()
     }
 
-    const monthsInfo = months.value(props.minDate, props.maxDate)
-
     let top: number = 0
-    for (let index = 0; index < monthsInfo.length; index++) {
-      if (compareMonth(monthsInfo[index].date, activeDate) === 0) {
+    for (let index = 0; index < months.value.length; index++) {
+      if (compareMonth(months.value[index].date, activeDate) === 0) {
         break
       }
-      top += monthsInfo[index] ? Number(monthsInfo[index].height) : 0
+      top += months.value[index] ? Number(months.value[index].height) : 0
     }
     scrollTop.value = 0
     requestAnimationFrame(() => {
@@ -240,9 +270,8 @@ function setTime(value: number | (number | null)[], type?: MonthPanelTimeType) {
   if (isArray(value) && value[0] && value[1] && type === 'start' && timeType.value === 'start') {
     type = 'end'
   }
-  timeData.value = getTime(value, type) || []
-  timeValue.value = getTimeValue(value, type || '')
   timeType.value = type || ''
+  timeValue.value = getTimeValue(value, type || '')
 }
 function handleDateChange({ value, type }: { value: number | (number | null)[]; type?: MonthPanelTimeType }) {
   if (!isEqual(value, props.value)) {
@@ -259,16 +288,14 @@ function handleTimeChange({ value }: { value: any[] }) {
   if (!props.value) {
     return
   }
-  if (props.type === 'datetime' && typeof props.value === 'number') {
+  if (props.type === 'datetime' && isNumber(props.value)) {
     const date = new Date(props.value)
     date.setHours(value[0])
     date.setMinutes(value[1])
     date.setSeconds(props.hideSecond ? 0 : value[2])
     const dateTime = date.getTime()
-    timeData.value = getTime(dateTime) || []
-    timeValue.value = value
     handleChange(dateTime)
-  } else if (typeof props.value === 'object') {
+  } else if (isArray(props.value) && props.type === 'datetimerange') {
     const [start, end] = props.value!
     const dataValue = timeType.value === 'start' ? start : end
     const date = new Date(dataValue || '')
@@ -285,9 +312,6 @@ function handleTimeChange({ value }: { value: any[] }) {
     } else {
       finalValue[1] = dateTime
     }
-
-    timeData.value = getTime(finalValue, timeType.value) || []
-    timeValue.value = value
     innerValue.value = finalValue // 内部保存一个值，用于判断新老值，避免监听器触发
     handleChange(finalValue)
   }
@@ -300,24 +324,23 @@ function handlePickEnd() {
 }
 
 const monthScroll = (event: { detail: { scrollTop: number } }) => {
-  const monthsInfo = months.value(props.minDate, props.maxDate)
-  if (monthsInfo.length <= 1) {
+  if (months.value.length <= 1) {
     return
   }
   const scrollTop = Math.max(0, event.detail.scrollTop)
-  doSetSubtitle(scrollTop, monthsInfo)
+  doSetSubtitle(scrollTop)
 }
 
 /**
  * 设置小标题
  * scrollTop 滚动条位置
  */
-function doSetSubtitle(scrollTop: number, monthsInfo: MonthInfo[]) {
+function doSetSubtitle(scrollTop: number) {
   let height: number = 0 // 月份高度和
-  for (let index = 0; index < monthsInfo.length; index++) {
-    height = height + monthsInfo[index].height
+  for (let index = 0; index < months.value.length; index++) {
+    height = height + months.value[index].height
     if (scrollTop < height + 45) {
-      title.value = formatMonthTitle(monthsInfo[index].date)
+      scrollIndex.value = index
       return
     }
   }
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts
index 53b6dbf78..04db27c13 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts
@@ -1,18 +1,21 @@
+import { computed } from 'vue'
 import { dayjs } from '../common/dayjs'
 import { isArray, isFunction, padZero } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import type { CalendarDayType, CalendarItem, CalendarTimeFilter, CalendarType } from './types'
 const { translate } = useTranslate('calendar-view')
 
-const weeks: string[] = [
-  translate('weeks.sun'),
-  translate('weeks.mon'),
-  translate('weeks.tue'),
-  translate('weeks.wed'),
-  translate('weeks.thu'),
-  translate('weeks.fri'),
-  translate('weeks.sat')
-]
+const weeks = computed(() => {
+  return [
+    translate('weeks.sun'),
+    translate('weeks.mon'),
+    translate('weeks.tue'),
+    translate('weeks.wed'),
+    translate('weeks.thu'),
+    translate('weeks.fri'),
+    translate('weeks.sat')
+  ]
+})
 
 /**
  * 比较两个时间的日期是否相等
@@ -110,7 +113,7 @@ export function getWeekLabel(index: number) {
     index = index % 7
   }
 
-  return weeks[index]
+  return weeks.value[index]
 }
 
 /**
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
index 2ff545801..1e879960c 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
@@ -2,7 +2,7 @@
   <view class="wd-year-panel">
     <view v-if="showPanelTitle" class="wd-year-panel__title">{{ title }}</view>
     <scroll-view class="wd-year-panel__container" :style="`height: ${scrollHeight}px`" scroll-y @scroll="yearScroll" :scroll-top="scrollTop">
-      <view v-for="(item, index) in years(minDate, maxDate)" :key="index" :id="`year${index}`">
+      <view v-for="(item, index) in years" :key="index" :id="`year${index}`">
         <year
           :type="type"
           :date="item.date"
@@ -31,7 +31,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, onBeforeMount } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { compareYear, formatYearTitle, getYears } from '../utils'
 import { isArray, isNumber, requestAnimationFrame } from '../../common/util'
 import Year from '../year/year.vue'
@@ -39,8 +39,8 @@ import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
 
 const props = defineProps(yearPanelProps)
 
-const title = ref<string>('')
 const scrollTop = ref<number>(0) // 滚动位置
+const scrollIndex = ref<number>(0) // 当前显示的年份索引
 
 // 滚动区域的高度
 const scrollHeight = computed(() => {
@@ -48,21 +48,24 @@ const scrollHeight = computed(() => {
   return scrollHeight
 })
 
-const years = computed(() => {
-  return (minDate: number, maxDate: number): YearInfo[] => {
-    let years = getYears(minDate, maxDate).map((year) => {
-      return {
-        date: year,
-        height: 237
-      }
-    })
-    return years
-  }
+// 年份信息
+const years = computed<YearInfo[]>(() => {
+  return getYears(props.minDate, props.maxDate).map((year) => {
+    return {
+      date: year,
+      height: 237
+    }
+  })
+})
+
+// 标题
+const title = computed(() => {
+  return formatYearTitle(years.value[scrollIndex.value].date)
 })
 
 const emit = defineEmits(['change'])
 
-onBeforeMount(() => {
+onMounted(() => {
   scrollIntoView()
 })
 
@@ -79,14 +82,12 @@ function scrollIntoView() {
       activeDate = Date.now()
     }
 
-    const yearsInfo = years.value(props.minDate, props.maxDate)
-
     let top: number = 0
-    for (let index = 0; index < yearsInfo.length; index++) {
-      if (compareYear(yearsInfo[index].date, activeDate) === 0) {
+    for (let index = 0; index < years.value.length; index++) {
+      if (compareYear(years.value[index].date, activeDate) === 0) {
         break
       }
-      top += yearsInfo[index] ? Number(yearsInfo[index].height) : 0
+      top += years.value[index] ? Number(years.value[index].height) : 0
     }
     scrollTop.value = 0
     requestAnimationFrame(() => {
@@ -96,24 +97,23 @@ function scrollIntoView() {
 }
 
 const yearScroll = (e: Event) => {
-  const yearsInfo = years.value(props.minDate, props.maxDate)
-  if (yearsInfo.length <= 1) {
+  if (years.value.length <= 1) {
     return
   }
   const scrollTop = Math.max(0, (e.target as Element).scrollTop)
-  doSetSubtitle(scrollTop, yearsInfo)
+  doSetSubtitle(scrollTop)
 }
 
 /**
  * 设置小标题
  * scrollTop 滚动条位置
  */
-function doSetSubtitle(scrollTop: number, yearsInfo: YearInfo[]) {
+function doSetSubtitle(scrollTop: number) {
   let height: number = 0 // 月份高度和
-  for (let index = 0; index < yearsInfo.length; index++) {
-    height = height + yearsInfo[index].height
+  for (let index = 0; index < years.value.length; index++) {
+    height = height + years.value[index].height
     if (scrollTop < height + 45) {
-      title.value = formatYearTitle(yearsInfo[index].date)
+      scrollIndex.value = index
       return
     }
   }
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
index 969cd3032..95219a76b 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
@@ -206,13 +206,26 @@ const calendarValue = ref<null | number | number[]>(null)
 const lastCalendarValue = ref<null | number | number[]>(null)
 const panelHeight = ref<number>(338)
 const confirmBtnDisabled = ref<boolean>(true)
-const showValue = ref<string>('')
 const currentTab = ref<number>(0)
 const lastTab = ref<number>(0)
 const currentType = ref<CalendarType>('date')
-const lastCurrentType = ref<CalendarType>('date')
+const lastCurrentType = ref<CalendarType>()
 const inited = ref<boolean>(false)
-const rangeLabel = ref<Array<string>>([])
+
+const rangeLabel = computed(() => {
+  const [start, end] = deepClone(isArray(calendarValue.value) ? calendarValue.value : [])
+  return [start, end].map((item, index) => {
+    return (props.innerDisplayFormat || formatRange)(item, index === 0 ? 'start' : 'end', currentType.value)
+  })
+})
+
+const showValue = computed(() => {
+  if ((!isArray(props.modelValue) && props.modelValue) || (isArray(props.modelValue) && props.modelValue.length)) {
+    return (props.displayFormat || defaultDisplayFormat)(props.modelValue, lastCurrentType.value || currentType.value)
+  } else {
+    return ''
+  }
+})
 
 const cell = useCell()
 
@@ -225,11 +238,6 @@ watch(
     if (isEqual(val, oldVal)) return
     calendarValue.value = deepClone(val)
     confirmBtnDisabled.value = getConfirmBtnStatus(val)
-    setShowValue()
-
-    if (props.type.indexOf('range') > -1) {
-      setInnerLabel()
-    }
   },
   {
     immediate: true
@@ -248,12 +256,6 @@ watch(
     }
     panelHeight.value = props.showConfirm ? 338 : 400
     currentType.value = deepClone(newValue)
-
-    setShowValue()
-
-    if (props.type.indexOf('range') > -1) {
-      setInnerLabel()
-    }
   },
   {
     deep: true,
@@ -336,7 +338,7 @@ function close() {
   setTimeout(() => {
     calendarValue.value = deepClone(lastCalendarValue.value)
     currentTab.value = lastTab.value
-    currentType.value = lastCurrentType.value
+    currentType.value = lastCurrentType.value || 'date'
     confirmBtnDisabled.value = getConfirmBtnStatus(lastCalendarValue.value)
   }, 250)
   emit('cancel')
@@ -370,10 +372,6 @@ function handleChange({ value }: { value: number | number[] | null }) {
     value
   })
 
-  if (props.type.indexOf('range') > -1) {
-    setInnerLabel()
-  }
-
   if (!props.showConfirm && !confirmBtnDisabled.value) {
     handleConfirm()
   }
@@ -392,25 +390,13 @@ function handleConfirm() {
 }
 function onConfirm() {
   pickerShow.value = false
+  lastCurrentType.value = currentType.value
   emit('update:modelValue', calendarValue.value)
   emit('confirm', {
     value: calendarValue.value
   })
-  setShowValue()
-}
-function setInnerLabel() {
-  const [start, end] = deepClone(isArray(calendarValue.value) ? calendarValue.value : [])
-  rangeLabel.value = [start, end].map((item, index) => {
-    return (props.innerDisplayFormat || formatRange)(item, index === 0 ? 'start' : 'end', currentType.value)
-  })
-}
-function setShowValue() {
-  if ((!isArray(calendarValue.value) && calendarValue.value) || (isArray(calendarValue.value) && calendarValue.value.length)) {
-    showValue.value = (props.displayFormat || defaultDisplayFormat)(calendarValue.value, currentType.value)
-  } else {
-    showValue.value = ''
-  }
 }
+
 function handleShortcutClick(index: number) {
   if (props.onShortcutsClick && typeof props.onShortcutsClick === 'function') {
     calendarValue.value = deepClone(
@@ -420,10 +406,6 @@ function handleShortcutClick(index: number) {
       })
     )
     confirmBtnDisabled.value = getConfirmBtnStatus(calendarValue.value)
-
-    if (props.type.indexOf('range') > -1) {
-      setInnerLabel()
-    }
   }
 
   if (!props.showConfirm) {