logpm/pagesHome/pages/MergeTray/MergeTray.vue

<template>
	<u-navbar title="合托"
	 bgColor='#D3832A' leftIconColor='#ffffff'
	titleStyle='color:#ffffff' placeholder :autoBack="true" leftIconSize='35'></u-navbar>
	<view class="topbos">
		<view class="srview">
			<view>解绑托盘码</view>
			<view>
				<input placeholder="请扫描或输入" v-model="mergeTray" @focus="setstate(1)"/>
				<view class="sbm" @click="scandata">确定</view>
			</view>
		</view>
		<view class="srview">
			<view>合并托盘码</view>
			<view>
				<input placeholder="请扫描或输入" v-model="newmergeTray" @focus="setstate(2)"/>
				<view class="sbm" @click="scandata">确定</view>
			</view>
		</view>
	</view>
	<view class="tabsetnumb">
		<view @click="settabberstate(1)" :class="tabberstate==1?'xz':''">
			<view>解绑托盘数据</view>
			<view></view>
		</view>
		<view @click="settabberstate(2)" :class="tabberstate==2?'xz':''">
			<view>合并托盘数据</view>
			<view></view>
		</view>
	</view>
	<view class="tarynumvw">
		托盘数量：{{(tabberstate==1?(beilist?.totalNum||beilist.stockNum):(newbeilist?.totalNum||beilist.stockNum))||0}}
	</view>
	<scroll-view scroll-y="true" class="scvorder">
		<view class="itembox" v-for="(item,index) in (beilist?.list||[])" v-if="tabberstate==1">
			<view class="topon1">
				<view>{{index+1}}</view>
				<!-- <view>
					<view :class="item.isFleeing=='0'?'xzc':''">正常</view>
					<view :class="item.isFleeing=='1'?'xze':''">异常</view>
				</view> -->
			</view>
			<view class="topon2" v-if="item.orderCode"  @click.stop="goorderdetail(item)">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>订单号：{{item.orderCode}}</view>
			</view>
			<view class="topon2" v-if="item.code">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>包条码：{{item.code}}</view>
			</view>
			<view class="topon2" v-if="item.goodsType==3">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>物料名称：{{item.materialName}}</view>
			</view>
			<view class="topon2" v-if="item.goodsType==3">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>商场名称：{{item.marketName}}</view>
			</view>
			<view class="topon2" v-if="item.goodsType==3">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>托盘码：{{item.trayCode}}</view>
			</view>
			<view class="topon2" v-if="item.num||item.shelfNum">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>录入数量：{{item.num||item.shelfNum}}</view>
			</view>
			<view class="topon2" v-if="item.totalNum">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>总数：{{item.totalNum}}</view>
			</view>
		</view>
		<view class="itembox" v-for="(item,index) in (newbeilist?.list||[])" v-if="tabberstate==2">
			<view class="topon1">
				<view>{{index+1}}</view>
				<!-- <view>
					<view :class="item.isFleeing=='0'?'xzc':''">正常</view>
					<view :class="item.isFleeing=='1'?'xze':''">异常</view>
				</view> -->
			</view>
			<view class="topon2" v-if="item.orderCode"  @click.stop="goorderdetail(item)">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>订单号：{{item.orderCode}}</view>
			</view>
			<view class="topon2" v-if="item.code">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>包条码：{{item.code}}</view>
			</view>
			<view class="topon2" v-if="item.goodsType==3">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>物料名称：{{item.materialName}}</view>
			</view>
			<view class="topon2" v-if="item.goodsType==3">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>商场名称：{{item.marketName}}</view>
			</view>
			<view class="topon2" v-if="item.goodsType==3">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>托盘码：{{item.trayCode}}</view>
			</view>
			<view class="topon2" v-if="item.num">
				<image src="/pagesHome/static/scanicon1.png"></image>
				<view>录入数量：{{item.num}}</view>
			</view>
		</view>
	</scroll-view>
	<view class="butys">
		<view class="qut">取消</view>
		<view class="conf" @click="godetails">确认合并</view>
	</view>
	<tips ref="tip"></tips>
	<saomiao2></saomiao2>
</template>

