Browse Source

多条打印

hella_vue3 5.1版本
zhang_li 7 months ago
parent
commit
61084b90ca
  1. 73
      src/hybrid/html/point.html
  2. 157
      src/pages/point/index.vue

73
src/hybrid/html/point.html

@ -6,37 +6,11 @@
<title></title> <title></title>
<script src="../../api/img-to-base64.js"></script> <script src="../../api/img-to-base64.js"></script>
<script type="text/javascript"> <script type="text/javascript">
document.addEventListener('plusready', function() { document.addEventListener('plusready', function() {
//console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。") //console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。")
}); });
// 解析URL参数
function getQueryParam(param) {
var searchParams = new URLSearchParams(window.location.search);
return searchParams.get(param);
}
// 使用函数获取参数
document.addEventListener('DOMContentLoaded', function() {
// var itemNumber = getQueryParam('itemNumber');
// var itemName = getQueryParam('itemName');
// var tempFilePath = getQueryParam('tempFilePath')
// document.getElementById('name1').innerText = itemNumber;
// document.getElementById('name2').innerText = itemName;
// // document.getElementById('image1').src = barcodeImage;
// console.log(99,tempFilePath)
// pathToBase64(tempFilePath){
// }
// pathToBase64(tempFilePath).then(base64 => {
// document.getElementById('image1').src = base64;
// }).catch(err => {
// console.log(err);
// })
// console.log(document.getElementById('name1'))
});
</script> </script>
<style> <style>
@ -45,14 +19,17 @@
display: flex; display: flex;
} }
.left { .left {
border-top: 1px solid #b1b1b1; border-top: 1px solid #b1b1b1;
border-left: 1px solid #b1b1b1; border-left: 1px solid #b1b1b1;
flex: 1; flex: 1;
} }
.left-item { .left-item {
display: flex; display: flex;
} }
.label { .label {
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1; border-right: 1px solid #b1b1b1;
@ -61,6 +38,7 @@
height: 67px; height: 67px;
line-height: 67px; line-height: 67px;
} }
.value { .value {
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1; border-right: 1px solid #b1b1b1;
@ -72,9 +50,11 @@
align-items: center; align-items: center;
word-wrap: break-word; word-wrap: break-word;
} }
.right { .right {
width: 200px; width: 200px;
} }
.image { .image {
width: 100%; width: 100%;
height: 202px; height: 202px;
@ -82,6 +62,7 @@
border-top: 1px solid #b1b1b1; border-top: 1px solid #b1b1b1;
border-right: 1px solid #b1b1b1; border-right: 1px solid #b1b1b1;
} }
.image img { .image img {
width: calc(100% - 4px); width: calc(100% - 4px);
height: calc(100% - 4px); height: calc(100% - 4px);
@ -90,44 +71,6 @@
</style> </style>
</head> </head>
<body> <body>
<div> mainBody
<div class="box">
<div class="left">
<div class="left-item">
<div class="label">物品代码</div>
<div class="value" id="name1">replaceItemNumber</div>
</div>
<div class="left-item">
<div class="label">物品名称</div>
<div class="value" id="name2">replaceItemName</div>
</div>
<div class="left-item">
<div class="label">供应商</div>
<div class="value">replaceSupplierCode</div>
</div>
<div class="left-item">
<div class="label">包装号</div>
<div class="value">replacePackageCode</div>
</div>
<div class="left-item">
<div class="label">订单行</div>
<div class="value">replaceReferenceOrderRow</div>
</div>
</div>
<div class="right">
<div class="image">
<img id='image1' src="replaceBase" alt="" />
</div>
<div class="left-item">
<div class="label">订单号</div>
<div class="value">replaceReferenceOrderCode</div>
</div>
<div class="left-item">
<div class="label">数量</div>
<div class="value">replaceAmount</div>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

157
src/pages/point/index.vue

@ -1,48 +1,48 @@
<template> <template>
<view class="content" style="padding:30rpx 20rpx;min-height: calc(100vh - 40rpx);"> <view class="content" style="padding:30rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);">
<!-- 只用于展示页面 --> <!-- 只用于展示页面 -->
<view class="box"> <view class="box" v-for="(item,index) in data" :key='index' style="margin-bottom: 20rpx;">
<view class="left"> <view class="left">
<view class="left-item"> <view class="left-item">
<view class="label">物品代码</view> <view class="label">物品代码</view>
<view class="value" id="name1">{{data.itemNumber}}</view> <view class="value" id="name1">{{item.itemNumber}}</view>
</view> </view>
<view class="left-item"> <view class="left-item">
<view class="label">物品名称</view> <view class="label">物品名称</view>
<view class="value" id="name2">{{data.itemName}}</view> <view class="value" id="name2">{{item.itemName}}</view>
</view> </view>
<view class="left-item"> <view class="left-item">
<view class="label">供应商</view> <view class="label">供应商</view>
<view class="value">{{data.supplierCode}}</view> <view class="value">{{item.supplierCode}}</view>
</view> </view>
<view class="left-item"> <view class="left-item">
<view class="label">包装号</view> <view class="label">包装号</view>
<view class="value">{{data.packageCode}}</view> <view class="value">{{item.packageCode}}</view>
</view> </view>
<view class="left-item"> <view class="left-item">
<view class="label">订单行</view> <view class="label">订单行</view>
<view class="value">{{data.referenceOrderRow}}</view> <view class="value">{{item.referenceOrderRow}}</view>
</view> </view>
</view> </view>
<view class="right"> <view class="right">
<view class="image"> <view class="image">
<l-qrcode ref="qrcodeRef" :value="data.barcodeString" size="300rpx"></l-qrcode> <l-qrcode ref="qrcodeRef" :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>
<view class="value">{{data.referenceOrderCode}}</view> <view class="value">{{item.referenceOrderCode}}</view>
</view> </view>
<view class="left-item"> <view class="left-item">
<view class="label">数量</view> <view class="label">数量</view>
<view class="value">{{data.amount}}</view> <view class="value">{{item.amount}}</view>
</view> </view>
</view> </view>
</view> </view>
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;">
<view class="">
<button @click="printImage" <button @click="printImage"
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button> style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button>
</view> </view>
</view> </view>
</template> </template>
@ -60,8 +60,8 @@
data() { data() {
return { return {
data: {}, data: {},
newHtmlContent: '' //html newHtmlContent: '', //html
isLoadFinish: false,
} }
}, },
@ -89,51 +89,107 @@
} }
// #endif // #endif
}, },
watch: {
isLoadFinish(newVal, oldVal) {
if (newVal == true) {
// html
let str = ''
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" id="name1">${item.itemNumber}</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.supplierCode}</div>
</div>
<div class="left-item">
<div class="label">包装号</div>
<div class="value">${item.packageCode}</div>
</div>
<div class="left-item">
<div class="label">订单行</div>
<div class="value">${item.referenceOrderRow}</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.referenceOrderRow}</div>
</div>
<div class="left-item">
<div class="label">数量</div>
<div class="value">${item.amount}</div>
</div>
</div>
</div>`
})
this.newHtmlContent = this.newHtmlContent.replace(
"mainBody", str); //
console.log(this.newHtmlContent)
});
}
}
},
async onShow() { async onShow() {
// //
this.data = { this.data = [{
itemNumber: '555555', itemNumber: '555555',
itemName: 'hahah', itemName: 'hahah',
referenceOrderRow: '60', referenceOrderRow: '55',
referenceOrderCode: '6000', referenceOrderCode: '55',
supplierCode: '888', supplierCode: '555',
packageCode: '9999-8888', packageCode: '9999-8888',
amount: '6000', amount: '55',
barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;' barcodeString: 'HMQ;V1.0;Dwork1-line1;F;R2024-04-03T08:28:41;B20240403;PPN0403-000005;I399.960-12;Q5.000000;UEA;',
} barcodeBase64: ''
this.$nextTick(() => { }, {
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: ''
}]
this.$nextTick(async () => {
// //
const el = this.$refs['qrcodeRef'] const el = this.$refs['qrcodeRef']
el.canvasToTempFilePath({ let str = ''
el.forEach(async (item, index) => {
await item.canvasToTempFilePath({
success: async (res) => { success: async (res) => {
// base64 // base64
await pathToBase64(res.tempFilePath).then(base64 => { await pathToBase64(res.tempFilePath).then(base64 => {
// html this.data[index].barcodeBase64 = base64
this.readFile(htmlFileUrl, (htmlContent) => { if (index == el.length - 1) {
this.newHtmlContent = htmlContent this.isLoadFinish = true
this.newHtmlContent = this.newHtmlContent.replace( }
"replaceItemNumber", this.data
.itemNumber); //
this.newHtmlContent = this.newHtmlContent.replace(
"replaceItemName", this.data.itemName
); //
this.newHtmlContent = this.newHtmlContent.replace(
"replaceSupplierCode", this.data
.supplierCode); //
this.newHtmlContent = this.newHtmlContent.replace(
"replacePackageCode", this.data
.packageCode); //
this.newHtmlContent = this.newHtmlContent.replace(
"replaceReferenceOrderRow", this.data
.referenceOrderRow); //
this.newHtmlContent = this.newHtmlContent.replace(
"replaceReferenceOrderCode", this.data
.referenceOrderCode); //
this.newHtmlContent = this.newHtmlContent.replace(
"amount", this.data.amount); //
this.newHtmlContent = this.newHtmlContent.replace(
"replaceBase", base64); //
});
}).catch(err => { }).catch(err => {
console.log(err); console.log(err);
}) })
@ -142,6 +198,9 @@
console.log('err:::', err) console.log('err:::', err)
} }
}) })
})
}) })
}, },

Loading…
Cancel
Save