logpm/pagesHome/pages/ArrivalList/ArrivalList.vue

<template>
	<BasicContainer :option="option" :leftClick="option.leftClick">
		<!-- 头部 -->
		<template #head>
			<view class="headtop">
				<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 @click="initpage">查询</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> -->
					<template v-for="item in datalist">
						<view class="items">
							<view class="items_row">
								<view>
									车次号: {{item.carsNo}}
								</view>

								<view>
									车牌号: {{item.carNumber}}
								</view>
							</view>

							<view class="items_row">
								<view>
									实际装车/计划装车: {{item.realLoadingNumber + '/' +item.planLoadingNumber}}
								</view>

								<view>
									车型: {{''}}
								</view>
							</view>

							<view class="items_row">
								<view>
									主驾司机: {{item.driverName}}
								</view>

								<view>
									电话: {{item.driverMobile}}
								</view>
							</view>

							<view class="items_row">
								线路: {{item.carsLineName}}
							</view>

							<view class="items_row">
								发车时间: {{item.startTime}}
							</view>

							<view class="button-container">
								<view class="button" @click="handleDetailsByOrder(item, 1)">
									按件入库
								</view>

								<view class="button" @click="handleDetailsByOrder(item, 2)">
									整托入库
								</view>

								<view class="button">
									卸分一体
								</view>

								<view class="button">
									按件装车
								</view>

								<view class="button">
									整托装车
								</view>
							</view>

							<!-- 标签 -->
							<view class="tag">
								网点到达
							</view>
						</view>
					</template>
				</view>
			</scroll-view>
		</template>

	</BasicContainer>

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

<script lang="ts" setup>
	import {
		postArriveUnloadPageList,
		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'
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	// 组件配置
	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(() => {
		date.value[0] = (uni as any).$u.timeFormat((new Date().valueOf() - 1000 * 60 * 60 * 24 * 3), 'yyyy-mm-dd')
		date.value[1] = (uni as any).$u.timeFormat((new Date().valueOf()), 'yyyy-mm-dd')
		// #ifdef APP
		utils.ttsspke('请选择配载计划')
		// #endif
	})

	onShow(() => {
		// #ifdef APP
		// 初始化关闭监听
		uni.$off('scancodedate')
		// init()
		uni.$on('scancodedate', function (code) {
			console.log('code :>> ', code);
			if (code) {
				console.log(code);
				details.scancode = code
				scandata()
			}
		})
		// #endif
		initpage()
	})
	// 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 = {
				type: '1',
				pageNum: details.pageNum,
				pageSize: details.pageSize,
				createDateStart: date.value[0] || '',
				createDateEnd: date.value[1] || '',
			}
			const res = await postArriveUnloadPageList(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 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]
	}
	watchEffect(() => {
		if ((date.value as []).length != 0) {
			details.datatime = date.value[0] + ' 至 ' + date.value[1]
		}
		initpage()
	})
	function cleartime() {
		details.datatime = ''
		date.value = []
		init()
	}

	/** 按件入库 */
	const handleDetailsByOrder = (item, type) => {
		uni.navigateTo({
			url: '/pagesHome/pages/VehicleArrivalDetails/VehicleArrivalDetails?id=' + item.id + '&type=' + type
		})
	}

	const {
		show,
		datatime,
		datalist,
		scancode,
	} = toRefs(details)
</script>

<style lang="scss" scoped>
	.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;
			flex: none;
			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;
				position: relative;

				.items_row {
					zoom: 0.9;
					display: flex;
					font-size: 28upx;
					padding-bottom: 15upx;

					>view {
						width: 60%;

						&:nth-child(2) {
							width: 40%;
						}
					}
				}
			}

			// 标签
			.tag {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 28upx;
				padding: 10upx;
				color: #fff;
				background: #D3832A;
				opacity: 0.7;
				border-bottom-left-radius: 20upx;
			}

			.button-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				border-top: 4upx solid #eee;
				padding-top: 10upx;
			}

			.button {

				color: #fff;
				border-radius: 5upx;
				padding: 10upx 20upx;
				font-size: 28upx;
				background: #D3832A;
				margin-bottom: 10upx;
			}
		}
	}
</style>