From ad51dc830ef64953b52d57c8f56546312c33d5a9 Mon Sep 17 00:00:00 2001
From: wangyufei <2267742828@qq.com>
Date: Sat, 29 Mar 2025 16:24:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E6=A0=87=E7=AD=BE=E6=89=93=E5=8D=B0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/pointSplitLabel/index.vue | 331 ++++++++++++++++++++++++++++
 1 file changed, 331 insertions(+)
 create mode 100644 src/pages/pointSplitLabel/index.vue

diff --git a/src/pages/pointSplitLabel/index.vue b/src/pages/pointSplitLabel/index.vue
new file mode 100644
index 00000000..a6a45627
--- /dev/null
+++ b/src/pages/pointSplitLabel/index.vue
@@ -0,0 +1,331 @@
+<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 bold-label">物品代码</view>
+					<view class="value bold-font font-20" 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 bold-label">父包装号</view>
+					<view class="value bold-font font-20">{{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 bold-label">数量</view>
+					<view class="value bold-font font-20">{{item.qty}}</view>
+				</view>
+				<view class="left-item" v-if="item.fromLocationCode">
+					<view class="label ">来源库位</view>
+					<view class="value ">{{item.fromLocationCode}}</view>
+				</view>
+
+			</view>
+			<view class="right">
+				<view class="image">
+					<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success($event,item)" :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 class="left-item" v-if="item.fromLocationCode">
+					<view class="label bold-label"></view>
+					<view class="value bold-font font-20"></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>
+	// 打印页面的模板
+	const htmlFileUrl = '/hybrid/html/pointReceipt.html';
+	import {
+		pathToBase64
+	} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
+	// #ifdef APP
+	var testModule = uni.requireNativePlugin("TestModule")
+	// #endif
+
+	export default {
+		name: 'point',
+		data() {
+			return {
+				timer: null,
+				originData: [],
+				data: [],
+				newHtmlContent: '', //打印传入的html
+				isLoadFinish: false,
+				picIndex: 0,
+				picUrl: []
+			}
+		},
+
+		methods: {
+			success(img,item) {
+				item.barcodeBase641 = img
+				uni.hideLoading()
+				this.isLoadFinish = true
+				// #ifdef APP
+				plus.io.resolveLocalFileSystemURL(item.barcodeBase641, (entry) => {
+					// 可通过entry对象操作test.html文件 
+					entry.file((file) => {
+						let fileReader = new plus.io.FileReader();
+						fileReader.onloadend = (evt) => {
+							console.log("文件路径" + evt.target.result)
+							item.barcodeBase64 = evt.target.result
+						}
+						fileReader.readAsDataURL(file);
+					});
+				}, (e) => {
+					console.log("失败" + e)
+				});
+				// #endif
+			},
+			setHtmlData() {
+				let str = ''
+				this.readFile(htmlFileUrl, (htmlContent) => {
+					this.newHtmlContent = htmlContent
+					this.data.forEach(item => {
+						str += `
+						<table border="1.5" cellpadding="0" cellspacing="0"
+							style="border-collapse: collapse; table-layout: fixed; width: 1015px;">
+							<thead>
+								<tr>
+									<td>哈哈哈哈哈</td>
+								</tr>
+							</thead>
+							<tbody>
+								<tr class="hide-tr">
+									<td class="jm-print-30 jm-title left-width" style="height:0">
+									</td>
+									<td class="jm-content font-bold-48" style="height: 0; width: 485px; ">
+									</td>
+									<td class="jm-title width-148" style="height: 0; width:148px;">
+									</td>
+									<td class="jm-title" style="height: 0; width: 238px; ">
+									</td>
+								</tr>
+								<tr class="top-tr">
+									<td class="jm-print-30 jm-title left-width" style="height: 130px; ">物品代码</td>
+									<td class="jm-content font-bold-48" style="height: 130px; width: 485px; line-height: 50px;">
+										${item.itemCode}</td>
+									<td class="jm-print-17" rowspan="3" colspan="2" style="height: 386px; width: 391px; padding: 2px;">
+										<img width="391px" height="386px" alt="Scan me!"
+											src="${item.barcodeBase64}"
+											style="display: block; margin: 0 auto;">
+									</td>
+								</tr>
+								<tr>
+									<td class="jm-print-30 jm-title left-width" style="height: 130px; ">物品名称</td>
+									<td class="jm-content font-bold-56" style="height: 130px; width: 485px; line-height: 58px;">
+										${item.itemName}</td>
+								</tr>
+								
+								<tr>
+									<td class="jm-print-30 jm-title left-width" style="height: 130px;">包装名称</td>
+									<td class="jm-content font-bold-48" style="height: 130px; width: 485px; line-height: 50px;">
+										${item.packName}</td>
+								</tr>
+								
+								<tr>
+									<td class="jm-title left-width" style="height: 90px; line-height: 26px;">
+										包装号</td>
+									<td class="jm-content font29" style="height: 90px; width: 485px; line-height: 31px;">
+										${item.packageCode}</td>
+									<td class="jm-title width-148" style="height: 90px; line-height: 26px;">
+										批次</td>
+									<td class="jm-content font29" style="height: 90px; width: 238px; line-height: 31px;">
+										${item.batch}</td>
+								</tr>
+								<tr>
+									<td class="jm-title left-width" style="height: 85px; line-height: 50px;">
+										生产线</td>
+									<td class="jm-content font29" style="height: 85px; width: 485px; line-height: 50px;">
+										${item.productionLineCode}</td>
+									<td class="jm-title width-148" style="height: 85px; line-height: 50px;">
+										物品类型</td>
+									<td class="jm-content font29" style="height: 85px; width: 238px; line-height: 50px;">
+										${item.itemType}</td>
+								</tr>
+								<tr>
+									<td class="jm-title jm-print-30 left-width" style="height: 85px; line-height: 35px;">
+										数量</td>
+									<td class="jm-content font-bold-56" style="height: 85px; width: 485px; line-height: 35px;">
+										${item.qty}</td>
+									<td class="jm-title width-148" style="height: 85px; line-height: 35px;width:148px !important;">
+										打印时间</td>
+									<td class="jm-title" style="height: 85px; width: 238px; line-height: 35px;">
+										${item.printTimes}</td>
+								</tr>
+							</tbody>
+						</table>
+						`		
+					})
+					
+					console.log('str',str)
+					this.newHtmlContent = this.newHtmlContent.replace(
+						"mainBody", str); //替换物品代码
+				});
+			},
+			printImage() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.setHtmlData()
+				let clearInt = setInterval(() => {
+					if (!this.newHtmlContent.mainBody) {
+						// #ifdef APP
+						testModule.doHTMLPrint(this.newHtmlContent)
+						// #endif
+						clearInterval(clearInt)
+						uni.hideLoading()
+					}
+				}, 1000)
+			},
+
+			// #ifdef APP
+			// 读取html文件
+			readFile(path, callback) {
+				plus.io.resolveLocalFileSystemURL(path, function(entry) {
+					entry.file(function(file) {
+						var 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
+		},
+
+		onLoad(option) {
+			uni.showLoading({
+				title: '加载中...',
+				mask: true
+			});
+			if (option.points) {
+				this.originData = JSON.parse(option.points);
+			}
+			this.originData =[{"itemCode":"015.584-017","itemName":"111SagitarPA格栅灯高配左灯","packName":"内部围板箱","packageCode":"PN20250117-0000000003","batch":"20250117","parentNumber":null,"itemType":"产成品","asnNumber":null,"supplierCode":null,"qty":1,"printTimes":"2025-01-17 11:21:14","productionLineCode":"PRASL003","barcodeString":"HMQ;V1.0;DPRASL003;F;R;B20250117;PPN20250117-0000000003;I015.584-017;Q1.000000;UPC;C;","barcodeBase64":"","requestNumber":"REC1220250117-0003"},{"itemCode":"015.584-017","itemName":"22SagitarPA格栅灯高配左灯","packName":"内部围板箱","packageCode":"PN20250117-0000000003","batch":"20250117","parentNumber":null,"itemType":"产成品","asnNumber":null,"supplierCode":null,"qty":1,"printTimes":"2025-01-17 11:21:14","productionLineCode":"PRASL003","barcodeString":"HMQ;V1.0;DPRASL003;F;R;B20250117;PPN20250117-0000000003;I015.584-017;Q1.000000;UPC;C;","barcodeBase64":"","requestNumber":"REC1220250117-0003"}]
+			this.data = this.originData
+
+		},
+	}
+</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;
+	}
+
+	.label {
+		border-bottom: 1px solid #b1b1b1;
+		border-right: 1px solid #b1b1b1;
+		width: 140rpx;
+		padding: 0px 10rpx;
+		height: 100rpx;
+		line-height: 100rpx;
+	}
+
+	.bold-font {
+		font-weight: bold;
+	}
+	.font-30 {
+		font-size: 30px;
+	}
+	.font-20 {
+		font-size: 20px;
+	}
+	
+	.bold-label {
+		font-weight: bold;
+		/* font-size: 15px; */
+	}
+	.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>
\ No newline at end of file