logpm/pagesHome/pages/StorageLocationList/StorageLocationList.vue

<template>
	<BasicContainer ref="basicContainer" :option="option">
		<template #head>
			<view class="header">
				<view class="flex-c-sb mb10">
					<view class="flex1 search_container">
						<input type="text" v-model="details.searchValue" placeholder="请输入库位名称" class="searchInput" name=""
							id="">

						<view class="imgIconBox">
							<image v-if="details.searchValue" src="@/pagesHome/static/removeitem.png"
								@click="details.searchValue = ''" mode=""></image>
						</view>
					</view>

					<view class="button ml10" @click="initpage">
						搜索
					</view>
				</view>

				<view class="flex-c-sb">
					<view class="flex-c-c">
						<view class="button" @click="handleCheckAll">
							全选
						</view>

						<view class="ml10 button" @click="handleCloseAll">
							取消选择
						</view>
					</view>

					<view class="button" @click="handleIsPrint">
						打印
					</view>
				</view>
			</view>
		</template>

		<template #body>
			<view class="main">
				<scroll-view scroll-y="true" class="jpScorllView" :style="{height: details.jpScorllViewHeight}">
					<view v-for="item in details.recordsList" :key="item.id">
						<PullDownBox>
							<template #title>
								<view class="center">
									<CheckBox :click="() => hanleChangeCheck(item)" v-model="item.active" />

									<text class="ml10">
										{{item.name}}
									</text>
								</view>
							</template>
							<template #content>
								<view class="PullDownBox_content">
									<block v-for="val in item.goodsAllocations" :key="val.id">
										<view class="mt10 flex-c-sb">
											<view class="center">
												<CheckBox :click="() => hanleItemChangeCheck(val,item)" v-model="val.active" />
												<text class="ml10">
													{{val.name}}
												</text>

											</view>

											<view class="button" @click.stop="handlePrint(item, val)">
												打印
											</view>
										</view>
									</block>
								</view>
							</template>
						</PullDownBox>
					</view>
				</scroll-view>
			</view>
		</template>
	</BasicContainer>

	<tiplist ref="tiplists"></tiplist>
	<tips ref="tip"></tips>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<BluetoothList ref="bluetoothList"></BluetoothList>
	<!-- #endif -->
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import {
		postGoodsAllocation,
	} from '@/api/user.js'
	import { reactive, toRefs, ref, watchEffect, nextTick } from "vue";
	import utils from '@/utils/utils.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 tip = ref<any>(null)
	const tiplists = ref<any>(null)
	const date = ref<number | string[]>([])
	const basicContainer = ref(null)

	const option = {
		title: '库位列表',
		haveData: true,
		isEnd: false,
		async pullDownRefreshInitPage() {
			return await init()
		}
	}

	// 页面基础数据
	let details = reactive({
		datatime: '',
		recordsList: [],
		current: 1,
		size: 10,
		/** 总数 */
		total: 0,
		/** 滚动区高度 */
		jpScorllViewHeight: '80vh',
		/** 搜索的值 */
		searchValue: '',
		isActive: true
	})

	onShow(async () => {
		uni.$off('scancodedate')


		await nextTick()
		basicContainer.value.startPullDownRefresh()
		details.jpScorllViewHeight = await utils.getViewDistanceFormTop('.jpScorllView')
	})
	onHide(() => {
		uni.stopPullDownRefresh();
	})

	async function init() {
		details.recordsList = []
		return initpage()
	}

	const handleAdd = (data, i, max) => {
		const _timer = setTimeout(() => {
			i < max - 1 ? details.recordsList.push(...data.slice(i * 10, (i + 1) * 10))
				: details.recordsList.push(...data.slice(i * 10))

			if (i < max - 1) handleAdd(data, i + 1, max)

			clearTimeout(_timer)
		}, 50)
	}

	async function initpage() {
		try {
			const res = await postGoodsAllocation({ goodsAllocationName: details.searchValue })

			const { code, data } = res

			if (code !== 200) return

			const _size = Math.ceil(data.length / 10)

			handleAdd(data, 0, _size)

			// details.recordsList = data
			return null
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			return null
		}

	}

	const hanleChangeCheck = (item) => {
		// item.active = isCheck
		console.log('item :>> ', item);

		for (let i = 0; i < item.goodsAllocations.length; i++) {
			item.goodsAllocations[i].active = item.active
		}
	}

	const hanleItemChangeCheck = (val, item) => {
		// val.active = isCheck
		let isAll = false

		for (let i = 0; i < item.goodsAllocations.length; i++) {
			isAll = item.goodsAllocations[i].active
			if (isAll) break
		}

		item.active = isAll
	}

	const handlePrint = (item, val) => {
		tip.value.setdetails({
			title: '提示',
			content: `是否打印【${val.name}】货位`,
			confirmTxt: '确认',
			isshow: true,
			isshowcancel: true,
			success: () => {
				tip.value.setisshow(false)

				handleBatchPrint([{ title: item.name, ...val }])
			},
			cancel: () => {
				tip.value.setisshow(false)
			},
			close: () => {
				tip.value.setisshow(false)
			}
		})
	}

	/** 是否批量打印 */
	const handleIsPrint = () => {
		const chooseList = []

		for (let i = 0; i < details.recordsList.length; i++) {
			const item = details.recordsList[i]

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

				if (val.active) chooseList.push({ ...val, title: item.name })
			}
		}


		if (chooseList.length === 0) return utils.handleToast('请选择需要打印的数据')

		tip.value.setdetails({
			title: '提示',
			content: `是否打印【${chooseList.length}】条标签`,
			confirmTxt: '确认',
			isshow: true,
			isshowcancel: true,
			success: () => {
				tip.value.setisshow(false)

				handleBatchPrint(chooseList)
			},
			cancel: () => {
				tip.value.setisshow(false)
			},
			close: () => {
				tip.value.setisshow(false)
			}
		})
	}

	/** 批量打印 */
	const handleBatchPrint = async (chooseList : Array<Object>) => {

		const _warehouseName = (uni.getStorageSync('checkname') || {}).name
		console.log('_warehouseName :>> ', _warehouseName);
		// #ifdef APP
		if (!bluetoothInfo.value.name) return bluetoothList.value.setdetails({ isshow: true, success() { handleBatchPrint(chooseList) } })
		let _isReturn = false

		const reg1 = new RegExp('区')

		for (let i = 0; i < chooseList.length; i++) {
			if (_isReturn) break
			const item = chooseList[i]

			item.title = reg1.test(item.title) ? item.title : item.title + '区'

			const subjectHeight = 40
			// 间隙
			const interval = 30
			let text = '! 0 200 200 333 1\r\n'
			// 假设整体布局的高度为340，这个根据实际情况调整 
			text += 'SETBOLD 1\r\n' // 左边的二维码 
			text += 'B QR 40 20 M 2 U 8\r\n' // 二维码的大小和位置，根据需要调整 
			text += `MA,${item.id}\r\n`
			text += 'ENDQR\r\n' // 盒子1 
			text += `T 70 0 40 240 ${item.title + '-' + item.name}\r\n`
			text += `T 70 0 260 ${subjectHeight} ${'汇通运输'}\r\n` // 盒子标题，位置根据需要调整 
			text += `LINE 250 ${subjectHeight + (interval * 1)} 440 ${subjectHeight + (interval * 1)} 3\r\n` // 第一个盒子下边框线 // 盒子1左侧的竖线 
			text += `LINE 250 0 250 220 3\r\n` // 盒子2 
			text += `T 70 0 260 ${subjectHeight + (interval * 2)} ${_warehouseName}\r\n`
			text += `LINE 250 ${subjectHeight + (interval * 3)} 440 ${subjectHeight + (interval * 3)} 3\r\n` // 第二个盒子下边框线 // 盒子2左侧的竖线 
			text += `T 70 0 260 ${subjectHeight + (interval * 4)} ${item.title}\r\n`
			// text += `LINE 230 ${subjectHeight + (interval * 5)} 440 ${subjectHeight + (interval * 5)} 3\r\n` // 第三个盒子下边框线 // 盒子3左侧的竖线 
			text += 'FORM\r\n'
			text += 'PRINT\r\n'
			await utils.getbl(bluetoothInfo.value, text).catch(() => {
				console.log('111 :>> ', 111);
				bluetoothList.value.setdetails({ isshow: true, success() { handleBatchPrint(chooseList) } })
				_isReturn = true
			})
			if (_isReturn) break
		}
		// #endif
	}

	/** 全选 */
	const handleCheckAll = () => {
		for (let i = 0; i < details.recordsList.length; i++) {
			const value = details.recordsList[i]

			value.active = true
			for (let index = 0; index < value.goodsAllocations.length; index++) {
				const item = value.goodsAllocations[index]
				item.active = true
			}
		}
	}

	/** 取消选择 */
	const handleCloseAll = () => {
		for (let i = 0; i < details.recordsList.length; i++) {
			const value = details.recordsList[i]

			value.active = false
			for (let index = 0; index < value.goodsAllocations.length; index++) {
				const item = value.goodsAllocations[index]
				item.active = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url(@/utils/style/common.scss);

	// 头部
	.header {
		margin: 10upx;
		padding: 10upx;
		background: #fff;
	}

	.search_container {
		position: relative;

		.imgIconBox {
			position: absolute;
			right: 20upx;
			display: flex;
			align-items: center;
			top: 0;
			height: 100%;

			image {
				width: 48upx;
				height: 48upx;
			}
		}
	}

	// 搜索输入框
	.searchInput {
		padding: 10upx 30upx;
		background: #e9e9e9;
		border-radius: 30upx;
	}

	// 按钮样式
	.button {
		padding: 10upx 30upx;
		background: var(--subjectColor);
		color: #fff;
		border-radius: 10upx;
	}

	// 主体样式
	.main {
		background: #fff;
		// padding: 10upx;
		margin: 10upx;
	}

	// 下拉内容样式
	.PullDownBox_content {
		background: #e9e9e9;
		padding: 10upx;
		border-radius: 5upx;
	}

	// 复选框图片
	.check_img {
		width: 48upx;
		height: 48upx;
	}

	// 居中
	.center {
		display: flex;
		align-items: center;
	}
</style>