logpm/pagesHome/pages/SelfPScanList/SelfPScanList.vue

<template>
	<BasicContainer ref="basicContainer" :option="option">
		<template #head>
			<view class="hdtpnum">
				<view>
					<view>订单总数</view>
					<view>{{ details.orderNum || 0 }}</view>
				</view>
				<view>
					<view>齐套数</view>
					<view>{{ details.completeNum || 0 }}</view>
				</view>
				<view>
					<view>自提件数</view>
					<view>{{ details.planNum || 0 }}</view>
				</view>
				<view>
					<view>签收件数</view>
					<view>{{ details.signedNum || 0 }}</view>
				</view>
				<view>
					<view>库存品数</view>
					<view>{{ details.inventoryNub || 0 }}</view>
				</view>
			</view>
			<view class="scinp">
				<view>齐套状态</view>
				<view>
					<cusSelects @change="checktype" :data="typearr" :value="schanvalue" placeholder="全部" :arrLeft="5"
						size="145" :clearable="true"></cusSelects>
				</view>
				<view class="inputs">
					<input v-model.trim="orderCode" placeholder="请输入查询的订单号" />
				</view>
				<view class="btscan" @click="search">查询</view>
			</view>
			<view class="tabtip">
				<view @click="setorderStatus(1)">
					<view :class="orderType == 1 ? 'xz' : ''">定制品</view>
				</view>
				<view @click="setorderStatus(2)">
					<view :class="orderType == 2 ? 'xz' : ''">库存品</view>
				</view>
				<view @click="setorderStatus(3)">
					<view :class="orderType == 3 ? 'xz' : ''">零担</view>
				</view>
			</view>
		</template>

		<template #body>
			<scroll-view class="scve" scroll-y="true">
				<view class="mabx">
					<block v-for="item in datalist" :key="item">
						<!-- 定制品 -->
						<template v-if="orderType == 1">
							<view class="mb20 pullDownBox">
								<PullDownBox ref="packageListRef">
									<template #title>
										<view class="itec">
											<view class="contenbx1">
												<view>
													<text style="color: #90a0af">订单编号：</text>
													{{ item.orderSelfNumbering }}
												</view>
											</view>
											<view class="contenbx1 mb0">
												<view>
													<text style="color: #90a0af">计划数：</text>
													{{ item.planNum }}
												</view>
												<view>
													<text style="color: #90a0af">已扫码数：</text>
													{{ item.signedNum }}
												</view>
											</view>
											<view :class="
											  item.orderStatusStr == '齐套'
												 ? 'tip tp1'
												 : item.orderStatusStr == '部分扫'
												 ? 'tip tp3'
												 : 'tip tp2'
											">
												{{ item.orderStatusStr }}
											</view>
										</view>
									</template>
									<template #content>
										<view class="border"></view>

										<view class="pl20 pr20">
											<block v-for="(val, i) in item.packageList" :key="val.orderPackageCode">
												<view :class="{
													 itec: true,
													 packageBox: true,
													 border: i < item.packageList.length - 1,
												  }">
													<view class="contenbx1">
														<view>
															<text style="color: #90a0af">包条码：</text>
															{{ val.orderPackageCode }}
														</view>
													</view>

													<!-- <view class="contenbx1">
														 <text style="color: #90a0af">物科：</text>
													</view> -->

													<view class="flex mb20 flex-wrap">
														<text class="textTip">
															{{ val.fisrt || '暂无数据' }}
														</text>

														<text class="textTip">
															{{ val.second || '暂无数据' }}
														</text>

														<text class="textTip">
															{{ val.thirdProduct || '暂无数据' }}
														</text>
													</view>

													<view :class="val.isSign ? 'tip tp1' : 'tip tp2'">
														{{ val.isSign ? '已扫' : '未扫' }}
													</view>
												</view>
											</block>
										</view>
									</template>
								</PullDownBox>
							</view>
						</template>

						<!-- 库存品 -->
						<template v-if="orderType == 2">
							<view class="itec" @click="showsdqs">
								<view class="contenbx1">
									<view>
										<text style="color: #90a0af">SKU：</text>
										{{ item.sku }}
									</view>
								</view>
								<view class="contenbx1">
									<view>
										<text style="color: #90a0af">物品：</text>
										{{ item.descriptionGoods }}
									</view>
									<view>
										<text style="color: #90a0af">规格：</text>
										{{ item.specification }}
									</view>
								</view>
								<view class="contenbx1">
									<view>
										<text style="color: #90a0af">单位：</text>
										{{ item.cargoUnit }}
									</view>
									<view>
										<text style="color: #90a0af">自提数：</text>
										{{ item.quantity }}
									</view>
								</view>
								<!-- <view :class="item.signforNub==0?'tip tp2':item.signforNub==item.reservationNum?'tip tp1':'tip tp3'">{{item.signforNub==0?'未扫':item.signforNub==item.reservationNum?'齐套':'部分扫'}}</view> -->
							</view>
						</template>

						<!-- 零担 -->
						<template v-if="orderType == 3">
							<view class="itec" @click="showsTipsZero(item)">
								<view class="contenbx1">
									<view>
										<text style="color: #90a0af">订单号：</text>
										{{ item.orderCode }}
									</view>
								</view>
								<view class="contenbx1">
									<view>
										<text style="color: #90a0af">运单号：</text>
										{{ item.waybillNumber }}
									</view>
								</view>
								<view class="contenbx1">
									<view>
										<text style="color: #90a0af">产品名称：</text>
										{{ item.descriptionGoods }}
									</view>
								</view>
								<view class="contenbx1">
									<view>
										<text style="color: #90a0af">预计签收件数：</text>
										{{ item.reservationQuantity }}
									</view>
									<view>
										<text style="color: #90a0af">实际签收件数：</text>
										{{ item.signforQuantity }}
									</view>
								</view>
							</view>
						</template>
					</block>
				</view>
			</scroll-view>
		</template>
	</BasicContainer>
	<tiplist ref="tiplists"></tiplist>
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
</template>

