定制标签打印页面添加

src/views/mes/pro/qrcodeRecord/index.vue

@@ -161,15 +161,21 @@
               </el-col> -->
             <el-col :span="1.5">
               <el-button
-                type="warning"
-                plain
-                icon="el-icon-print"
-                size="mini"
-                @click="printQrCode"
-                v-hasPermi="['pro:qrcodeRecord:print']"
-                >{{ $t('打印') }}</el-button
+                  type="warning"
+                  plain
+                  icon="el-icon-print"
+                  size="mini"
+                  @click="printQrCode"
+                  v-hasPermi="['pro:qrcodeRecord:print']"
+              >{{ $t('打印') }}</el-button
               >
             </el-col>
+            <el-col :span="1.5">
+              <el-button type="warning" plain size="mini" v-print="printContent" id="printbtn" style="display: none"
+              >{{$t('打印T1')}}</el-button>
+              <el-button type="warning" plain size="mini" style="margin-left: 0;" icon="el-icon-printer" ref="printbtn" @click="handlePrint" :loading="printloading"
+              >{{$t('打印T1')}}</el-button>
+            </el-col>
             <right-toolbar
               :showSearch.sync="showSearch"
               @queryTable="getList"
@@ -303,12 +309,22 @@
         }}</el-button>
       </div>
     </el-dialog>
+
+    <div style="overflow: hidden;width: 0;height: 0;">
+      <div id="tesla1Template">
+        <div v-for="(item, index) in printData" :key="'tesla1' + index">
+          <tesla1 :templateData="item"></tesla1>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
-  
+
   <script>
 import { workorderList } from '@/api/mes/pro/packageLablePrint'
 import templatePrint from '@/views/mes/report/index'
+import tesla1 from "./template/tesla1.vue";
+import print from 'vue-print-nb';
 
 import {
   listQrcodeRecord,
@@ -319,9 +335,13 @@ import {
   editList
 } from '@/api/mes/pro/qrcodeRecord'
 import { postBatchPrintPdf }  from '@/utils/ruoyi'
+import printTable from "../request/components/printTable.vue";
 export default {
+  directives: { print },
   name: 'QrcodeRecord',
   components: {
+    printTable,
+    tesla1,
     templatePrint
   },
   data() {
@@ -346,8 +366,30 @@ export default {
       total: 0,
       // 产品序列号打印记录表格数据
       qrcodeRecordList: [],
+      printData:[],
       // 弹出层标题
       title: '',
+      printloading: false,
+      printContent: {
+        id: 'tesla1Template',
+        // preview: true, // 预览工具是否启用
+        // previewTitle: '储能服务费结算单', // 预览页面的标题
+        popTitle: '', // 打印页面的页眉
+        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
+        previewBeforeOpenCallback() {
+        },
+        previewOpenCallback() {},
+        beforeOpenCallback(vue) {
+          // vue.printLoading = true;
+        },
+        openCallback(vue) {
+          vue.printloading = false;
+        },
+        closeCallback() {},
+        clickMounted(vue) {
+          console.log('clickMounted')
+        },
+      },
       // 是否显示弹出层
       open: false,
       queryWorkParams: {
@@ -363,7 +405,6 @@ export default {
         workOrderId: null,
         workOrderNo: null,
         printTime: null,
-        qrcode: null,
         clientCode: null,
         clientName: null,
         itemDesc: null,
@@ -398,7 +439,6 @@ export default {
         itemCode: null,
         workOrderId: null,
         printTime: null,
-        qrcode: null,
         clientCode: null,
         clientName: null,
         itemDesc: null,
@@ -414,7 +454,16 @@ export default {
       this.printVisible = false
       this.printQrCode()
     },
-    handlePrint() {},
+    handlePrint() {
+      this.printloading = true;
+      this.printData=[];
+      this.selectRow.forEach((s, i) => {
+        this.printData.push(s);
+      });
+      this.$nextTick(() => {
+        document.getElementById('printbtn').click()
+      })
+    },
     printQrCode() {
       const promise = []
       let detail = []
@@ -583,4 +632,3 @@ export default {
   },
 }
 </script>
-  
\ No newline at end of file

src/views/mes/pro/qrcodeRecord/template/tesla1.vue

+<template>
+  <div class="productOrderSpecification">
+      <div class="titles1" >
+        <div class="cdbh">PartNo:IF2024079822</div>
+        <div class="cdbh">S/N:9222431790000023</div>
+        <div class="cdbh">Part Name:</div>
+        <div class="cdbh1">1753525-00-F.1-SH</div>
+      </div>
+      <div class="titles" style="">
+        <div id="qrCode" ref="qrCodeDiv"></div>
+      </div>
+      <div style="page-break-after:always"></div>
+  </div>
+</template>
+
+<script>
+
+
+import dayjs from 'dayjs'
+import VueBarcode from 'vue-barcode'
+import QRCode from "qrcodejs2";
+export default {
+  components: { VueBarcode },
+  props: ['templateData'],
+  dicts: ['pro_requisition_type'],
+  data() {
+    return {
+      date: dayjs().format('YYYY-MM-DD'),
+      mytable: {
+  }
+    }
+  },
+  mounted() {
+    if (this.$refs.qrCodeDiv) {
+      this.$refs.qrCodeDiv.innerHTML = '';
+    }
+    new QRCode(this.$refs.qrCodeDiv, {
+      text: "1234", // 需要转换为二维码的内容
+      width: 37, //宽度
+      height: 37, //高度
+      colorDark: '#000000', //二维码方块颜色
+      colorLight: '#ffffff', //背景颜色
+      correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
+    });
+  },
+  computed: {
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.productOrderSpecification{
+  font-family: "Angsana New",serif;
+  margin: 0;
+  position: relative;
+  width: 35.6mm;
+  height: 12.7mm;
+  padding: 2px 0 0 4px;
+  font-size: 8px;
+  font-weight: bold;
+  color: black;
+}
+@media print {
+  @page {
+    size: 35.6mm 12.7mm;
+    margin: 0; /* 设置上下左右页边距都为1厘米，可根据需求调整具体数值 */
+  }
+  #print-content {
+    background-color: white; /* 通常将背景设为白色，避免打印出不必要的背景色等 */
+  }
+}
+
+.cdbh{
+  height: 8px;
+}
+.titles{
+  float: left;
+  padding-top: 1mm;
+}
+.titles1{
+  float: left;
+  width: 24mm;
+}
+
+[text-center]{
+  text-align: center;
+}
+.text-left {
+  text-align: left !important;
+}
+.color000{
+  color: #000;
+  font-weight: 400 !important;
+  td {
+    word-wrap:break-word;
+    word-break:break-all
+  }
+}
+</style>
+