first

components/JTableList/JTableList.vue

@@ -0,0 +1,117 @@
+<template>
+	<scroll-view
+		class="table-list"
+		scroll-y
+		:style="{ '--height': height }"
+		@scrolltolower="addNext"
+		@refresherrefresh="openRefresh"
+		:refresher-enabled="refresh"
+		:refresher-triggered="vdata.isRefresh"
+	>
+		<template v-for="(record, i) in vdata.allData" :key="i">
+			<slot name="tableBody" :record="record" :index="i" />
+		</template>
+		<view class="list-null" v-if="!vdata.apiResData.hasNext && showListNull">暂无更多数据</view>
+	</scroll-view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
+
+// 定义传入属性
+const props = defineProps({
+	reqTableDataFunc: { type: Function, default: () => {} },
+	searchData: { type: Object, default: () => {} }, // 搜索条件参数
+	pageSize: { type: Number, default: 10 }, // 默认每页条数
+	initData: { type: Boolean, default: true }, // 初始化列表数据， 默认true
+	showListNull: { type: Boolean, default: true }, //是否显示缺省 默认显示
+	height: { type: String, default: '88rpx' }, // 高度 这里的高度 为 外部使用高度  scroll-view  高度 为 100vh - 传入高度
+	refresh: { type: Boolean, default: false } //是否开启下拉刷新 默认不开启
+});
+
+const vdata = reactive({
+	allData: [], // app与web不同， app是每次查询到数据会拼接到后面
+
+	// 接口返回的数据
+	apiResData: { total: 0, records: [] },
+
+	// 分页参数
+	iPage: { pageNumber: 1, pageSize: props.pageSize },
+
+	// 下拉刷新开启状态
+	isRefresh: false
+});
+
+onMounted(() => {
+	//初始化表数据
+	props.initData ? refTable(true) : undefined;
+});
+
+// 查询表格数据
+function refTable(isToFirst = false) {
+	if (isToFirst) {
+		// 重新搜索， 第一页。
+		vdata.iPage.pageNumber = 1;
+		vdata.allData = []; //清空数据
+	}
+
+	// 更新检索数据
+	return props.reqTableDataFunc(Object.assign({}, vdata.iPage, props.searchData)).then(({ bizData }) => {
+		Object.assign(vdata.apiResData, bizData); // 列表数据更新
+
+		if (bizData.records) {
+			bizData.records.forEach((r) => vdata.allData.push(r));
+		}
+	});
+}
+
+/** 追加下一页数据 **/
+function addNext() {
+	// console.log('加载下一页')
+	// 包含下一页
+	if (vdata.apiResData.hasNext) {
+		vdata.iPage.pageNumber++;
+		refTable(false);
+	}
+}
+
+// 下拉刷新
+const openRefresh = () => {
+	vdata.isRefresh = true;
+	refTable(true).then(() => {
+		setTimeout(() => {
+			vdata.isRefresh = false;
+		}, 300);
+	});
+};
+
+// 将表格事件暴露出去  https://www.jianshu.com/p/39d14c25c987
+defineExpose({ refTable, addNext });
+</script>
+
+<style lang="scss" scoped>
+.table-list {
+	height: calc(75vh - var(--height));
+}
+.list-null {
+	position: relative;
+	height: 110rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-bottom: 70rpx;
+	gap: 20rpx;
+	font-size: 26rpx;
+	color: #a6a6a6;
+	&::after,
+	&::before {
+		content: '';
+		display: block;
+		width: 30%;
+		height: 2rpx;
+		background-color: #ededed;
+		transform: translateY(-50%);
+	}
+}
+</style>