logpm/pagesHome/pages/RemoveTray/RemoveTray.vue

<template>
	<u-navbar title="空置托盘" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
		:autoBack="true" leftIconSize='35'></u-navbar>
	<view class="topbos">
		<view class="srview">
			<view>托盘码</view>
			<view>
				<input placeholder="请扫描或输入" v-model="scancode" />
				<view class="sbm" @click="scandata">确定</view>
			</view>
		</view>
		<view class="taryInfo">
			托盘名称: {{pageInfo.trayName || ''}}
		</view>
	</view>

	<!-- tabBar -->
	<view class="tabBar">
		<view :class="{'tabBar_item': true, 'active': details.tabBarState === 1}" @click="setTabBarState(1)">
			订制品
		</view>
		<view :class="{'tabBar_item': true, 'active': details.tabBarState === 2}" @click="setTabBarState(2)">
			零担
		</view>
		<view :class="{'tabBar_item': true, 'active': details.tabBarState === 3}" @click="setTabBarState(3)">
			库存品
		</view>
	</view>

	<scroll-view class="scvmabx" scroll-y="true">
		<view class="maxboxs">

			<block v-for="item in datalist">
				<!-- 定制品 -->
				<template v-if="details.tabBarState === 1">
					<view class="items">
						<view class="tophd" @click.stop.prevent>
							<image src="/pagesHome/static/topicons.png"></image>
							<view>订单号：</view>
							<view :style="item.isFleeing?'color: #ff0000;':''">{{item.dataCode}}{{item.isFleeing?'（窜）':''}}
							</view>
						</view>
						<view class="tophd" @click.stop.prevent>
							<view>服务号：</view>
							<view>{{item.serviceNumber}}</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>
						<image v-if="item.orderTotalNum!=item.scanNum" class="weiqt" src="/pagesHome/static/weiqitao.png">
						</image>
						<image v-else class="qitao" src="/pagesHome/static/qitao.png"></image>
					</view>
				</template>

				<!-- 零担 -->
				<template v-if="details.tabBarState === 2">
					<view class="items">
						<view class="tophd" @click.stop.prevent>
							<image src="/pagesHome/static/topicons.png"></image>
							<view>订单号：</view>
							<view>{{item.dataCode}}</view>
						</view>
						<view class="tophd" @click.stop.prevent>
							<view>运单号：</view>
							<view>{{item.waybillNo}}</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>
				</template>

				<!-- 库存品 -->
				<template v-if="details.tabBarState === 3">
					<view class="items">
						<view class="tophd1">
							<view>
								<image src="/pagesHome/static/topicons.png"></image>
								<view>订单号：</view>
								<view>{{item.dataCode}}</view>
							</view>
						</view>
						<view class="tophd">
							<image src="/pagesHome/static/uname.png"></image>
							<view>物料名称：</view>
							<view>{{item.dataName}}</view>
						</view>
						<view class="tophd">
							<image src="/pagesHome/static/uname.png"></image>
							<view>批次号：</view>
							<view>{{item.incomingBatch}}</view>
						</view>
						<view class="tophd">
							<image src="/pagesHome/static/uname.png"></image>
							<view>SKU：</view>
							<view>{{item.sku}}</view>
						</view>
						<view class="tophd">
							<image src="/pagesHome/static/uname.png"></image>
							<view>物料单位：</view>
							<view>{{item.cargoUnit}}</view>
						</view>
						<view class="numbxvie">
							<view>
								<view class="zhon">{{item.orderTotalNum||0}}</view>
								<view>在库数</view>
							</view>
							<view>
								<view class="yish">{{item.scanNum||0}}</view>
								<view>已扫</view>
							</view>
						</view>
					</view>
				</template>
			</block>
		</view>
	</scroll-view>
	<view @click="removetray" class="flbuts">空置</view>
	<saomiao2></saomiao2>
	<tips ref="tip"></tips>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		warehouseTrayTypetrayToNullScanTrayCode,
		warehouseTrayTypetrayToNull
	} from '@/api/user.js'
	import { reactive, ref, toRefs } from "vue";
	import utils from '../../../utils/utils';
	const tip = ref(null)
	let details = reactive({
		datalist: [],
		scancode: '',
		statetype: '',
		trayCodes: '',
		tabBarState: 1,
		data: {},
		orderList: [],
		zeroList: [],
		stockList: [],
		pageInfo: {}
	})
	onLoad(() => {
		utils.ttsspke('请扫描或输入需要空置的托盘')

	})
	onShow(() => {
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})
	onHide(() => {
		uni.$off('scancodedate')
	})
	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			details.datalist = []
			details.trayCodes = ''

			// 关闭下拉动画
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})
	async function scandata() {
		let submitData = {
			trayCode: details.scancode
		}
		let res = await warehouseTrayTypetrayToNullScanTrayCode(submitData)
		const { code, data } = res
		if (code == 200) {
			if (!data) return
			console.log('res', res);
			// details.datalist = res.data?.list
			details.pageInfo = data
			// 定制品
			details.orderList = data.packageList
			// 零担
			details.zeroList = data.zeroList
			// 库存品
			details.stockList = data.stockList
			if (details.tabBarState === 1) details.datalist = details.orderList
			else if (details.tabBarState === 2) details.datalist = details.zeroList
			else if (details.tabBarState === 3) details.datalist = details.stockList
			console.log('details.datalist :>> ', details.datalist);
			details.statetype = data.type
			if (details.orderList.length > 0 || details.zeroList.length > 0 || details.stockList.length > 0) {
				details.trayCodes = details.scancode
			}
		}
	}
	/**
	 * 修改tabBar选中状态
	 */
	async function setTabBarState(state : number) {
		details.tabBarState = state
		// 定制品
		if (details.tabBarState === 1) details.datalist = details.orderList
		// 零担
		else if (details.tabBarState === 2) details.datalist = details.zeroList
		// 库存品
		else if (details.tabBarState === 3) details.datalist = details.stockList
	}
	function removetray() {
		tip.value.setdetails({
			title: '提示',
			content: '确认空置托盘？',
			confirmTxt: '确认',
			isshow: true,
			isshowcancel: true,
			success: async () => {
				if (!details.trayCodes) {
					tip.value.setisshow(false)
					return uni.showToast({
						icon: 'error',
						title: '托盘码为空'
					})

				}

				let data = {
					trayCode: details.trayCodes,
				}
				// 开启loading
				uni.showLoading({
					mask: true,
					title: '提交中'
				})
				let res = await warehouseTrayTypetrayToNull(data)
				// 关闭Loading
				uni.hideLoading()
				if (res.code == 200) {
					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)
						}
					})
					utils.ttsspke('空置托盘成功')
					details.datalist = []
					details.trayCodes = ''
					tip.value.setisshow(false)
				} else {
					uni.showToast({
						icon: 'error',
						title: '空置失败'
					})
				}
			},
			cancel: () => {
				tip.value.setisshow(false)
			},
			close: () => {
				tip.value.setisshow(false)
			}
		})
	}
	const {
		scancode,
		datalist,
		pageInfo
	} = toRefs(details)
