erp-ui-m/components/thorui/tui-load-list/tui-load-list.vue

<template>
	<view class="page-load-list">
		<slot></slot>
		<block v-if="apiUrl">
			<!-- <tui-loadmore v-if="loadState=='loading'" :index="2"></tui-loadmore> -->
			<block v-if="!onlyFirstPage">
				<tui-divider v-if="loadState=='over'&&list&&list.length>0" width="80%" :backgroundColor="backColor">
					没有更多了
				</tui-divider>
			</block>
			<view class="tui-no-data xd" v-if="loadState=='over'&&list.length<=0">
				<tui-no-data class="tui-no-data" :positiontype="1" :fixed="false"
					imgUrl="/static/images/toast/img_nodata.png" imgWidth="120" imgHeight="120">暂无数据
				</tui-no-data>
			</view>
			<block v-if="!onlyFirstPage">
				<tui-divider v-if="loadState!='over'&&loadState!='loading'" width="80%"
					:backgroundColor="backColor">上拉加载数据
				</tui-divider>
			</block>
		</block>
	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {

		data() {
			return {
				loadState: "",
				page: 0,
				total: 0,
				list: [],
				pTime: 0
			};
		},
		props: {
			value: {
				type: Array,
				default: () => {
					return []
				}
			},
			onlyFirstPage: {
				type: Boolean,
				default: false
			},
			datatype: {
				type: String,
				default: ""
			},
			backColor: {
				type: String,
				default: "#f4f4f4"
			},
			apiUrl: {
				type: String,
				default: ""
			},
			limit: {
				type: Number,
				default: 20
			},
			postData: {
				type: Object,
				default: null
			}
		},
		watch: {
			// rushData(val) {
			// 	if (!this.datatype) {
			// 		return false
			// 	}
			// 	const rushdata = {
			// 		"name": "list",
			// 		"data": String(this.datatype)
			// 	}
			// 	const isrush = this.$store.commit("delRushData", rushdata)
			// 	if (isrush) {
			// 		this.$nextTick(function() {
			// 			this.loadData("rush")
			// 		})
			// 	}
			// },
			apiUrl() {
				this.loadData("rush")
			},
			// postData: {
			// 	handler: function() {
			// 		this.loadData("rush")
			// 	},
			// 	// 开启深度监听：只要obj中的任何一个属性发生改变，都会触发相应的代码
			// 	deep: true
			// }
		},
		created() {
			// console.log('this.apiUrl',this.apiUrl)
			this.list = this.value
			this.loadData("rush")
			// if (!this.datatype) {
			// 	return false
			// }
			// const rushdata = {
			// 	"name": "list",
			// 	"data": String(this.datatype)
			// }
			// this.$store.dispatch("delRushData", rushdata)
		},
		methods: {
			loadData(type = "") {
				if (!this.apiUrl) {
					return false
				}
				if (type == "rush") {
					this.loadState = ''
					this.list = []
					this.page = 0
					this.$emit("input", this.list)
				} else if (this.onlyFirstPage) {
					return false
				}
				if (this.loadState == "loading") {
					return false
				}
				if (this.loadState == "over") {
					return false
				}
				this.loadState = "loading"
				this.page++;

				const data = Object.assign({}, this.postData, {
					'pageNum': this.page,
					'pageSize': this.limit
				})
				request({
					'url': this.apiUrl,
					'method': 'get',
					params: data
				}).then(res => {
					if ('data' in res && res.data) {
						this.list = this.list.concat(res.data)
					} else if ('rows' in res && res.rows) {
						this.list = this.list.concat(res.rows)
					}

					this.total = res.total
					if (this.list.length >= this.total) {
						this.loadState = "over"
					} else if (this.onlyFirstPage) {
						this.loadState = "over"
					} else {
						this.loadState = ""
					}
					this.$emit("input", this.list)
					this.$emit("change", {
						total: this.total,
						page: this.page,
						limit: this.limit,
						list: this.list
					})
				}).catch(res => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-load-list {
		overflow: hidden;

		.tui-no-data {
			width: 100%;
			height: 320rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>