logpm/pagesHome/pages/scansorting/scansorting.vue

<template>
	<BasicContainer :option="option" :leftClick="option.leftClick">
		<!-- 头部 -->
		<template #head>
			<view class="headtop">
				<view>
					<input v-model="scancode" placeholder="请输入托盘码" />
				</view>
				<view @click="scandata">查询</view>
			</view>
			<view class="schbox">
				<view>分拣日期：</view>
				<view @click='showCalendar' class="inputsr">
					<input :value='datatime' disabled placeholder="请选择时间" />
					<view @click.stop.prevent>
						<u-icon @click='showCalendar' style="margin-right: 10upx;" v-if="!datatime" name="calendar"
							color="#999999" size="50"></u-icon>
						<u-icon @click="cleartime" style="margin-right: 10upx;" v-else name="close-circle" color="#999999"
							size="40"></u-icon>
					</view>
				</view>
			</view>
		</template>

		<!-- 主体 -->
		<template #body>
			<scroll-view class="scvmabx" @scrolltolower="reachBottomInitPage" scroll-y="true" @touchmove.stop>
				<view class="maxboxs">
					<view class="items" v-for="item in datalist">
						<view class="headtopv">
							<view>
								<image src="/pagesHome/static/tpicon.png"></image>
								<view>{{`${item.trayName} ( ${item.trayCode} )`}}</view>
							</view>
							<view @click="goorderdetail(item)">继续分拣</view>
						</view>
						<view class="contentbx">
							<view class="unames">
								<view>
									<view>
										<image src="/pagesHome/static/uname.png"></image>
										<view>名称</view>
									</view>
									<view>{{item.marketName}}{{item.filterValue}}</view>
								</view>
								<view>
									<view>
										<image src="/pagesHome/static/dttype.png"></image>
										<view>打托方式</view>
									</view>
									<view>{{item.trayTypeName}}</view>
								</view>
								<view>
									<view>
										<image src="/pagesHome/static/dttype.png"></image>
										<view>备注</view>
									</view>
									<view>{{item.remark}}</view>
								</view>
							</view>
							<view class="numbox">
								<view>
									<view>订单数</view>
									<view>{{item.totalNum}}</view>
								</view>
								<view>
									<view>订单总数</view>
									<view>{{item.orderTotalNum}}</view>
								</view>
								<view>
									<view>库存品数</view>
									<view>{{item.stockNum}}</view>
								</view>
								<view>
									<view>库存品总数</view>
									<view>{{item.stockTotalNum}}</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</template>

	</BasicContainer>

	<l-calendar v-model:value="show" :initStartDate='date[0]' :initEndDate='date[1]' @hide='showCalendar'
		@change="onConfirm"></l-calendar>
	<saomiao2></saomiao2>
</template>

