【新增】temu标签组件

src/components/print/Print.vue

@@ -210,7 +210,7 @@
         // eslint-disable-next-line no-undef
         $('#hiprint-printTemplate').empty()
         this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
-          template: template,
+          template: {},
           settingContainer: '#PrintElementOptionSetting',
           fields: [{
             field: 'html',
@@ -281,8 +281,9 @@
 
       elementToString(el) {
         const node = document.createElement('div')
-        node.appendChild(el)
+        node.innerHTML = el.html()
 
+        document.querySelector('body').appendChild(node)
         return node.innerHTML
       },
 
@@ -295,6 +296,7 @@
 
       getHtml() {
         const list = this.labels
+        console.log(printData)
         this.html = this.elementToString(this.hiprintTemplate.getHtml(printData))
 
         console.log(this.html)
@@ -316,6 +318,12 @@
   .print {
     height: 100%;
 
+    .temuBarCode {
+      display: flex;
+      flex-direction: column;
+      padding: 1pt 3pt;
+    }
+
     .print-wrapper {
       display: flex;
       height: calc(100vh - 180px);

src/components/print/customProvider.js

@@ -11,16 +11,22 @@ export const customProvider = function (options) {
           type: 'html',
           formatter: function (title, options, templateData) {
             console.log(options, templateData)
+            var elId = 'barCode-' + new Date().getTime()
+            $('body').append('<svg id="' + elId + '" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>')
 
-            setTimeout(() => {
-              // eslint-disable-next-line no-undef
-              JsBarcode("#barcode", "1234567890", {
-                format: "code128", // 条形码类型
-                width: 2, // 条的宽度
-                height: 50, // 条形码的高度
-              });
+            console.log(options.width * 0.8)
+            JsBarcode('#'+ elId, '1234567890', {
+              format: "code128",
+              width: 2,
+              height: options.height * 0.6,
+              margin: 0,
+              displayValue: false
             })
-            return `
+
+            const codeHtml = $(`#${elId}`).html()
+            $(`#${elId}`).remove()
+
+            var html = `
               <div class="temuBarCode">
                 <div class="temuBarCode-top">
                   <div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
@@ -28,7 +34,9 @@ export const customProvider = function (options) {
                 </div>
                 <div class="temuBarCode-middle">
                   <div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code">
-                    <svg id="barcode"></svg>
+                    <svg id="${elId}" style="display: block; width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice">
+                      ${codeHtml}
+                    </svg>
                   </div>
                 </div>
                 <div class="temuBarCode-bottom">
@@ -37,6 +45,7 @@ export const customProvider = function (options) {
                 </div>
               </div>
             `
+            return html
           },
           options: {
             width: 316,