logpm/pagesHome/pages/StockUplist/StockUplist.vue

<template>
	<!-- <u-navbar title="备货列表" placeholder border=true :autoBack="true" leftIconSize='35'></u-navbar> -->
	<u-navbar title="备货列表"
	 bgColor='#D3832A' leftIconColor='#ffffff'
	titleStyle='color:#ffffff' placeholder 
	:autoBack="true" leftIconSize='35'></u-navbar>
	<view class="head">
		<view class="type1">
			<view>客户：{{user.consignee}}</view>
			<view>备货区域：{{user.goodsAreaName}}</view>
		</view>
		<view class="type1">
			<view>计划件数：{{user.planNum}}</view>
			<view>扫码件数：{{user.scanNum}}</view>
		</view>
	</view>
	<view class="tabtip">
		<view @click="setorderStatus(1)">
			<view :class="orderStatus==1?'xz':''">定制品</view>
		</view>
		<view @click="setorderStatus(2)">
			<view :class="orderStatus==2?'xz':''">库存品</view>
		</view>
	</view>
	<scroll-view scroll-y="true" class="scvew">
		<view class="mabx">
			<view class="item" v-if="orderStatus==1" v-for="item in orderList">
				<view class="toptitl">
					<view class="toplft">
						库位号：{{item.allocation}}
					</view>
					<view class="tis bf">
						按件扫描
					</view>
				</view>
				<view class="boxcontt">
					<view>
						<view><text style="color: #90A0AF;">托盘号：</text>{{item.pallet}}</view>
						<view @click.stop="goorderdetail(item)"><text style="color: #90A0AF;">订单自编码：</text>{{item.orderCode}}</view>
					</view>
					<view>
						<view><text style="color: #90A0AF;">计划件数：</text>{{item.planNum}}</view>
						<view><text style="color: #90A0AF;">扫描件数：</text>{{item.scanNum}}</view>
					</view>
				</view>
				<view class="buttts">
					<view class="antu" v-if="item.trayLean" @click="ckscanningCode(item)">
						整托备货扫码
					</view>
					<!-- <view class="anj" @click="godetails(item)" v-if="!item.completeStact"> -->
					<view class="anj" @click="godetails(item)">
						{{item.completeStact?'查看明细':'按件备货扫码'}}
					</view>
<!-- 					<view class="anj" @click="godetails(item)" v-else>
						查看明细
					</view> -->
				</view>
			</view>
			<view class="item" v-if="orderStatus==2" v-for="item in stockList">
				<!-- <view class="toptitl">
					<view class="toplft">
						库位号：{{item.allocation}}
					</view>
					<view :class="item==3?'tis bf':'tis'">
						整托备货
					</view>
				</view> -->
				<view class="boxcontt">
					<view>
						<view><text style="color: #90A0AF;">货位：</text>{{item.allocation}}</view>
						<view><text style="color: #90A0AF;">物品：</text>{{item.materialName}}</view>
					</view>
					<view>
						<view><text style="color: #90A0AF;">SKU：</text>{{item.sku}}</view>
						<view><text style="color: #90A0AF;">规格：</text>{{item.cargoNorms}}</view>
					</view>
					<view>
						<view><text style="color: #90A0AF;">计划数量：</text>{{item.planNum}}</view>
						<view><text style="color: #90A0AF;">单位：</text>{{item.cargoUnit}}</view>
					</view>
				</view>
				<view class="buttts">
					<view class="anj" @click="goBarCode(item)">
						配置包条码
					</view>
					<!-- <view class="anj">
						拆包
					</view> -->
				</view>
			</view>
		</view>
	</scroll-view>
	<tiplist ref="tiplists"></tiplist>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import { 
		detailType,
	} from '@/interfaces/pagesHome/StockUplist'
	import { 
		distributionStockuporderList,
		distributionStockupscanningCode,
		distributionStockuplocationSelection
	} from '@/api/user.js'
	import { reactive, toRefs,ref } from "vue";
	const tiplists=ref(null)
	let details=reactive<detailType>({
		reservationId:'',
		orderList:[],
		orderStatus:1,
		user:{
			consignee:'',
			goodsAreaName:'',
			planNum:'',
			scanNum:'',
		},
		stockList:[],
		stockupId:'',
		items:{}
	})
	onLoad((op)=>{
		details.reservationId=op.id
		details.stockupId=op.stockupId
		details.items=JSON.parse(op.item)
		// details.user.goodsAreaName=op.stockupArea
		// details.reservationId='1682676882390781953'
	})
	onShow(()=>{
		initpage()
	})
		function goorderdetail(item){
			uni.navigateTo({
				url:'/pagesHome/pages/orderDetails/orderDetails?orderCode='+item.orderCode
			})
		}
	async function initpage(){
		console.log(details.items);
		let data={
			orderStatus:details.orderStatus,
			reservationId:details.reservationId,
			typeService:details.items.typeService,
			stockupId:details.stockupId
		}
		details.orderList=[]
		let response=await distributionStockuporderList(data)
		console.log(response);
		details.user.consignee=response.data?.consignee
		details.user.goodsAreaName=response.data?.goodsAreaName
		details.user.planNum=response.data?.planNum
		details.user.scanNum=response.data?.scanNum
		details.orderList=response.data?.orderList
		details.stockList=response.data?.stockList
	}
	function godetails(item:any){
			uni.navigateTo({
				url:'/pagesHome/pages/StockUplistScandetails/StockUplistScandetails?stockArticleId='
				+(item.stockArticleId||'')+
				'&orderStatus='+
				details.orderStatus+'&reservationId='+details.reservationId+
				'&allocation='+item.allocation+'&pallet='+item.pallet+'&orderCode='+item.orderCode
				+'&stockupId='+details.stockupId+'&allocationId='+item.allocationId
				+'&typeService='+details.items.typeService
				+'&status='+(item.completeStact?'1':'0')
			})
		
	}
	async function ckscanningCode(item){
		let data={
			stockupId:details.stockupId,
			trayId:item.trayId,
			reservationId:details.reservationId,
		}
		let res=await distributionStockupscanningCode(data)
		
	}
	function setorderStatus(state:number){
		details.orderStatus=state
		initpage()
	}
	async function goBarCode(item:any){
		let data={
			deliveryDetailsId:item.deliveryDetailsId
		}
		let res=await distributionStockuplocationSelection(data)
		let list=[]
		res.data.map(item=>{
			list.push(item.positionCode + ' (' + item.num + '件)')
		})
		if(list.length==1){
			uni.navigateTo({
				url:'/pagesHome/pages/setbarcode/setbarcode?item='+JSON.stringify(item)
				+'&reservationId='+details.reservationId
				+'&goodsAreaName='+details.user.goodsAreaName
				+'&stockupId='+details.stockupId
				+'&allocationId='+res.data[0].allocationId
				+'&completeStact='+item.completeStact
			})
			return
		}
		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
				}
				uni.navigateTo({
					url:'/pagesHome/pages/setbarcode/setbarcode?item='+JSON.stringify(item)
					+'&reservationId='+details.reservationId
					+'&goodsAreaName='+details.user.goodsAreaName
					+'&stockupId='+details.stockupId
					+'&allocationId='+res.data[deta.checklist[0]].allocationId
					+'&completeStact='+item.completeStact
				})
				tiplists.value.setdetails({isshow:false})
			},
			cancel:(details)=>{
				tiplists.value.setdetails({isshow:false})
			},
			close:(details)=>{
				tiplists.value.setdetails({isshow:false})
			}
		})
	}
	const { user,orderList,orderStatus,stockList }=toRefs(details)
