logpm/pagesHome/pages/storageInquiry/storageInquiry.vue

<template>
	<!-- 顶部导航栏 -->
	<u-navbar title="库位查询" placeholder :autoBack="true" leftIconSize='35' bgColor='#d3832a' leftIconColor='#ffffff'
		titleStyle='color:#ffffff'></u-navbar>

	<!-- 头部 -->
	<!-- 	<view class="tabBar_top">
		<view @click="handleTabBarState(1)" :class="{'active': tabBarCode === 1}">
			库位查询
		</view>
		<view @click="handleTabBarState(2)" :class="{'active': tabBarCode === 2}">
			托盘查询
		</view>
		<view @click="handleTabBarState(3)" :class="{'active': tabBarCode === 3}">
			订单查询
		</view>
	</view> -->

	<view class="container">
		<!-- 顶部搜索栏 -->
		<view class="header-search">
			<view class="search">
				<input class="searchInput" v-model="scancode" type="text">
			</view>

			<view class="search">
				<view class="searchType" @click="scandata">
					搜索
				</view>

			</view>
		</view>

		<view class="orderInfo">
			<!-- 库位数据 -->
			<view class="orderInfo_title">
				<view class="">
					<text class="row_title1">
						库位：
					</text>
					{{info.positionCode || '暂无数据'}}
				</view>

				<view class="orderInfo_title_row">
					<view class="">
						<view class="row_title1">
							托盘名称：
						</view>
						<view>
							{{info.trayInfo.palletName || '暂无数据'}}
						</view>
					</view>

					<view class="">
						<view class="row_title2">
							托盘码：
						</view>
						<view class="">
							{{info.trayInfo.palletCode || '暂无数据'}}
						</view>
					</view>
				</view>

				<view class="orderInfo_title_row">
					<view class="">
						<text class="row_title1">
							包件数：
						</text>
						{{info.totalNum || 0}}
					</view>

					<view class="">
						<text class="row_title2">
							订单包件总数：
						</text>
						{{info.orderTotalNum || 0}}
					</view>
				</view>

				<view class="orderInfo_title_row">
					<view class="">
						<text class="row_title1">
							库存品数：
						</text>
						{{info.stockNum || 0}}
					</view>

					<view class="">
						<text class="row_title2">
							库存品订单总数：
						</text>
						{{info.stockTotalNum || 0}}
					</view>
				</view>
			</view>

			<view class="title">
				<view @click="handleTabBarState(1)" :class="{'active': tabBarCode === 1}">
					定制品
				</view>
				<view @click="handleTabBarState(2)" :class="{'active': tabBarCode === 2}">
					零担
				</view>
				<view @click="handleTabBarState(3)" :class="{'active': tabBarCode === 3}">
					库存品
				</view>
			</view>

			<!-- 定制品 -->
			<view class="packagesList" v-if="tabBarCode === 1">
				<!-- 控件 -->
				<view class="control">
					<view v-if="!isBatchOperation">
						<view class="batchOperationBtn" @click="isBatchOperation = true">批量操作</view>
					</view>
					<view v-else style="display: flex;">
						<view class="batchOperationBtn" @click="batchPrint">打印</view>
					</view>
				</view>

				<scroll-view scroll-y="true" style="height: 60vh; margin-top: 10px;">
					<uni-table type="selection" border stripe emptyText="暂无更多数据"
						@selection-change="({detail: {index}})=> selectionChange(index, 'order')">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">包条码</uni-th>
							<uni-th align="left">合同号</uni-th>
							<uni-th align="left">运单号</uni-th>
							<uni-th align="left">仓库</uni-th>
							<uni-th align="left">数量</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<block v-for="item in packageList">
							<uni-tr>
								<!-- 包条码 -->
								<uni-td>{{item.orderPackageCode}}</uni-td>
								<!-- 合同号 -->
								<uni-td>{{item.orderCode}}</uni-td>
								<!-- 运单号 -->
								<uni-td>{{item.waybillNo}}</uni-td>
								<!-- 仓库 -->
								<uni-td>{{item.warehouseName}}</uni-td>
								<!-- 数量 -->
								<uni-td>{{item.num}}</uni-td>
							</uni-tr>
						</block>

					</uni-table>
				</scroll-view>
			</view>

			<!-- 零担 -->
			<view class="packagesList" v-else-if="tabBarCode === 2">
				<scroll-view scroll-y="true" style="height: 60vh; margin-top: 10px;">
					<uni-table type="selection" border stripe emptyText="暂无更多数据"
						@selection-change="({detail: {index}})=>selectionChange(index, 'zero')">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">运单号</uni-th>
							<uni-th align="left">合同号</uni-th>
							<uni-th align="left">仓库</uni-th>
							<uni-th align="center">数量</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<block v-for="item in zeroList">
							<uni-tr>
								<!-- 运单号 -->
								<uni-td>{{item.waybillNo}}</uni-td>
								<!-- 合同号 -->
								<uni-td>{{item.orderCode}}</uni-td>
								<!-- 仓库 -->
								<uni-td>{{item.warehouseName}}</uni-td>
								<!-- 数量 -->
								<uni-td align="center">{{item.num}}</uni-td>
							</uni-tr>
						</block>
					</uni-table>
				</scroll-view>
			</view>

			<!-- 库存品 -->
			<view class="packagesList" v-else-if="tabBarCode === 3">
				<scroll-view scroll-y="true" style="height: 60vh; margin-top: 10px;">
					<uni-table type="selection" border stripe emptyText="暂无更多数据"
						@selection-change="({detail: {index}})=>selectionChange(index, 'stock')">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="left">批次号</uni-th>
							<uni-th align="left">物料编码</uni-th>
							<uni-th align="left">物料名称</uni-th>
							<uni-th align="left">商场名称</uni-th>
							<uni-th align="center">仓库</uni-th>
							<uni-th align="center">在库数</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<block v-for="item in stockList">
							<uni-tr>
								<!-- 批次号 -->
								<uni-td>{{item.incomingBatch}}</uni-td>
								<!-- 物料编码 -->
								<uni-td>{{item.materialCode}}</uni-td>
								<!-- 物料名称 -->
								<uni-td>{{item.materialName}}</uni-td>
								<!-- 商场名称 -->
								<uni-td>{{item.marketName}}</uni-td>
								<!-- 仓库 -->
								<uni-td>{{item.warehouseName}}</uni-td>
								<!-- 数量 -->
								<uni-td align="center">{{item.num}}</uni-td>
							</uni-tr>
						</block>
					</uni-table>
				</scroll-view>
			</view>
		</view>
	</view>
	<tiplist ref="tiplists"></tiplist>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
	<BluetoothList ref="bluetoothList"></BluetoothList>
