|
@ -35,11 +35,12 @@ |
|
|
<view class="label">数量</view> |
|
|
<view class="label">数量</view> |
|
|
<view class="value bold-font">{{item.qty}}</view> |
|
|
<view class="value bold-font">{{item.qty}}</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
|
<view class="right"> |
|
|
<view class="right"> |
|
|
<view class="image"> |
|
|
<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> |
|
|
<view class="left-item"> |
|
|
<view class="left-item"> |
|
|
<view class="label">批次</view> |
|
|
<view class="label">批次</view> |
|
@ -81,153 +82,151 @@ |
|
|
name: 'point', |
|
|
name: 'point', |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
timer:null, |
|
|
timer: null, |
|
|
originData:[], |
|
|
originData: [], |
|
|
data: [], |
|
|
data: [], |
|
|
newHtmlContent: '', //打印传入的html |
|
|
newHtmlContent: '', //打印传入的html |
|
|
isLoadFinish: false, |
|
|
isLoadFinish: false, |
|
|
|
|
|
picIndex: 0, |
|
|
|
|
|
picUrl: [] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
methods: { |
|
|
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'); |
|
|
let str = '' |
|
|
// console.log(str); |
|
|
this.readFile(htmlFileUrl, (htmlContent) => { |
|
|
// // 对中文字符进行编码 |
|
|
this.newHtmlContent = htmlContent |
|
|
// // var encodeUTF8 = uni.getSystemInfoSync().platform === 'android' ? 'utf-8' : 'utf8'; |
|
|
this.data.forEach(item => { |
|
|
// // console.log('8888888888888'); |
|
|
str += `<div class="box" style="page-break-before:always;"><br /> |
|
|
// // var utf8Str = uni.encode(str, encodeUTF8); |
|
|
<div class="left"> |
|
|
// // console.log(utf8Str); data: |
|
|
<div class="left-item"> |
|
|
// // 将utf8字符串转为base64 |
|
|
<div class="label">物品代码</div> |
|
|
// var base64Str = btoa(str); |
|
|
<div class="value bold-font" id="name1">${item.itemCode}</div> |
|
|
// console.log(base64Str); |
|
|
</div> |
|
|
// return base64Str; |
|
|
<div class="left-item"> |
|
|
// }, |
|
|
<div class="label">物品名称</div> |
|
|
// getQrCodeBase64(index) { |
|
|
<div class="value" id="name2">${item.itemName}</div> |
|
|
// let _this = this |
|
|
</div> |
|
|
// // 使用setTimeout确保DOM更新完成后再获取canvas |
|
|
<div class="left-item"> |
|
|
// setTimeout(() => { |
|
|
<div class="label">包装名称</div> |
|
|
// const qrcodeCanvas = this.$refs.qrcodeRef.$el.querySelector('canvas'); |
|
|
<div class="value">${item.packName}</div> |
|
|
// if (qrcodeCanvas) { |
|
|
</div> |
|
|
// // 将canvas转换为Base64编码的图片URL |
|
|
<div class="left-item"> |
|
|
// _this.data[index].barcodeBase64 = qrcodeCanvas.toDataURL('image/png'); |
|
|
<div class="label">包装号</div> |
|
|
// } else { |
|
|
<div class="value">${item.packageCode}</div> |
|
|
// console.log('xxxxxxxxxxxxxxxxx') |
|
|
</div>` |
|
|
// } |
|
|
if (item.productionLineCode && item.productionLineCode.length > 0) { |
|
|
// }, 0); |
|
|
str += ` |
|
|
// }, |
|
|
<div class="left-item"> |
|
|
getListData(){ |
|
|
<div class="label">生产线</div> |
|
|
// 获取数据 |
|
|
<div class="value">${item.productionLineCode}</div> |
|
|
// 大哥:后端添加了 制造标签 生产线 ,可根据 生产线是否有值 来判断打印的是制造标签 |
|
|
</div> |
|
|
// this.data = [{ |
|
|
` |
|
|
// itemCode:'065.051-01M', // 物品代码 |
|
|
} else { |
|
|
// itemName: 'PCCLARNATEA1225BLACK9999', // 物品名称 |
|
|
str += ` |
|
|
// packName: '包装名称',// 包装名称 |
|
|
<div class="left-item"> |
|
|
// packageCode: 'PS0513-000003', // 包装号 |
|
|
<div class="label">父包装号</div> |
|
|
// batch:'20240514',//批次 |
|
|
<div class="value">${item.parentNumber}</div> |
|
|
// parentNumber:'PS0513-000003',//父包装号 |
|
|
</div> |
|
|
// itemType:'物料类型',//物料类型 |
|
|
<div class="left-item"> |
|
|
// asnNumber:'123232',//ASN |
|
|
<div class="label">ASN</div> |
|
|
// supplierCode: 'Fewewq', // 供应商 |
|
|
<div class="value">${item.asnNumber}</div> |
|
|
// qty: '100', // 数量 |
|
|
</div> |
|
|
// 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: '', |
|
|
str += ` |
|
|
// productionLineCode:''//生产线 |
|
|
<div class="left-item"> |
|
|
// }] |
|
|
<div class="label">数量</div> |
|
|
|
|
|
<div class="value bold-font">${item.qty}</div> |
|
|
let _this = this |
|
|
</div> |
|
|
// this.$nextTick(async () => { |
|
|
</div> |
|
|
// 获取二维码图片临时路径 |
|
|
<div class="right"> |
|
|
const el = _this.$refs['qrcodeRef'] |
|
|
<div class="image"> |
|
|
_this.forEachQrcodeRef(el,0,el.length,5000); |
|
|
<img id='image1' src="${item.barcodeBase64}" alt="" /> |
|
|
// // }) |
|
|
</div> |
|
|
|
|
|
<div class="left-item"> |
|
|
|
|
|
<div class="label">批次</div> |
|
|
// let _this = this |
|
|
<div class="value">${item.batch}</div> |
|
|
// this.$nextTick(async () => { |
|
|
</div> |
|
|
// // 获取二维码图片临时路径 |
|
|
<div class="left-item"> |
|
|
// const el = _this.$refs['qrcodeRef'] |
|
|
<div class="label">物料类型</div> |
|
|
// let str = '' |
|
|
<div class="value">${item.itemType}</div> |
|
|
// el.forEach(async (item, index) => { |
|
|
</div>` |
|
|
// await item.canvasToTempFilePath({ |
|
|
if (!(item.productionLineCode && item.productionLineCode.length > 0)) { |
|
|
// success: async (res) => { |
|
|
str += ` |
|
|
// // 将临时路径转换成base64 |
|
|
<div class="left-item"> |
|
|
// await pathToBase64(res.tempFilePath).then(base64 => { |
|
|
<div class="label">供应商</div> |
|
|
// _this.data[index].barcodeBase64 = base64 |
|
|
<div class="value">${item.supplierCode}</div> |
|
|
// if (index == el.length - 1) { |
|
|
</div> |
|
|
// _this.isLoadFinish = true |
|
|
` |
|
|
// uni.hideLoading(); |
|
|
} |
|
|
|
|
|
str += ` |
|
|
// }else { |
|
|
|
|
|
// console.log(index); |
|
|
<div class="left-item"> |
|
|
// } |
|
|
<div class="label">打印时间</div> |
|
|
// }).catch(err => { |
|
|
<div class="value">${item.printTimes}</div> |
|
|
// console.log(err); |
|
|
</div> |
|
|
// }) |
|
|
</div> |
|
|
// }, |
|
|
</div>` |
|
|
// fail(err) { |
|
|
}) |
|
|
// console.log('err:::', err) |
|
|
this.newHtmlContent = this.newHtmlContent.replace( |
|
|
// } |
|
|
"mainBody", str); //替换物品代码 |
|
|
// }) |
|
|
}); |
|
|
|
|
|
}, |
|
|
// }) |
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
// #ifdef APP |
|
|
|
|
|
// 打印 |
|
|
|
|
|
printImage() { |
|
|
printImage() { |
|
|
testModule.doHTMLPrint(this.newHtmlContent) |
|
|
uni.showLoading({ |
|
|
|
|
|
title: "加载中", |
|
|
|
|
|
mask: true |
|
|
|
|
|
}) |
|
|
|
|
|
this.generateBase64(0) |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// #ifdef APP |
|
|
// 读取html文件 |
|
|
// 读取html文件 |
|
|
readFile(path, callback) { |
|
|
readFile(path, callback) { |
|
|
plus.io.resolveLocalFileSystemURL(path, function(entry) { |
|
|
plus.io.resolveLocalFileSystemURL(path, function(entry) { |
|
@ -246,95 +245,7 @@ |
|
|
} |
|
|
} |
|
|
// #endif |
|
|
// #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) { |
|
|
onLoad(option) { |
|
|
uni.showLoading({ |
|
|
uni.showLoading({ |
|
|
title: '加载中...', |
|
|
title: '加载中...', |
|
@ -342,26 +253,8 @@ |
|
|
}); |
|
|
}); |
|
|
if (option.points) { |
|
|
if (option.points) { |
|
|
this.originData = JSON.parse(option.points); |
|
|
this.originData = JSON.parse(option.points); |
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
unmounted() { |
|
|
|
|
|
if(this.timer){ |
|
|
|
|
|
clearTimeout(this.timer) |
|
|
|
|
|
this.timer = null |
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
this.data = this.originData |
|
|
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> |
|
|
</script> |
|
@ -391,7 +284,8 @@ |
|
|
height: 100rpx; |
|
|
height: 100rpx; |
|
|
line-height: 100rpx; |
|
|
line-height: 100rpx; |
|
|
} |
|
|
} |
|
|
.bold-font{ |
|
|
|
|
|
|
|
|
.bold-font { |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
font-size: 28rpx; |
|
|
font-size: 28rpx; |
|
|
} |
|
|
} |
|
|