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">
			<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 } 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 data = ref([])
	const newHtmlContent = ref('') // 打印传入的html
	const isLoadFinish = ref(false)
	const qrcodeRef = ref()
	// #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) {
		if (option.points) {
			data.value = JSON.parse(option.points);
		}
	}
	onShow(() => {
		// 获取数据
		// data.value = [
		//   {
		//     itemNumber: '555555',
		//     itemName: 'hahah',
		//     referenceOrderRow: '55',
		//     referenceOrderCode: '55',
		//     supplierCode: '555',
		//     packageCode: '9999-8888',
		//     amount: '55',
		//     barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;',
		//     barcodeBase64: ''
		//   },
		//   {
		//     itemNumber: '66',
		//     itemName: 'hahah',
		//     referenceOrderRow: '66',
		//     referenceOrderCode: '666',
		//     supplierCode: '66',
		//     packageCode: '66666',
		//     amount: '666666',
		//     barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;',
		//     barcodeBase64: ''
		//   },
		//   {
		//     itemNumber: '66',
		//     itemName: 'hahah',
		//     referenceOrderRow: '66',
		//     referenceOrderCode: '666',
		//     supplierCode: '66',
		//     packageCode: '66666',
		//     amount: '666666',
		//     barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;',
		//     barcodeBase64: ''
		//   }
		// ]
		nextTick(async () => {
			// 获取二维码图片临时路径
			const el = qrcodeRef.value
			const str = ''
			el.forEach(async (item, index) => {
				await item.canvasToTempFilePath({
					success: async (res) => {
						// 将临时路径转换成base64
						await pathToBase64(res.tempFilePath)
							.then((base64) => {
								data.value[index].barcodeBase64 = base64
								if (index == el.length - 1) {
									isLoadFinish.value = true
								}
							})
							.catch((err) => {
								console.log(err)
							})
					},
					fail(err) {
						console.log('err:::', err)
					}
				})
			})
		})
	})
</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>