aiot-app/pages/warehouse/workOrder/index.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="盘点工单" @clickLeft="back"></uni-nav-bar>
		<view class="top-wrapper">
			<view class="tab_box rx-sc">
				<view class="tab_item" :class="index === pickTabIndex ? 'active' : ''" v-for="(item,index) in tabList"
					:key="index">
					<view @click="changeChartsTab(index)">
						{{item.label}}
					</view>
				</view>
			</view>
		</view>
		<!-- <u-list v-if="listData.length > 0" @scrolltolower="scrolltolower" class="z_list">
			<view class="list-wrap" v-for="(item, index) in listData" :key="index" v-show="listData.length !== 0">
				<CardTime :time="item.createTime" />
				<KdCard :title="item.code" :status="true" :item="item" type="check" />
			</view>
		</u-list>

		<view v-else class="no_data">
			<u-empty mode="data"></u-empty>
		</view> -->
		<view class="work-list">
			<u-list @scrolltolower="scrolltolower" :preLoadScreen="page * 10">
				<u-list-item v-for="(item, index) in listData" :key="index">
					<CardTime :time="item.createTime" />
					<KdCard :title="item.code" :status="true" :item="item" type="check" />
				</u-list-item>
				<u-list-item v-if="listData.length === 0">
					<view class="nodata">暂无数据</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		post
	} from '@/utils/api.js'
	import {
		getPlanOrderList
	} from '@/api/warehouseManagement'
	import KdCard from './components/KdCard/index.vue'
	import CardTime from './components/CardTime.vue'
	// import dictMixins from '@/mixins/dictMixins'
	// let [page, size, isEnd] = [1, 10, true]
	export default {
		// mixins: [dictMixins],
		components: {
			KdCard,
			CardTime
		},
		data() {
			return {
				page: 1,
				size: 10,
				isEnd: true,
				tabList: [{
						value: '',
						label: '全部'
					},
					{
						value: 0,
						label: '待处理'
					},
					{
						value: 1,
						label: '执行中'
					},
					{
						value: 2,
						label: '已完成'
					}
				],
				pickTabIndex: 0, //Tab选择
				listData: []
			}
		},
		onLoad() {
			// this.requestDict('物品类型')
			this.getFirstList()
		},
		onShow() {
			uni.$off('refreshInventoryList')
			uni.$on('refreshInventoryList', () => {
				this.getFirstList()
			})
		},
		//加载更多
		// onReachBottom() {
		// 	if (this.isEnd) {
		// 		return
		// 	}
		// 	// 显示加载图标
		// 	this.getMoreLists()
		// },

		methods: {
			scrolltolower() {
				console.log('scrolltolower-----------')
				if (this.isEnd) {
					return
				}
				// 显示加载图标
				this.getMoreLists()
			},
			//首次加载
			getFirstList() {
				this.page = 1
				this.isEnd = true
				this.getList()
			},
			//获取更多列表
			getMoreLists() {
				//获取更多数据
				this.page++
				this.getList()
			},
			//获取数据列表
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					pageNum: this.page,
					size: this.size,
					status: this.tabList[this.pickTabIndex].value
				}
				getPlanOrderList(data)
					.then(res => {
						let data = res.list
						let pageTotal = res.count
						if (this.page === 1) {
							this.listData = data
						} else {
							this.listData = this.listData.concat(data)
						}
						this.listData.length < pageTotal ? (this.isEnd = false) : (this.isEnd = true)
					})
					.finally(() => {
						uni.hideLoading()
					})
				//2 - 99 [已完成]
				// let par = this.URLSearchParams(Pagination)
				// post(this.apiUrl + '/workOrder/getWorkOrderList?' + par, data)
				// 	.then(res => {
				// 		let data = res.data.records
				// 		let pageTotal = res.data.pages
				// 		if (page === 1) {
				// 			this.listData = data
				// 		} else {
				// 			data.forEach(element => {
				// 				this.listData.push(element)
				// 			})
				// 		}
				// 		page < pageTotal ? (isEnd = false) : (isEnd = true)
				// 	})
				// 	.then(() => {
				// 		uni.hideLoading()
				// 	})
			},
			//切换菜单Tab
			changeChartsTab(index) {
				this.pickTabIndex = index
				this.getFirstList()
			},

			// 跳转盘点清单
			goInventory(item) {
				let par = this.URLSearchParams({
					id: item.id,
					status: item.status
				})
				uni.navigateTo({
					url: '/pages/warehouse/workOrder/inventory/inventory?' + par
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBox {
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.top-wrapper {
			display: flex;
			align-items: center;
			background-color: #fff;
			position: relative;

			.tab_box {
				width: 100%;
				height: 68rpx;


				.tab_item {
					height: 68rpx;
					line-height: 68rpx;
					padding: 0 20rpx;
					font-size: 32rpx;
					// color: #979C9E;

				}

				.active {
					box-sizing: border-box;
					border-bottom: 6rpx solid $theme-color;
					color: $theme-color;
				}


			}
		}

		.work-list {
			flex: 1;
			overflow: hidden;
			padding: 0 24rpx 16rpx 24rpx;
			background-color: $page-bg;

			.u-list {
				height: 100% !important;
			}
		}

		.nodata {
			font-size: 40rpx;
			text-align: center;
			padding-top: 30rpx;
		}
	}

	.z_list {
		flex: 1;
		overflow: hidden;
	}

	/*列表信息*/
	.list-wrap {
		padding: 10rpx;
		background-color: $page-bg;
		// .item {
		//   display: flex;
		//   justify-content: space-between;
		//   padding: 10rpx;
		//   color: rgb(170, 170, 170);
		//   font-size: 28rpx;
		//   word-break: break-all;
		//   .title {
		//     color: #333333;
		//     font-size: 28rpx;
		//   }
		//   .state {
		//     font-size: 12px;
		//     display: inline;
		//     padding: 2px 5px;
		//     border-radius: 10px;
		//   }
		//   .asset {
		//     font-size: 12px;
		//     color: #7f7f7f;
		//     background: #f1f1f1;
		//     padding: 2px 5px;
		//     border-radius: 2px;
		//   }
		// }

		&+.list-wrap {
			border-top: 1px solid rgba(242, 242, 242, 1);
		}
	}
</style>