<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>
// 打印页面的模板
const htmlFileUrl = '/hybrid/html/point.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,
}
},
methods: {
// 递归循环 qrcodeRef 组件集合
forEachQrcodeRef(el,index,elLength,wait) {
let _this = this
console.log('11111111111111');
console.log(index);
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) {
// 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 => {
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>`
})
this.newHtmlContent = this.newHtmlContent.replace(
"mainBody", str); //替换物品代码
// console.log(this.newHtmlContent)
});
// #endif
}
}
},
onLoad(option) {
uni.showLoading({
title: '加载中...',
mask: true
});
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>
<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-size: 28rpx;
}
.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>