logpm/pagesHome/pages/ScanUp/ScanUp.vue

<template>
	<u-navbar title="扫描上架" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
		:autoBack="true" leftIconSize='35'></u-navbar>
	<image mode="widthFix" class="bgimg" src="/pagesHome/static/bgby.png"></image>
	<view class="scanqcview">
		<image src="/pagesHome/static/scanqc.png"></image>
		<view>请直接扫描库位码</view>
	</view>
	<view class="topviewbox">
		<view class="oebox">
			<image src="/pagesHome/static/changku.png"></image>
			<view>{{(reqobj.warehouseName||'')+'-'+(reqobj.areaTitle||'')+'-'+(reqobj.shelfTitle||'')+'-'+(reqobj.allocationTitle||'')}}</view>
		</view>
		<view class="contview">
			<view>
				<view>
					<image src="/pagesHome/static/uname.png"></image>
					<view>仓库名称</view>
				</view>
				<view>{{reqobj.warehouseName}}</view>
			</view>
			<view>
				<view>
					<image src="/pagesHome/static/changkuquyu.png"></image>
					<view>仓库区域</view>
				</view>
				<view>{{reqobj.areaTitle}}</view>
			</view>
		</view>
		<view class="numbox">
			<view>
				<view>
					<view>库位总数</view>
					<view>{{reqobj.totalNum||0}}</view>
				</view>
				<view>
					<view>库位单数</view>
					<view>{{reqobj.orderNum||0}}</view>
				</view>
				<view>
					<view>库存品总数</view>
					<view>{{reqobj.stockTotalNum||0}}</view>
				</view>
				<view>
					<view>库存品数</view>
					<view>{{reqobj.stockNum||0}}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="tabchecklist">
		<view @click="setstate(1)" :class="checkstate==1?'xz':''">
			<view>待上架数据</view>
			<view></view>
		</view>
		<view @click="setstate(2)" :class="checkstate==2?'xz':''">
			<view>库位数据</view>
			<view></view>
		</view>
		<view @click="setstate(3)" :class="checkstate==3?'xz':''">
			<view>库位托盘</view>
			<view></view>
		</view>
	</view>
	<view class="scview">
		<scroll-view class="sclcs" scroll-y="true">
			<view class="visc">
				<view class="item1" v-for="item in uplistarr" v-if="checkstate==1">
					<view class="tpbx" v-if="item.goodsType==0">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>包条码：{{item.orderPackageCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==0">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>订单号：{{item.orderCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==1">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>服务号：{{item.serviceNum}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==1">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>订单自编号：{{item.orderCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==2">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>运单号：{{item.waybillNo}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==2">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>订单自编号：{{item.orderCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>物料编号：{{item.materialCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>物料名称：{{item.materialName}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>订单自编号：{{item.orderCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>批次号：{{item.incomingBatch}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>商场名：{{item.marketName}}</view>
					</view>
					<view class="tpbx" v-if="item.trayCode">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>托盘码：{{item.trayCode}}</view>
					</view>
					<view class="viewnum">
						<view>总包数：{{item.totalNum||0}}</view>
						<view v-if="Number(details.upshelfScanType)!=3">扫码数：{{item.shelfNum||0}}</view>
					</view>
					<image v-if="Number(details.upshelfScanType)!=3" class="qtimgzt" :src="item.totalNum==item.shelfNum?'/pagesHome/static/qitao.png':'/pagesHome/static/weiqitao.png'"></image>
				</view>
				<view class="item2" v-for="item in datalist" v-if="checkstate==2">
					<view class="tpbx" v-if="item.goodsType==1">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>服务号：{{item.serviceNum}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==1">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>订单自编号：{{item.orderCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==2">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>运单号：{{item.waybillNo}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==2">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>订单自编号：{{item.orderCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>物料编号：{{item.materialCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>物料名称：{{item.materialName}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>商场名称：{{item.marketName}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>订单自编号：{{item.orderCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==3">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>批次号：{{item.incomingBatch}}</view>
					</view>
					<view class="viewnum">
						<view>总包数：{{item.totalNum}}</view>
						<view>扫码数：{{item.shelfNum}}</view>
					</view>
					<image class="qtimgzt" :src="item.totalNum==item.shelfNum?'/pagesHome/static/qitao.png':'/pagesHome/static/weiqitao.png'"></image>
				</view>
				<view class="item1" v-for="item in [1]" v-if="checkstate==3&&reqobj.trayCode">
					<view>
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>托盘码：{{reqobj.trayCode}}</view>
					</view>
					<view>
						<image src="/pagesHome/static/scanicon.png"></image>
						<view>扫码包数：{{reqobj.trayNum}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<view class="butbox">
		<view @click="uplist">上架</view>
	</view>
	<saomiao2></saomiao2>
	<tips ref="tip"></tips>
</template>

<script lang="ts" setup>
	import {
		warehouseUpdownTypeupShelfScanGoods,
		warehouseUpdownTypeupShelfScanAllocation,
		warehouseUpdownTypeupShelfOrder,
		warehouseUpdownTypeupShelfPackage,
		warehouseUpdownTypeupShelfTray
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { inject, reactive, ref, toRefs, watchEffect } from "vue";
	const utils=inject('utils') as any
	const tip=ref(null)
	let details=reactive({
		checkstate:1,
		upshelfScanType:'',
		scancode:'',
		allocationId:'',//库位id
		datalist:[],
		reqobj:{} as any,
		uplistarr:[],
	})
	watchEffect(()=>{
		if(Number(details.upshelfScanType)==1||Number(details.upshelfScanType)==2){
			details.uplistarr=fn2(details.uplistarr,'orderCode')
		}else if(Number(details.upshelfScanType)==3){
			// details.uplistarr=fn2(details.uplistarr,'orderPackageCode')
		}else if(Number(details.upshelfScanType)==4){
			details.uplistarr=fn2(details.uplistarr,'orderCode')
		}
	})
	onLoad((op)=>{
		details.upshelfScanType=op.type
		
		// details.scancode='1697135045579067394'
		// scandata()
		// setTimeout(()=>{
		// 	details.scancode='HTCQ000005'
		// 	scandata()
			
		// 	details.scancode='23080706823-2'
		// 	scandata()
		// },1500)
		// setTimeout(()=>{
		// 	details.scancode='23072506670-2'
		// 	scandata()
		// },4500)
		uni.$on('scancodedate', function(code) {
			if (code) {
				// console.log(code);
				details.scancode=code
				scandata()
			}
		})
	})
	async function scandata(){
		//是否有库位id，有库位ID就扫描包条码否则只能扫描库位码
		if(!details.allocationId){
			let data={
				allocationId:details.scancode,
			}
			let res=await warehouseUpdownTypeupShelfScanAllocation(data)
			console.log(res);
			if(res.code==200){
				details.reqobj=res.data
				details.allocationId=res.data.allocationId
				details.datalist=(res.data?.list)||[]
			}
		}else{
			if(Number(details.upshelfScanType)==4&&details.reqobj.trayCode){
				tip.value.setdetails({
					title:'提示',
					content:'该库位已绑托盘',
					confirmTxt:'确认',
					isshow:true,
					isshowcancel:true,
					success:()=>{
						tip.value.setisshow(false)
					},
					cancel:()=>{
						tip.value.setisshow(false)
					},
					close:()=>{
						tip.value.setisshow(false)
					}
				})
				// #ifdef APP
				utils.ttsspke('该库位已绑托盘')
				// #endif
				return
			}
			let data={
				upshelfScanType:details.upshelfScanType,
				code:details.scancode,
			}
			let res=await warehouseUpdownTypeupShelfScanGoods(data)
			console.log(res);
			if(res.code==200){
				details.uplistarr=details.uplistarr.concat(res.data)
			}
		}
		
	}
	function uplist(){
		tip.value.setdetails({
			title:'提示',
			content:'确认上架？',
			confirmTxt:'确认',
			isshow:true,
			isshowcancel:true,
			success:async ()=>{
				if(details.uplistarr.length==0){
					let content=''
					if(Number(details.upshelfScanType)==4){
						content='请先扫描托盘码'
					}else{
						content='请先扫描包件数据'
					}
					tip.value.setdetails({
						title:'警告',
						content,
						confirmTxt:'确认',
						isshow:true,
						isshowcancel:true,
						success:()=>{
							tip.value.setisshow(false)
						},
						cancel:()=>{
							tip.value.setisshow(false)
						},
						close:()=>{
							tip.value.setisshow(false)
						}
					})
					return
				}
				let res
				if(Number(details.upshelfScanType)==1||Number(details.upshelfScanType)==2){
					let data={
						allocationId:details.allocationId,
						upShelfOrderList:details.uplistarr,
					}
					res=await warehouseUpdownTypeupShelfOrder(data)
				}else if(Number(details.upshelfScanType)==3){
					let data={
						allocationId:details.allocationId,
						upShelfPackageList:details.uplistarr,
					}
					res=await warehouseUpdownTypeupShelfPackage(data)
				}else if(Number(details.upshelfScanType)==4){
					
					let data={
						allocationId:details.allocationId,
						trayCode:details.uplistarr[0].trayCode,
					}
					res=await warehouseUpdownTypeupShelfTray(data)
				}
				
				if(res.code==200){
					details.uplistarr=[]
					details.scancode=details.allocationId
					details.allocationId=''
					scandata()
				}
				tip.value.setisshow(false)
			},
			cancel:()=>{
				tip.value.setisshow(false)
			},
			close:()=>{
				tip.value.setisshow(false)
			}
		})
	}
	//去重
	function fn2(tempArr,fnname) {
	    let result = [];
	    tempArr.map((item)=>{
			if(result.length==0){
				item.enterNum=Number(item.enterNum)
				result.push(item)
			}else{
				let ckindex=-1
				result.map((ite,index)=>{
					if(ite[fnname]==item[fnname]){
						ckindex=index
					}
				})
				if(ckindex!=-1){
					result[ckindex].enterNum+=Number(item.enterNum)
				}else{
					item.enterNum=Number(item.enterNum)
					result.push(item)
				}
			}
		})
	    return result;
	};
	function setstate(state:number){
		details.checkstate=state
	}
	const {
		uplistarr,
		checkstate,
		upshelfScanType,
		allocationId,
		datalist,
		reqobj
	}=toRefs(details)
</script>

<style lang="scss">
	.butbox{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15upx;
		>view{
			width: 684upx;
			height: 100upx;
			background: #D3832A;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.sclcs{
		width: 686upx;
		height: 28vh;
		margin: auto;
		.visc{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			.item1{
				width: 686upx;
				padding: 0 24upx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30upx;
				position: relative;
				margin-bottom: 30upx;
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				.removeicons{
					position: absolute;
					right: 0;
				}
				.qtimgzt{
					width: 96upx;
					height: 96upx;
					position: absolute;
					right: 0;
					top: 0;
				}
				// >view:nth-last-child(1){
				// 	border-bottom: none !important;
				// }
				>view{
					width: 100%;
					display: flex;
					align-items: center;
					padding: 18upx 24upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;
					&:nth-last-child(1){
						border-bottom: 0upx solid #EEEEEE00 !important;
					}
					>image{
						width: 64upx;
						height: 64upx;
						margin-right: 15upx;
					}
					>view{
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
						word-wrap: break-word;
						word-break: break-all;
						.numb{
							font-size: 28upx;
							color: #178AF2;
						}
					}
				}
			}
			.item2{
				width: 686upx;
				padding: 0 24upx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30upx;
				position: relative;
				margin-bottom: 30upx;
				.qtimgzt{
					width: 96upx;
					height: 96upx;
					position: absolute;
					right: 0;
					top: 0;
				}
				>.tpbx{
					display: flex;
					align-items: center;
					padding: 18upx 24upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;
					
					>image{
						width: 64upx;
						height: 64upx;
						margin-right: 15upx;
					}
					>view{
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
						.numb{
							font-size: 28upx;
							color: #178AF2;
						}
					}
				}
				>.viewnum{
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					>view{
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
					}
				}
			}
		}
	}
	.tabchecklist{
		width: 684upx;
		height: 100upx;
		margin: auto;
		margin-top: 30upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.xz{
			>view:nth-of-type(1){
				color: #D3832A !important;
			}
			>view:nth-of-type(2){
				background-color: #D3832A !important;
			}
		}
		>view{
			display: flex;
			flex-direction: column;
			align-items: center;
			>view:nth-of-type(1){
				font-size: 32upx;
				font-weight: 400;
				margin-bottom: 20upx;
				color: #020B18;
				transition: all 0.2s;
			}
			>view:nth-of-type(2){
				width: 96upx;
				height: 8upx;
				background-color: #D3832A00;
				border-radius: 4upx;
				transition: all 0.2s;
			}
		}
	}
	.topviewbox{
		width: 686upx;
		// height: 456upx;
		background: #FFFFFF;
		border-radius: 20upx 20upx 20upx 20upx;
		opacity: 1;
		box-sizing: border-box;
		position: relative;
		margin: auto;
		margin-top: 20upx;
		>.oebox{
			padding: 20upx 25upx;
			box-sizing: border-box;
			border-bottom: 4upx solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			>view{
				font-size: 32upx;
				font-weight: 400;
				color: #020B18;
			}
			>image{
				width: 64upx;
				height: 64upx;
				margin-right: 14upx;
			}
		}
		.numbox{
			width: 100%;
			padding: 20upx;
			box-sizing: border-box;
			>view{
				width: 640upx;
				height: 160upx;
				background: #F5F7FB;
				border-radius: 8upx 8upx 8upx 8upx;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: space-around;
				>view{
					display: flex;
					flex-direction: column;
					align-items: center;
					&:nth-of-type(1){
						>view:nth-of-type(2){
							color: #FF9545 !important;
						}
					}
					&:nth-of-type(2){
						>view:nth-of-type(2){
							color: #178AF2 !important;
						}
					}
					>view:nth-of-type(1){
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
						margin-bottom: 18upx;
					}
					>view:nth-of-type(2){
						font-size: 36upx;
						font-weight: 400;
						
					}
				}
			}
		}
		>.contview{
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 20upx;
			box-sizing: border-box;
			>view{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 20upx;
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				>view:nth-of-type(1){
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30upx;
					>image{
						width: 48upx;
						height: 48upx;
						margin-right: 12upx;
					}
					>view{
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
					}
				}
				>view:nth-of-type(2){
					font-size: 28upx;
					font-weight: 400;
					color: #020B18;
				}
			}
		}
	}
	.bgimg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;

	}
	.scanqcview{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 10upx;
		>image{
			width: 72upx;
			height: 72upx;
			margin-right: 16upx;
		}
		>view{
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>