logpm/pagesHome/pages/PeopleSortingDetail/PeopleSortingDetail.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> -->
	<u-navbar title="人工分拣" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
		titleStyle='color:#ffffff'></u-navbar>
	<image mode="widthFix" class="bgimg" src="/pagesHome/static/bgby.png"></image>
	<view class="mabxtop">
		<view>
			<view>
				<view>{{warehouseTray.trayCode||details.trayCode}}</view>
				<view>托盘码</view>
			</view>
			<view>
				<view>{{warehouseTray.trayNum||0}}</view>
				<view>托盘件数</view>
			</view>
		</view>
		<view>
			<view>
				<view>{{warehouseTray.name||'暂无数据'}}</view>
				<view>名称</view>
			</view>
			<view>
				<view>{{warehouseTray.orderTotalNum||0}}</view>
				<view>总件数</view>
			</view>
		</view>
		<view>
			<view>
				<view>{{warehouseTray.trayTypeName||details.trayCodevalue}}</view>
				<view>打托方式</view>
			</view>
		</view>
		<view class="beizhut">
			<view>
				<view>{{warehouseTray.reamrk||'暂无备注'}}</view>
				<view>
					<view>备注</view>
					<image @click="setshowstate(1)" src="/pagesHome/static/editicon.png"></image>
				</view>
			</view>
		</view>
	</view>
	<!-- <view class="hedtopt">
		<view class="typto">
			<view>托盘码：汇通龙泉001</view>
			<view>托盘件数：19件</view>
		</view>
		<view class="typto">
			<view>名称：名称啊231</view>
			<view>总件数：20件</view>
		</view>
		<view class="typto">
			<view>打托方式：运单</view>
		</view>
		<view class="btrank">
			<view>备注：</view>
			<view class="ranbt" @click="setshowstate(1)">
				备注
			</view>
		</view>
	</view> -->
	<scroll-view class="scvmabx" scroll-y="true">
		<view class="maxboxs">
			<view class="items" v-for="item in datalist">
				<view class="tophd">
					<view>
						<image src="/pagesHome/static/dan.png"></image>
						<view></view>
						<view>{{item.dataCode}}</view>
					</view>
					<image @click="showremoveorder(item)" src="/pagesHome/static/removeitem.png"></image>
				</view>
				<view class="tophd">
					<view>
						<view>运单号：</view>
						<view>{{item.waybillNumber}}</view>
					</view>
				</view>
				<view class="numbxvie">
					<view>
						<view class="zhon">{{item.orderTotalNum}}</view>
						<view>总数</view>
					</view>
					<view>
						<view class="yish">{{item.scanNum}}</view>
						<view>已扫</view>
					</view>
					<view>
						<view class="weish">{{item.orderTotalNum - item.scanNum}}</view>
						<view>未扫</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
	<view class="buts" @click="setshowstate(2)">继续录入</view>
	<view class="tanchuangbg" @click="setshowstate(0)" v-if="showstate==1||showstate==2">
		<view class="tanbx" @click.stop.prevent v-if="showstate==1">
			<view class="titlran">备注</view>
			<view class="textareabx">
				<textarea maxlength="-1" placeholder="请输入备注" v-model="Remarktext"></textarea>
			</view>
			<view class="btx">
				<view class="cancel" @click="setshowstate(0)">取消</view>
				<view class="confirm" @click="checkremaker">确认</view>
			</view>
		</view>
		<view class="inputbox" @click.stop.prevent v-if="showstate==2">
			<view class="inputscan">
				<input placeholder="输入运单号" v-model="waybillCode" />
				<view class="scanbt" @click="scanlist">搜索</view>
			</view>
			<scroll-view scroll-y="true" class="scvbw">
				<view class="scboxitem">
					<view class="items" @click="setchecl(index)" v-for="(item,index) in codelist">
						<view class="type1s">
							<view>订单号：</view>
							<view>{{item.dataCode}}</view>
						</view>
						<view class="type1s">
							<view>
								<view>总件数：</view>
								<view>{{item.orderTotalNum}}件</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view>剩余件数：</view>
								<view>{{item.residueNum}}件</view>
							</view>
						</view>
						<view class="rksu">
							<view>
								<view>入库数：</view>
								<input placeholder="请输入入库数" v-model="item.number" type="number" @input="inputNum(item)" />
							</view>
						</view>
						<view class="lisbite" v-if="checkinarr.indexOf(index)!=-1">
							<view class="itembox" v-for="ite in item.positionList">
								<view v-if="ite.allocationName">库位码：{{ite.allocationName}}</view>
								<view>托盘码：{{ite.trayCode}}</view>
								<view>数量：{{ite.num}}</view>
							</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>
	<tips ref="tip"></tips>
	<saomiao2></saomiao2>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		warehouseTrayTypedeleteZeroOrderByTrayCode,
		warehouseTrayTypezeroOrderUpdateRemark,
		warehouseTrayTypezeroScanTrayCode,
		warehouseTrayenterZeroOrderByTrayCode,
		warehouseTrayTypegetZeroOrderByWaybillCode,
	} from '@/api/user.js'
	import utils from '@/utils/utils.js';
	import { reactive, toRefs, watchEffect, ref } from "vue";
	let details = reactive({
		showstate: 0,
		scancode: '',
		waybillCode: '',
		codelist: [],
		datalist: [],
		trayCode: '',
		trayCodevalue: '',
		trayType: '',
		warehouseTray: ({} as any),
		Remarktext: '',
		checkinarr: [],
	})
	const tip = ref(null)
	onLoad((op) => {
		details.trayCode = op.trayCode
		details.trayType = op.trayType
		if (op.pageName) utils.ttsspke(`当前打托方式为${op.pageName}`)
		if (!op.trayType) {
			uni.showToast({
				title: '获取打托方式出错',
				icon: 'none'
			})
		}
		let trayCodeTypearr = uni.getStorageSync('trayCodeType')
		console.log('trayCodeTypearr :>> ', trayCodeTypearr);
		trayCodeTypearr.map(item => {
			if (item.dictKey == details.trayType) {
				details.trayCodevalue = item.dictValue
			}
		})

	})
	onShow(() => {
		initpage()
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})
	onHide(() => {
		uni.$off('scancodedate')
	})
	async function initpage() {
		let data = {
			trayCode: details.trayCode
		}
		let response = await warehouseTrayTypezeroScanTrayCode(data)
		details.warehouseTray = response.data.data
		if (response?.data?.data?.list) {
			details.datalist = response?.data?.data?.list
		} else {
			details.datalist = []
		}
	}
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.dataCode
		})
	}
	async function scanlist() {
		let data = {
			waybillCode: details.waybillCode,

		}
		let response = await warehouseTrayTypegetZeroOrderByWaybillCode(data)
		console.log(response);
		details.codelist = response.data
		details.codelist.map(item => {
			item['number'] = 0
			return item
		})

	}
	async function confirmlist() {
		let zeroList = []
		// 是否退出提交
		let isfl = false

		isfl = !details.codelist.every(item => item.number > 0)
		// 当数据为空或物料数据未修改时, 不进行提交
		if (isfl || details.codelist) {
			return tip.value.setdetails({
				title: '警告',
				content: '最少修改一项物料',
				confirmTxt: '确认',
				isshow: true,
				isshowcancel: false,
				success: () => {
					tip.value.setisshow(false)
				},
				cancel: () => {
					tip.value.setisshow(false)
				},
				close: () => {
					tip.value.setisshow(false)
				}
			})
		}

		// 循环筛选符合的数据
		details.codelist.forEach(item => {
			if (item.number == 0) {
				return
			}
			if (item.number > item.orderTotalNum) {
				isfl = true
				tip.value.setdetails({
					title: '警告',
					content: '不能大于订单总数',
					confirmTxt: '确认',
					isshow: true,
					isshowcancel: false,
					success: () => {
						tip.value.setisshow(false)
					},
					cancel: () => {
						tip.value.setisshow(false)
					},
					close: () => {
						tip.value.setisshow(false)
					}
				})
			} else {
				let obj = {
					orderId: item.dataId,
					orderCode: item.dataCode,
					num: item.number,
				}
				zeroList.push(obj)
			}
		})

		// 不符合提交要求, 退出函数
		if (isfl) {
			return
		}

		let data = {
			trayType: details.trayType,
			trayCode: details.trayCode,
			zeroList,
		}
		let res = await warehouseTrayenterZeroOrderByTrayCode(data)
		if (res.code == 200) {
			setshowstate(0)
			initpage()
			details.codelist = []
			details.waybillCode = ''
		}
	}

	async function checkremaker() {
		let data = {
			trayCode: details.trayCode,
			remark: details.Remarktext
		}
		let response = await warehouseTrayTypezeroOrderUpdateRemark(data)
		if (response.code == 200) {
			initpage()
			setshowstate(0)
		}
	}
	function showremoveorder(item) {
		tip.value.setdetails({
			title: '提示',
			content: '确认删除该订单和托盘的绑定？',
			confirmTxt: '确认',
			isshow: true,
			isshowcancel: true,
			success: async () => {
				let data = {
					trayCode: details.trayCode,
					orderCode: item.dataCode
				}
				let response = await warehouseTrayTypedeleteZeroOrderByTrayCode(data)
				if (response.code == 200) {
					initpage()
				}
				tip.value.setisshow(false)
			},
			cancel: () => {
				tip.value.setisshow(false)
			},
			close: () => {
				tip.value.setisshow(false)
			}
		})
		// let data={

		// }
		// let response=await warehouseTrayTypedeleteZeroOrderByTrayCode(data)
	}
	function scandata() {

	}
	function setchecl(index : number) {
		if (details.checkinarr.indexOf(index) == -1) {
			details.checkinarr.push(index)
		} else {
			details.checkinarr.splice(details.checkinarr.indexOf(index), 1)
		}
	}
	function setshowstate(state : number) {
		details.showstate = state
	}

	// 输入防抖并限制输入数字的最大和最小值
	let isClick = null
	function inputNum(item) {
		if (isClick) clearTimeout(isClick)
		isClick = setTimeout(() => {
			item.number = parseInt(item.number)
			// 当值不是数字为NaN时, item.number为0
			if (item.number !== item.number) item.number = 0
			// 最大限制
			if (item.number >= item.residueNum) item.number = item.residueNum
			// 最小限制
			if (item.number <= 0) item.number = 0
			clearTimeout(isClick)
		}, 500)
	}

	const { checkinarr, Remarktext, datalist, warehouseTray, showstate, waybillCode, codelist } = toRefs(details)