</script>

<style lang="scss">
	.tabtip{
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view{
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			font-size: 32upx;
			font-weight: 400;
			color: #90A0AF;
			>view{
				height: 80upx;
				border-bottom: 8upx solid #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.xz{
			color: #D3832A;
			border-bottom: 8upx solid #D3832A;
			// border-radius: 5upx;
		}
	}
	.scvew{
		width: 100%;
		height: 60vh;
		margin-top: 20upx;
		.mabx{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			>.item{
				width: 686upx;
				// height: 378upx;
				background: #FFFFFF;
				border-radius: 8upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				// padding: 10upx 20upx;
				box-sizing: border-box;
				border-bottom: 1upx solid #ebebeb;
				margin-bottom: 20upx;
				padding-bottom: 30upx;
				.toptitl{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2upx solid #EEEEEE;
					padding: 34upx 24upx;
					box-sizing: border-box;
					.toplft{
						font-size: 32upx;
						font-weight: 400;
						color: #092C4D;
					}
					.tis{
						font-size: 32upx;
						font-weight: 400;
						color: #0086F1;
					}
					.bf{
						color: #D3832A;
					}
				}
				.boxcontt{
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 100%;
					padding: 32upx 24upx;
					box-sizing: border-box;
					font-size: 28upx;
					border-bottom: 2upx solid #EEEEEE;
					>view{
						width: 100%;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						margin-bottom: 20upx;
						&:nth-last-child(1){
							margin-bottom: 0;
						}
						>view{
							flex: 1;
							word-wrap: break-word;
							word-break: break-all;
							&:nth-of-type(1){
								margin-right: 30upx;
							}
						}
					}
				}
				.buttts{
					height:100upx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					width: 100%;
					box-sizing: border-box;
					.antu{
						border: 2upx solid #0086F1;
						color: #0086F1;
					}
					.anj{
						border: 2upx solid #D3832A;
						color: #D3832A;
					}
					>view{
						width: 204upx;
						height: 64upx;
						background: #FFFFFF;
						border-radius: 8upx;
						opacity: 1;
						font-size: 28upx;
						display: flex;
						align-items: center;
						justify-content: center;
						
					}
				}
			}
		}
	}
	.head{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 20upx;
		height: 176upx;
		box-sizing: border-box;
		// border-bottom: 1upx solid #ececec;
		background-color: #ffffff;
		>.type1{
			width: 100%;
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			>view{
				width: 50%;
			}
		}
	}
</style>