read_opc/reado-app/pages/reportForm/index.vue

<template>
	<view class="content">
		<Nav title="报表" :isBack="false" />
		<view class="section">
			<u-list finished-text="没有更多了" @scrolltolower="scrolltolower" height="85vh" :key="key">
				<view v-for="item in reportList" :key="item.id" @click="handelDetail(item.id)" class="item">
					<u-list-item>
						<u-cell-group>
							<u-cell :title="item.reportTableName" :label="item.createTime" isLink></u-cell>
						</u-cell-group>
					</u-list-item>
				</view>
			</u-list>
			<view class="empty" v-if="!this.reportList.length">
				<u-empty text="暂无数据" class="empty-icon" mode="data" icon="../../static/data.png">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 查询参数
				queryParams: {
					page: 1,
					limit: 20
				},
				// 列表数据
				reportList: [],
				key: 0
			};
		},
		onShow() {
			this.queryParams.limit = 20
			this.getAllReport()
			this.key++
		},
		onPullDownRefresh() {
			this.queryParams.limit += 10
			this.getAllReport()
		},
		methods: {
			// 获取报表数据
			getAllReport() {
				uni.$http.get('/reportTable/getAllOkReportTable', this.queryParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.reportList = data.data.reportTableList
						uni.stopPullDownRefresh()
					}
				})
			},
			// 前往详情页
			handelDetail(id) {
				uni.navigateTo({
					url: "/pages/reportForm/report-detail/index?id=" + id
				})
			},
			// 列表滚动到底部触发
			scrolltolower() {
				this.queryParams.limit += 10
				this.getAllReport()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 25rpx 0rpx 25rpx;
	}

	.section {
		position: relative;
	}

	.empty {
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -200rpx;
		margin-left: -200rpx;
	}
</style>