备品备件二维码打印

src/views/device/sparePartsLedger/index.vue

@@ -135,6 +135,22 @@
           >
         </div>
       </el-col>
+
+      <el-col :span="1.5">
+        <div>
+          <el-button
+            type="primary"
+            plain
+            size="mini"
+            :disabled="single"
+            @click="showPrint"
+            v-hasPermi="['device:sparePartsLedger:print']"
+          >
+            <svg-icon icon-class="print" />
+            打印
+          </el-button>
+        </div>
+      </el-col>
       <right-toolbar
         :showSearch.sync="showSearch"
         @queryTable="getList"
@@ -341,6 +357,20 @@
       @pagination="getList"
     />
 
+    <el-dialog :title="printTitle" :visible.sync="printOpen" width="500px" append-to-body>
+      <div class="center-content" id="printFrom">
+        <canvas ref="qrCanvas"></canvas>
+        <ul class="no-bullets">
+          <li class="material-info">{{printData.materialCode}}</li>
+          <li class="material-info">{{printData.materialDesc}}</li>
+        </ul>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handlePrint(printData)">确 定</el-button>
+      </div>
+    </el-dialog>
+
+
     <!-- 添加或修改备品备件台账管理对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
@@ -729,6 +759,7 @@ import {
   updateSparePartsLedger,
 } from "@/api/device/sparePartsLedger";
 import { getToken } from "@/utils/auth";
+import QRCode from 'qrcode';
 
 export default {
   name: "SparePartsLedger",
@@ -753,7 +784,7 @@ export default {
         url:
           process.env.VUE_APP_BASE_API + "/device/sparePartsLedger/importFile",
       },
-
+      selectedRow: null,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -770,8 +801,25 @@ export default {
       sparePartsLedgerList: [],
       // 弹出层标题
       title: "",
+      //打印弹出层标题
+      printTitle:"",
       // 是否显示弹出层
       open: false,
+      //是否显示打印弹出层
+      printOpen: false,
+      // 打印
+      printData: {
+        printable: 'printFrom',
+        ignore: ['no-print'],
+        workCenter: "暂无数据",
+        SAPNo: null,
+        manufacture: null,
+        auditor: null,
+        printDate: null,
+        factory: null,
+        productDate: null,
+        workTable: [],
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -853,6 +901,7 @@ export default {
       },
     };
   },
+
   created() {
     this.getList();
   },
@@ -1012,6 +1061,43 @@ export default {
       );
     },
 
+
+    showPrint(row) {
+
+      const storageId = row.storageId || this.ids;
+      getSparePartsLedger(storageId).then((response) => {
+        this.reset();
+        this.printData = response.data;
+        this.printOpen = true;
+        // 使用 Vue 的 nextTick 来确保 DOM 已经更新
+        this.$nextTick(() => {
+          const canvas = this.$refs.qrCanvas;
+          const options = {
+            width: 200,  // 设定二维码的宽度
+            height: 200  // 设定二维码的高度
+          };
+          QRCode.toCanvas(canvas,response.data.materialCode, options, error => {
+            if (error) console.error(error);
+          });
+        });
+      });
+    },
+    // 打印
+    handlePrint(params) {
+      console.log(params)
+      printJS({
+        printable: params.printable || 'printFrom', // 标签元素id
+        type: params.type || 'html',
+        maxWidth: 1500, // 最大宽度
+        font_size: "",// 设置字体大小
+        header: params.header, // '表单',
+        targetStyles: ['*'],
+        style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾
+        ignoreElements: params.ignore || [], // ['no-print']
+        properties: params.properties || null
+      })
+    },
+
     // 导入-导入窗口打开
     handleImport() {
       this.upload.title = "设备信息导入";
@@ -1055,3 +1141,29 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.center-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.material-info {
+  font-size: 25px;
+  font-weight: bold;
+  line-height: 1.2;
+  padding: 2px 0;
+}
+.no-bullets {
+  list-style: none;
+  padding: 0;
+  text-align: center; /* 使 ul 中的所有 li 居中 */
+}
+@media print {
+  #printFrom{
+    font-family: "SimSun", "宋体" !important;
+    color: #000 !important;
+    font-size: 14pt !important; /* 调整字体大小 */
+  }
+}
+</style>