danial/kami_frontend
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(prefetch): 增加实际查询时间字段及日志分页加载功能

Browse Source 
- 在预拉取订单日志响应中新增实际最早和最晚日志时间字段
- 修改接口返回类型，添加 actualStartTime 和 actualEndTime 字段
- 组件中增加当前查询起止时间状态管理
- 优化日志列表分页加载逻辑，支持根据实际时间加载更早日志
- 修正滚动触底加载时机，避免重复加载
- 搜索后将滚动条重置至顶部
- 初始加载日志时，滚动条自动定位顶部展示最新日志
This commit is contained in:
danial
2025-12-08 15:01:40 +08:00
parent 86252f67db
commit 10a8c21fab
3 changed files with 67 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/generated/docs/KamiApiCamelOilV1GetPrefetchOrderLogsRes.md
View File

@@ -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
};
```

8
src/api/generated/models/kami-api-camel-oil-v1-get-prefetch-order-logs-res.ts
View File

@@ -21,4 +21,12 @@ export interface KamiApiCamelOilV1GetPrefetchOrderLogsRes {
* 预拉取订单日志列表
*/
logs?: Array<KamiApiCamelOilV1PrefetchOrderLogItem>;
/**
* 实际查询到的最早日志时间
*/
actualStartTime?: string;
/**
* 实际查询到的最晚日志时间
*/
actualEndTime?: string;
}

78
src/views/camel-oil-info/prefetch/components/prefetch-logs.vue
View File

@@ -132,12 +132,11 @@ const formModel = reactive({
});
const logsRenderData = ref<KamiApiCamelOilV1PrefetchOrderLogItem[]>([]);
const allLogs = ref<KamiApiCamelOilV1PrefetchOrderLogItem[]>([]);
const currentPage = ref(1);
const pageSize = ref(50);
const hasMore = ref(true);
const logContentRef = ref<HTMLElement>();
const loadingMore = ref(false);
const currentStartTime = ref<string | null>(null); // 当前查询的开始时间
const currentEndTime = ref<string | null>(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;
}
});
});