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.positionInfo||'')}}
			</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">
		<template v-if="details.upshelfScanType === '4'&& details.renderList.length !==0">
			<view v-show="details.checkstate === 1">
				<view class="trayTab" style="display: flex; align-items: center; justify-content: space-between;">
					<view>托盘码：{{details.renderList[0].trayName}}</view>
					<!-- 求和 -- 托盘上所有包件的已扫数量 -->
					<view>托盘已扫数量：{{details.renderList.reduce((curr, item)=>curr + item.shelfNum ,0)}}</view>
				</view>
			</view>
		</template>
		<scroll-view class="sclcs" scroll-y="true">
			<view class="visc">
				<template v-if="details.checkstate === 1 || details.checkstate === 2">
					<view class="item1" v-for="item in renderList">
						<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" @click.stop="goorderdetail(item, item.goodsType)">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>订单号：{{item.orderCode}}</view>
						</view>
						<view class="tpbx" v-if="item.goodsType==0" @click.stop="goorderdetail(item, item.goodsType)">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>类型：{{Number(item.conditions) === 1 ? '定制品': '库存品'}}</view>
						</view>

						<!-- 定制品 -->
						<view v-if="item.goodsType === 1">
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>服务号：{{item.serviceNum}}</view>
							</view>
							<view class="tpbx" @click.stop="goorderdetail(item, item.goodsType)">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>订单号：{{item.orderCode}}</view>
							</view>
						</view>

						<!-- 零担 -->
						<view v-if="item.goodsType === 2">
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>运单号：{{item.waybillNo}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>订单号：{{item.orderCode}}</view>
							</view>
						</view>

						<!-- 库存品 -->
						<view v-if="item.goodsType === 3">
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>物料编码：{{item.materialCode}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>物料名称：{{item.materialName}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>订单号：{{item.orderCode}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>商场名称：{{item.marketName}}</view>
							</view>
							<view class="tpbx">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>批次号：{{item.incomingBatch}}</view>
							</view>
						</view>

						<view class="tpbx">
							<template
								v-if="Number(details.upshelfScanType) === 1 || Number(details.upshelfScanType) === 2 ||details.checkstate === 2">
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view style="flex: 1; display: inline-flex; justify-content: space-between;">
									<view>总数：{{item.totalNum}}</view>
									<view>上架数量：{{item.shelfNum}}</view>
								</view>
							</template>

							<!-- 					<template v-else>
								<image src="/pagesHome/static/kuweiicon.png"></image>
								<view>已扫数量：{{item.shelfNum}}</view>
							</template> -->
						</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>
				</template>

				<view class="item1" v-if="checkstate==3&&reqobj.trayCode">
					<view class="tpbx">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>托盘码：{{reqobj.trayCode + `(${reqobj.trayName})`}}</view>
					</view>
					<view class="tpbx">
						<image src="/pagesHome/static/scanicon.png"></image>
						<view>托盘数量：{{reqobj.trayNum}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<!-- 微信小程序适配 -- 扫码按钮 -->
	/* #ifdef MP-WEIXIN */
	<view class="scanButton" @click="handleScan">扫码</view>
	/* #endif */
	<view class="butbox">
		<view @click="uplist">上架</view>
	</view>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
	<tips ref="tip"></tips>
</template>

<script lang="ts" setup>
	import {
		warehouseUpdownTypeupShelfScanGoods,
		warehouseUpdownTypeupShelfScanAllocation,
		warehouseUpdownTypeupShelfOrder,
		warehouseUpdownTypeupShelfPackage,
		warehouseUpdownTypeupShelfTray
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { inject, reactive, ref, toRefs, watchEffect } from "vue";
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import useStorageStore from '@/store/useStorageStore';
	import { storeToRefs } from 'pinia';
	const { HANDLE_ISSTORAGECODE } = useStorageStore()
	const { scanState } = storeToRefs(useSystemSettingsStore())
	const utils = inject('utils') as any
	const tip = ref(null)
	let details = reactive({
		checkstate: 1,
		upshelfScanType: '',
		scancode: '',
		allocationId: '',//库位id
		datalist: [],
		reqobj: {} as any,
		uplistarr: [],
		renderList: [],
		// 已扫描的服务号的数组
		orderCodeArr: []
	})

	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

		if (op.pageName) utils.ttsspke(`当前上架方式为${op.pageName},请先扫描库位码`)
	})

	// 开启监听扫描
	onShow(() => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log('code :>> ', code);
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
		// #endif
	})

	// 关闭扫描监听
	/* 	onHide(() => {
			uni.$off('scancodedate')
		}) */

	// 下拉刷新数据
	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			// 重置数据
			details.allocationId = ''
			details.reqobj = {}
			details.renderList = []
			details.datalist = []
			details.uplistarr = []
			details.orderCodeArr = []

			// 关闭刷新动画
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})

	/** 扫描库位 */
	const scanStorage = async (code) => {

		try {
			let data = {
				allocationId: code,
			}

			let res = await warehouseUpdownTypeupShelfScanAllocation(data)

			if (res.code == 200) {
				details.reqobj = res.data
				const _positionArr = details.reqobj.allocationTitle.split('-')
				details.reqobj.positionInfo = _positionArr[0] + '层' + _positionArr[1] + '列'
				details.allocationId = res.data.allocationId
				details.datalist = (res.data?.list) || []
				if (details.checkstate === 2) return details.renderList = details.datalist
				// if (details.upshelfScanType === '4') return utils.ttsspke('请扫描托盘码')
				// utils.ttsspke('请扫描包条码')
			}

		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		}

	}

	/** 扫描 - 包条 - 托盘 */
	const scanOther = async (_code : string) => {
		try {
			if (Number(details.upshelfScanType) == 4 && details.reqobj.trayCode) {
				// #ifdef APP
				utils.ttsspke('该库位已绑托盘')
				// #endif
				return
			}

			if (details.upshelfScanType === '3') {
				const flag = details.uplistarr.findIndex(val => val.orderPackageCode === _code)
				if (flag !== -1) {
					// #ifdef APP
					utils.ttsspke('包件重复扫描')
					// #endif
					return
				}

			}

			let data = {
				upshelfScanType: details.upshelfScanType,
				code: _code,
			}

			let res = await warehouseUpdownTypeupShelfScanGoods(data)

			if (res.code == 200) {
				if (Number(details.upshelfScanType) !== 4) {
					const _uplistarr = [...details.uplistarr]
					const _orderCodeArr = [...details.orderCodeArr]
					const _flag = res.data.every(val => {
						if (details.orderCodeArr.includes(val.orderCode)) {
							uni.showToast({
								title: '订单已存在, 勿重复扫码',
								icon: 'none'
							})

							return false
						}

						_uplistarr.push(val)
						_orderCodeArr.push(val.orderCode)
						return true
					})

					if (!_flag) return
					details.uplistarr = _uplistarr
					details.orderCodeArr = _orderCodeArr
				}

				else {
					details.uplistarr = res.data
				}

				// 语音   
				let _content = ''
				if (details.upshelfScanType !== '3') _content = details.uplistarr.reduce((curr, item) => curr + item.shelfNum, 0) + '件'
				else _content = details.uplistarr.length + '件'
				utils.ttsspke(_content)

				if (details.checkstate === 1) return details.renderList = details.uplistarr

			} else if (res.code === 3001 && res.audio) {
				utils.ttsspke(res.audio)
			}
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		}
	}

	async function scandata() {

		uni.showLoading({
			mask: true
		})

		const code = details.scancode
		/** 判断扫描是否为库位码 */
		const isStorageCode = HANDLE_ISSTORAGECODE(code)

		uni.hideLoading()

		if (isStorageCode) return scanStorage(code)
		else scanOther(code)


	}
	function goorderdetail(item, type) {
		// 当type 不是 
		if (type !== 1) return
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	function uplist() {
		let content = ''
		if (details.allocationId === '') {
			content = '请先扫描库位'
		}
		else if (details.uplistarr.length === 0) {
			if (Number(details.upshelfScanType) == 4) {
				content = '请先扫描托盘码'
			} else {
				content = '请先扫描包件数据'
			}

		}
		if (content) {
			uni.showToast({
				title: content,
				icon: "none"
			})
			utils.ttsspke(content)
			return
		}
		let _totalShelfNum = 0
		// 计算扫描件数总数
		if (details.upshelfScanType === '3') _totalShelfNum = uplistarr.value.length
		else _totalShelfNum = uplistarr.value.reduce((curr, item) => curr + item.shelfNum, 0)
		utils.ttsspke(`待上架${_totalShelfNum}件, 是否进行上架`)

		tip.value.setdetails({
			title: '提示',
			content: '确认上架？',
			confirmTxt: '确认',
			isshow: true,
			isshowcancel: true,
			success: async () => {
				let res : any = null
				// loading
				uni.showLoading({
					mask: true,
					title: '提交中'
				})
				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) {
					// utils.ttsspke(`成功上架${_totalShelfNum}件`)
					details.uplistarr = []
					details.scancode = details.allocationId
					details.allocationId = ''
					details.renderList = []
					scandata()
				}
				// 关闭loading
				uni.hideLoading()
				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
		if (state === 1) return details.renderList = details.uplistarr
		else if (state === 2) return details.renderList = details.datalist
	}
	function handleScan() {
		// 微信小程序适配
		uni.scanCode({
			success(res) {
				console.log('res :>> ', res);
				console.log('res.result :>> ', res.result);
				details.scancode = res.result
				scandata()
			}
		})
	}
	const {
		uplistarr,
		checkstate,
		reqobj,
		renderList
	} = 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;
		}
	}

	.trayTab {
		width: 686upx;
		margin: auto;
		padding: 0 0 20upx;
	}

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

			.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 {
			flex: none;
			width: 32upx;
			height: 32upx;
			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: 32upx;
				height: 32upx;
				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;
		}
	}

	.scanButton {
		position: fixed;
		width: 100%;
		bottom: 20upx;
		text-align: center;
		border: 1upx solid #D3832A;
		color: #D3832A;
		padding: 15upx 0;
		border-radius: 10upx;
	}
</style>