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>

		<template>
			<view class="tab-title">
				<view v-for="(item, index) in tabList" :key="index" class="tab-item" v-text="item.label" :class="index === pickTabIndex ? 'active' : ''" @click="changeChartsTab(index)"></view>
			</view>
		</template>
		<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>
</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()
		},
		//加载更多
		// 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;
		display: flex;
		flex-direction: column;
	}

	/*Tab条*/
	.tab-title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: $tab-height;
		line-height: $tab-height;
		background-color: #ffffff;
		border-bottom: 1px solid #f2f2f2;
		box-sizing: border-box;

		.tab-item {
			width: 25%;
			text-align: center;
			font-size: 32rpx;
			color: $uni-text-color-grey;
		}

		.tab-item.active {
			color: $j-primary-border-green;
			border-bottom: 1px solid $j-primary-border-green;
			font-weight: bold;
		}

		.tab-item.filter {
			flex: 1;
			padding: 0px 30rpx;

			.uni-icons {
				display: flex;
				padding-top: 5px;
				font-weight: bold;
			}
		}
	}
	.no_data {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.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>