logpm/pagesHome/pages/DownGoods/DownGoods.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="viewbx" v-if="pageType=='1'">
		<view class="vwtybx1">
			<view>
				<view>
					<image src="/pagesHome/static/tuoicon.png"></image>
					<view>托盘码</view>
				</view>
				<view>
					<input placeholder="扫码或输入托盘码" v-model="trayCode" @blur="inscan" @confirm="inscan"/>
				</view>
			</view>
<!-- 			<view>
				<view>
					<image src="/pagesHome/static/topicons.png"></image>
					<view>托盘编号</view>
				</view>
				<view>
					汇通龙泉001
				</view>
			</view> -->
			<view>
				<view>
					<image src="/pagesHome/static/kuicon.png"></image>
					<view>库位码</view>
				</view>
				<view>
					汇通龙泉001
				</view>
			</view>
		</view>
	<!-- 	<view class="numvie">
			<view>数量</view>
			<view>20</view>
		</view> -->
	</view>
	<view class="tbchec">
		<view :class="!isallcheck?'':'xz'" @click="allquanxuan">
			<image :src="!isallcheck?'/pagesHome/static/downnocheck.png':'/pagesHome/static/downcheck.png'"></image>
			<view>全选</view>
		</view>
		<!-- <view>
			<image src="/pagesHome/static/downnocheck.png"></image>
			<view>全选</view>
		</view> -->
	</view>
	<scroll-view scroll-y="true" class="scvorder" :style="{'--height':pageType=='1'?'50vh':'65vh'}">
		<view class="itembox" v-for="(item,index) in datalist">
			<view class="topon1" @click="checkite(item)">
				<view>
					<image :src="checkdatalist.indexOf(item)==-1?'/pagesHome/static/downnocheck.png':'/pagesHome/static/downcheck.png'"></image>
					<view>{{index+1}}</view>
				</view>
			</view>
			<view class="topon2" v-if="item?.orderCode">
				<image src="/pagesHome/static/checi.png"></image>
				<view>订单号：{{item?.orderCode}}</view>
			</view>
			<view class="topon2" v-if="item?.goodsName">
				<image src="/pagesHome/static/checi.png"></image>
				<view>物料名称：{{item?.goodsName}}</view>
			</view>
			<view class="topon2" v-if="item?.associationId&&pageType!='4'">
				<image src="/pagesHome/static/checi.png"></image>
				<view>订单号：{{item?.associationId}}</view>
			</view>
			<view class="topon2" v-if="item?.associationValue">
				<image src="/pagesHome/static/checi.png"></image>
				<view>包条码：{{item?.associationValue}}</view>
			</view>
			
			
			<view class="topon2" v-if="item?.orderPackageCode">
				<image src="/pagesHome/static/checi.png"></image>
				<view>包条码：{{item?.orderPackageCode}}</view>
			</view>
			<view class="topon2" v-if="item?.trayCode">
				<image src="/pagesHome/static/checi.png"></image>
				<view>托盘码：{{item?.trayCode}}</view>
			</view>
		</view>
	</scroll-view>
	<view class="butys">
		<view class="qut" @click="backun" v-if="pageType=='1'||pageType=='2'||pageType=='3'">取消</view>
		<view class="conf" @click="setshowstate(2)" v-else>录入信息</view>
		<view class="conf" @click="downs">确认下架</view>
	</view>
	<view class="tanchuangbg" v-if="showstate">
		<view class="inputbox" @click.stop.prevent v-if="showstate==2">
			<view class="makinp" @click="checkmake">
				{{typelist[checkmakindex]||'请选择下架类型'}}
			</view>
			<view class="makinp" @click="checkmarke" v-if="details.pageType=='4'">
				{{Marketlist[checkmarkindex]?.marketName||'没有商场'}}
			</view>
			<view class="inputscan">
				<input :placeholder="'输入'+typelist[checkmakindex]" v-model="scancode" />
				<view class="scanbt" @click="scandata">搜索</view>
			</view>
			<scroll-view scroll-y="true" class="scvbw">
				<view class="scboxitem">
					<view class="items" v-for="(item,index) in codelist">
						<view class="type1s">
							<view v-if="item.goodsName">
								<view>物料名称：</view>
								<view>{{item.goodsName}}</view>
							</view>
							<view>
								<view>剩余件数：</view>
								<view>{{item.num}}件</view>
							</view>
						</view>
						<view class="rksu">
							<view>
								<view>下架数：</view>
								<input placeholder="请输入下架数" v-model="item.enterNum"/>
							</view>
						</view>
					</view>
				</view> 
			</scroll-view>
			<view class="btx">
				<view class="cancel" @click="setshowstate(0)">取消</view>
				<view class="confirm" @click="confirmlist">确认</view>
			</view>
		</view>
	</view>
	<saomiao2></saomiao2>
	<tips ref="tip"></tips>
	<tiplist ref="tiplists"></tiplist>