<script lang="ts" setup>
	import {
		warehouseTrayTypeorderPageList,
		warehouseTrayTypeorderScanTrayCode,
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import { reactive, ref, toRefs, watchEffect } from "vue";
	import utils from '@/utils/utils.js'
	// 组件配置
	const option = reactive({
		leftClick() {
			uni.reLaunch({
				url: "/pages/index/index"
			})
		},
		// 标题
		title: '任务列表',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {
			// 重置页码
			details.pageNum = 1
			// 重置渲染列表
			details.datalist = []
			// 重置渲染列表数据请求是否结束状态
			option.isEnd = false
			// 重置是否有数据
			option.haveData = true
			await initpage()
			if (datalist.value.length === 0) {
				uni.showToast({
					title: '暂时没有数据',
					icon: 'error'
				})
				option.haveData = false
			}
			if (option.isEnd) {
				return uni.showToast({
					icon: 'success',
					title: '数据已加载完毕'
				})
			}
			return null
		},
		// 触底加载回到函数
		reachBottomInitPage: async () => { return null },
		haveData: true,
		isEnd: false
	})

	// 添加防抖函数
	let antiShake : any = null
	// 触底加载
	function reachBottomInitPage() {
		try {
			// 数据请求完毕, 不再请求
			if (option.isEnd) {
				return uni.showToast({
					icon: 'success',
					title: '数据已加载完毕'
				})
			}
			console.log('antiShake :>> ', antiShake);
			if (antiShake) {
				uni.hideLoading()
				// 清空定时器
				clearTimeout(antiShake)
				return antiShake = null
			}
			// 显示Loading, 并阻止点击屏幕
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			antiShake = setTimeout(async () => {
				// 触发触底回调
				details.pageNum += 1
				const res = await initpage()
				// 关闭loading效果
				uni.hideLoading()
				// 清空定时器
				antiShake = null
				// 当返回数据数组长度小于每页数量时, 数据请求完毕
				if (res.data && res.data.records.length < details.pageSize) {
					uni.showToast({
						title: '已经到底了',
						icon: 'success'
					})
					clearTimeout(antiShake)
					return option.isEnd = true
				}
				clearTimeout(antiShake)
			}, 500)
		} catch (err) {
			//TODO handle the exception
			console.log('err :>> ', err);
		}
	}

	let details = reactive({
		show: false,
		datatime: '',
		pageType: 1,
		pageNum: 1,
		pageSize: 10,
		datalist: [],
		scancode: ''
	})
	onLoad((op) => {
		details.pageType = op.type


		// #ifdef APP
		utils.ttsspke('请扫描或输入托盘码')
		// #endif
	})
	onShow(() => {
		// init()
		initpage()
		uni.$on('scancodedate', function (code) {
			console.log('code :>> ', code);
			if (code) {
				console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})
	onHide(() => {
		uni.$off('scancodedate')
	})
	const date = ref<(string | number)[]>([])
	function init() {
		details.pageNum = 1
		initpage()
	}
	async function scandata() {
		let data = {
			trayCode: details.scancode
		}
		let res = await warehouseTrayTypeorderScanTrayCode(data)
		if (res.code !== 200) return

		console.log('res', res);
		if (Number(res.data.isHasData) === 0) {
			utils.ttsspke('请选择分拣方式')
			uni.setStorageSync('trayCodeType', res.data.data)
			uni.navigateTo({
				url: '/pagesHome/pages/ScanSortingType/ScanSortingType?trayCode=' + details.scancode
			})
		} else {
			uni.navigateTo({
				url: '/pagesHome/pages/OrderSortingDetail/OrderSortingDetail?trayCode='
					+ res.data.data.trayCode + '&trayType='
					+ res.data.data.trayType
			})
		}
	}
	async function initpage() {
		try {
			let submitData = {
				pageNum: details.pageNum,
				pageSize: details.pageSize,
				createDateStart: date.value[0] || '',
				createDateEnd: date.value[1] || '',
			}
			const res = await warehouseTrayTypeorderPageList(submitData)
			if (res.code !== 200) return
			const { code, data } = res
			if (code === 200 && data) details.datalist = [...details.datalist, ...data.records]
			if (data && data.pages <= details.pageNum) option.isEnd = true
			console.log('details.datalist :>> ', details.datalist);
			return res
		} catch (err) {
			//TODO handle the exception
			console.log('err :>> ', err);
		}
	}

	function goorderdetail(item : any) {
		// 去详情页
		uni.navigateTo({
			url: '/pagesHome/pages/OrderSortingDetail/OrderSortingDetail?trayCode='
				+ item.trayCode + '&trayType='
				+ item.trayType
		})
		if (Number(details.pageType) == 2) {
			uni.navigateTo({
				url: '/pagesHome/pages/PeopleSortingDetail/PeopleSortingDetail?trayCode='
					+ item.trayCode + '&trayType='
					+ item.trayType
			})
		}
	}
	function showCalendar() {
		details.show = !details.show
	}
	function onConfirm(e : any) {
		console.log(e);
		date.value[0] = e.startDate
		date.value[1] = e.endDate
		details.datatime = date.value[0] + ' 至 ' + date.value[1]

		// details.datatime=(uni as any).$u.timeFormat(date.value[0], 'yyyy-mm-dd')+' 至 '+(uni as any).$u.timeFormat(date.value[1], 'yyyy-mm-dd')
	}
	watchEffect(() => {
		if ((date.value as []).length != 0) {
			details.datatime = date.value[0] + ' 至 ' + date.value[1]
		}
		initpage()
	})
	function cleartime() {
		// console.log(1231211);
		details.datatime = ''
		date.value = []
		init()
	}
	const {
		show,
		datatime,
		datalist,
		scancode,
	} = toRefs(details)
</script>

<style lang="scss">
	.inputsr {
		width: 550upx !important;
		height: 75upx;
		background: #F5F5F6;
		border-radius: 8upx 8upx 8upx 8upx;
		opacity: 1;
		border: 2upx solid #EEEEEE;
		padding: 16upx 18upx;
		box-sizing: border-box;
		padding-right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26upx;
		font-weight: 400;
		color: #092C4D;

		>input {
			flex: 1;
			font-size: 26upx;
		}
	}

	.schbox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 15upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;

		>view:nth-of-type(1) {
			// width: 150upx;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
		}

		>view:nth-of-type(2) {
			width: 380upx;
			// height: 64upx;
		}

		>view:nth-of-type(3) {
			width: 128upx;
			height: 64upx;
			background: #D3832A;
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.headtop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 20upx;
		background-color: #FFFFFF;
		padding: 20upx 30upx;
		box-sizing: border-box;

		>view:nth-of-type(1) {
			width: 540upx;
			border: 1upx solid #00000020;
			padding: 10upx 20upx;
			box-sizing: border-box;

			// flex: 1;
			// margin-right: 50upx;
			// border-radius: 10upx;
			>input {
				flex: 1;
				font-size: 28upx;
			}
		}

		>view:nth-of-type(2) {
			width: 128upx;
			height: 64upx;
			background: #D3832A;
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.scvmabx {
		width: 100%;
		height: 71vh;
		margin-top: 20upx;

		.maxboxs {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			>.items {
				width: 100%;
				display: flex;
				flex-direction: column;
				background-color: #ffffff;
				margin-bottom: 20upx;
				padding: 16upx 30upx;
				box-sizing: border-box;

				.contentbx {
					display: flex;
					flex-direction: column;

					.unames {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						padding: 15upx 0;

						>view {
							display: flex;
							align-items: center;
							font-size: 28upx;

							&:nth-of-type(1) {
								margin-bottom: 20upx;
							}

							>view:nth-of-type(1) {
								width: 180upx;
								display: flex;
								align-items: center;
								justify-content: flex-start;

								>image {
									width: 42upx;
									height: 42upx;
									margin-right: 15upx;
								}
							}
						}
					}

					.numbox {
						width: 686upx;
						height: 160upx;
						background: #F5F7FB;
						border-radius: 8upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: auto;

						>view {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							>view:nth-of-type(1) {
								font-size: 28upx;
								font-weight: 400;
								color: #AFB4BA;
								margin-bottom: 20upx;
							}

							>view:nth-of-type(2) {
								font-size: 36upx;
								font-weight: 400;
								color: #020B18;
							}
						}
					}
				}

				.headtopv {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 14upx 0;
					border-bottom: 2upx solid #EEEEEE;

					>view:nth-of-type(1) {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #020B18;
						font-size: 32upx;

						>image {
							width: 32upx;
							height: 32upx;
							margin-right: 10upx;
						}
					}

					>view:last-child {
						width: 192upx;
						height: 72upx;
						background: #D3832A;
						border-radius: 8upx 8upx 8upx 8upx;
						opacity: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28upx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>