feat(system): 优化配置页面加载更多功能
- 添加加载更多组件并实现分页加载功能 - 动态设置页面标题为新增或编辑配置 - 优化数据加载逻辑,实现自动加载下一页
This commit is contained in:
@@ -4,7 +4,7 @@
|
|||||||
<wd-drop-menu
|
<wd-drop-menu
|
||||||
close-on-click-modal
|
close-on-click-modal
|
||||||
class="mb-20rpx"
|
class="mb-20rpx"
|
||||||
style=" margin-right: 20rpx;margin-left: 20rpx"
|
style="margin-right: 20rpx; margin-left: 20rpx"
|
||||||
>
|
>
|
||||||
<wd-drop-menu-item
|
<wd-drop-menu-item
|
||||||
ref="dropMenu"
|
ref="dropMenu"
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
style="margin: 20rpx; border-bottom: 1px solid #ccc"
|
style="margin: 20rpx; border-bottom: 1px solid #ccc"
|
||||||
@click="itemClicked(item)"
|
@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="item">
|
||||||
<view class="title">配置名称:{{ item.configName }}</view>
|
<view class="title">配置名称:{{ item.configName }}</view>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
@@ -61,6 +61,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<wd-loadmore :state="state" @reload="handleQuery" />
|
||||||
</scroll-view>
|
</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 { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
|
||||||
import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
|
import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
|
||||||
|
|
||||||
|
const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const selectIds = ref<number[]>([]);
|
|
||||||
const total = ref(0);
|
const total = ref(0);
|
||||||
const loadMoreState = ref<LoadMoreState>("loading");
|
|
||||||
const queryParams = reactive<ConfigPageQuery>({
|
const queryParams = reactive<ConfigPageQuery>({
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
@@ -132,14 +132,23 @@ function handleOpened() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleQuery() {
|
function handleQuery() {
|
||||||
loading.value = true;
|
state.value = "loading";
|
||||||
ConfigAPI.getPage(queryParams)
|
ConfigAPI.getPage(queryParams)
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
pageData.value = data.list;
|
pageData.value = data.list;
|
||||||
total.value = data.total;
|
total.value = data.total;
|
||||||
|
// 计算当前已加载的条数
|
||||||
|
const loadedCount = queryParams.pageNum * queryParams.pageSize;
|
||||||
|
|
||||||
|
// 判断是否需要加载下一页
|
||||||
|
if (loadedCount < total.value) {
|
||||||
|
queryParams.pageNum++;
|
||||||
|
// 调用 handleQuery 继续加载下一页
|
||||||
|
handleQuery();
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
loading.value = false;
|
state.value = "finished";
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -153,6 +153,10 @@ const item = ref<ConfigPageVO | null>(null);
|
|||||||
// 获取传递的参数
|
// 获取传递的参数
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
console.log("接收到参数:", options);
|
console.log("接收到参数:", options);
|
||||||
|
const title = options && options.item ? "编辑配置" : "新增配置";
|
||||||
|
uni.setNavigationBarTitle({
|
||||||
|
title: title,
|
||||||
|
});
|
||||||
if (options && options.item) {
|
if (options && options.item) {
|
||||||
try {
|
try {
|
||||||
item.value = JSON.parse(decodeURIComponent(options.item));
|
item.value = JSON.parse(decodeURIComponent(options.item));
|
||||||
|
|||||||
Reference in New Issue
Block a user