feat(system): 优化配置页面加载更多功能

- 添加加载更多组件并实现分页加载功能
- 动态设置页面标题为新增或编辑配置
- 优化数据加载逻辑,实现自动加载下一页
This commit is contained in:
Ky10
2024-11-16 21:20:03 +08:00
parent 8ad14e6609
commit 7aab303097
2 changed files with 19 additions and 6 deletions

View File

@@ -4,7 +4,7 @@
<wd-drop-menu
close-on-click-modal
class="mb-20rpx"
style=" margin-right: 20rpx;margin-left: 20rpx"
style="margin-right: 20rpx; margin-left: 20rpx"
>
<wd-drop-menu-item
ref="dropMenu"
@@ -37,7 +37,7 @@
style="margin: 20rpx; border-bottom: 1px solid #ccc"
@click="itemClicked(item)"
>
<view class="card-content" style=" padding: 20rpx;margin: 20rpx">
<view class="card-content" style="padding: 20rpx; margin: 20rpx">
<view class="item">
<view class="title">配置名称{{ item.configName }}</view>
<view class="content">
@@ -61,6 +61,7 @@
</view>
</view>
</view>
<wd-loadmore :state="state" @reload="handleQuery" />
</scroll-view>
<!-- 底部按钮 -->
@@ -88,10 +89,9 @@ import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/syst
import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
const loading = ref(false);
const selectIds = ref<number[]>([]);
const total = ref(0);
const loadMoreState = ref<LoadMoreState>("loading");
const queryParams = reactive<ConfigPageQuery>({
pageNum: 1,
pageSize: 10,
@@ -132,14 +132,23 @@ function handleOpened() {
}
function handleQuery() {
loading.value = true;
state.value = "loading";
ConfigAPI.getPage(queryParams)
.then((data) => {
pageData.value = data.list;
total.value = data.total;
// 计算当前已加载的条数
const loadedCount = queryParams.pageNum * queryParams.pageSize;
// 判断是否需要加载下一页
if (loadedCount < total.value) {
queryParams.pageNum++;
// 调用 handleQuery 继续加载下一页
handleQuery();
}
})
.finally(() => {
loading.value = false;
state.value = "finished";
});
}

View File

@@ -153,6 +153,10 @@ const item = ref<ConfigPageVO | null>(null);
// 获取传递的参数
onLoad((options) => {
console.log("接收到参数:", options);
const title = options && options.item ? "编辑配置" : "新增配置";
uni.setNavigationBarTitle({
title: title,
});
if (options && options.item) {
try {
item.value = JSON.parse(decodeURIComponent(options.item));