<script lang="ts" setup>
	import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
	import {
		billLadingorderList,
		billLadinggetInventory,
		billLadingscan,
		billLadingZeroBillOrderData,
		billLadingzeroBillData,
		billLadingzeroBillBatch,
	} from '@/api/user.js'
	import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
	import { reactive, toRefs, ref, renderList, nextTick } from 'vue'
	import { pagedetails } from '@/interfaces/pagesHome/SelfPScanList'
	import useSystemSettingsStore from '@/store/useSystemSettingsStore'
	import { storeToRefs } from 'pinia'
	import utils from '@/utils/utils'
	const { scanState } = storeToRefs(useSystemSettingsStore())
	const option = reactive({
		title: '自提扫描',
		haveData: true,
		async pullDownRefreshInitPage() {
			details.datalist = []
			await initpage()
		},
	})

	const details = reactive<pagedetails>({
		schanvalue: '',
		typearr: [
			{
				value: 1,
				label: '齐套',
			},
			{
				value: 2,
				label: '部分扫',
			},
			{
				value: 3,
				label: '未扫',
			},
		],
		orderStatus: 0,
		orderType: 1,
		billLadingId: '',
		/** 渲染的数据列表 */
		datalist: [],
		orderCode: '',
		orderNum: '',
		completeNum: '',
		planNum: '',
		signedNum: '',
		inventoryNub: '',
		scancode: '',
		/** 是否为扫描后刷新请求页面 */
		isscan: false,
		/** 扫描的包件 */
		scanOrderPackageCode: '',
	})
	const tiplists = ref(null)
	const basicContainer = ref(null)
	const packageListRef = ref()

	onLoad(op => {
		details.billLadingId = op.billLadingId
	})

	onShow(async () => {
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log(code)
				details.scancode = code
				sacn()
			}
		})
		await nextTick()
		basicContainer.value.startPullDownRefresh()
	})
	/* 	onHide(() => {
					uni.$off('scancodedate')
				}) */

	/** 显示手动输入包条码弹窗 */
	function showsdqs() {
		tiplists.value.setdetails({
			isshow: true,
			tipstate: 1,
			title: '请输入扫描的码',
			placeholder: '请输入扫描的码',
			inputtext: '',
			success: detail => {
				details.scancode = detail.inputtext
				sacn()
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: () => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: () => {
				tiplists.value.setdetails({ isshow: false })
			},
		})
	}

	/** 扫描包件执行 -- 当包件 已扫 | 不在计划 时不执行扫描 */
	const scanOrder = () : boolean => {
		let haveData = false
		console.log('packageListRef.value :>> ', packageListRef.value)
		for (let i = 0; i < details.datalist.length; i++) {
			const value = details.datalist[i]
			let isBreak = false

			for (let index = 0; index < value.packageList.length; index++) {
				const item = value.packageList[index]

				if (item.orderPackageCode !== details.scancode) continue
				if (item.isSign) {
					value.packageList.unshift(value.packageList.splice(index, 1)[0])

					details.datalist.unshift(details.datalist.splice(i, 1)[0])

					nextTick().then(() => {
						console.log('packageListRef.value[0] :>> ', packageListRef.value[0])
						packageListRef.value[i].handleShowPullDown(true)
						// 0-EPL1
					})

					utils.handleToast('包件已签收')
					return true
				} else {
					haveData = true
					isBreak = true
				}

				if (isBreak) break
			}
		}

		if (!haveData) {
			utils.handleToast('不在计划内，请刷新页面或联系文员添加计划')
			return true
		}

		return !haveData
	}

	/** 扫描执行数据 */
	async function sacn() {
		if (details.orderType === 1 && scanOrder()) return

		let data = {
			id: details.billLadingId,
			coding: details.scancode,
			type: details.orderType == 1 ? '2' : '1',
		}
		let res = await billLadingscan(data)
		const { code } = res
		if (code !== 200) return
		details.scanOrderPackageCode = data.coding
		details.isscan = true
		console.log(res)
		basicContainer.value.startPullDownRefresh()
	}

	/** 请求数据 */
	async function initpage() {
		try {
			uni.showLoading({
				title: '数据加载中',
				mask: true,
			})

			if (details.orderType == 1) {
				let data = {
					orderStatus: details.orderStatus,
					billLadingId: details.billLadingId,
					orderCode: details.orderCode,
				}
				let response = await billLadingorderList(data)
				if (response.code !== 200) return
				details.datalist = response.data.list || []
				details.orderNum = response.data.orderNum
				details.completeNum = response.data.completeNum
				details.planNum = response.data.planNum
				details.inventoryNub = response.data.inventoryNub
				details.signedNum = response.data.signedNum

				const { packageList, list } = response.data

				const _packageArr = [...(packageList || [])]

				for (let i = 0; i < list.length; i++) {
					const item = list[i]
					console.log('item :>> ', item)

					for (let j = _packageArr.length - 1; j >= 0; j--) {
						const _value = _packageArr[j]

						if (_value.orderId !== item.stockArticleId) continue
						const _item = _packageArr.splice(j, 1)[0]
						!item.packageList
							? (item.packageList = [_item])
							: details.scanOrderPackageCode === _item.orderPackageCode
								? item.packageList.unshift(_item)
								: item.packageList.push(_item)

						if (details.scanOrderPackageCode !== _item.orderPackageCode) continue
						list.unshift(list.splice(i, 1)[0])
						nextTick().then(() => {
							packageListRef.value[0].handleShowPullDown(true)
						})
					}
				}

				if (!details.isscan) return
				// #ifdef APP
				utils.ttsspke(details.signedNum + '件')
				// #endif
				details.isscan = false
			} else if (details.orderType == 2) {
				let date = {
					id: details.billLadingId,
					current: 1,
					size: 10,
				}
				let response = await billLadinggetInventory(date)
				const { code, data } = response
				if (code !== 200) return
				console.log('data.inventoryList :>> ', data.inventoryList)
				details.datalist = data.inventoryList
				details.datalist.every(item => {
					if (item.esauInventoryNum == -1) {
						uni.showToast({
							title: '物品备货未完成，请前往备货',
							icon: 'none',
						})
						return false
					}
					return true
				})
				details.orderNum = response.data.orderNum
				details.completeNum = response.data.completeNum
				details.planNum = response.data.planNum
				details.inventoryNub = response.data.inventoryNub
				details.signedNum = response.data.signedNum

				if (!details.isscan) return
				// #ifdef APP
				utils.ttsspke(details.signedNum + '件')
				// #endif
				details.isscan = false
			} else if (details.orderType === 3) {
				let deta = {
					billLadingId: details.billLadingId,
					current: 1,
					size: 10,
				}
				const response = await billLadingZeroBillOrderData(deta)
				console.log('response :>> ', response)
				const { code, data } = response
				if (code !== 200) return
				details.datalist = data.billLadingZeroOrderVOS

				details.orderNum = response.data.orderNum
				details.completeNum = response.data.completeNum
				details.planNum = response.data.planNum
				details.inventoryNub = response.data.inventoryNub
				details.signedNum = response.data.signedNum

				if (!details.isscan) return
				// #ifdef APP
				utils.ttsspke(details.signedNum + '件')
				// #endif
				details.isscan = false
			}
		} catch (err) {
			console.log('err :>> ', err)
			//TODO handle the exception
		} finally {
			uni.hideLoading()
		}

		// sacn()
	}

	function setorderStatus(state : number) {
		details.datalist = []
		details.orderType = state
		basicContainer.value.startPullDownRefresh()
		// initpage()
	}

	function search() {
		// basicContainer.value.startPullDownRefresh()
		details.scancode = details.orderCode
		sacn()
	}

	async function showsTipsZero(item) {
		try {
			console.log('item :>> ', item)
			let subdata = {
				billLadingId: details.billLadingId,
				stockArtieleld: item.id,
			}
			// 获取订单内零担包件信息
			const response = await billLadingzeroBillData(subdata)
			console.log('response :>> ', response)
			const { code, data } = response
			if (code !== 200)
				return uni.showToast({
					title: response.msg,
					icon: 'none',
				})
			const inpList = data.map(val => {
				return {
					title: val.firsts,
					maxNum: val.reservationQuantity,
					minNum: 0,
					type: 'Number',
					value: val.signforQuantity || 0,
					disabled: Boolean(val.signforQuantity > 0),
					id: val.id,
					stockArticleId: val.stockArticleId,
				}
			})

			// 显示零担签收弹出框
			tiplists.value.setdetails({
				isshow: true,
				tipstate: 4,
				inpList,
				title: '签收零担',
				inputtext: '',
				success: async detail => {
					try {
						const { inpList } = detail
						const list = []
						const flag = inpList.every(val => {
							// 当有零担订单没签收数量时
							if (val.value === 0) return false
							// 去除已被签收过的数据
							if (!val.disabled) {
								list.push({
									id: val.id,
									stockArticleId: val.stockArticleId,
									quantity: val.value,
								})
							}

							return true
						})
						if (!flag) {
							return uni.showToast({
								title: '请输入签收的零担数量',
								icon: 'none',
							})
						}

						if (list.length === 0) return tiplists.value.setdetails({ isshow: false })
						console.log('list :>> ', list)

						// 确认弹窗
						tiplists.value.setdetails({
							isshow: true,
							tipstate: 2,
							list: [],
							title: '是否签收, 签收后数据不可更改',
							inputtext: '',
							isonecheck: true,
							success: async () => {
								try {
									const res = await billLadingzeroBillBatch({
										billLadingId: details.billLadingId,
										list,
									})
									console.log('res :>> ', res)
									if (res.code === 200) {
										uni.showToast({
											title: res.msg,
										})
										basicContainer.value.startPullDownRefresh()
									}
									tiplists.value.setdetails({ isshow: false })
								} catch (err) {
									console.log('err :>> ', err)
									//TODO handle the exception
								}
							},
							cancel: () => {
								tiplists.value.setdetails({ isshow: false })
							},
							close: () => {
								tiplists.value.setdetails({ isshow: false })
							},
						})
					} catch (err) {
						console.log('err :>> ', err)
						//TODO handle the exception
					} finally {
					}
				},
				cancel: () => {
					tiplists.value.setdetails({ isshow: false })
				},
				close: () => {
					tiplists.value.setdetails({ isshow: false })
				},
			})
		} catch (err) {
			console.log('err :>> ', err)
			//TODO handle the exception
		}
	}

	function checktype(e) {
		if (e == '') {
			details.schanvalue = ''
			details.orderStatus = 0
			return
		}
		details.typearr.map(item => {
			if (item.value == e) {
				details.schanvalue = item.label
				details.orderStatus = item.value
				console.log(details.schanvalue)
			}
		})
	}

	const { orderType, schanvalue, typearr, orderCode, datalist } = toRefs(details)
</script>

<style lang="scss" scoped>
	@import url('@/utils/style/common.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;
		}
	}

	.scve {
		width: 100%;
		height: 69vh;
		margin-top: 20upx;

		.mabx {
			padding: 20upx;

			.pullDownBox {
				position: relative;
			}

			.itec {
				background: #ffffff;
				border-radius: 8upx;
				padding: 36upx 24upx 10upx;
				box-sizing: border-box;

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

				>.contenbx1 {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					font-size: 28upx;
					color: #092c4d;
					margin-bottom: 20upx;

					&.mb0 {
						margin-bottom: 0;
					}

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

					>view {
						flex: 1;
						word-wrap: break-word;
						word-break: break-all;
					}
				}

				.tip {
					position: absolute;
					right: 0;
					top: 0;
					width: 96upx;
					height: 48upx;
					border-radius: 0 8upx 0 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24upx;
				}

				.tp1 {
					background-color: #0086f120;
					color: var(--primaryColor);
				}

				.tp2 {
					background-color: #f8544b20;
					color: var(--errColor);
				}

				.tp3 {
					background-color: #fa8c1620;
					color: var(--subjectColor);
				}
			}

			.packageBox {
				position: relative;
			}
		}
	}

	.border {
		$subjectColor: var(--subjectColor);
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 60%;
			height: 4upx;
			background: linear-gradient(90deg,
					rgba(211, 131, 42, 0) 0%,
					$subjectColor 53%,
					rgba(211, 131, 42, 0) 100%);
			opacity: 0.5;
			border-radius: 8upx;
			z-index: 1;
		}
	}

	.scinp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;

		>view:nth-of-type(1) {
			font-size: 28upx;
			font-weight: 400;
			color: #092c4d;
		}

		.inputs {
			width: 276upx;
			height: 64upx;
			background: #f5f5f6;
			border-radius: 8upx;
			opacity: 1;
			border: 2upx solid #eeeeee;
			padding: 10upx;
			box-sizing: border-box;
			font-size: 24upx;
			font-weight: 400;
			color: #afb4ba;

			>input {
				flex: 1;
				font-size: 24upx;
				color: #092c4d;
			}
		}

		.btscan {
			width: 128upx;
			height: 64upx;
			background: #d3832a;
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.hdtpnum {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 28upx 0;
		border-bottom: 3upx solid #eeeeee;

		>view {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 28upx;
			font-weight: 400;
			color: #092c4d;

			&:nth-of-type(1) {
				>view:nth-of-type(2) {
					color: #092c4d;
				}
			}

			&:nth-of-type(2) {
				>view:nth-of-type(2) {
					color: #0086f1;
				}
			}

			&:nth-of-type(3) {
				>view:nth-of-type(2) {
					color: #3ad8bc;
				}
			}

			&:nth-of-type(4) {
				>view:nth-of-type(2) {
					color: #fa8c16;
				}
			}

			>view:nth-of-type(2) {
				font-size: 36upx;
				font-weight: 400;
				color: #092c4d;
				margin-top: 20upx;
			}
		}
	}

	.textTip {
		padding: 10upx 30upx;
		background-color: #f5fdfc;
		color: #2ac2d2;
		margin: 5upx;
		border-radius: 4upx;
	}

	:deep(.pullDownBox) {
		background-color: #fff;
	}
</style>