logpm/pagesHome/pages/scansorting/scansorting.vue

<template>
	<!-- <u-navbar :title="details.pageType==1?'扫描分拣':'人工分拣'" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar> -->
	<u-navbar :title="details.pageType==1?'扫描分拣':'人工分拣'"
	 bgColor='#D3832A' leftIconColor='#ffffff'
	titleStyle='color:#ffffff' placeholder :autoBack="true" leftIconSize='35'></u-navbar>
	<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>
	<scroll-view class="scvmabx" scroll-y="true">
		<view class="maxboxs">
			<!-- goscansorttype -->
			<view class="items" v-for="item in datalist">
				<view class="headtopv">
					<view>
						<image src="/pagesHome/static/tpicon.png"></image>
						<view>{{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 class="numbox">
						<view>
							<view>托盘件数</view>
							<view v-if="item.type==1">{{item.totalNum}}</view>
							<view v-else>{{item.totalNum}}</view>
						</view>
						<view>
							<view>总件数</view>
							<view v-if="item.type==1">{{item.orderTotalNum}}</view>
							<view v-else>{{item.orderTotalNum}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- goorderdetail -->
		</view>
	</scroll-view>
	<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,
		warehouseTrayTypezeroPageList,
		warehouseTrayTypeorderScanTrayCode,
		warehouseTrayTypezeroScanTrayCode
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { reactive, ref, toRefs,watchEffect } from "vue";
	import utils from '@/utils/utils.js'
	let details=reactive({
		show:false,
		datatime:'',
		pageType:1,
		pageNum:1,
		pageSize:10,
		datalist:[],
		scancode:''
	})
	onLoad((op)=>{
		details.pageType=op.type
		// details.scancode='HT20230800003'
		// scandata()
		
		// #ifdef APP
		utils.ttsspke('请扫托盘码')
		// #endif
	})
	onShow(()=>{
		init()
		uni.$on('scancodedate', function(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=null
		if(details.pageType==1){
			res=await warehouseTrayTypeorderScanTrayCode(data)
		}else if(details.pageType==2){
			res=await warehouseTrayTypezeroScanTrayCode(data)
		}
		
		console.log(res.data);
		if(!res.data.isHasData){
			uni.setStorageSync('trayCodeType',res.data.data)
			uni.navigateTo({
				url:'/pagesHome/pages/ScanSortingType/ScanSortingType?type='
				+details.pageType
				+'&trayCode='
				+details.scancode
			})
		}else{
			if(Number(details.pageType)==1&&res.data.data.type==1){
				uni.navigateTo({
					url:'/pagesHome/pages/OrderSortingDetail/OrderSortingDetail?trayCode='
					+details.scancode+'&trayType='
					+res.data.data.trayType
				})
			}else if(Number(details.pageType)==2&&res.data.data.type==2){
				uni.navigateTo({
					url:'/pagesHome/pages/PeopleSortingDetail/PeopleSortingDetail?trayCode='
					+details.scancode+'&trayType='
					+res.data.data.trayType
				})
			}else if(Number(details.pageType)==2&&res.data.data.type==1){
				// uni.navigateTo({
				// 	url:'/pagesHome/pages/OrderSortingDetail/OrderSortingDetail?trayCode='
				// 	+details.scancode+'&trayType='
				// 	+res.data.data.trayType
				// })
				uni.showToast({
					title:'扫描分拣使用托盘码',
					icon:'none'
				})
				// #ifdef APP
				utils.ttsspke('扫描分拣使用托盘码')
				// #endif
			}else if(Number(details.pageType)==1&&res.data.data.type==2){
				// uni.navigateTo({
				// 	url:'/pagesHome/pages/PeopleSortingDetail/PeopleSortingDetail?trayCode='
				// 	+details.scancode+'&trayType='
				// 	+res.data.data.trayType
				// })
				uni.showToast({
					title:'人工分拣使用托盘码',
					icon:'none'
				})
				// #ifdef APP
				utils.ttsspke('人工分拣使用托盘码')
				// #endif
			}else if(res.data.data.type==3||res.data.data.type==4){
				// uni.navigateTo({
				// 	url:'/pagesHome/pages/PeopleSortingDetail/PeopleSortingDetail?trayCode='
				// 	+details.scancode+'&trayType='
				// 	+res.data.data.trayType
				// })
				uni.showToast({
					title:'库存品分拣使用托盘码',
					icon:'none'
				})
				// #ifdef APP
				utils.ttsspke('库存品分拣使用托盘码')
				// #endif
			}
		}
	}
	async function initpage(){
		if(details.pageType==1){
			let data={
				pageNum:details.pageNum,
				pageSize:details.pageSize,
				createDateStart:date.value[0]||'',
				createDateEnd:date.value[1]||'',
			}
			let res=await warehouseTrayTypeorderPageList(data)
			console.log(res.data.records);
			if(res.data.records.length==0&&details.pageNum>1){
				uni.showToast({
					title:'已经到底了',
					icon:'none'
				})
				details.pageNum--
				return
			}
			if(details.pageNum==1){
				details.datalist=res.data.records
			}else{
				details.datalist=details.datalist.concat(res.data.records)
			}
		}else if(details.pageType==2){
			let data={
				pageNum:details.pageNum,
				pageSize:details.pageSize,
				createDateStart:date.value[0]||'',
				createDateEnd:date.value[1]||'',
			}
			let res=await warehouseTrayTypezeroPageList(data)
			if(res.data.records.length==0&&details.pageNum>1){
				uni.showToast({
					title:'已经到底了',
					icon:'none'
				})
				details.pageNum--
				return
			}
			if(details.pageNum==1){
				details.datalist=res.data.records
			}else{
				details.datalist=details.datalist.concat(res.data.records)
			}
		}
	}
	function goscansorttype(){
		uni.navigateTo({
			url:'/pagesHome/pages/ScanSortingType/ScanSortingType?type='+details.pageType
		})
	}
	function goorderdetail(item){
		if(Number(details.pageType)==1){
			uni.navigateTo({
				url:'/pagesHome/pages/OrderSortingDetail/OrderSortingDetail?trayCode='
					+item.trayCode+'&trayType='
					+item.trayType
			})
		}else 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,
		pageType,
		pageNum,
		pageSize,
		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: center;
						margin: auto;
						>view{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							&:nth-of-type(1){
								margin-right: 140upx;
							}
							>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: 64upx;
							height: 64upx;
							margin-right: 10upx;
						}
					}
					>view:nth-of-type(2){
						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>