6 changed files with 492 additions and 8 deletions
@ -0,0 +1,132 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
|||
<title></title> |
|||
<script src="../../api/img-to-base64.js"></script> |
|||
<script type="text/javascript"> |
|||
document.addEventListener('plusready', function() { |
|||
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。") |
|||
|
|||
|
|||
}); |
|||
</script> |
|||
<style> |
|||
@media print { |
|||
@page { |
|||
size: A5 landscape; |
|||
/* 设置打印页面尺寸为A5 */ |
|||
margin-bottom: 0; |
|||
padding: 0cm; |
|||
} |
|||
|
|||
table { |
|||
page-break-after: always; |
|||
border-collapse: collapse; |
|||
border-top: none; |
|||
} |
|||
|
|||
thead { |
|||
display: none; |
|||
border: none; |
|||
} |
|||
|
|||
thead tr { |
|||
border: none; |
|||
} |
|||
|
|||
thead td { |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
.jm-title { |
|||
/* border: 1.5px solid #000; */ |
|||
font: 24px Helvetica; |
|||
color: #0a0a0a; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
/* 物品代码 物品名称 包装名称 */ |
|||
.jm-print-30 { |
|||
font-weight: bold; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.jm-content { |
|||
/* border: 1.5px solid #000; */ |
|||
color: #0a0a0a; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
word-break: break-all; |
|||
} |
|||
|
|||
.font29 { |
|||
font: 29px Helvetica; |
|||
} |
|||
|
|||
.font-bold-48 { |
|||
font: bold 48px Helvetica; |
|||
} |
|||
|
|||
.font-bold-56 { |
|||
font: bold 56px Helvetica; |
|||
} |
|||
|
|||
.jm-print-17 { |
|||
/* border */ |
|||
: 1.5px solid #000; |
|||
} |
|||
|
|||
.left-width { |
|||
/* 111 */ |
|||
width: 111px; |
|||
/* border:1px solid red; */ |
|||
} |
|||
|
|||
.width-148 { |
|||
width: 138px; |
|||
/* border:1px solid red; */ |
|||
|
|||
} |
|||
|
|||
thead { |
|||
display: none; |
|||
border: none; |
|||
} |
|||
|
|||
thead tr { |
|||
border: none; |
|||
} |
|||
|
|||
thead td { |
|||
border: none; |
|||
} |
|||
|
|||
table { |
|||
margin-top: 20px; |
|||
border-top: none; |
|||
} |
|||
|
|||
.hide-tr tr { |
|||
border: none; |
|||
} |
|||
|
|||
.hide-tr td { |
|||
border: none; |
|||
} |
|||
|
|||
.top-tr { |
|||
border-top-width: 1.5px !important; |
|||
border-top-color: #000 !important; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
mainBody |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,331 @@ |
|||
<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 bold-label">物品代码</view> |
|||
<view class="value bold-font font-20" 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 bold-label">父包装号</view> |
|||
<view class="value bold-font font-20">{{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 bold-label">数量</view> |
|||
<view class="value bold-font font-20">{{item.qty}}</view> |
|||
</view> |
|||
<view class="left-item" v-if="item.fromLocationCode"> |
|||
<view class="label ">来源库位</view> |
|||
<view class="value ">{{item.fromLocationCode}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="right"> |
|||
<view class="image"> |
|||
<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success($event,item)" :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 class="left-item" v-if="item.fromLocationCode"> |
|||
<view class="label bold-label"></view> |
|||
<view class="value bold-font font-20"></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/pointReceipt.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, |
|||
picIndex: 0, |
|||
picUrl: [] |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
success(img,item) { |
|||
item.barcodeBase641 = img |
|||
uni.hideLoading() |
|||
this.isLoadFinish = true |
|||
// #ifdef APP |
|||
plus.io.resolveLocalFileSystemURL(item.barcodeBase641, (entry) => { |
|||
// 可通过entry对象操作test.html文件 |
|||
entry.file((file) => { |
|||
let fileReader = new plus.io.FileReader(); |
|||
fileReader.onloadend = (evt) => { |
|||
console.log("文件路径" + evt.target.result) |
|||
item.barcodeBase64 = evt.target.result |
|||
} |
|||
fileReader.readAsDataURL(file); |
|||
}); |
|||
}, (e) => { |
|||
console.log("失败" + e) |
|||
}); |
|||
// #endif |
|||
}, |
|||
setHtmlData() { |
|||
let str = '' |
|||
this.readFile(htmlFileUrl, (htmlContent) => { |
|||
this.newHtmlContent = htmlContent |
|||
this.data.forEach(item => { |
|||
str += ` |
|||
<table border="1.5" cellpadding="0" cellspacing="0" |
|||
style="border-collapse: collapse; table-layout: fixed; width: 1015px;"> |
|||
<thead> |
|||
<tr> |
|||
<td>哈哈哈哈哈</td> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr class="hide-tr"> |
|||
<td class="jm-print-30 jm-title left-width" style="height:0"> |
|||
</td> |
|||
<td class="jm-content font-bold-48" style="height: 0; width: 485px; "> |
|||
</td> |
|||
<td class="jm-title width-148" style="height: 0; width:148px;"> |
|||
</td> |
|||
<td class="jm-title" style="height: 0; width: 238px; "> |
|||
</td> |
|||
</tr> |
|||
<tr class="top-tr"> |
|||
<td class="jm-print-30 jm-title left-width" style="height: 130px; ">物品代码</td> |
|||
<td class="jm-content font-bold-48" style="height: 130px; width: 485px; line-height: 50px;"> |
|||
${item.itemCode}</td> |
|||
<td class="jm-print-17" rowspan="3" colspan="2" style="height: 386px; width: 391px; padding: 2px;"> |
|||
<img width="391px" height="386px" alt="Scan me!" |
|||
src="${item.barcodeBase64}" |
|||
style="display: block; margin: 0 auto;"> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="jm-print-30 jm-title left-width" style="height: 130px; ">物品名称</td> |
|||
<td class="jm-content font-bold-56" style="height: 130px; width: 485px; line-height: 58px;"> |
|||
${item.itemName}</td> |
|||
</tr> |
|||
|
|||
<tr> |
|||
<td class="jm-print-30 jm-title left-width" style="height: 130px;">包装名称</td> |
|||
<td class="jm-content font-bold-48" style="height: 130px; width: 485px; line-height: 50px;"> |
|||
${item.packName}</td> |
|||
</tr> |
|||
|
|||
<tr> |
|||
<td class="jm-title left-width" style="height: 90px; line-height: 26px;"> |
|||
包装号</td> |
|||
<td class="jm-content font29" style="height: 90px; width: 485px; line-height: 31px;"> |
|||
${item.packageCode}</td> |
|||
<td class="jm-title width-148" style="height: 90px; line-height: 26px;"> |
|||
批次</td> |
|||
<td class="jm-content font29" style="height: 90px; width: 238px; line-height: 31px;"> |
|||
${item.batch}</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="jm-title left-width" style="height: 85px; line-height: 50px;"> |
|||
生产线</td> |
|||
<td class="jm-content font29" style="height: 85px; width: 485px; line-height: 50px;"> |
|||
${item.productionLineCode}</td> |
|||
<td class="jm-title width-148" style="height: 85px; line-height: 50px;"> |
|||
物品类型</td> |
|||
<td class="jm-content font29" style="height: 85px; width: 238px; line-height: 50px;"> |
|||
${item.itemType}</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="jm-title jm-print-30 left-width" style="height: 85px; line-height: 35px;"> |
|||
数量</td> |
|||
<td class="jm-content font-bold-56" style="height: 85px; width: 485px; line-height: 35px;"> |
|||
${item.qty}</td> |
|||
<td class="jm-title width-148" style="height: 85px; line-height: 35px;width:148px !important;"> |
|||
打印时间</td> |
|||
<td class="jm-title" style="height: 85px; width: 238px; line-height: 35px;"> |
|||
${item.printTimes}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
` |
|||
}) |
|||
|
|||
console.log('str',str) |
|||
this.newHtmlContent = this.newHtmlContent.replace( |
|||
"mainBody", str); //替换物品代码 |
|||
}); |
|||
}, |
|||
printImage() { |
|||
uni.showLoading({ |
|||
title: "加载中", |
|||
mask: true |
|||
}) |
|||
this.setHtmlData() |
|||
let clearInt = setInterval(() => { |
|||
if (!this.newHtmlContent.mainBody) { |
|||
// #ifdef APP |
|||
testModule.doHTMLPrint(this.newHtmlContent) |
|||
// #endif |
|||
clearInterval(clearInt) |
|||
uni.hideLoading() |
|||
} |
|||
}, 1000) |
|||
}, |
|||
|
|||
// #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: '加载中...', |
|||
mask: true |
|||
}); |
|||
if (option.points) { |
|||
this.originData = JSON.parse(option.points); |
|||
} |
|||
// this.originData =[{"itemCode":"015.584-017","itemName":"111SagitarPA格栅灯高配左灯","packName":"内部围板箱","packageCode":"PN20250117-0000000003","batch":"20250117","parentNumber":null,"itemType":"产成品","asnNumber":null,"supplierCode":null,"qty":1,"printTimes":"2025-01-17 11:21:14","productionLineCode":"PRASL003","barcodeString":"HMQ;V1.0;DPRASL003;F;R;B20250117;PPN20250117-0000000003;I015.584-017;Q1.000000;UPC;C;","barcodeBase64":"","requestNumber":"REC1220250117-0003"},{"itemCode":"015.584-017","itemName":"22SagitarPA格栅灯高配左灯","packName":"内部围板箱","packageCode":"PN20250117-0000000003","batch":"20250117","parentNumber":null,"itemType":"产成品","asnNumber":null,"supplierCode":null,"qty":1,"printTimes":"2025-01-17 11:21:14","productionLineCode":"PRASL003","barcodeString":"HMQ;V1.0;DPRASL003;F;R;B20250117;PPN20250117-0000000003;I015.584-017;Q1.000000;UPC;C;","barcodeBase64":"","requestNumber":"REC1220250117-0003"}] |
|||
this.data = this.originData |
|||
|
|||
}, |
|||
} |
|||
</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-30 { |
|||
font-size: 30px; |
|||
} |
|||
.font-20 { |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.bold-label { |
|||
font-weight: bold; |
|||
/* font-size: 15px; */ |
|||
} |
|||
.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> |
|||
Loading…
Reference in new issue