修改打印

src/pages/point/index.vue

@@ -39,7 +39,8 @@
 			</view>
 			<view class="right">
 				<view class="image">
-					<l-qrcode ref="qrcodeRef" :value="item.barcodeString" size="300rpx"></l-qrcode>
+					<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success" :value="item.barcodeString"
+						size="300rpx"></l-qrcode>
 				</view>
 				<view class="left-item">
 					<view class="label">批次</view>
@@ -81,177 +82,27 @@
 		name: 'point',
 		data() {
 			return {
-				timer:null,
+				timer: null,
-				originData:[],
+				originData: [],
 				data: [],
 				newHtmlContent: '', //打印传入的html
 				isLoadFinish: false,
+				picIndex: 0,
+				picUrl: []
 			}
 		},
 
 		methods: {
-			
+			success(img) {
-			// 递归循环 qrcodeRef 组件集合
+				this.picUrl.push(img)
-			forEachQrcodeRef(el,index,elLength,wait) {
+				this.picIndex++
-				let _this = this
+				if (this.picIndex == this.data.length) {
-				console.log('11111111111111');
+					this.isLoadFinish = true;
-				console.log(index);
+					uni.hideLoading()
-				if (index == elLength) {
-					console.log('99999999');
-					return;
-				}
-				const item = el[index];
-				setTimeout(() => {
-					console.log(el[index]);
-					console.log(item.canvasToTempFilePath);
-					// try{
-						item.canvasToTempFilePath({
-							success: (res) => {
-								console.log(res);
-								// 将临时路径转换成base64
-								pathToBase64(res.tempFilePath).then(base64 => {
-									console.log(res.tempFilePath);
-									_this.data[index].barcodeBase64 = base64
-									if (index == elLength - 1) {
-										_this.isLoadFinish = true
-										uni.hideLoading();
-									}else {
-										console.log(index);
-									}
-									this.forEachQrcodeRef(el,index+1,el.length,100)
-								}).catch(err => {
-									console.log(err);
-									this.forEachQrcodeRef(el,index+1,el.length,100)
-								})
-							},
-							fail(err) {
-								console.log(err)
 				}
-						})
-					// }catch(e){
-					// 	console.log(e)
-					// 	//TODO handle the exception
-					// 	// this.forEachQrcodeRef(el,index,el.length)
-					// }
-				},wait);
 			},
-			// stringToBase64(str) {
+			setHtmlData() {
-			// 	console.log('999999999999999');
-			// 	console.log(str);
-			//     // 对中文字符进行编码
-			//  //    var encodeUTF8 = uni.getSystemInfoSync().platform === 'android' ? 'utf-8' : 'utf8';
-			// 	// console.log('8888888888888');
-			//  //    var utf8Str = uni.encode(str, encodeUTF8);
-			// 	// console.log(utf8Str); data：
-			//     // 将utf8字符串转为base64
-			//     var base64Str = btoa(str);
-			// 	console.log(base64Str);
-			//     return base64Str;
-			// },
-			// getQrCodeBase64(index) {
-			// 	let _this = this
-			// 	  // 使用setTimeout确保DOM更新完成后再获取canvas
-			// 	  setTimeout(() => {
-			// 		const qrcodeCanvas = this.$refs.qrcodeRef.$el.querySelector('canvas');
-			// 		if (qrcodeCanvas) {
-			// 		  // 将canvas转换为Base64编码的图片URL
-			// 		  _this.data[index].barcodeBase64 = qrcodeCanvas.toDataURL('image/png');
-			// 		} else {
-			// 			console.log('xxxxxxxxxxxxxxxxx')
-			// 		}
-			// 	  }, 0);
-			// },
-			getListData(){
-				// 获取数据
-				// 大哥：后端添加了 制造标签 生产线 ，可根据 生产线是否有值 来判断打印的是制造标签
-				// this.data = [{
-				// 	itemCode:'065.051-01M', // 物品代码
-				// 	itemName: 'PCCLARNATEA1225BLACK9999', // 物品名称
-				// 	packName: '包装名称',// 包装名称
-				// 	packageCode: 'PS0513-000003', // 包装号
-				// 	batch:'20240514',//批次
-				// 	parentNumber:'PS0513-000003',//父包装号
-				// 	itemType:'物料类型',//物料类型
-				// 	asnNumber:'123232',//ASN
-				// 	supplierCode: 'Fewewq', // 供应商
-				// 	qty: '100', // 数量
-				// 	printTimes:'2019-09-09 09:09:00', // 打印时间
-				// 	barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;',
-				// 	barcodeBase64: '',
-				// 	productionLineCode:''//生产线
-				// }]
-				
-				let _this = this
-				// this.$nextTick(async () => {
-					// 获取二维码图片临时路径
-					const el = _this.$refs['qrcodeRef']
-					_this.forEachQrcodeRef(el,0,el.length,5000);
-				// // })
-				
-			
-				// 	let _this = this
-				// 	this.$nextTick(async () => {
-				// 		// 获取二维码图片临时路径
-				// 		const el = _this.$refs['qrcodeRef']
-				// 		let str = ''
-				// 		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();
-					
-				// 						}else {
-				// 							console.log(index);
-				// 						}
-				// 					}).catch(err => {
-				// 						console.log(err);
-				// 					})
-				// 				},
-				// 				fail(err) {
-				// 					console.log('err:::', err)
-				// 				}
-				// 			})
-					
-				// 		})
-					
-				// 	})
-				
-				// })
-				
-			},
-			// #ifdef APP
-			// 打印
-			printImage() {
-				testModule.doHTMLPrint(this.newHtmlContent)
-			},
-			// 读取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
-		},
-		watch: {
-			isLoadFinish(newVal, oldVal) {
-				if (newVal == true) {
-					// 读取html文件将文件中的内容图换成当前页面的数据
 				let str = ''
-					// #ifdef APP
 				this.readFile(htmlFileUrl, (htmlContent) => {
 					this.newHtmlContent = htmlContent
 					this.data.forEach(item => {
@@ -273,14 +124,14 @@
 											<div class="label">包装号</div>
 											<div class="value">${item.packageCode}</div>
 										</div>`
-							if(item.productionLineCode&&item.productionLineCode.length>0){
+						if (item.productionLineCode && item.productionLineCode.length > 0) {
 							str += `
 											<div class="left-item">
 												<div class="label">生产线</div>
 												<div class="value">${item.productionLineCode}</div>
 											</div>
 									`
-							}else{
+						} else {
 							str += `
 											<div class="left-item">
 												<div class="label">父包装号</div>
@@ -310,7 +161,7 @@
 											<div class="label">物料类型</div>
 											<div class="value">${item.itemType}</div>
 										</div>`
-							if(!(item.productionLineCode&&item.productionLineCode.length>0)){
+						if (!(item.productionLineCode && item.productionLineCode.length > 0)) {
 							str += `
 											<div class="left-item">
 												<div class="label">供应商</div>
@@ -329,12 +180,72 @@
 					})
 					this.newHtmlContent = this.newHtmlContent.replace(
 						"mainBody", str); //替换物品代码
-						// console.log(this.newHtmlContent)
+				});
+			},
+
+			generateBase64(index) {
+				
+				//完成，调用打印
+				if (index == this.picUrl.length) {
+					this.setHtmlData()
+					let clearInt = setInterval(() => {
+						if (!this.newHtmlContent.mainBody) {
+							// #ifdef APP
+							testModule.doHTMLPrint(this.newHtmlContent)
+							// #endif
+							clearInterval(clearInt)
+							uni.hideLoading()
+						}
+					}, 1000)
+
+				} else {
+					var url = this.picUrl[index]
+					// #ifdef APP
+					plus.io.resolveLocalFileSystemURL(url, (entry) => {
+						// 可通过entry对象操作test.html文件 
+						entry.file((file) => {
+							let fileReader = new plus.io.FileReader();
+							fileReader.onloadend = (evt) => {
+								console.log("文件路径" + evt.target.result)
+								this.data[index].barcodeBase64 = evt.target.result
+								this.generateBase64(index + 1)
+							}
+							fileReader.readAsDataURL(file);
+						});
+					}, (e) => {
+						console.log("失败" + e)
 					});
 					// #endif
 				}
+			},
+			printImage() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true
+				})
+				this.generateBase64(0)
+			},
+
+			// #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: '加载中...',
@@ -343,25 +254,7 @@
 			if (option.points) {
 				this.originData = JSON.parse(option.points);
 			}
-		},
-		unmounted() {
-			if(this.timer){
-				clearTimeout(this.timer)
-				this.timer = null
-			}
-		},
-		 onShow() {
-			this.timer = setTimeout(()=>{
-				if(this.timer){
-					clearTimeout(this.timer)
-					this.timer = null
-				}
 			this.data = this.originData
-				console.log(287,'11111111')
-				this.$nextTick(()=> {
-					this.getListData()
-				})
-			},1000)
 		},
 	}
 </script>
@@ -391,7 +284,8 @@
 		height: 100rpx;
 		line-height: 100rpx;
 	}
-	.bold-font{
+
+	.bold-font {
 		font-weight: bold;
 		font-size: 28rpx;
 	}