sfms3.0
/
sfms3.0-uniapp
3
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

多条打印

hella_vue3 5.1版本
zhang_li 5 months ago
parent
2f61b30b4b
commit
61084b90ca
2 changed files with 191 additions and 189 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 99
      src/hybrid/html/point.html
  2. 157
      src/pages/point/index.vue

99
src/hybrid/html/point.html
View File

@ -1,59 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<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>
.box{ .box {
font-size: 14px; font-size: 14px;
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;
width: 60px; width: 60px;
@ -61,7 +38,8 @@
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;
padding: 0px 5px; padding: 0px 5px;
@ -72,62 +50,27 @@
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;
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
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);
margin: 2px; margin: 2px;
} }
</style> </style>
</head> </head>
<body> <body>
<div> mainBody
<div class="box"> </body>
<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>
</html> </html>

157
src/pages/point/index.vue
View File

@ -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)
} }
}) })
})
}) })
}, },

Write Preview
Loading…
Cancel
Save