logpm/pagesHome/pages/CustomerOrdersDetails/CustomerOrdersDetails.vue

<template>
	<BasicContainer ref="basicContainer" :option="option">
		<template #head>
			<view class="hdtp">
				<view>
					<view>
						客户：{{items.consignee}}
					</view>
					<view class="butlur" @click="showsdqs">
						录入包条码
					</view>
				</view>
				<view>
					<view>备货是否完成：{{items.isstock}}</view>
					<view>装车是否完成：{{items.isload}}</view>
				</view>
			</view>
			<view class="hdtpnum">
				<view>
					<view>订单总数</view>
					<view>{{items.ordNub}}</view>
				</view>
				<view>
					<view>计划件数</view>
					<view>{{items.reservationNum}}</view>
				</view>
				<view>
					<view>装车件数</view>
					<view>{{loadingNub}}</view>
				</view>
				<view>
					<view>签收件数</view>
					<view>{{items.signNub}}</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 placeholder="请输入查询的订单号" v-model="inputtxt" />
				</view>
				<view @click="handleSearch" class="btscan">查询</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 @click="setorderStatus(3)">
					<view :class="orderStatus==3?'xz':''">库存品</view>
				</view>
			</view>
		</template>

		<template #body>
			<scroll-view class="scve" scroll-y="true" @refresherpulling="" @scrolltolower="reatchBottom">
				<view class="mabx">
					<block v-for="(item,index) in datalist" :key="item">
						<!-- 定制品 -->
						<template v-if="orderStatus== 1">
							<view class="itec" @click="checkphon(item,index)">
								<view class="contenbx1">
									<view><text style="color: #90A0AF;"
											@click.stop="goorderdetail(item)">订单编号：</text>{{item.orderCode}}
									</view>
								</view>
								<view class="contenbx1">
									<view><text style="color: #90A0AF;">配送数：</text>{{item.reservationNum}}</view>
									<view><text style="color: #90A0AF;">已扫码数：</text>{{item.loadingNub}}</view>
								</view>
								<view class="xialaxz" v-if="listcheckindex==index">
									<view v-for="ite in item.distributionAppParcelListVOS">
										<view>包条码：{{ite.orderPackageCode}}</view>
										<view>货物品类：{{ite.thirdProduct}}</view>
										<view>扫描状态：{{ite.isScan?ite.isScan:'未扫'}}</view>
									</view>
								</view>
								<view v-if="item.complete"
									:class="item.completecode==3?'tip tp1':item.completecode==1?'tip tp2':'tip tp3'">
									{{item.complete}}
								</view>
								<!-- 当有异常状态时, 显示异常状态 -->
								<template v-if="item.isHaveAbnormalPackageName">
									<view class="abnormalStyleContainer">
										<view class="abnormalStyle">
											{{item.isHaveAbnormalPackageName}}
										</view>
									</view>
								</template>
							</view>
						</template>

						<!-- 零担 -->
						<template v-else-if="orderStatus == 2">
							<view class="itec" @click="checkphon(item,index)">
								<view class="contenbx1">
									<view><text style="color: #90A0AF;"
											@click.stop="goorderdetail(item)">订单编号：</text>{{item.orderCode}}
									</view>
								</view>
								<view class="contenbx1">
									<view><text style="color: #90A0AF;"
											@click.stop="goorderdetail(item)">产品名称：</text>{{item.descriptionGoods}}
									</view>
								</view>
								<view class="contenbx1">
									<view><text style="color: #90A0AF;">计划数量：</text>{{item.reservationNum}}</view>
									<view><text style="color: #90A0AF;">装车数量：</text>{{item.loadingNub}}</view>
								</view>

								<view v-if="item.complete"
									:class="item.completecode==3?'tip tp1':item.completecode==1?'tip tp2':'tip tp3'">
									{{item.complete}}
								</view>
							</view>
						</template>

						<!-- 库存品 -->
						<template v-else-if="orderStatus== 3">
							<view class="itec" @click="checkphon(item,index)">
								<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.cargoNorms}}</view>
								</view>
								<view class="contenbx1">
									<!-- 备货完成时, 显示二维码 -->
									<template v-if="item.signingStatusName === '待备货'">
										<view><text style="color: #90A0AF;">备货状态：</text>{{item.signingStatusName}}</view>
									</template>
									<template v-else>
										<view><text style="color: #90A0AF;">二维码：</text>{{item.stockPackageCode || '暂无数据'}}</view>
									</template>

									<view><text style="color: #90A0AF;">单位：</text>{{item.cargoUnit}}</view>
								</view>
								<view v-if="item.loadingStatusName" :class="item.loadingStatusName== '未装车'?'tip tp2':'tip tp1'">
									{{item.loadingStatusName}}
								</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 {
		deliveryorder,
		deliveryInventory,
		deliveryloadingscan,
		deliveryloadinginventory,
		postAbnormalTruckLoading,
		deliveryZeroLoading
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import cusSelects from '@/compoment/cus-selects-fan/cus-selects-fan.vue'
	import { computed, inject, reactive, ref, toRefs, } from "vue";
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	const utils = inject('utils') as any

	const option = reactive({
		title: '客户订单扫描',
		haveData: true,
		async pullDownRefreshInitPage() {
			details.datalist = []
			details.order.page.current = 1
			details.zero.page.current = 1
			details.stock.page.current = 1
			return await initpage()
		}
	})

	let details = reactive({
		schanvalue: '',
		orderArr: [],
		stockArr: [],
		zeroArr: [],
		typearr: [
			{
				value: 3,
				label: '齐套'
			},
			{
				value: 2,
				label: '部分扫'
			},
			{
				value: 1,
				label: '未扫'
			}
		],
		items: {} as any,
		datalist: [],
		scancode: '',
		orderStatus: 1,
		id: '',
		orderType: 0,
		inputtxt: '',
		listcheckindex: -1,
		isscan: false,
		order: {
			page: {
				size: 10,
				current: 1,
			},
			// 分页总页数
			pages: 1,
			data: []
		},
		zero: {
			page: {
				size: 10,
				current: 1,
			},
			// 分页总页数
			pages: 1,
			data: []
		},
		stock: {
			page: {
				size: 10,
				current: 1,
			},
			// 分页总页数
			pages: 1,
			data: []
		}
	})

	// 获取组件实例
	const tiplists = ref(null)
	const basicContainer = ref(null)

	onLoad((op) => {
		details.items = JSON.parse(op.item)
		details.id = op.id
	})
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	onShow(async () => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log('code', code);
				details.scancode = code
				details.isscan = true
				scandata()
			}
		})
		// #endif


		// 请求页面
		const timer = setTimeout(() => {
			basicContainer.value.startPullDownRefresh()
			clearTimeout(timer)
		}, 200)

		let data = {
			reservationId: details.items.id,
			completecode: details.orderType,
			orderCode: details.inputtxt
		}

		// 库存品
		let response1 = await deliveryInventory(data)
		details.stock.data = response1.data || []

	})
	// onHide(() => {
	// 	if (Number(scanState.value) === 0) {
	// 		console.log('111 :>> ', 111);
	// 		uni.$off('scancodedate')
	// 	}
	// })

	// onUnload(() => {
	// 	uni.$off('scancodedate')
	// })

	// 下拉刷新
	/* 	onPullDownRefresh(() => {
			details.datalist = []
			details.order.page.current = 1
			details.zero.page.current = 1
			details.stock.page.current = 1
			const timer = setTimeout(async () => {
				await initpage()
	
				// 关闭下拉动画
				uni.stopPullDownRefresh()
				// 清除定时器
				clearTimeout(timer)
			}, 500)
		}) */

	const loadingNub = computed(() => {
		// 计算三种品类的装车件数和
		let num = 0
		if (details.order.data) num += details.order.data.reduce((curr, item) => curr + item.loadingNub, 0)
		if (details.zero.data) num += details.zero.data.reduce((curr, item) => curr + item.loadingNub, 0)
		console.log('details.stock.data :>> ', details.stock.data);
		if (details.stock.data) num += details.stock.data.reduce((curr, item) => {
			if (item.loadingStatusName !== '未装车') return curr += 1
			return curr
		}, 0)
		console.log('num :>> ', num);
		return num
	})

	function showsdqs() {
		tiplists.value.setdetails({
			isshow: true,
			tipstate: 1,
			title: '请输入扫描的码',
			placeholder: '请输入扫描的码',
			inputtext: '',
			success: (detail) => {
				details.scancode = detail.inputtext
				scandata()
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: () => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: () => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}

	async function initpage() {
		try {
			let data = {
				reservationId: details.items.id,
				completecode: details.orderType,
				orderCode: details.inputtxt
			}
			details.datalist = []
			// 请求定制品和零担数据
			if (details.orderStatus == 1 || details.orderStatus === 2) await initPageOrder(data)
			// 请求库存品数据
			else if (details.orderStatus == 3) await initPageStock(data)

			// 定制品
			if (details.orderStatus === 1) details.datalist = details.order.data
			// 零担
			else if (details.orderStatus === 2) details.datalist = details.zero.data
			// 库存品
			else details.datalist = details.stock.data
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			return null
		}
	}

	/**
	 * 初始化请求定制品和零担数据
	 */
	async function initPageOrder(submitData) {
		try {
			const response = await deliveryorder(submitData)
			const { data } = response
			if (response.code !== 200) return
			details.zero.data = []
			details.order.data = []
			data.forEach(val => {
				// 零担订单
				if (val.isZero === '1') return details.zero.data.push(val)
				details.order.data.push(val)
			})
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		}
	}

	/**
	 * 请求库存品数据
	 */
	async function initPageStock(submitData) {
		try {
			details.stock.data = []
			const response = await deliveryInventory(submitData)
			const { data } = response
			if (response.code !== 200) return
			details.stock.data = data || []
			return response
		} catch (err) {
			//TODO handle the exception
			console.log('err :>> ', err);
		}
	}

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

	/** 搜索 */
	function handleSearch() {
		basicContainer.value.startPullDownRefresh()
	}

	/**
	 * 切换tabBer状态
	 * @param {type} state 选中的状态 
	 */
	function setorderStatus(state : number) {
		if (details.orderStatus === state) return
		details.orderStatus = state
		// initpage()
		// 调用组件内下拉刷新函数
		basicContainer.value.startPullDownRefresh()
		// 定制品
		if (details.orderStatus === 1) details.datalist = details.order.data
		// 零担
		else if (details.orderStatus === 2) details.datalist = details.zero.data
		// 库存品
		else details.datalist = details.stock.data
		console.log(' details.datalist :>> ', details.datalist);
	}

	/**
	 * 触底加载 -- 定制品
	 */
	function reatchBootomOrder() {
		if (details.order.pages <= details.order.page.current) {
			return uni.showToast({
				title: '数据加载完毕',
				icon: 'none'
			})
		}
		details.order.page.current += 1
		initpage()
	}

	/**
	 * 触底加载 -- 零担
	 */
	function reatchBootomZero() {
		if (details.zero.pages <= details.zero.page.current) {
			return uni.showToast({
				title: '数据加载完毕',
				icon: 'none'
			})
		}
		details.zero.page.current += 1
		initpage()
	}

	/**
	 * 触底加载 -- 库存品
	 */
	function reatchBootomStock() {
		if (details.stock.pages <= details.stock.page.current) {
			return uni.showToast({
				title: '数据加载完毕',
				icon: 'none'
			})
		}
		details.stock.page.current += 1
		initpage()
	}

	/**
	 * 触底加载
	 */
	function reatchBottom() {
		console.log('111 :>> ', 111);
		// 定制品
		if (details.orderStatus === 1) reatchBootomOrder()
		// 零担
		else if (details.orderStatus === 2) reatchBootomZero()
		// 库存品
		else if (details.orderStatus === 3) reatchBootomStock()
	}

	/** 扫描接口
	 * */
	async function scandata() {
		try {
			let loadingId = uni.getStorageSync('checkvehicle').id
			// 定制品
			if (details.orderStatus == 1) {
				let data = {
					reservationId: details.items.id,
					deliveryId: details.id,
					loadingId,
					type: 1,
					barcode: details.scancode
				}
				let res = await deliveryloadingscan(data)
				const { code, audio } = res
				// 异常装车
				if (code === 5000) {
					utils.ttsspke('不在本次计划, 是否继续装车')

					// 开启弹出层
					tiplists.value.setdetails({
						isshow: true,
						tipstate: 2,
						title: '是否异常装车',
						lsit: [],
						isonecheck: true,
						success: async (detail) => {
							let loadingId = uni.getStorageSync('checkvehicle').id
							let data = {
								reservationId: details.items.id,
								deliveryId: details.id,
								loadingId,
								type: 1,
								barcode: details.scancode
							}
							// 提价异常装车请求
							const res = await postAbnormalTruckLoading(data)
							console.log('res :>> ', res);
							tiplists.value.setdetails({ isshow: false })
						},
						cancel: () => {
							tiplists.value.setdetails({ isshow: false })
						},
						close: () => {
							tiplists.value.setdetails({ isshow: false })
						}
					})
				}
				// 窜货
				if (code === 3001) utils.ttsspke(audio)
				// 库存品
			} else if (details.orderStatus == 3) {
				let data = {
					reservationId: details.items.id,
					deliveryId: details.id,
					loadingId,
					type: 1,
					barcode: details.scancode
				}
				let res = await deliveryloadinginventory(data)
				const { audio } = res
				console.log('res   :>> ', res);
				if (!audio) return
				// #ifdef APP
				utils.ttsspke(res.audio)
				// #endif
			}
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			// 刷新
			basicContainer.value.startPullDownRefresh()
		}
	}

	function checkphon(item : object, index : number) {
		// 零担订单
		if (item.isZero === '1') {
			const inpList = item.distributionAppParcelListVOS.map(val => {
				return {
					id: val.id,
					title: val.firsts,
					value: val.loadingNum || val.reservationNum,
					maxNum: val.reservationNum,
					minNum: 0,
					type: 'Number',
					disabled: (val.loadingNum === val.reservationNum),
					allocationId: val.allocationId,
					orderCode: val.orderCode,
					stockArticleId: val.stockArticleId
				}
			})

			// 提交模式
			tiplists.value.setdetails({
				title: '设置零担物料数量',
				isshow: true,
				tipstate: 4,
				inpList,
				inputtext: '',
				confirmTxt: '确认',
				isonecheck: true,
				success: async (deta) => {
					try {
						// 查询是否都已完全签收
						if (deta.inpList.every(val => val.disabled)) return tiplists.value.setdetails({ isshow: false })
						uni.showLoading({
							mask: true,
							title: "提交中"
						})
						if (deta.inpList.length === 0 || item.completeStact) return tiplists.value.setdetails({ isshow: false })
						let data = {
							reservationId: details.items.id,
							deliveryId: details.id,
							orderId: deta.inpList[0].stockArticleId,
							loadingId: uni.getStorageSync('checkvehicle').id,
							parcelListDTOS: []
						}
						data.parcelListDTOS = deta.inpList.map(val => {
							return {
								parcelListId: val.id,
								stockArticleId: val.stockArticleId,
								loadingNum: val.value,
							}
						})

						const res = await deliveryZeroLoading(data)
						if (res.audio) {
							// #ifdef APP
							utils.ttsspke(res.audio)
							// #endif
						}
						// 刷新
						basicContainer.value.startPullDownRefresh()
					} catch (err) {
						console.log('err :>> ', err);
						//TODO handle the exception
					} finally {
						uni.hideLoading()
						tiplists.value.setdetails({ isshow: false })

					}
				},
				cancel: (details) => {
					tiplists.value.setdetails({ isshow: false })
				},
				close: (details) => {
					tiplists.value.setdetails({ isshow: false })
				}
			})

			return
		}
		// details.listcheckindex=index
		if (details.listcheckindex == index) {
			details.listcheckindex = -1
		} else {
			details.listcheckindex = index
		}
	}
	const { listcheckindex, inputtxt, orderStatus, schanvalue, typearr, items, datalist } = toRefs(details)
</script>

<style lang="scss">
	.xialaxz {
		display: flex;
		flex-direction: column;

		>view {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-top: 1upx solid #00000010;
			padding: 20upx 0;
			box-sizing: border-box;
			font-size: 28upx;
			color: #092C4D;

			>view {
				word-wrap: break-word;
				word-break: break-all;
				margin-right: 10upx;

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

	.butlur {
		width: 200upx !important;
		height: 64upx !important;
		background: #D3832A;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 400;
		color: #FFFFFF;
	}

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

	.hdtp {
		padding: 34upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;

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

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

			>view {
				width: 50%;
				// flex: 1;
			}
		}
	}

	.scve {
		width: 100%;
		height: 50vh;
		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;
				overflow: hidden;

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

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

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

					>view {
						flex: 1;
					}
				}

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

	.abnormalStyleContainer {
		top: -20upx;
		left: -20upx;
		position: absolute;
		padding: 10upx;
		border: 1upx solid #f8544b;
		border-radius: 50%;
	}

	// 异常标签
	.abnormalStyle {
		font-size: 28upx;
		height: 80upx;
		width: 80upx;
		display: flex;
		align-items: center;
		text-align: center;

		color: #f8544b;
		padding: 10upx;
		border-radius: 50%;
		border: 1upx solid #f8544b;
		opacity: 0.6;
	}
</style>