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="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="itec" @click="showsdqs">
 								<view class="contenbx1">
 									<view>
 										<text style="color: #90A0AF;">订单编号：</text>
 										{{item.orderSelfNumbering}}
 									</view>
 								</view>
 								<view class="contenbx1">
 									<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 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>
 	<!-- #ifdef APP -->
 	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
 	<!-- #endif -->
 </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 } 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 = {
		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
	})
	const tiplists = ref(null)
	const basicContainer = ref(null)
	onLoad((op) => {
		details.billLadingId = op.billLadingId
	})
	onShow(() => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log(code);
				details.scancode = code
				sacn()
			}
		})
		// #endif
		// initpage()
		const timer = setTimeout(() => {
			basicContainer.value.startPullDownRefresh()
			clearTimeout(timer)
		}, 200)
	})
	/* 	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 })
			}
		})
	}
	async function sacn() {
		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.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

				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 res = await billLadingZeroBillOrderData(deta)
				console.log('res :>> ', res);
				const { code, data } = res
				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 (e) {
			//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()
	}

	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">
 	.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 {
 			display: flex;
 			flex-direction: column;
 			align-items: center;

 			>.itec {
 				width: 686upx;
 				// height: 176upx;
 				background: #FFFFFF;
 				border-radius: 8upx;
 				padding: 36upx 24upx;
 				box-sizing: border-box;
 				position: relative;
 				margin-bottom: 20upx;

 				&: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;

 					&: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: #0086F1;
 				}

 				.tp2 {
 					background-color: #F8544B20;
 					color: #F8544B;
 				}

 				.tp3 {
 					background-color: #FA8C1620;
 					color: #FA8C16;
 				}
 			}
 		}
 	}

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