</template>

<script lang="ts" setup>
	import {
		warehouseUpdownTypedownScanPackage,
		warehouseUpdownTypeupShelfScanAllocation,
		warehouseUpdownTypedownPackage,
		warehouseUpdownTypedownTrayCode,
		warehouseUpdownTypedownZeroOrder,
		warehouseUpdownTypedownStock,
		warehouseUpdownTypedownEnterZeroOrder,
		warehouseUpdownTypedownEnterStock,
		warehouseUpdownTypedownScanTrayCode,
		warehouseTrayTypefindAllMarket
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { reactive, ref, toRefs, watchEffect } from "vue";
	const tiplists=ref(null)
	const tip=ref(null)
	const details=reactive({
		scantype:1,
		mergeTray:'',
		newmergeTray:'',
		scancode:'',
		pageType:1,
		datalist:[],
		checkdatalist:[],
		isallcheck:false,
		resdata:{} as any,
		trayCode:'',
		showstate:0,
		checkmakindex:0,
		codelist:[],
		typelist:[],
		Marketlist:[],
		checkmarkindex:0,
	})
	onLoad(async (op) => {
		// details.upshelfScanType = op.type
		details.pageType=op.type
		if(Number(details.pageType)==4){
			details.typelist=['物料编码','物料名称']
		}else if(Number(details.pageType)==5){
			details.typelist=['订单号','运单号']
		}
		// details.scancode = '23072506670-2'
		// details.scancode = '1687644549722112002'
		await initmarke()
		// details.scancode = 'G21217183'
		// scandata()
		// setTimeout(()=>{
		// 	details.scancode='23072506670-2'
		// 	scandata()
		// },4500)
		
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})
	function backun(){
		uni.navigateBack()
	}
	async function initmarke(){
		let data={
			warehouseCode:'LQ'
		}
		let res=await warehouseTrayTypefindAllMarket(data)
		console.log(res.data);
		details.Marketlist=res.data
	}
	watchEffect(()=>{
		if(details.datalist.length==details.checkdatalist.length){
			details.isallcheck=true
		}else{
			details.isallcheck=false
		}
	})
	function stop(){
		
	}
	function inscan(){
		details.scancode=details.trayCode
		scandata()
	}
	async function scandata(){
		// let res=await 
		let res=null
		let data=null;
		switch (Number(details.pageType)){
			case 1:
			
			data={
				trayCode:details.scancode
			}
			res=await warehouseUpdownTypedownScanTrayCode(data)
			if(res.code==200){
				details.datalist=details.datalist.concat(res.data)
				details.checkdatalist=details.checkdatalist.concat(res.data)
				details.trayCode=details.scancode
			}else {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
				break;
			case 2:
			data={
				allocationId:details.scancode
			}
			res=await warehouseUpdownTypeupShelfScanAllocation(data)
			if(res.code==200){
				details.datalist=details.datalist.concat(res.data.list)
				details.checkdatalist=details.checkdatalist.concat(res.data.list)
				details.resdata=res.data
			}else {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
				break;
			case 3:
			data={
				orderPackageCode:details.scancode
			}
			res=await warehouseUpdownTypedownScanPackage(data)
			if(res.code==200){
				details.datalist=details.datalist.concat([res.data])
				details.checkdatalist=details.checkdatalist.concat([res.data])
			}else {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
				break;
			case 4:
			data={
				stockType:details.checkmakindex + 1,
				code:details.scancode,
				marketId:details.Marketlist[details.checkmarkindex]?.marketId,
			}
			res=await warehouseUpdownTypedownEnterStock(data)
			if(res.code==200){
				details.codelist=res.data
				// details.checkdatalist=details.checkdatalist.concat(res.data.list)
			}else {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
				break;
			case 5:
			data={
				zeroType:details.checkmakindex + 1,
				code:details.scancode
			}
			res=await warehouseUpdownTypedownEnterZeroOrder(data)
			if(res.code==200){
				details.codelist=res.data
				// details.checkdatalist=details.checkdatalist.concat(res.data.list)
			}else {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
				break;
		}
		
	}
	async function downs(){
		let res=null
		let data=null;
		let list=[]
		switch (Number(details.pageType)){
			case 1:
			data={
				trayCode:details.trayCode
			}
			res=await warehouseUpdownTypedownTrayCode(data)
				break;
			case 2:
			data={
				allocationId:details.resdata.allocationId
			}
			res=await warehouseUpdownTypeupShelfScanAllocation(data)
				break;
			case 3:
			list=[]
			details.checkdatalist.map(item=>{
				list.push({
					orderPackageCode:item.associationValue
				})
			})
			data={
				upShelfPackageList:list,
			}
			res=await warehouseUpdownTypedownPackage(data)
				break;
			case 4:
			list=[]
			details.checkdatalist.map(item=>{
				list.push({
					marketId:item.marketId,
					materialCode:item.associationValue,
					enterNum:item.enterNum,
					allocationId:item.allocationId,
					incomingBatch:item.incomingBatch
				})
			})
			data={
				upShelfStockList:list
			}
			res=await warehouseUpdownTypedownStock(data)
				break;
			case 5:
			list=[]
			details.checkdatalist.map(item=>{
				list.push({
					waybillCode:item.waybillNumber,
					orderCode:item.associationValue,
					enterNum:item.enterNum,
					allocationId:item.allocationId,
				})
			})
			data={
				upShelfZeroOrderList:list
			}
			res=await warehouseUpdownTypedownZeroOrder(data)
				break;
		}
		if(res.code==200){
			uni.showToast({
				title:'下架成功',
				icon:'none'
			})
			details.checkdatalist=[]
			details.datalist=[]
			details.codelist=[]
			details.scancode=''
			details.resdata={}
			details.isallcheck=false
		}else {
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}
		
	}
	function checkite(item){
		if(details.checkdatalist.indexOf(item)==-1){
			details.checkdatalist.push(item)
		}else{
			details.checkdatalist.splice(details.checkdatalist.indexOf(item),1)
		}
	}
	function allquanxuan(){
		if(details.datalist.length==details.checkdatalist.length){
			details.checkdatalist=[]
		}else{
			details.datalist.map(item=>{
				if(details.checkdatalist.indexOf(item)==-1){
					details.checkdatalist.push(item)
				}
			})
		}
	}
	function confirmlist(){
		let sfcg=false
		details.codelist.map(item=>{
			if(item.enterNum>item.num){
				sfcg=true
			}
		})
		if(sfcg){
			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
		}
		details.codelist.map(item=>{
			if(item.enterNum>0){
				details.datalist.push(item)
				details.checkdatalist.push(item)
			}
		})
		// details.datalist=details.datalist.concat(details.codelist)
		// details.checkdatalist=details.checkdatalist.concat(details.codelist)
		details.showstate=0
		details.codelist=[]
	}
	function setshowstate(state:number){
		details.showstate=state
	}
	function checkmake(){
		let list=[]
		if(Number(details.pageType)==4){
			list=['物料编码','物料名称']
			details.typelist=list
		}else if(Number(details.pageType)==5){
			list=['订单号','运单号']
			details.typelist=list
		}
		tiplists.value.setdetails({
			title:'请选择商场',
			isshow:true,
			tipstate:2,
			list,
			checklist:[],
			inputtext:'',
			confirmTxt:'确认选择',
			isonecheck:true,
			success:(deta)=>{
				if(deta.checklist.length==0){
					uni.showToast({
						title:'请选择商场',
						icon:'none'
					})
					return
				}
				details.checkmakindex=deta.checklist[0]
				tiplists.value.setdetails({isshow:false})
				details.codelist=[]
			},
			cancel:(details)=>{
				tiplists.value.setdetails({isshow:false})
			},
			close:(details)=>{
				tiplists.value.setdetails({isshow:false})
			}
		})
	}
	function checkmarke(){
		let list=[]
		details.Marketlist.map(item=>{
			list.push(item?.marketName)
		})
		tiplists.value.setdetails({
			title:'请选择商场',
			isshow:true,
			tipstate:2,
			list,
			checklist:[],
			inputtext:'',
			confirmTxt:'确认选择',
			isonecheck:true,
			success:(deta)=>{
				if(deta.checklist.length==0){
					uni.showToast({
						title:'请选择商场',
						icon:'none'
					})
					return
				}
				details.checkmarkindex=deta.checklist[0]
				tiplists.value.setdetails({isshow:false})
				details.codelist=[]
			},
			cancel:(details)=>{
				tiplists.value.setdetails({isshow:false})
			},
			close:(details)=>{
				tiplists.value.setdetails({isshow:false})
			}
		})
	}
	// function setchecl(index:number){
	// 	if(details.checkinarr.indexOf(index)==-1){
	// 		details.checkinarr.push(index)
	// 	}else{ 
	// 		details.checkinarr.splice(details.checkinarr.indexOf(index),1)
	// 	}
	// }
	const {
		checkmarkindex,
		Marketlist,
		codelist,
		scancode,
		typelist,
		checkmakindex,
		showstate,
		trayCode,
		isallcheck,
		checkdatalist,
		pageType,
		datalist
	}=toRefs(details)
</script>

<style lang="scss">
	.tanchuangbg{
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
		background-color: #00000050;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 1s;
		.makinp{
			width: 590upx;
			border: 1upx solid #00000020;
			color: #020B18;
			box-sizing: border-box;
			margin-bottom: 10upx;
			box-sizing: border-box;
			font-size: 28upx;
			padding: 10upx 20upx;
		}
		.inputbox{
			width: 670upx;
			// height: 600upx;
			background-color: #ffffff;
			box-sizing: border-box;
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx;
			.inputscan{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				>input{
					width: 440upx;
					height: 64upx;
					border: 1upx solid #092C4D30;
					border-radius: 8upx;
					box-sizing: border-box;
					font-size: 28upx;
					padding: 0upx 20upx;
					box-sizing: border-box;
				}
				.scanbt{
					width: 128upx;
					height: 64upx;
					background: #D3832A;
					border-radius: 8upx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30upx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			.scvbw{
				width: 100%;
				height: 450upx;
				margin-top: 30upx;
				.scboxitem{
					display: flex;
					flex-direction: column;
					align-items: center;
					.items{
						width: 590upx;
						display: flex;
						flex-direction: column;
						box-shadow: 0upx 2upx 10upx 0upx #e2e2e3;
						margin-top: 10upx;
						padding: 20upx;
						box-sizing: border-box;
						>.lisbite{
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							// position: absolute;
							>.itembox{
								width: 100%;
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;
								font-size: 28upx;
								color: #020B18;
								border: 1upx solid #D3832A;
								padding:10upx 20upx;
								box-sizing: border-box;
								border-radius: 20upx;
								color: #D3832A;
								>view{
									word-wrap: break-word;
									word-break: break-all;
								}
							}
						}
						>.type1s{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20upx;
							>view{
								width: 50%;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								font-size: 28upx;
								>view:nth-of-type(1){
									color: #90A0AF;
								}
								>view:nth-of-type(2){
									color: #092C4D;
								}
							}
						}
						.rksu{
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20upx;
							>view{
								// width: 50%;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								font-size: 28upx;
								>view:nth-of-type(1){
									color: #90A0AF;
								}
								>input{
									width: 200upx;
									padding: 0 15upx;
									border: 1upx solid #00000020;
								}
							}
						}
					}
				}
			}
			.btx{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 50upx;
				>view{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 260upx;
					height: 76upx;
					border-radius: 7upx;
					font-size: 28upx;
				}
				>.cancel{
					background-color: #F5F5F6;
					color: #5A6875;
					margin-right: 20upx;
				}
				>.confirm{
					background-color: #D3832A;
					color: #FFFFFF;
				}
			}
		}
	}
	.butys{
		display: flex;
		align-items: center;
		margin-top: 20upx;
		justify-content: space-around;
		>.conf{
			width: 320upx;
			height: 100upx;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
			background-color: #D3832A;
		}
		>.qut{
			width: 320upx;
			height: 100upx;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #5A6875;
			background-color: #FFFFFF;
		}
	}
	.scvorder{
		width: 100%;
		margin-top: 20upx;
		height: var(--height);
		.itembox{
			width: 686upx;
			border-radius: 20upx;
			padding: 0 20upx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin: auto;
			margin-bottom: 20upx;
			.topon1:nth-last-child(1){
				border-bottom: 4upx solid #EEEEEE00 !important;
			}
			>.topon1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 10upx;
				box-sizing: border-box;
				border-bottom: 4upx solid #EEEEEE;
				&:nth-last-child(1){
					border-bottom: 4upx solid #EEEEEE00 !important;
				}
				>view:nth-of-type(1){
					display: flex;
					align-items: center;
					>image{
						width: 48upx;
						height: 48upx;
						margin-right: 30upx;
					}
					>view{
						width: 50rpx;
						height: 50rpx;
						background: #178AF220;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28upx;
						font-weight: 500;
						color: #178AF2;
					}
				}
				>view:nth-of-type(2){
					display: flex;
					align-items: center;
					>view{
						width: 136upx;
						height: 64upx;
						border-radius: 8upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #90A0AF;
						background-color: #F5F5F6;
						margin-right: 20upx;
						&:nth-last-child(1){
							margin-right: 0upx;
						}
					}
					.xzc{
						background-color: #178AF2 !important;
						color: #ffffff !important;
					}
					.xze{
						background-color: #F8544B !important;
						color: #ffffff !important;
					}
					>image{
						width: 64upx;
						height: 64upx;
					}
				}
			}
			>.topon2{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 20upx 10upx;
				box-sizing: border-box;
				border-bottom: 4upx solid #EEEEEE;
				>image{
					width: 64upx;
					height: 64upx;
					margin-right: 20upx;
				}
				>view{
					font-size: 28upx;
					font-weight: 400;
					color: #020B18;
					flex: 1;
				}
			}
		}
	}
	.tbchec{
		width: 686rpx;
		height: 80rpx;
		padding: 16upx 36upx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		background-color: #ffffff;
		border-radius: 20upx;
		.xz{
			color: #D3832A !important;
		}
		>view{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #90A0AF;
			>image{
				width: 48upx;
				height: 48upx;
				margin-right: 16upx;
			}
		}
	}
	.viewbx{
		width: 686upx;
		// height: 356upx;
		background: #FFFFFF;
		border-radius: 20upx;
		position: relative;
		padding: 10upx 20upx;
		box-sizing: border-box;
		margin: auto;
		margin-top: 40upx;
		.numvie{
			display: flex;
			align-items: center;
			font-size: 28upx;
			font-weight: 400;
			color: #020B18;
			padding: 30upx 0;
			>view:nth-of-type(1){
				width: 200upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			>view:nth-of-type(2){
				
			}
		}
		.vwtybx1{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 20upx 0;
			box-sizing: border-box;
			// border-bottom: 4upx solid #EEEEEE;
			// &:nth-last-child(1){
			// 	border-bottom: none;
			// }
			>view{
				display: flex;
				align-items: center;
				margin-bottom: 20upx;
				&:nth-last-child(1){
					margin-bottom: 0upx;
				}
				>view:nth-of-type(1){
					display: flex;
					align-items: center;
					width: 200upx;
					font-size: 28upx;
					font-weight: 400;
					color: #020B18;
					>image{
						width: 48upx;
						height: 48upx;
						margin-right: 15upx;
					}
				}
				>view:nth-of-type(2){
					font-size: 28upx;
					font-weight: 400;
					color: #020B18;
					>input{
						flex: 1;
					}
				}
			}
		}
	}
	.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>