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

YT-2292拆标签的打印功能

intex
王宇飞 5 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
Split 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": "打印",
"enablePullDownRefresh": false
}
}, {
"path": "pages/pointSplitLabel/index",
"style": {
"navigationBarTitleText": "打印",
"enablePullDownRefresh": false
}
}, {
"path": "pages/pointProductReceipt/index",
"style": {

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

@ -270,26 +270,26 @@
uni.hideLoading()
if (res.data) {
let list = []
res.data.forEach(item => {
list.push({
itemCode: item.itemCode, // 物品代码
itemName: item.itemName, // 物品名称
packName: item.packName, // 包装名称
packageCode: item.toPackingNumber, // 包装号
batch: item.toBatch, //批次
parentNumber: item.parentNumber, //父包装号
itemType: item.itemType, //物料类型
asnNumber: item.asnNumber, //ASN
supplierCode: item.supplierCode, // 供应商
qty: item.qty, // 数量
printTimes: getCurrDateTime(), // 打印时间
productionLineCode: item.productionLineCode, //生产线
barcodeString: item.barcodeString, // 标签信息
barcodeBase64: '',
})
})
this.showCommitSuccessMessage("提交成功\n生成拆标签记录\n", list)
// let list = []
// res.data.forEach(item => {
// list.push({
// itemCode: item.itemCode, // 物品代码
// itemName: item.itemName, // 物品名称
// packName: item.packName, // 包装名称
// packageCode: item.toPackingNumber, // 包装号
// batch: item.toBatch, //批次
// parentNumber: item.parentNumber, //父包装号
// itemType: item.itemType, //物料类型
// asnNumber: item.asnNumber, //ASN
// supplierCode: item.supplierCode, // 供应商
// qty: item.qty, // 数量
// printTimes: getCurrDateTime(), // 打印时间
// productionLineCode: item.productionLineCode, //生产线
// barcodeString: item.barcodeString, // 标签信息
// barcodeBase64: '',
// })
// })
this.showCommitSuccessMessage("提交成功\n生成拆标签记录\n", res.data)
} else {
this.showErrorMessage("提交失败[" + res.msg + "]")
@ -363,7 +363,7 @@
this.clearData();
if (pointData.length > 0) {
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>
<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">
<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;">
<table v-for="(item,index) in data" class="jm-print-table" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; table-layout: fixed; width: 791px;">
<tr class="hide-tr h25">
<td style="width: 29px;"> </td>
<td style="width: 144px;"> </td>
<td style="width: 4px;"> </td>
<td style="width: 97px;"> </td>
<td style="width: 4px;"> </td>
<td style="width: 94px;"> </td>
<td style="width: 44px;"> </td>
<td style="width: 4px;"> </td>
<td style="width: 134px;"> </td>
<td style="width: 4px;"> </td>
<td style="width: 125px;"> </td>
<td style="width: 36px;"> </td>
</tr>
<tr class="h35">
<td class="jm-print-default"></td>
<td class="jm-print-26 border-left border-top border-right">{{item.supplierName}}</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-329 border-left border-top border-right">受入地</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-329 border-left border-top border-right" colspan="2" style="width: 150px;">纳入便次</td>
<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;">
<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>
size="270rpx" ></l-qrcode>
</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-337 border-left border-top border-right">看板编号</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-337 border-left border-top border-right">收容数</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h45">
<td class="jm-print-default"></td>
<td class="jm-print-288 border-left border-bottom border-right" rowspan="3" rc="1-5-1" colspan="3"
style="height: 120px; width: 263px;">&nbsp;</td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-339 border-left border-right">{{item.relateNumber}}</td>
<td class="jm-print-default"></td>
<td class="jm-print-362 border-left border-right">{{item.conversionQty}}</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h30">
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<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">
<button @click="printImage"
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button>
@ -78,7 +161,7 @@
<script>
// 打印页面的模板
const htmlFileUrl = '/hybrid/html/pointReceipt.html';
const htmlFileUrl = '/hybrid/html/pointCG.html';
import {
pathToBase64
} from "../../api/img-to-base64.js" //引入解压后的js文件，这里我重新命名了文件名
@ -122,86 +205,170 @@
// #endif
},
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.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!"
<table class="jm-print-table" cellpadding="0" cellspacing="0"
style="border-collapse: collapse; table-layout: fixed; width: 791px;">
<tr class="hide-tr h25">
<td style="width: 29px;"> </td>
<td style="width: 144px;"> </td>
<td style="width: 4px;"> </td>
<td style="width: 97px;"> </td>
<td style="width: 4px;"> </td>
<td style="width: 94px;"> </td>
<td style="width: 44px;"> </td>
<td style="width: 4px;"> </td>
<td style="width: 134px;"> </td>
<td style="width: 4px;"> </td>
<td style="width: 125px;"> </td>
<td style="width: 36px;"> </td>
</tr>
<tr class="h35">
<td class="jm-print-default"></td>
<td class="jm-print-26 border-left border-top border-right">${item.supplierName||''}</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-329 border-left border-top border-right">受入地</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-329 border-left border-top border-right" colspan="2" style="width: 150px;">纳入便次</td>
<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}"
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>
style="display: block;"></div>
</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-337 border-left border-top border-right">看板编号</td>
<td class="jm-print-330">&nbsp;</td>
<td class="jm-print-337 border-left border-top border-right">收容数</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h45">
<td class="jm-print-default"></td>
<td class="jm-print-288 border-left border-bottom border-right" rowspan="3" rc="1-5-1" colspan="3"
style="height: 120px; width: 263px;">&nbsp;</td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-339 border-left border-right">${item.relateNumber||''}</td>
<td class="jm-print-default"></td>
<td class="jm-print-362 border-left border-right">${item.conversionQty||''}</td>
<td class="jm-print-default"></td>
</tr>
<tr class="h30">
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<td class="jm-print-default"></td>
<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>
`
})
str += `</div>
</div>`
console.log('str',str)
this.newHtmlContent = this.newHtmlContent.replace(
"mainBody", str); //替换物品代码
@ -252,7 +419,7 @@
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.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
},
@ -328,4 +495,354 @@
height: calc(100% - 4px);
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>
Write Preview
Loading…
Cancel
Save