</script>

<style lang="scss" scoped>
	// tabBar
	.tabBar {
		margin-top: 10upx;
		padding: 0 30upx;
		display: flex;

		&_item {
			flex: 1;
			flex-basis: 0;
			text-align: center;
			line-height: 80upx;
			background: #fff;
			position: relative;

			&::after {
				content: '';
				display: block;
				position: absolute;
				height: 4upx;
				background: #d3832a;
				width: 0;
				left: 50%;
				bottom: 0;
				transition: all 0.5s;
			}

			&.active::after {
				left: 0;
				width: 100%;
			}
		}
	}

	.topbos {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 26upx 32upx;

		>.srview {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			// margin-bottom: 4upx;

			.sbm {
				width: 150upx;
				height: 64upx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #D3832A;
				color: #ffffff;
				border-radius: 10upx;
			}

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

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

			>view:nth-of-type(2) {
				font-size: 28upx;
				flex: 1;
				display: flex;
				align-items: center;

				>input {
					flex: 1;
					font-size: 28upx;
				}
			}
		}

		.taryInfo {
			font-size: 28upx;
		}
	}

	.flbuts {
		width: 320upx;
		height: 88upx;
		background: #D3832A;
		border-radius: 8upx 8upx 8upx 8upx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		margin: auto;
		position: fixed;
		left: 50%;
		transform: translate(-50%);
		bottom: 60upx;
	}

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

	}

	.scvmabx {
		width: 100%;
		height: 68vh;
		margin-top: 20upx;

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

			>.items {
				position: relative;
				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%;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
					padding: 15upx 25upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;

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

					>view {
						font-size: 32upx;
						color: #020B18;
						font-weight: 400;
						word-wrap: break-word;
						word-break: break-all;

						&:nth-of-type(2) {
							flex: 1;
						}
					}
				}

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

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

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

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

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

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

					>view {
						display: flex;
						align-items: center;
						font-size: 28upx;

						>view:nth-of-type(1) {
							color: #90A0AF;
						}

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

				}
			}
		}
	}

	.weiqt {
		position: absolute;
		right: 0;
		top: 0;
		width: 70upx;
		height: 70upx;
	}

	.qitao {
		position: absolute;
		right: 0;
		top: 0;
		width: 70upx;
		height: 70upx;
	}
</style>
<style lang="scss">

</style>