| | |
| | | <template> |
| | | <view class="yd-page-container"> |
| | | <view class="yd-page-container yd-page-container-paging"> |
| | | <!-- 顶部导航栏 --> |
| | | <wd-navbar |
| | | title="${table.classComment}管理" |
| | |
| | | <SearchForm @search="handleQuery" @reset="handleReset" /> |
| | | |
| | | <!-- ${table.classComment}列表 --> |
| | | <z-paging |
| | | ref="pagingRef" |
| | | v-model="list" |
| | | :fixed="false" |
| | | class="min-h-0 flex-1" |
| | | :default-page-size="10" |
| | | :refresher-enabled="true" |
| | | :inside-more="true" |
| | | :loading-more-default-as-loading="true" |
| | | empty-view-text="暂无${table.classComment}数据" |
| | | @query="queryList" |
| | | > |
| | | <view class="p-24rpx"> |
| | | <view |
| | | v-for="item in list" |
| | |
| | | #end |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 加载更多 --> |
| | | <view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center"> |
| | | <wd-status-tip image="content" tip="暂无${table.classComment}数据" /> |
| | | </view> |
| | | <wd-loadmore |
| | | v-if="list.length > 0" |
| | | :state="loadMoreState" |
| | | @reload="loadMore" |
| | | /> |
| | | </view> |
| | | </z-paging> |
| | | |
| | | <!-- 新增按钮 --> |
| | | <wd-fab |
| | |
| | | #end |
| | | #end |
| | | import type { ${simpleClassName} } from '@/api/${table.moduleName}/${table.businessName}' |
| | | import type { LoadMoreState } from '@/http/types' |
| | | import { onReachBottom } from '@dcloudio/uni-app' |
| | | import { onUnload } from '@dcloudio/uni-app' |
| | | import { onMounted, ref } from 'vue' |
| | | import { get${simpleClassName}Page } from '@/api/${table.moduleName}/${table.businessName}' |
| | | import { useAccess } from '@/hooks/useAccess' |
| | |
| | | }) |
| | | |
| | | const { hasAccessByCodes } = useAccess() |
| | | const total = ref(0) |
| | | const list = ref<${simpleClassName}[]>([]) |
| | | const loadMoreState = ref<LoadMoreState>('loading') |
| | | const queryParams = ref({ |
| | | pageNo: 1, |
| | | pageSize: 10, |
| | | }) |
| | | const list = ref<${simpleClassName}[]>([]) // 列表数据 |
| | | const pagingRef = ref<any>() // 分页组件引用 |
| | | const queryParams = ref<Record<string, any>>({}) // 查询参数 |
| | | |
| | | /** 返回上一页 */ |
| | | function handleBack() { |
| | |
| | | } |
| | | |
| | | /** 查询${table.classComment}列表 */ |
| | | async function getList() { |
| | | loadMoreState.value = 'loading' |
| | | async function queryList(pageNo: number, pageSize: number) { |
| | | try { |
| | | const data = await get${simpleClassName}Page(queryParams.value) |
| | | list.value = [...list.value, ...data.list] |
| | | total.value = data.total |
| | | loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading' |
| | | const params = { |
| | | ...queryParams.value, |
| | | pageNo, |
| | | pageSize, |
| | | } |
| | | const data = await get${simpleClassName}Page(params) |
| | | pagingRef.value?.completeByTotal(data.list, data.total) |
| | | } catch { |
| | | queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1 |
| | | loadMoreState.value = 'error' |
| | | pagingRef.value?.complete(false) |
| | | } |
| | | } |
| | | |
| | | /** 搜索按钮操作 */ |
| | | function handleQuery(data?: Record<string, any>) { |
| | | queryParams.value = { |
| | | ...data, |
| | | pageNo: 1, |
| | | pageSize: queryParams.value.pageSize, |
| | | } |
| | | list.value = [] |
| | | getList() |
| | | queryParams.value = { ...data } |
| | | reload() |
| | | } |
| | | |
| | | /** 重置按钮操作 */ |
| | |
| | | handleQuery() |
| | | } |
| | | |
| | | /** 加载更多 */ |
| | | function loadMore() { |
| | | if (loadMoreState.value === 'finished') { |
| | | return |
| | | } |
| | | queryParams.value.pageNo++ |
| | | getList() |
| | | /** 重新加载 */ |
| | | function reload() { |
| | | pagingRef.value?.reload() |
| | | } |
| | | |
| | | /** 新增${table.classComment} */ |
| | |
| | | }) |
| | | } |
| | | |
| | | /** 触底加载更多 */ |
| | | onReachBottom(() => { |
| | | loadMore() |
| | | }) |
| | | |
| | | /** 初始化 */ |
| | | onMounted(() => { |
| | | getList() |
| | | uni.$on('${table.moduleName}:${table.businessName}:reload', reload) |
| | | }) |
| | | |
| | | /** 卸载 */ |
| | | onUnload(() => { |
| | | uni.$off('${table.moduleName}:${table.businessName}:reload', reload) |
| | | }) |
| | | </script> |
| | | |