diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f1e29e94c1287fc0a9f6d1285c2e4cee01445fe..0c006800d55ff7161b7ad0e7fb5891b5e85d7fa3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -127,6 +127,7 @@ - 修复树部件屏幕高度过高时数据显示不全 - 修复树部件计数器样式未显示移动端计数器样式 - 修复下拉列表框值显示异常 +- 修复日历标记显示异常 ## [0.7.41-alpha.19] - 2025-10-16 diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx index e1a43cebbf4b4cabdcec02fa2bc06caa511624d6..32b0490c1a0bd2727971f6510577814f7698b4b3 100644 --- a/src/control/calendar/calendar.tsx +++ b/src/control/calendar/calendar.tsx @@ -1,25 +1,27 @@ import { useControlController, useNamespace } from '@ibiz-template/vue3-util'; import { - computed, - defineComponent, - PropType, Ref, ref, VNode, watch, + PropType, + defineComponent, } from 'vue'; import { ILayoutPanel, ISysCalendar } from '@ibiz/model-core'; import { - CalendarController, - ICalendarItemData, IControlProvider, + ICalendarItemData, + CalendarController, } from '@ibiz-template/runtime'; import dayjs from 'dayjs'; +import isBetween from 'dayjs/plugin/isBetween'; import VueHashCalendar from 'vue3-hash-calendar'; import 'vue3-hash-calendar/es/index.css'; import { getCurSelectDayDate, getCurSelectMonthDate } from './date-util'; -import './calendar.scss'; import { usePopstateListener } from '../../util'; +import './calendar.scss'; + +dayjs.extend(isBetween); export const CalendarControl = defineComponent({ name: 'IBizCalendarControl', @@ -73,8 +75,8 @@ export const CalendarControl = defineComponent({ // 存储月加载缓存 const markDateItems: Ref = ref({}); - // 加载的标记数据 + // 加载的标记数据 const loadMarkerItems: Ref = ref([]); const setMarkDate = (date: Date) => { @@ -136,61 +138,13 @@ export const CalendarControl = defineComponent({ }; }; - /** - * markerDate实际数据 - * - * @author zk - * @date 2023-08-08 11:08:29 - * @param {ICalendarItemData} data - * @return {*} {IData} - */ - const markerData = computed((): IData => { - // 过滤同一天数据 并且 是不同日历项类型 - const filterSameDayAndUniqueType = ( - itemData: IData, - index: number, - arr: IData[], - ) => { - const dateString = dayjs(new Date(itemData.beginTime)).format( - 'YYYY-MM-DD', - ); - // 判断属性 beginTime 是否在同一天 itemType 是否重复 - const isSameDayAndUniqueType = - arr.findIndex( - item => - dateString === - dayjs(new Date(item.beginTime)).format('YYYY-MM-DD') && - item.itemType === itemData.itemType, - ) === index; - return isSameDayAndUniqueType; - }; - - const date = Object.values(markDateItems.value) - .flat() - .filter(filterSameDayAndUniqueType) - .map(item => { - const _date = new Date(item.beginTime); - return { - date: item.beginTime, - type: item.itemType, - day: _date.getDate(), - month: _date.getMonth(), - year: _date.getFullYear(), - data: item, - }; - }); - return date; - }); - - const dateChange = (newDate: Date) => { + const dateChange = async (newDate: Date) => { c.state.selectedDate = newDate; - loadData(c.state.selectedDate); + await loadData(c.state.selectedDate); const items = markDateItems.value[dayjs(newDate).format('YYYY-MM')]; // 加载过当前月份的marker则不加载 - if (items) { - return; - } - loadMarkerData(c.state.selectedDate); + if (items) return; + await loadMarkerData(c.state.selectedDate); }; watch( @@ -227,6 +181,7 @@ export const CalendarControl = defineComponent({ calendar.value.reset(time); visible.value = false; }; + const closeDrawer = () => { visible.value = false; }; @@ -234,36 +189,57 @@ export const CalendarControl = defineComponent({ // 监听popstate事件 usePopstateListener(closeDrawer); + /** + * @description 通过日期计算标记 + * @param {IData} item + */ + const calcMarkerByDate = (item: IData) => { + const date = dayjs() + .set('year', item.year) + .set('month', item.month) + .set('date', item.day); + // 根据时间范围过滤 + const markers: ICalendarItemData[] = Object.values(markDateItems.value) + .flat() + .filter(item => + date.isBetween(item.beginTime, item.endTime, 'D', '[]'), + ); + // 相同类型的只要一条 + const map: Map = new Map(); + markers.forEach(item => { + if (!map.has(item.itemType)) map.set(item.itemType, item); + }); + return Array.from(map.values()); + }; + return { c, ns, - markerData, - loadItems, visible, calendar, + loadItems, currentDate, + toDay, + onCustom, onConfirm, - calcItemStyle, dateChange, closeDrawer, - onCustom, - toDay, + calcItemStyle, + calcMarkerByDate, }; }, render() { const renderMarker = (date: IData): VNode[] => { - const arr = this.markerData.filter( - (item: IData) => - item.day === date.day && - item.month === date.month && - item.year === date.year, - ); - return arr.map((item: IData) => { - const style = this.calcItemStyle(item.data); + const markers = this.calcMarkerByDate(date); + return markers.map(item => { + const style = this.calcItemStyle(item); return (
); }); @@ -376,7 +352,10 @@ export const CalendarControl = defineComponent({ // 绘制顶部工具栏 const renderHeaderToolbar = () => { return ( -
+
evt.stopPropagation()} + >
{dayjs(this.c.state.selectedDate).format('YYYY年MM月DD日')}
@@ -404,12 +383,10 @@ export const CalendarControl = defineComponent({
{ - this.dateChange(date); - }} + onChange={date => this.dateChange(date)} + default-datetime={this.c.state.selectedDate} + show-week-view={this.c.model.calendarStyle === 'WEEK'} > {{ day: ({ date }: { extendAttr: IData; date: IData }): VNode => {