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

YT-2292拆标签的打印功能

intex
王宇飞 6 days ago
parent
ad51dc830e
commit
eb50ca86fe
4 changed files with 1083 additions and 162 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. 398
      src/hybrid/html/pointCG.html
  2. 6
      src/pages.json
  3. 42
      src/pages/label/record/splitLabel.vue
  4. 799
      src/pages/pointSplitLabel/index.vue

398
src/hybrid/html/pointCG.html
View File

@ -0,0 +1,398 @@
<!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;
}
}
body:{
margin:0
}
table {
display: table;
/* border-collapse: separate; */
box-sizing: border-box;
text-indent: initial;
unicode-bidi: isolate;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
/* border-spacing: 2px; */
border-color: gray;
white-space: normal;
font-variant: normal;
}
tr {
display: table-row;
/* vertical-align: inherit; */
unicode-bidi: isolate;
border-color: inherit;
}
td {
display: table-cell;
vertical-align: inherit;
unicode-bidi: isolate;
}
table > tr {
vertical-align: middle;
}
.jm-print-pageContent {
page-break-after: always;
width: fit-content;
}
.jm-print-table td {
padding-right: 2px;
padding-left: 3px;
}
.h35 td {
height: 35px;
}
.h30 td {
height: 30px;
}
.h45 td {
height: 45px;
}
.h10 td {
height: 10px;
}
.h25 td {
height: 25px;
}
.h34 td {
height: 34px;
}
.h29 td {
height: 29px;
}
.h20 td {
height: 20px;
}
.border-left{
border-left: 1.5px solid #000;
}
.border-top{
border-top: 1.5px solid #000;
}
.border-right{
border-right: 1.5px solid #000;
}
.border-bottom{
border-bottom: 1.5px solid #000;
}
.jm-print-26 {
font: bold 16px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-330 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-329 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-331 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-277 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-335 {
font: bold 18px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-326 {
font: bold 15px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-328 {
font: bold 15px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-325 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-367 {
font: bold 15px Helvetica;
color: #0a0a0a;
text-align: right;
vertical-align: middle;
white-space: nowrap;
overflow: visible;
}
.jm-print-359 {
font: bold 18px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-333 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-334 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-277 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-336 {
font: italic bold 18px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-337 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-368 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-288 {
font: bold 56px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-339 {
font: bold 29px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-362 {
font: bold 34px Helvetica;
color: #0a0a0a;
text-align: right;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-340 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-341 {
font: bold 21px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-364 {
font: bold 24px Helvetica;
color: #0a0a0a;
text-align: right;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-333 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-277 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-343 {
font: bold 29px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-345 {
font: bold 21px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-313 {
font: bold 34px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-315 {
font: bold 32px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-47 {
font: bold 16px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.border-dashed{
border-bottom:1.5px dashed #000;
}
.jm-print-default {
font: 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
mainBody
</body>
</html>

6
src/pages.json
View File

@ -2850,6 +2850,12 @@
"navigationBarTitleText": "打印", "navigationBarTitleText": "打印",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, {
"path": "pages/pointSplitLabel/index",
"style": {
"navigationBarTitleText": "打印",
"enablePullDownRefresh": false
}
}, { }, {
"path": "pages/pointProductReceipt/index", "path": "pages/pointProductReceipt/index",
"style": { "style": {

42
src/pages/label/record/splitLabel.vue
View File

@ -270,26 +270,26 @@
uni.hideLoading() uni.hideLoading()
if (res.data) { if (res.data) {
let list = [] // let list = []
res.data.forEach(item => { // res.data.forEach(item => {
list.push({ // list.push({
itemCode: item.itemCode, // 物品代码 // itemCode: item.itemCode, // 物品代码
itemName: item.itemName, // 物品名称 // itemName: item.itemName, // 物品名称
packName: item.packName, // 包装名称 // packName: item.packName, // 包装名称
packageCode: item.toPackingNumber, // 包装号 // packageCode: item.toPackingNumber, // 包装号
batch: item.toBatch, //批次 // batch: item.toBatch, //批次
parentNumber: item.parentNumber, //父包装号 // parentNumber: item.parentNumber, //父包装号
itemType: item.itemType, //物料类型 // itemType: item.itemType, //物料类型
asnNumber: item.asnNumber, //ASN // asnNumber: item.asnNumber, //ASN
supplierCode: item.supplierCode, // 供应商 // supplierCode: item.supplierCode, // 供应商
qty: item.qty, // 数量 // qty: item.qty, // 数量
printTimes: getCurrDateTime(), // 打印时间 // printTimes: getCurrDateTime(), // 打印时间
productionLineCode: item.productionLineCode, //生产线 // productionLineCode: item.productionLineCode, //生产线
barcodeString: item.barcodeString, // 标签信息 // barcodeString: item.barcodeString, // 标签信息
barcodeBase64: '', // barcodeBase64: '',
}) // })
}) // })
this.showCommitSuccessMessage("提交成功\n生成拆标签记录\n", list) this.showCommitSuccessMessage("提交成功\n生成拆标签记录\n", res.data)
} else { } else {
this.showErrorMessage("提交失败[" + res.msg + "]") this.showErrorMessage("提交失败[" + res.msg + "]")
@ -363,7 +363,7 @@
this.clearData(); this.clearData();
if (pointData.length > 0) { if (pointData.length > 0) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/point/index?points=${JSON.stringify(pointData)}` url: `/pages/pointSplitLabel/index?points=${JSON.stringify(pointData)}`
}); });
} }
}) })

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

@ -1,73 +1,156 @@
<template> <template>
<view class="content" style="padding:30rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);"> <view class="content" style="padding:0 0 100rpx;min-height: calc(100vh - 120rpx);overflow-x: scroll;">
<!-- 只用于展示页面 --> <view class="jm-print-pageContent" style="min-height:1123px;position:relative;">
<view class="box" v-for="(item,index) in data" :key='index' style="margin-bottom: 20rpx;"> <table v-for="(item,index) in data" class="jm-print-table" cellpadding="0" cellspacing="0"
<view class="left"> style="border-collapse: collapse; table-layout: fixed; width: 791px;">
<view class="left-item"> <tr class="hide-tr h25">
<view class="label bold-label">物品代码</view> <td style="width: 29px;"> </td>
<view class="value bold-font font-20" id="name1">{{item.itemCode}}</view> <td style="width: 144px;"> </td>
</view> <td style="width: 4px;"> </td>
<view class="left-item"> <td style="width: 97px;"> </td>
<view class="label">物品名称</view> <td style="width: 4px;"> </td>
<view class="value" id="name2">{{item.itemName}}</view> <td style="width: 94px;"> </td>
</view> <td style="width: 44px;"> </td>
<view class="left-item"> <td style="width: 4px;"> </td>
<view class="label">包装名称</view> <td style="width: 134px;"> </td>
<view class="value">{{item.packName}}</view> <td style="width: 4px;"> </td>
</view> <td style="width: 125px;"> </td>
<view class="left-item"> <td style="width: 36px;"> </td>
<view class="label">包装号</view> </tr>
<view class="value">{{item.packageCode}}</view> <tr class="h35">
</view> <td class="jm-print-default"></td>
<view class="left-item" v-if="item.productionLineCode&&item.productionLineCode.length>0"> <td class="jm-print-26 border-left border-top border-right">{{item.supplierName}}</td>
<view class="label">生产线</view> <td class="jm-print-330">&nbsp;</td>
<view class="value">{{item.productionLineCode}}</view> <td class="jm-print-329 border-left border-top border-right">受入地</td>
</view> <td class="jm-print-330">&nbsp;</td>
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> <td class="jm-print-329 border-left border-top border-right" colspan="2" style="width: 150px;">纳入便次</td>
<view class="label bold-label">父包装号</view> <td class="jm-print-330">&nbsp;</td>
<view class="value bold-font font-20">{{item.parentNumber}}</view> <td class="jm-print-331 border-left border-top border-right">{{item.orderTitle}}</td>
</view> <td class="jm-print-277">&nbsp;</td>
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> <td class="jm-print-335 border-left border-top border-right">天津英泰</td>
<view class="label">ASN</view> <td class="jm-print-default"></td>
<view class="value">{{item.asnNumber}}</view> </tr>
</view> <tr class="h30">
<view class="left-item"> <td class="jm-print-default"></td>
<view class="label bold-label">数量</view> <td class="jm-print-326 border-left border-bottom border-right">{{item.supplierCode}}</td>
<view class="value bold-font font-20">{{item.qty}}</view> <td class="jm-print-328">&nbsp;</td>
</view> <td class="jm-print-326 border-left border-bottom border-right">{{item.receivedLocation}}</td>
<view class="left-item" v-if="item.fromLocationCode"> <td class="jm-print-325">&nbsp;</td>
<view class="label ">来源库位</view> <td class="jm-print-367 border-left border-bottom">{{item.deliveryDateView}}</td>
<view class="value ">{{item.fromLocationCode}}</view> <td class="jm-print-359 border-bottom border-right">{{item.stoolTime}}</td>
</view> <td class="jm-print-333">&nbsp;</td>
<td class="jm-print-334 border-left border-bottom border-right">{{item.asnNumber}}</td>
</view> <td class="jm-print-277">&nbsp;</td>
<view class="right"> <td class="jm-print-336 border-left border-bottom border-right">TB INTEX</td>
<view class="image"> <td class="jm-print-default"></td>
</tr>
<tr class="h10">
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
</tr>
<tr class="h30">
<td class="jm-print-default"></td>
<td class="jm-print-337 border-left border-top border-right" colspan="3" style="width: 263px;">背番</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-368 border-left border-top border-bottom border-right" rowspan="4" rc="1-4-5" colspan="2"
style="height: 150px; width: 150px; padding: 2px;padding-top: 10rpx;">
<l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success($event,item)" :value="item.barcodeString" <l-qrcode ref="qrcodeRef" useCanvasToTempFilePath @success="success($event,item)" :value="item.barcodeString"
size="300rpx"></l-qrcode> size="270rpx" ></l-qrcode>
</view> </td>
<view class="left-item"> <td class="jm-print-330">&nbsp;</td>
<view class="label">批次</view> <td class="jm-print-337 border-left border-top border-right">看板编号</td>
<view class="value">{{item.batch}}</view> <td class="jm-print-330">&nbsp;</td>
</view> <td class="jm-print-337 border-left border-top border-right">收容数</td>
<view class="left-item"> <td class="jm-print-default"></td>
<view class="label">物料类型</view> </tr>
<view class="value">{{item.itemType}}</view> <tr class="h45">
</view> <td class="jm-print-default"></td>
<view class="left-item" v-if="!(item.productionLineCode&&item.productionLineCode.length>0)"> <td class="jm-print-288 border-left border-bottom border-right" rowspan="3" rc="1-5-1" colspan="3"
<view class="label">供应商</view> style="height: 120px; width: 263px;">&nbsp;</td>
<view class="value">{{item.supplierCode}}</view> <td class="jm-print-default"></td>
</view> <td class="jm-print-default"></td>
<view class="left-item"> <td class="jm-print-339 border-left border-right">{{item.relateNumber}}</td>
<view class="label">打印时间</view> <td class="jm-print-default"></td>
<view class="value">{{item.printTimes}}</view> <td class="jm-print-362 border-left border-right">{{item.conversionQty}}</td>
</view> <td class="jm-print-default"></td>
<view class="left-item" v-if="item.fromLocationCode"> </tr>
<view class="label bold-label"></view> <tr class="h30">
<view class="value bold-font font-20"></view> <td class="jm-print-default"></td>
</view> <td class="jm-print-default"></td>
</view> <td class="jm-print-default"></td>
</view> <td class="jm-print-340 border-left border-right">{{item.title}}</td>
<td class="jm-print-default"></td>
<td class="jm-print-340 border-left border-right">换算收容数</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h45">
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-341 border-left border-bottom border-right">{{item.productionLine}}</td>
<td class="jm-print-default"></td>
<td class="jm-print-364 border-left border-bottom border-right">{{item.qtyString}}</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h10">
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
</tr>
<tr class="h25">
<td class="jm-print-default"></td>
<td class="jm-print-337 border-left border-top border-right" colspan="3" style="width: 263px;">品番</td>
<td class="jm-print-333">&nbsp;</td>
<td class="jm-print-337 border-left border-top border-right" colspan="2" style="width: 150px;">受入号</td>
<td class="jm-print-333">&nbsp;</td>
<td class="jm-print-337 border-left border-top border-right">库位</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-343 border-left border-top border-bottom border-right" rowspan="3" rc="1-9-10" style="height: 85px; width: 131px;">{{item.itemStatus}}</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h34">
<td class="jm-print-default"></td>
<td class="jm-print-345 border-left border-right" colspan="3" style="width: 263px;">{{item.itemCode}}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-313 border-left border-bottom border-right" rowspan="2" rc="1-10-5" colspan="2"
style="height: 63px; width: 150px;">{{item.receivedNumber}}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-315 border-left border-bottom border-right" rowspan="2" rc="1-10-8" style="height: 63px; width: 140px;">{{item.defaultReceivingArea}}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h29">
<td class="jm-print-default"></td>
<td class="jm-print-47 border-left border-bottom border-right" colspan="3" style="width: 263px;">{{item.itemDesc}}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h20">
<td class="jm-print-default border-dashed" colspan="12" style="width: 791px;">&nbsp;</td>
</tr>
</table>
</view>
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;" v-show="isLoadFinish"> <view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;" v-show="isLoadFinish">
<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>
@ -78,7 +161,7 @@
<script> <script>
// 打印页面的模板 // 打印页面的模板
const htmlFileUrl = '/hybrid/html/pointReceipt.html'; const htmlFileUrl = '/hybrid/html/pointCG.html';
import { import {
pathToBase64 pathToBase64
} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名 } from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
@ -122,86 +205,170 @@
// #endif // #endif
}, },
setHtmlData() { setHtmlData() {
let str = '' let str = `<div style="min-height: 1123px; overflow-x: hidden; width: 794px; text-align: center; position: relative;">
<div class="jm-print-pageContent" style="min-height:1123px;position:relative;">`
this.readFile(htmlFileUrl, (htmlContent) => { this.readFile(htmlFileUrl, (htmlContent) => {
this.newHtmlContent = htmlContent this.newHtmlContent = htmlContent
this.data.forEach(item => { this.data.forEach(item => {
str += ` str += `
<table border="1.5" cellpadding="0" cellspacing="0" <table class="jm-print-table" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; table-layout: fixed; width: 1015px;"> style="border-collapse: collapse; table-layout: fixed; width: 791px;">
<thead> <tr class="hide-tr h25">
<tr> <td style="width: 29px;"> </td>
<td>哈哈哈哈哈</td> <td style="width: 144px;"> </td>
</tr> <td style="width: 4px;"> </td>
</thead> <td style="width: 97px;"> </td>
<tbody> <td style="width: 4px;"> </td>
<tr class="hide-tr"> <td style="width: 94px;"> </td>
<td class="jm-print-30 jm-title left-width" style="height:0"> <td style="width: 44px;"> </td>
</td> <td style="width: 4px;"> </td>
<td class="jm-content font-bold-48" style="height: 0; width: 485px; "> <td style="width: 134px;"> </td>
</td> <td style="width: 4px;"> </td>
<td class="jm-title width-148" style="height: 0; width:148px;"> <td style="width: 125px;"> </td>
</td> <td style="width: 36px;"> </td>
<td class="jm-title" style="height: 0; width: 238px; "> </tr>
</td> <tr class="h35">
</tr> <td class="jm-print-default"></td>
<tr class="top-tr"> <td class="jm-print-26 border-left border-top border-right">${item.supplierName||''}</td>
<td class="jm-print-30 jm-title left-width" style="height: 130px; ">物品代码</td> <td class="jm-print-330">&nbsp;</td>
<td class="jm-content font-bold-48" style="height: 130px; width: 485px; line-height: 50px;"> <td class="jm-print-329 border-left border-top border-right">受入地</td>
${item.itemCode}</td> <td class="jm-print-330">&nbsp;</td>
<td class="jm-print-17" rowspan="3" colspan="2" style="height: 386px; width: 391px; padding: 2px;"> <td class="jm-print-329 border-left border-top border-right" colspan="2" style="width: 150px;">纳入便次</td>
<img width="391px" height="386px" alt="Scan me!" <td class="jm-print-330">&nbsp;</td>
<td class="jm-print-331 border-left border-top border-right">${item.orderTitle||''}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-335 border-left border-top border-right">天津英泰</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h30">
<td class="jm-print-default"></td>
<td class="jm-print-326 border-left border-bottom border-right">${item.supplierCode||''}</td>
<td class="jm-print-328">&nbsp;</td>
<td class="jm-print-326 border-left border-bottom border-right">${item.receivedLocation||''}</td>
<td class="jm-print-325">&nbsp;</td>
<td class="jm-print-367 border-left border-bottom">${item.deliveryDateView||''}</td>
<td class="jm-print-359 border-bottom border-right">${item.stoolTime||''}</td>
<td class="jm-print-333">&nbsp;</td>
<td class="jm-print-334 border-left border-bottom border-right">${item.asnNumber||''}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-336 border-left border-bottom border-right">TB INTEX</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h10">
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
</tr>
<tr class="h30">
<td class="jm-print-default"></td>
<td class="jm-print-337 border-left border-top border-right" colspan="3" style="width: 263px;">背番</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-368 border-left border-top border-bottom border-right" rowspan="4" rc="1-4-5" colspan="2"
style="height: 150px; width: 150px; padding: 2px;padding-top: 10rpx;">
<div class="jm-print-qrcode"
title="${item.barcodeString}"
style="padding: 0px; border: none;"><canvas width="146" height="146"
style="display: none;"></canvas><img alt="Scan me!" width="146" height="146"
src="${item.barcodeBase64}" src="${item.barcodeBase64}"
style="display: block; margin: 0 auto;"> style="display: block;"></div>
</td> </td>
</tr> <td class="jm-print-330">&nbsp;</td>
<tr> <td class="jm-print-337 border-left border-top border-right">看板编号</td>
<td class="jm-print-30 jm-title left-width" style="height: 130px; ">物品名称</td> <td class="jm-print-330">&nbsp;</td>
<td class="jm-content font-bold-56" style="height: 130px; width: 485px; line-height: 58px;"> <td class="jm-print-337 border-left border-top border-right">收容数</td>
${item.itemName}</td> <td class="jm-print-default"></td>
</tr> </tr>
<tr class="h45">
<tr> <td class="jm-print-default"></td>
<td class="jm-print-30 jm-title left-width" style="height: 130px;">包装名称</td> <td class="jm-print-288 border-left border-bottom border-right" rowspan="3" rc="1-5-1" colspan="3"
<td class="jm-content font-bold-48" style="height: 130px; width: 485px; line-height: 50px;"> style="height: 120px; width: 263px;">&nbsp;</td>
${item.packName}</td> <td class="jm-print-default"></td>
</tr> <td class="jm-print-default"></td>
<td class="jm-print-339 border-left border-right">${item.relateNumber||''}</td>
<tr> <td class="jm-print-default"></td>
<td class="jm-title left-width" style="height: 90px; line-height: 26px;"> <td class="jm-print-362 border-left border-right">${item.conversionQty||''}</td>
包装号</td> <td class="jm-print-default"></td>
<td class="jm-content font29" style="height: 90px; width: 485px; line-height: 31px;"> </tr>
${item.packageCode}</td> <tr class="h30">
<td class="jm-title width-148" style="height: 90px; line-height: 26px;"> <td class="jm-print-default"></td>
批次</td> <td class="jm-print-default"></td>
<td class="jm-content font29" style="height: 90px; width: 238px; line-height: 31px;"> <td class="jm-print-default"></td>
${item.batch}</td> <td class="jm-print-340 border-left border-right">${item.title||''}</td>
</tr> <td class="jm-print-default"></td>
<tr> <td class="jm-print-340 border-left border-right">换算收容数</td>
<td class="jm-title left-width" style="height: 85px; line-height: 50px;"> <td class="jm-print-default"></td>
生产线</td> </tr>
<td class="jm-content font29" style="height: 85px; width: 485px; line-height: 50px;"> <tr class="h45">
${item.productionLineCode}</td> <td class="jm-print-default"></td>
<td class="jm-title width-148" style="height: 85px; line-height: 50px;"> <td class="jm-print-default"></td>
物品类型</td> <td class="jm-print-default"></td>
<td class="jm-content font29" style="height: 85px; width: 238px; line-height: 50px;"> <td class="jm-print-341 border-left border-bottom border-right">${item.productionLine||''}</td>
${item.itemType}</td> <td class="jm-print-default"></td>
</tr> <td class="jm-print-364 border-left border-bottom border-right">${item.qtyString||''}</td>
<tr> <td class="jm-print-default"></td>
<td class="jm-title jm-print-30 left-width" style="height: 85px; line-height: 35px;"> </tr>
数量</td> <tr class="h10">
<td class="jm-content font-bold-56" style="height: 85px; width: 485px; line-height: 35px;"> <td class="jm-print-default"></td>
${item.qty}</td> <td class="jm-print-default"></td>
<td class="jm-title width-148" style="height: 85px; line-height: 35px;width:148px !important;"> <td class="jm-print-default"></td>
打印时间</td> <td class="jm-print-default"></td>
<td class="jm-title" style="height: 85px; width: 238px; line-height: 35px;"> <td class="jm-print-default"></td>
${item.printTimes}</td> <td class="jm-print-default"></td>
</tr> <td class="jm-print-default"></td>
</tbody> <td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
</tr>
<tr class="h25">
<td class="jm-print-default"></td>
<td class="jm-print-337 border-left border-top border-right" colspan="3" style="width: 263px;">品番</td>
<td class="jm-print-333">&nbsp;</td>
<td class="jm-print-337 border-left border-top border-right" colspan="2" style="width: 150px;">受入号</td>
<td class="jm-print-333">&nbsp;</td>
<td class="jm-print-337 border-left border-top border-right">库位</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-343 border-left border-top border-bottom border-right" rowspan="3" rc="1-9-10" style="height: 85px; width: 131px;">${item.itemStatus||''}</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h34">
<td class="jm-print-default"></td>
<td class="jm-print-345 border-left border-right" colspan="3" style="width: 263px;">${item.itemCode||''}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-313 border-left border-bottom border-right" rowspan="2" rc="1-10-5" colspan="2"
style="height: 63px; width: 150px;">${item.receivedNumber||''}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-315 border-left border-bottom border-right" rowspan="2" rc="1-10-8" style="height: 63px; width: 140px;">${item.defaultReceivingArea||''}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h29">
<td class="jm-print-default"></td>
<td class="jm-print-47 border-left border-bottom border-right" colspan="3" style="width: 263px;">${item.itemDesc||''}</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-277">&nbsp;</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h20">
<td class="jm-print-default border-dashed" colspan="12" style="width: 791px;">&nbsp;</td>
</tr>
</table> </table>
` `
}) })
str += `</div>
</div>`
console.log('str',str) console.log('str',str)
this.newHtmlContent = this.newHtmlContent.replace( this.newHtmlContent = this.newHtmlContent.replace(
"mainBody", str); //替换物品代码 "mainBody", str); //替换物品代码
@ -252,7 +419,7 @@
if (option.points) { if (option.points) {
this.originData = JSON.parse(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.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 this.data = this.originData
}, },
@ -328,4 +495,354 @@
height: calc(100% - 4px); height: calc(100% - 4px);
margin: 4rpx; margin: 4rpx;
} }
</style>
<style scoped>
table {
display: table;
/* border-collapse: separate; */
box-sizing: border-box;
text-indent: initial;
unicode-bidi: isolate;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
/* border-spacing: 2px; */
border-color: gray;
white-space: normal;
font-variant: normal;
}
tr {
display: table-row;
/* vertical-align: inherit; */
unicode-bidi: isolate;
border-color: inherit;
}
td {
display: table-cell;
vertical-align: inherit;
unicode-bidi: isolate;
}
table > tr {
vertical-align: middle;
}
.jm-print-pageContent {
page-break-after: always;
width: fit-content;
}
.jm-print-table td {
padding-right: 2px;
padding-left: 3px;
}
.h35 td {
height: 35px;
}
.h30 td {
height: 30px;
}
.h45 td {
height: 45px;
}
.h10 td {
height: 10px;
}
.h25 td {
height: 25px;
}
.h34 td {
height: 34px;
}
.h29 td {
height: 29px;
}
.h20 td {
height: 20px;
}
.border-left{
border-left: 1.5px solid #000;
}
.border-top{
border-top: 1.5px solid #000;
}
.border-right{
border-right: 1.5px solid #000;
}
.border-bottom{
border-bottom: 1.5px solid #000;
}
.jm-print-26 {
font: bold 16px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-330 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-329 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-331 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-277 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-335 {
font: bold 18px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-326 {
font: bold 15px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-328 {
font: bold 15px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-325 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-367 {
font: bold 15px Helvetica;
color: #0a0a0a;
text-align: right;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-359 {
font: bold 18px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-333 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-334 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-277 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-336 {
font: italic bold 18px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-337 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-368 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-288 {
font: bold 56px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-339 {
font: bold 29px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-362 {
font: bold 34px Helvetica;
color: #0a0a0a;
text-align: right;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-340 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-341 {
font: bold 21px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-364 {
font: bold 24px Helvetica;
color: #0a0a0a;
text-align: right;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-333 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-277 {
font: bold 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-343 {
font: bold 29px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-345 {
font: bold 21px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
}
.jm-print-313 {
font: bold 34px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-315 {
font: bold 32px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.jm-print-47 {
font: bold 16px Helvetica;
color: #0a0a0a;
text-align: center;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
.border-dashed{
border-bottom:1.5px dashed #000;
}
.jm-print-default {
font: 13px Helvetica;
color: #0a0a0a;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
}
</style> </style>
Write Preview
Loading…
Cancel
Save