diff --git a/CHANGELOG.md b/CHANGELOG.md index 55d693185f240f777dbcba4e03ed3c289289d36d..a5e52cb5a9136f5093358128c8e83bfd4a38a7ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ - 新增站内信工作流类型通知点击跳转具体流程页面 - 树节点新增title提示 - 直接内容新增title提示 +- 新增日历时间轴加载更多 ## [0.7.41-alpha.35] - 2025-11-04 diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx index 5f70a80c3fbbc9441e04eaec9aa439a294ba3eeb..36b49e79001606bebd40b0cbfba1ebb089196715 100644 --- a/src/control/calendar/calendar.tsx +++ b/src/control/calendar/calendar.tsx @@ -11,6 +11,7 @@ import { VNode, watch, PropType, + computed, defineComponent, resolveComponent, } from 'vue'; @@ -31,6 +32,7 @@ import { IButtonContainerState, } from '@ibiz-template/runtime'; import dayjs from 'dayjs'; +import { debounce } from 'lodash-es'; import { showTitle } from '@ibiz-template/core'; import { MenuItem } from '@imengyu/vue3-context-menu'; import CustomCalendar from './components/custom-calendar'; @@ -76,7 +78,7 @@ export const CalendarControl = defineComponent({ loadDefault: { type: Boolean, default: true }, }, setup() { - const c = useControlController( + const c: CalendarController = useControlController( (...args) => new CalendarController(...args), ); const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`); @@ -89,6 +91,23 @@ export const CalendarControl = defineComponent({ const showDateRange = ref(c.controlParams.showmode === 'daterange'); const showDateList = ref(c.controlParams.showmode === 'expand'); + /** + * 无限滚动元素 + */ + const infiniteScroll = ref(); + + /** + * 禁用加载更多 + */ + const disabledLodeMore = computed(() => { + if (c.model.calendarStyle !== 'TIMELINE' || c.state.isLoading) + return true; + const result = !Object.values(c.loadMoreItems).some( + item => item.curPage < item.totalPage, + ); + return result; + }); + // 月样式图例点击切换显示与隐藏 const monthLegendClick = (_item: IData): void => { Object.assign(_item, { isShow: !_item.isShow }); @@ -142,6 +161,20 @@ export const CalendarControl = defineComponent({ }, ); + /** + * @description 处理滚动加载 + * @returns {*} {Promise} + */ + const handleScrollLoad = async (): Promise => { + if (!infiniteScroll.value || disabledLodeMore.value) return; + const scrollTop = infiniteScroll.value.scrollTop; + const scrollHeight = infiniteScroll.value.scrollHeight; + const clientHeight = infiniteScroll.value.clientHeight; + // 滚动到底部加载更多 + if (scrollHeight - scrollTop - clientHeight < 10) + await c.load({ isLoadMore: true }); + }; + // 气泡框对应显示日期 const popoverValue = ref(''); @@ -491,15 +524,18 @@ export const CalendarControl = defineComponent({ ns, curPopover, calendarRef, - showDateRange, - showDateList, - popoverValue, legendItems, + popoverValue, + showDateList, + showDateRange, + infiniteScroll, + disabledLodeMore, selectDate, calcItemStyle, + handleScrollLoad, + monthLegendClick, calcCalendarItems, onNodeContextmenu, - monthLegendClick, }; }, render() { @@ -910,7 +946,11 @@ export const CalendarControl = defineComponent({ */ const renderTimeLine = () => { return ( -
+
{this.c.state.items.length > 0 ? this.c.state.items.map((item: ICalendarItemData) => { @@ -919,9 +959,10 @@ export const CalendarControl = defineComponent({ return item.itemType === calendarItems.itemType; }, ); - const temptime = item.beginTime - ? dayjs(item.beginTime).format(this.c.timelineCaptionFormat) - : item.beginTime; + const time = item[this.c.groupTimeField]; + const temptime = time + ? dayjs(time).format(this.c.timelineCaptionFormat) + : time; return (