打印标签自定义组件新建

applications/dee-mes/src/privateComponents/components/printTagForConfig/index.vue

+<!--
+ * @Author: gjn
+ * @Date: 2023-08-22 09:48:21
+ * @Description:打印标签（配置界面使用）
+-->
+<!--
+  @prop config
+  @prop Number config.width 设置宽度 default = 300
+  @prop Array config.prints 打印的数据
+  @prop String config.prints[].QRcode 二维码
+  @prop String config.prints[].propertys 二维码下显示的属性
+  * 测试参数结构
+  config: {
+    width: 300,
+    prints: [
+      {
+        text: 'asdasdasd',
+        propertys: [
+          { label: '编码', value: '' },
+          { label: '名称', value: '' }
+        ]
+      },
+      {
+        text: 'asdasdasd',
+        propertys: [
+          { label: '编码', value: '' },
+          { label: '名称', value: '' }
+        ]
+      }
+    ]
+  }
+-->
+<template>
+  <section ref="print" class="print">
+    <section
+      v-for="(item, index) in config.prints || []"
+      :key="index"
+      :style="{ width: '19%' }"
+      class="item"
+    >
+      <header>
+        <vue-qr style="height:218px;" :size="config.width" :margin="0" :text="item.text.toString()" :qid="index.toString()" />
+      </header>
+      <footer>
+        <ul>
+          <li
+            v-for="property in item.propertys"
+            :key="property.label"
+          >
+            <p>{{ property.label }}</p>
+            <span>{{ property.value }}</span>
+          </li>
+        </ul>
+      </footer>
+    </section>
+  </section>
+</template>
+<script>
+import VueQr from 'vue-qr'
+export default {
+  name: 'PrintTagForConfig',
+  components: {
+    VueQr
+  },
+  props: {
+    selectionRows: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      flag: true,
+      config: {
+        width: 300,
+        prints: []
+      }
+    }
+  },
+  watch: {
+  },
+  beforeDestroy() {
+    this.timer = null
+  },
+  mounted() {
+  },
+  methods: {
+    eventFunc(params) {
+      this.tbPrintCode(this.selectionRows)
+    },
+    tbPrintCode(selectRows) {
+      const selection = selectRows
+      // 获取需要打印的数据
+      this.config.prints = []
+      selection.forEach((row) => {
+        this.config = Object.assign({}, this.config, {
+          visible: true
+        })
+        this.config.prints.push({
+          text: row.id,
+          propertys: [
+            { label: '编码', value: row.extMaterial.resCode },
+            { label: '名称', value: row.extMaterial.resName },
+            { label: '型号/牌号/件号', value: row.extMaterial.modelNo },
+            { label: '规格', value: row.extMaterial.spec },
+            { label: '批号', value: row.lotNo },
+            { label: '系列号/序列号', value: row.serialNo },
+            { label: '机型', value: row.airModel },
+            { label: '验收单号', value: row.inventory.testNo },
+            { label: '库位号', value: row.inventory.workunit || '' },
+            { label: '备注', value: row.remark || '' }
+          ]
+        })
+      })
+      this.print()
+    },
+    print() {
+      if (this.flag) {
+        this.flag = false
+        if (this.$refs.print.innerHTML) {
+          this.timer = setInterval(() => {
+            this.printTag()
+            clearInterval(this.timer)
+          }, 300)
+        }
+        setTimeout(() => {
+          this.flag = true
+        }, 1000)
+      }
+    },
+    printTag() {
+      var iframe = document.createElement('IFRAME')
+      var doc = null
+      iframe.setAttribute('style', 'position:absolute; width:0; height:0; margin-top: -1000px; margin-left: -1000px;')
+      document.body.appendChild(iframe)
+      doc = iframe.contentWindow.document
+      doc.write(`
+        <style>
+        ul, li {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+          font-size: 17px;
+        }
+        .item {
+          min-height:700px;
+        }
+        li {
+          position: relative;
+          width: 306px;
+          display: flex;
+          padding: 0 5px;
+          align-items: center;
+          border-left: 2px solid #222;
+          border-right: 2px solid #222;
+          border-bottom: 2px solid #222;
+        }
+        li::after{
+          content: '';
+          position: absolute;
+          left: calc(35% - 5px);
+          top: 0;
+          height: 100%;
+          border-left: 2px solid #222;
+          width: 0;
+        }
+        ul {
+          width: 320px;
+          border-top: 4px solid #222;
+        }
+        li p {
+          margin: 0;
+          width: 35%;
+          padding: 3.5px 0;
+        }
+        li span {
+          display: inline-block;
+          width: 65%;
+          text-align: left;
+          padding-left: 6px;
+        }
+        img {
+          width: 320px;
+          height:290px;
+          margin-bottom: 4px;
+        }
+        </style>
+        `)
+      doc.write(this.$refs.print.innerHTML)
+      doc.close()
+      iframe.contentWindow.focus()
+      iframe.contentWindow.print()
+    }
+  }
+}
+</script>
+  <style lang="scss" scoped>
+  .print {
+    position: absolute;
+    z-index: -999;
+    left: -1000px;
+    top: -1110px;
+  }
+  </style>