</template>

<script lang="ts" setup>
	import { ref, reactive, shallowRef, watch, nextTick, computed } from 'vue';
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import utils from '@/utils/utils.js';
	import {
		postFindAllocationData,
		BatchPrintPackages
	} from '@/api/user.js'
	import useBluetoothStore from '@/store/useBluetoothStore.js';
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	const bluetoothList = ref(null)
	const bluetoothStore = useBluetoothStore()
	const { bluetoothInfo } = storeToRefs(bluetoothStore)

	// 订单详情
	const dataInfo = shallowRef<any>({})

	/** 是否开启批量操作 */
	const isBatchOperation = ref<Boolean>(false)

	/** 是否显示定制品 */
	const showArticleMadeToOrder = ref<Boolean>(true)

	/** 扫码码值 */
	const scancode = ref<string>('')

	/** 包件列表 */
	const packageList = shallowRef([])

	/** 零担列表 */
	const zeroList = shallowRef([])

	/** 库存品列表 */
	const stockList = shallowRef([])

	/** 详情 */
	const info = ref<any>({ trayInfo: {} })

	// 订单状态字典
	const orderStateDictionaries = reactive({
		'10': '部分入库',
		'20': '已入库',
		'30': '部分出库',
		'40': '已出库',
		'50': '部分装车',
		'60': '已装车',
		'70': '部分签收',
		'80': '已签收',
	})

	/** tabBar 激活 */
	const tabBarCode = ref(1)

	/** 修改物料表单 */
	const form = ref({})

	/** 复选框选中的数据 */
	const selectionList = ref([])

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


	onLoad(() => {
		// #ifdef APP
		utils.ttsspke('库位查询, 请扫描或输入库位码')
		// #endif
	})

	// 开启监听扫描
	onShow(async () => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				scancode.value = code

				scandata()
			}
		})
		// #endif
	})

	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			dataInfo.value = {}
			scancode.value = ''
			packageList.value = []

			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 300)
	})

	async function scandata() {
		const res = await postFindAllocationData({ allocationId: scancode.value })
		console.log('res :>> ', res);
		const { code, data } = res

		if (code !== 200 || !data) return

		// 库位信息
		info.value = data.updownTypeEntity || {}

		// 库位托盘信息
		info.value.trayInfo = data.trayEntity || {}

		// 定制品
		packageList.value = data.packageList

		// 零担
		zeroList.value = data.zeroOrderList

		// 库存品
		stockList.value = data.stockOrderList
	}

	/** 设置tabBar激活状态 */
	const handleTabBarState = (code) => {
		selectionList.value = []
		tabBarCode.value = code
	}

	/** 复选框改变时 */
	const selectionChange = (list : [], type : string) => {
		console.log('list :>> ', list);
		selectionList.value = list
	}

	/** 打印 */
	const batchPrint = async () => {
		if (selectionList.value.length === 0) return uni.showToast({
			title: '最少选择一条数据',
			icon: 'none'
		})

		const _idsArr = []

		for (let i = 0; i < selectionList.value.length; i++) {
			// selectionList内存储的是被选中的索引
			const index = selectionList.value[i]
			_idsArr.push(packageList.value[index].packageId)
		}

		const idsValue = _idsArr.join(',')

		const res = await BatchPrintPackages(idsValue)
		const { code, data } = res
		if (code !== 200) return
		console.log('res :>> ', res);
		tiplists.value.setdetails({
			title: '请选择需要打印的包条码',
			isshow: true,
			tipstate: 2,
			list: [],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: () => {
				// if (deta.checklist.length == 0) {
				// 	uni.showToast({
				// 		title: '请选择包条码',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				console.log('data :>> ', data);
				// #ifdef APP
				if (!bluetoothInfo.value.name) return bluetoothList.value.setdetails({ isshow: true })
				let _isReturn = false
				data.map(item => {
					if (_isReturn) return
					let text = '! 0 200 200 330 1\r\n'
					text += 'SETBOLD 1\r\n'
					text += `T 56 0 0 0 ${item.orderCode}\r\n`
					text += 'LINE 0 50 420 50 3\r\n'
					text += `T 55 0 0 60 客户\r\n`
					text += 'LINE 40 50 40 110 3\r\n'
					text += `T 55 0 50 60 ${item.customerName}\r\n`
					text += 'LINE 40 80 420 80 3\r\n'
					text += `T 55 0 50 90 ${item.customerAddress}\r\n`
					text += 'LINE 0 110 420 110 3\r\n'
					text += `T 55 0 0 120 物料\r\n`
					text += 'LINE 40 110 40 140 3\r\n'
					text += `T 55 0 50 120 ${item.materialName || item.category}\r\n`
					text += 'LINE 0 140 420 140 3\r\n'
					text += 'B QR 150 150 M 2 U 4\r\n'
					text += `MA,${item.qrCode}\r\n`
					text += 'ENDQR\r\n'
					text += `T 55 0 140 260 ${item.qrCode}\r\n`
					text += 'FORM\r\n'
					text += 'PRINT\r\n'
					utils.getbl(bluetoothInfo.value, text).catch(() => {
						bluetoothList.value.setdetails({ isshow: true })
						_isReturn = true
					})
				})
				if (_isReturn) return
				// #endif
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
</script>

<style lang="scss" scoped>
	.w100 {
		width: 100%;
	}

	// 最外层容器
	.container {
		padding: 20upx;
		font-size: 28upx; // 本页字体大小
	}

	// 顶部tabbar
	.tabBar_top {
		display: flex;
		justify-content: space-around;
		font-size: 32upx;
		// font-weight: bold;
		margin: 10upx 0;

		&>view {
			padding: 15upx 0;
			flex: 1;
			text-align: center;
			position: relative;
			// background: #fff;
			transition: all 0.3s;
			border-radius: 10upx;

			&::after {
				content: '';
				display: block;
				position: absolute;
				height: 4upx;
				width: 0;
				background: var(--subjectColor);
				top: 100%;
				left: 50%;
				transition: all 0.5s;
			}

			&.active {
				// background: var(--subjectColor);
				// color: #fff;

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

	// 顶部搜索栏
	.header-search {
		height: 60upx;
		padding: 0 0 20upx;
		// border-bottom: 1upx solid #aaa;
		display: flex;
		justify-content: space-between;

	}

	.search {
		position: relative;

		// 查询结果的列表
		.searchResultList {
			position: absolute;
			top: 120%;
			width: 100%;
			background: #fff;
			z-index: 80;
			text-align: center;
			line-height: 60upx;
			max-height: 300upx;
			overflow-y: scroll;
		}
	}

	// 搜索输入框
	.searchInput {
		background: #fff;
		width: 500upx;
		height: 100%;
		padding-left: 20upx;
		border: 1upx solid var(--subjectColor);
		border-radius: 30upx;
	}

	// 搜索类型
	.searchType {
		height: 100%;
		display: flex;
		align-items: center;
		padding: 0 40upx;
		background: #fff;
		border: 1upx solid var(--subjectColor);
		border-radius: 10upx;
		color: var(--subjectColor);
	}

	// 数据详情
	.dataInfo {
		display: flex;
		flex-wrap: wrap;
		// border-bottom: 1upx solid #aaa;
		background: #fff;
	}

	.dataInfo__item {
		flex: none;
		min-width: 50%;
		max-width: 100%;
		line-height: 60upx;
		display: inline-flex;

		.label {
			display: inline-block;
			width: 160upx;
			text-align: right;
			margin-right: 20rpx;
		}
	}

	// 订单列表信息
	.orderInfo {
		// background: #fff;
		margin-top: 10upx;

		.orderInfo_title {
			background: #fff;
			font-size: 32upx;
			padding: 15upx;
			border-radius: 5upx;
			box-sizing: border-box;
			box-shadow: 0 0 10px #acc, 3px 3px #abb;
			font-size: 28upx;

			.row_title1 {
				display: inline-block;
				min-width: 140upx;
			}

			.row_title2 {
				display: inline-block;
				min-width: 200upx;
			}


			.orderInfo_title_row {
				display: flex;
				margin-top: 10upx;

				&>view {
					flex: 1;
				}
			}
		}

		// 头部统计
		.title {
			display: flex;
			justify-content: space-around;
			font-size: 32upx;
			// font-weight: bold;
			margin: 10upx 0;

			&>view {
				padding: 15upx 0;
				flex: 1;
				text-align: center;
				position: relative;
				// background: #fff;
				transition: all 0.3s;
				border-radius: 10upx;

				// &::after {
				// 	content: '';
				// 	display: block;
				// 	position: absolute;
				// 	height: 4upx;
				// 	width: 0;
				// 	// background: var(--subjectColor);
				// 	top: 100%;
				// 	left: 50%;
				// 	transition: all 0.5s;
				// }

				&.active {
					background: var(--subjectColor);
					color: #fff;

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

		.title__number {
			color: var(--subjectColor);
		}

		// 批量操作按钮
		.batchOperationBtn {
			border: 1upx solid var(--subjectColor);
			text-align: center;
			padding: 10upx 0;
			color: var(--subjectColor);
			border-radius: 10upx;
			width: 200upx;
			font-size: 28upx;
			margin: 0;
			margin-right: 10upx;
		}
	}

	// 控件
	.control {
		background: #fff;
		padding: 10upx 0;
	}

	.uni-table-scroll {
		zoom: 0.9;
	}

	.uni-table-td,
	.uni-table-th {
		--borderColor: var(--subjectColor);
		color: var(--borderColor);
		padding: 10upx;

		font-size: 28upx;
	}

	.table--border {
		--borderColor: var(--subjectColor);
		border-color: var(--borderColor);
	}

	:deep(.checkbox.tr-table--border) {
		--borderColor: var(--subjectColor);
		border-color: var(--borderColor);

		.checkbox__inner {
			border-color: var(--borderColor);
		}
	}
</style>