print/templates/reports/expedition-pallet-label/assets/css/style.css

@@ -17,7 +17,6 @@ html {
 }
 .mainTable {
 	width: 100%;
-	height: 100%;
 	border: 10px solid;
 	border-radius: 20px;
 	-moz-border-radius: 20px;
@@ -54,8 +53,17 @@ html {
 }
 #QR {
 	padding: 25px;
-	padding-left: 40px;
+	margin-left: 35px;
+	float:left;
+}
+#barcode{
+	text-align: center;
+}
+#right {
+	float: right;
 	margin-top: 20px;
+	width: 250;
+	max-width: 250px;
 }
 #additionalInfo {
 	padding-top: 20px;

print/templates/reports/expedition-pallet-label/expedition-pallet-label.html

@@ -4,10 +4,11 @@
         <table class="mainTable">
             <tbody>
                 <tr>
-                    <td colspan="2" id="truck" class="ellipsize">{{labelData.truck || '---'}}</td>
+                    <td id="truck" class="ellipsize">{{labelData.truck || '---'}}</td>
                 </tr>
                 <tr>
-                    <td colspan="2">
+                    <td>
+                        <div v-html="getBarcode(labelData.palletFk)" id="barcode"></div>
                         <table v-for="labelData in labelsData" class="zoneTable">
                             <thead>
                                 <tr v-if="!labelData.isMatch" id="black">
@@ -25,11 +26,13 @@
                     </td>
                 </tr>
                 <tr>
-                    <td><img :src="QR" id="QR"/></td>
+                    <td>
-                    <td class="ellipsize">
+                        <img :src="QR" id="QR"/>
-                        <div id="additionalInfo"><b>Pallet: </b>{{id}}</div>
+                        <div id="right">
-                        <div id="additionalInfo"><b>User: </b> {{username.name || '---'}}</div>
+                            <div id="additionalInfo" class="ellipsize"><b>Pallet: </b>{{id}}</div>
-                        <div id="additionalInfo"><b>Day: </b>{{labelData.dayName.toUpperCase() || '---'}}</div>
+                            <div id="additionalInfo" class="ellipsize"><b>User: </b> {{username.name || '---'}}</div>
+                            <div id="additionalInfo" class="ellipsize"><b>Day: </b>{{labelData.dayName.toUpperCase() || '---'}}</div>
+                        </div>
                     </td>
                 </tr>
             </tbody>

print/templates/reports/expedition-pallet-label/expedition-pallet-label.js

@@ -1,5 +1,7 @@
 const Component = require(`vn-print/core/component`);
 const reportBody = new Component('report-body');
+const jsBarcode = require('jsbarcode');
+const {DOMImplementation, XMLSerializer} = require('xmldom');
 const UserError = require('vn-loopback/util/user-error');
 const qrcode = require('qrcode');
 
@@ -39,6 +41,20 @@ module.exports = {
             const data = String(id);
             return qrcode.toDataURL(data, {margin: 0});
         },
+        getBarcode(id) {
+            const xmlSerializer = new XMLSerializer();
+            const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null);
+            const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+
+            jsBarcode(svgNode, id, {
+                xmlDocument: document,
+                format: 'code128',
+                displayValue: false,
+                width: 6,
+                height: 90,
+            });
+            return xmlSerializer.serializeToString(svgNode);
+        },
     },
     components: {
         'report-body': reportBody.build()

print/templates/reports/expedition-pallet-label/options.json

@@ -2,8 +2,8 @@
     "width": "10cm",
     "height": "15cm",
     "margin": {
-        "top": "0.5cm",
+        "top": "0.3cm",
-        "right": "0.2cm",
+        "right": "0.07cm",
         "bottom": "0cm",
         "left": "0cm"
     },