From 10a8c21fab1f4b3cf1e3b418d90906f40f320435 Mon Sep 17 00:00:00 2001 From: danial Date: Mon, 8 Dec 2025 15:01:40 +0800 Subject: [PATCH] =?UTF-8?q?feat(prefetch):=20=E5=A2=9E=E5=8A=A0=E5=AE=9E?= =?UTF-8?q?=E9=99=85=E6=9F=A5=E8=AF=A2=E6=97=B6=E9=97=B4=E5=AD=97=E6=AE=B5?= =?UTF-8?q?=E5=8F=8A=E6=97=A5=E5=BF=97=E5=88=86=E9=A1=B5=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 在预拉取订单日志响应中新增实际最早和最晚日志时间字段 - 修改接口返回类型，添加 actualStartTime 和 actualEndTime 字段 - 组件中增加当前查询起止时间状态管理 - 优化日志列表分页加载逻辑，支持根据实际时间加载更早日志 - 修正滚动触底加载时机，避免重复加载 - 搜索后将滚动条重置至顶部 - 初始加载日志时，滚动条自动定位顶部展示最新日志 --- ...amiApiCamelOilV1GetPrefetchOrderLogsRes.md | 12 ++- ...amel-oil-v1-get-prefetch-order-logs-res.ts | 8 ++ .../prefetch/components/prefetch-logs.vue | 78 ++++++++++++------- 3 files changed, 67 insertions(+), 31 deletions(-) diff --git a/src/api/generated/docs/KamiApiCamelOilV1GetPrefetchOrderLogsRes.md b/src/api/generated/docs/KamiApiCamelOilV1GetPrefetchOrderLogsRes.md index 24a57d3..5e872dc 100644 --- a/src/api/generated/docs/KamiApiCamelOilV1GetPrefetchOrderLogsRes.md +++ b/src/api/generated/docs/KamiApiCamelOilV1GetPrefetchOrderLogsRes.md @@ -2,9 +2,11 @@ ## Properties -| Name | Type | Description | Notes | -| -------- | -------------------------------------------------------------------------------------------------- | ------------------ | --------------------------------- | -| **logs** | [**Array<KamiApiCamelOilV1PrefetchOrderLogItem>**](KamiApiCamelOilV1PrefetchOrderLogItem.md) | 预拉取订单日志列表 | [optional] [default to undefined] | +| Name | Type | Description | Notes | +| ------------------- | -------------------------------------------------------------------------------------------------- | ------------------------ | --------------------------------- | +| **logs** | [**Array<KamiApiCamelOilV1PrefetchOrderLogItem>**](KamiApiCamelOilV1PrefetchOrderLogItem.md) | 预拉取订单日志列表 | [optional] [default to undefined] | +| **actualStartTime** | **string** | 实际查询到的最早日志时间 | [optional] [default to undefined] | +| **actualEndTime** | **string** | 实际查询到的最晚日志时间 | [optional] [default to undefined] | ## Example @@ -12,7 +14,9 @@ import { KamiApiCamelOilV1GetPrefetchOrderLogsRes } from './api'; const instance: KamiApiCamelOilV1GetPrefetchOrderLogsRes = { - logs + logs, + actualStartTime, + actualEndTime }; ``` diff --git a/src/api/generated/models/kami-api-camel-oil-v1-get-prefetch-order-logs-res.ts b/src/api/generated/models/kami-api-camel-oil-v1-get-prefetch-order-logs-res.ts index cb379c9..69182af 100644 --- a/src/api/generated/models/kami-api-camel-oil-v1-get-prefetch-order-logs-res.ts +++ b/src/api/generated/models/kami-api-camel-oil-v1-get-prefetch-order-logs-res.ts @@ -21,4 +21,12 @@ export interface KamiApiCamelOilV1GetPrefetchOrderLogsRes { * 预拉取订单日志列表 */ logs?: Array; + /** + * 实际查询到的最早日志时间 + */ + actualStartTime?: string; + /** + * 实际查询到的最晚日志时间 + */ + actualEndTime?: string; } diff --git a/src/views/camel-oil-info/prefetch/components/prefetch-logs.vue b/src/views/camel-oil-info/prefetch/components/prefetch-logs.vue index 3755066..0821b33 100644 --- a/src/views/camel-oil-info/prefetch/components/prefetch-logs.vue +++ b/src/views/camel-oil-info/prefetch/components/prefetch-logs.vue @@ -132,12 +132,11 @@ const formModel = reactive({ }); const logsRenderData = ref([]); -const allLogs = ref([]); -const currentPage = ref(1); -const pageSize = ref(50); const hasMore = ref(true); const logContentRef = ref(); const loadingMore = ref(false); +const currentStartTime = ref(null); // 当前查询的开始时间 +const currentEndTime = ref(null); // 当前查询的结束时间 const generateFormModel = () => { const now = dayjs(); @@ -156,43 +155,60 @@ const formatDateTime = (dateTime: string | undefined): string => { return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss'); }; -const fetchLogs = async (reset = true) => { - if (!formModel.startTime || !formModel.endTime) { - Message.warning({ - content: '请选择开始时间和结束时间', - closable: true - }); - setLoading(false); - return; - } +const fetchLogs = async ( + reset = true, + startTimeOverride?: string, + endTimeOverride?: string +) => { + let queryStartTime: string; + let queryEndTime: string; if (reset) { + // 初始查询或搜索，使用表单时间 + if (!formModel.startTime || !formModel.endTime) { + Message.warning({ + content: '请选择开始时间和结束时间', + closable: true + }); + setLoading(false); + return; + } + queryStartTime = dayjs(formModel.startTime).format('YYYY-MM-DD HH:mm:ss'); + queryEndTime = dayjs(formModel.endTime).format('YYYY-MM-DD HH:mm:ss'); setLoading(true); } else { + // 继续查询，使用传入的时间覆盖或当前时间往前倒1分钟 + queryStartTime = + startTimeOverride || + dayjs(currentStartTime.value) + .subtract(1, 'minute') + .format('YYYY-MM-DD HH:mm:ss'); + queryEndTime = endTimeOverride || currentStartTime.value!; // 从当前最早时间开始 loadingMore.value = true; } try { const { data } = await jdV2PrefetchClient.apiJdV2PrefetchLogsGet({ - startTime: dayjs(formModel.startTime).format('YYYY-MM-DD HH:mm:ss'), - endTime: dayjs(formModel.endTime).format('YYYY-MM-DD HH:mm:ss') + startTime: queryStartTime, + endTime: queryEndTime }); const newLogs = data.logs || []; + const actualStartTime = data.actualStartTime; + const actualEndTime = data.actualEndTime; if (reset) { - allLogs.value = newLogs; - logsRenderData.value = newLogs.slice(0, pageSize.value); - currentPage.value = 1; - hasMore.value = newLogs.length > pageSize.value; + // 初始查询 + logsRenderData.value = newLogs.reverse(); // 倒序显示，最新的在前面 + currentStartTime.value = actualStartTime || queryStartTime; + currentEndTime.value = actualEndTime || queryEndTime; + hasMore.value = newLogs.length > 0 && actualStartTime !== null; } else { - const nextBatch = newLogs.slice( - currentPage.value * pageSize.value, - (currentPage.value + 1) * pageSize.value - ); - logsRenderData.value.push(...nextBatch); - currentPage.value++; - hasMore.value = currentPage.value * pageSize.value < newLogs.length; + // 继续查询 + logsRenderData.value.push(...newLogs.reverse()); // 倒序显示，追加在后面 + currentStartTime.value = actualStartTime || queryStartTime; + // 如果没有返回更多数据或者实际查询时间没有变化，说明没有更多数据了 + hasMore.value = newLogs.length > 0 && actualStartTime !== null; } } catch (err) { console.error('获取预拉取订单日志失败:', err); @@ -218,14 +234,20 @@ const handleScroll = (event: Event) => { const target = event.target as HTMLElement; const { scrollTop, scrollHeight, clientHeight } = target; - // 当滚动到距离底部50px时加载更多 - if (scrollTop + clientHeight >= scrollHeight - 50) { + // 当滚动到底部（距离底部50px内）时加载更早的日志 + if (scrollHeight - scrollTop <= clientHeight + 50) { loadMoreLogs(); } }; const searchLogs = () => { fetchLogs(true); + // 搜索后重置滚动位置到顶部 + nextTick(() => { + if (logContentRef.value) { + logContentRef.value.scrollTop = 0; + } + }); }; const resetLogs = () => { @@ -242,6 +264,8 @@ onMounted(() => { nextTick(() => { if (logContentRef.value) { logContentRef.value.addEventListener('scroll', handleScroll); + // 初始状态滚动到顶部显示最新日志 + logContentRef.value.scrollTop = 0; } }); });