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

拆标签打印页面

intex_online20250408
王宇飞 1 month ago
parent
baa389d3c7
commit
ad51dc830e
1 changed files with 331 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 331
      src/pages/pointSplitLabel/index.vue

331
src/pages/pointSplitLabel/index.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save