<script lang="ts" setup>
	import {
		warehouseTrayTypescanSourceTrayCode,
		warehouseTrayTypescanTargetTrayCode,
		warehouseTrayTypemergeTray
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { reactive, ref, toRefs } from "vue";
    import utils from '@/utils/utils.js';
	const tip=ref(null)
	const details=reactive({
		scantype:1,
		mergeTray:'',//来源托盘
		newmergeTray:'',//目标托盘
		scancode:'',
		tabberstate:1,
		beilist:{} as any,
		newbeilist:{} as any,
	})
	onLoad((op) => {
		// details.upshelfScanType = op.type
		// details.scancode = 'HT20230800002'
		// scandata()
		// setTimeout(()=>{
		// 	details.scantype=2
		// 	details.scancode = 'HT20230800001'
		// 	scandata()
		// },2500)
		// setTimeout(()=>{
		// 	details.scancode='23072506670-2'
		// 	scandata()
		// },4500)
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})
	function setstate(state:number){
		details.scantype=state
	}
	function goorderdetail(item){
		uni.navigateTo({
			url:'/pagesHome/pages/orderDetails/orderDetails?orderCode='+item.orderCode
		})
	}
	async function scandata(){
		// let res=await 
		let res=null
		if(details.scantype==1){
			if(details.mergeTray){
				details.scancode=details.mergeTray
			}
			let data={
				trayCode:details.scancode
			}
			res=await warehouseTrayTypescanSourceTrayCode(data)
		}else if(details.scantype==2){
			if(details.newmergeTray){
				details.scancode=details.newmergeTray
			}
			let data={
				trayCode:details.scancode
			}
			res=await warehouseTrayTypescanTargetTrayCode(data)
		}
		if(res.code==200){
			if(details.scantype==1){
				details.beilist=res.data
				details.mergeTray=details.scancode
				details.scantype=2
			}else if(details.scantype==2){
				details.newbeilist=res.data
				details.newmergeTray=details.scancode
				details.scantype=1
			}
		}else{
			
		}
		console.log(res);
	}
	function settabberstate(state:number){
		details.tabberstate=state
	}
	function godetails(){
		// uni.navigateTo({
		// 	url:'/pagesHome/pages/MergeTrayDetails/MergeTrayDetails'
		// })
		if(!details.newmergeTray){
			utils.ttsspke('请扫描解绑托盘')
			uni.showToast({
				title:'请扫描解绑托盘',
				icon:'none'
			})
			return
		}
		if(!details.mergeTray){
			utils.ttsspke('请扫描合并托盘')
			uni.showToast({
				title:'请扫描合并托盘',
				icon:'none'
			})
			return
		}
		tip.value.setdetails({
			isshow:true,
			content:'是否确认合并？',
			confirmTxt:'合并',
			success:async ()=>{
				let data={
					sourceTrayCode:details.mergeTray,
					targetTrayCode:details.newmergeTray
				}
				let res=await warehouseTrayTypemergeTray(data)
				if(res.code==200){
					utils.ttsspke('合托成功')
					uni.navigateTo({
						url:'/pagesHome/pages/MergeTrayDetails/MergeTrayDetails?tray='+details.newmergeTray
					})
				}
				tip.value.setdetails({isshow:false})
			},
			cancel:()=>{
				tip.value.setdetails({isshow:false})
			},
			close:()=>{
				tip.value.setdetails({isshow:false})
			},
		})
	}
	const {
		beilist,
		newbeilist,
		newmergeTray,
		mergeTray,
		scantype,
		scancode,
		tabberstate,
	}=toRefs(details)
</script>

<style lang="scss">
	.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: 47vh;
		.itembox{
			width: 686upx;
			border-radius: 20upx;
			padding: 0 20upx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin: auto;
			margin-bottom: 20upx;
			>.topon1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 10upx;
				box-sizing: border-box;
				border-bottom: 4upx solid #EEEEEE;
				>view:nth-of-type(1){
					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;
				}
			}
		}
	}
	.tarynumvw{
		width: 100%;
		padding: 24upx 70upx;
		box-sizing: border-box;
		background-color: #ffffff;
		margin-top: 4upx;
		box-sizing: border-box;
	}
	.tabsetnumb{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		margin-top: 20upx;
		.xz{
			>view:nth-of-type(1){
				color: #D3832A !important;
			}
			>view:nth-of-type(2){
				background-color: #D3832A !important;
			}
		}
		>view{
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			>view:nth-of-type(1){
				font-size: 32upx;
				font-weight: 400;
				color: #020B18;
				padding: 30upx 0;
			}
			>view:nth-of-type(2){
				width: 96upx;
				height: 8upx;
				background-color: #D3832A00;
				border-radius: 4upx;
			}
		}
	}
	.topbos{
		display: flex;
		flex-direction: column;
		>.srview{
			display: flex;
			align-items: center;
			padding: 26upx 32upx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-bottom: 4upx;
			.sbm{
				width: 150upx;
				height: 64upx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #D3832A;
				color: #ffffff;
				border-radius: 10upx;
			}
			&:nth-last-child(1){
				margin-bottom: 0;
			}
			>view:nth-of-type(1){
				width: 190upx;
				font-size: 28upx
			}
			>view:nth-of-type(2){
				font-size: 28upx;
				flex: 1;
				display: flex;
				align-items: center;
				>input{
					flex: 1;
					font-size: 28upx;
				}
			}
		}
	}
</style>