sfms3.0-uniapp/src/pages/point/index.vue

<template>
	<view class="content" style="padding: 30rpx 20rpx 100rpx; min-height: calc(100vh - 120rpx)">
		<!-- 只用于展示页面 -->
		<view class="box" v-for="(item, index) in data" :key="index" style="margin-bottom: 20rpx">
			<view class="left">
				<view class="left-item">
					<view class="label">物品代码</view>
					<view class="value bold-font" id="name1">{{ item.itemCode }}</view>
				</view>
				<view class="left-item">
					<view class="label">物品名称</view>
					<view class="value" id="name2">{{ item.itemName }}</view>
				</view>
				<view class="left-item">
					<view class="label">包装名称</view>
					<view class="value">{{item.packName}}</view>
				</view>
				<view class="left-item">
					<view class="label">包装号</view>
					<view class="value">{{ item.packageCode }}</view>
				</view>
				<view class="left-item" v-if="item.productionLineCode&&item.productionLineCode.length>0">
					<view class="label">生产线</view>
					<view class="value">{{item.productionLineCode}}</view>
				</view>
				<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
					<view class="label">父包装号</view>
					<view class="value">{{item.parentNumber}}</view>
				</view>
				<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
					<view class="label">ASN</view>
					<view class="value">{{item.asnNumber}}</view>
				</view>
				<view class="left-item">
					<view class="label">数量</view>
					<view class="value bold-font">{{item.qty}}</view>
				</view>
			</view>
			<view class="right">
				<view class="image">
					<l-qrcode ref="qrcodeRef" :value="item.barcodeString" size="300rpx"></l-qrcode>
				</view>
				<view class="left-item">
					<view class="label">批次</view>
					<view class="value">{{item.batch}}</view>
				</view>
				<view class="left-item">
					<view class="label">物料类型</view>
					<view class="value">{{item.itemType}}</view>
				</view>
				<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)">
					<view class="label">供应商</view>
					<view class="value">{{item.supplierCode}}</view>
				</view>
				<view class="left-item">
					<view class="label">打印时间</view>
					<view class="value">{{item.printTimes}}</view>
				</view>
			</view>
		</view>
		<view class="" style="position: fixed; width: 100%; bottom: 0rpx; left: 0px" v-show="isLoadFinish">
			<button @click="printImage"
				style="background: rgb(60, 156, 255) !important ; color: white; margin-top: 80rpx">打印</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, nextTick, createApp, watch } from 'vue'
	import { onShow, onLoad, onUnload } from '@dcloudio/uni-app'
	import { pathToBase64 } from '../../api/img-to-base64.js'
	// 打印页面的模板
	const htmlFileUrl = '/hybrid/html/point.html' // 引入解压后的js文件，这里我重新命名了文件名
	// #ifdef APP
	const testModule = uni.requireNativePlugin('TestModule')
	// #endif

	const timer = ref(null)
	const originData = ref([])
	const data = ref([])
	const newHtmlContent = ref('') // 打印传入的html
	const isLoadFinish = ref(false)
	const qrcodeRef = ref()

	const getListData = () => {
		nextTick(async () => {
			// 获取二维码图片临时路径
			const el = _this.$refs['qrcodeRef']
			let str = ''
			// #ifdef APP
			el.forEach(async (item, index) => {
				await item.canvasToTempFilePath({
					success: async (res) => {
						// 将临时路径转换成base64
						await pathToBase64(res.tempFilePath).then(base64 => {
							_this.data[index].barcodeBase64 = base64
							if (index == el.length - 1) {
								_this.isLoadFinish = true
								uni.hideLoading();

							}
						}).catch(err => {
							console.log(err);
						})
					},
					fail(err) {
						console.log('err:::', err)
					}
				})

			})
			// #endif

		})
	}
	// #ifdef APP
	// 打印
	const printImage = () => {
		testModule.doHTMLPrint(newHtmlContent.value)
	}
	// 读取html文件

	const readFile = (path, callback) => {
		plus.io.resolveLocalFileSystemURL(
			path,
			function (entry) {
				entry.file(
					function (file) {
						const reader = new plus.io.FileReader()
						reader.onloadend = function (e) {
							callback(e.target.result)
						}
						reader.readAsText(file)
					},
					function (e) {
						console.log(`读取文件失败：${e.message}`)
					}
				)
			},
			function (e) {
				console.log(`获取图片资源失败：${e.message}`)
			}
		)
	}
	// #endif
	watch(
		() => isLoadFinish.value,
		(newVal, oldVal) => {
			if (newVal == true) {
				// 读取html文件将文件中的内容图换成当前页面的数据
				let str = ''
				readFile(htmlFileUrl, (htmlContent) => {
					newHtmlContent.value = htmlContent
					data.value.forEach((item) => {
						str += `
							<div class="box" style="page-break-before:always;"><br />
								<div class="left">
									<div class="left-item">
										<div class="label">物品代码</div>
										<div class="value bold-font" id="name1">${item.itemCode}</div>
									</div>
									<div class="left-item">
										<div class="label">物品名称</div>
										<div class="value" id="name2">${item.itemName}</div>
									</div>
									<div class="left-item">
										<div class="label">包装名称</div>
										<div class="value">${item.packName}</div>
									</div>
									<div class="left-item">
										<div class="label">包装号</div>
										<div class="value">${item.packageCode}</div>
									</div>
						`
						if (item.productionLineCode && item.productionLineCode.length > 0) {
							str += `
								<div class="left-item">
									<div class="label">生产线</div>
										<div class="value">${item.productionLineCode}</div>
									</div>
							`
						} else {
							str += `
								<div class="left-item">
									<div class="label">父包装号</div>
									<div class="value">${item.parentNumber}</div>
								</div>
								<div class="left-item">
									<div class="label">ASN</div>
									<div class="value">${item.asnNumber}</div>
								</div>
							`
						}
						str += `
								<div class="left-item">
									<div class="label">数量</div>
									<div class="value bold-font">${item.qty}</div>
								</div>
							</div>
							<div class="right">
								<div class="image">
									<img id='image1' src="${item.barcodeBase64}" alt="" />
								</div>
								<div class="left-item">
									<div class="label">批次</div>
									<div class="value">${item.batch}</div>
								</div>
								<div class="left-item">
									<div class="label">物料类型</div>
									<div class="value">${item.itemType}</div>
								</div>
							`
						if (!(item.productionLineCode && item.productionLineCode.length > 0)) {
							str += `
								<div class="left-item">
									<div class="label">供应商</div>
									<div class="value">${item.supplierCode}</div>
								</div>
							`
						}
						str += `
								<div class="left-item">
									<div class="label">打印时间</div>
									<div class="value">${item.printTimes}</div>
								</div>
							</div>
						</div>
						`
					})
					newHtmlContent.value = newHtmlContent.value.replace('mainBody', str) // 替换物品代码
				})
			}
		}
	)
	onLoad(option) {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		if (option.points) {
			originData.value = JSON.parse(option.points);
		}
	}
	onUnload(() => {
		if (timer.value) {
			clearTimeout(timer.value)
			timer.value = null
		}
	})
	onShow(() => {
		timer.value = setTimeout(() => {
			if (timer.value) {
				clearTimeout(timer.value)
				timer.value = null
			}
			data.value = originData.value
			getListData()
		}, 1000)
	})
</script>

<style>
	.box {
		font-size: 24rpx;
		display: flex;
	}

	.left {
		border-top: 1px solid #b1b1b1;
		border-left: 1px solid #b1b1b1;
		flex: 1;
	}

	.left-item {
		display: flex;
	}

	.bold-font {
		font-weight: bold;
		font-size: 28rpx;
	}

	.label {
		border-bottom: 1px solid #b1b1b1;
		border-right: 1px solid #b1b1b1;
		width: 140rpx;
		padding: 0px 10rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.value {
		border-bottom: 1px solid #b1b1b1;
		border-right: 1px solid #b1b1b1;
		padding: 0px 5px;
		height: 100rpx;
		flex: 1;
		width: 0px;
		display: flex;
		align-items: center;
		word-break: break-all;
	}

	.right {
		width: 300rpx;
	}

	.image {
		width: 100%;
		height: 301rpx;
		border-bottom: 1px solid #b1b1b1;
		border-top: 1px solid #b1b1b1;
		border-right: 1px solid #b1b1b1;
	}

	.image img {
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		margin: 4rpx;
	}
</style>