</script>

<style lang="scss" scoped>
	.mabxtop {
		position: relative;
		width: 684upx;
		// height: 348upx;
		background: #FFFFFF;
		border-radius: 20upx;
		margin: auto;
		margin-top: 20upx;
		padding: 60upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		>view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40upx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			>view {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				>view:nth-of-type(1) {
					font-size: 32upx;
					font-weight: 400;
					color: #020B18;
				}

				>view:nth-of-type(2) {
					font-size: 28upx;
					font-weight: 400;
					color: #90A0AF;
				}
			}
		}

		.beizhut {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40upx;

			>view {
				width: 100%;

				>view:nth-of-type(2) {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>image {
						width: 32upx;
						height: 32upx;
					}
				}
			}
		}
	}

	.bgimg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;

	}

	.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;

		.tanbx {
			width: 670upx;
			// height: 600upx;
			background-color: #ffffff;
			box-sizing: border-box;
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx;

			.titlran {
				font-size: 32upx;
				color: #092C4D;
				margin-bottom: 40upx;
			}

			.textareabx {
				width: 560upx;
				height: 240upx;
				background: #F5F5F6;
				border-radius: 8upx;
				padding: 20upx 40upx;
				box-sizing: border-box;

				>textarea {
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					font-size: 28upx;
					font-weight: 400;
				}
			}

			.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: 88upx;
					border-radius: 8upx;
					font-size: 32upx;
				}

				>.cancel {
					background-color: #F5F5F6;
					color: #5A6875;
					margin-right: 20upx;
				}

				>.confirm {
					background-color: #D3832A;
					color: #FFFFFF;
				}
			}
		}

		.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;
						position: relative;

						>.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;
				}
			}
		}
	}

	.buts {
		width: 320upx;
		height: 88upx;
		background: #D3832A;
		border-radius: 8upx 8upx 8upx 8upx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 400;
		color: #FFFFFF;
		margin: auto;
		margin-top: 20upx;
	}

	.scvmabx {
		width: 684rpx;
		height: 37vh;
		margin: auto;
		margin-top: 20upx;

		.maxboxs {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			>.items {
				width: 690upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20upx 30upx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 10upx;
				margin-bottom: 30upx;

				&:nth-last-child(1) {
					margin-bottom: 20upx;
				}

				.tophd {
					width: 100%;
					padding: 15upx 25upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>view {
						display: flex;
						align-items: center;
						justify-content: flex-start;

						>image {
							width: 48upx;
							height: 48upx;
							margin-right: 10upx;
						}

						>view {
							font-size: 32upx;
							color: #020B18;
							font-weight: 400;
						}
					}

					>image {
						width: 48upx;
						height: 48upx;
						margin-right: -20upx;
					}
				}

				.numbxvie {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: 15upx 25upx;
					box-sizing: border-box;

					.zhon {
						color: #D3832A;
					}

					.yish {
						color: #1197EB;
					}

					.weish {
						color: #020B18;
					}

					>view {
						display: flex;
						flex-direction: column;
						align-items: center;

						>view:nth-of-type(1) {
							font-size: 36upx;
							margin-bottom: 12upx;
						}

						>view:nth-of-type(2) {
							font-size: 28upx;
						}
					}
				}
			}
		}
	}

	.hedtopt {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #ffffff;
		padding: 36upx 32upx;
		box-sizing: border-box;

		.btrank {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;

			.ranbt {
				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;
			}
		}

		.typto {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			margin-bottom: 25upx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			>view {
				flex: 1;
			}
		}

	}
</style>