修改二维码生成

ruoyi-ui/package.json

@@ -44,10 +44,12 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-easy-print": "^0.0.8",
+    "vue-i18n": "7.3.2",
+    "vue-qr": "^4.0.9",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0",
+    "vuex": "3.6.0"
-    "vue-i18n": "7.3.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

ruoyi-ui/src/views/bas/traycode/index.vue

@@ -132,6 +132,7 @@
       @pagination="getList"
     />
 
+
     <!-- 添加或修改条码信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
@@ -164,17 +165,33 @@
         <el-button @click="cancel">{{ $t('traycode.cancel') }}</el-button>
       </div>
     </el-dialog>
+
+
+    <!-- 打印模板 -->
+    <vue-easy-print v-show="true" ref="easyPrint2">
+      <div v-for="item  in printData" :key="item.id" style="page-break-after:always" class="vue-easy-print">
+        <vue-qr :text='item.trayCode' :size="150" :margin="10" :align-item="center" :correctLevel="2"></vue-qr>
+         <div>
+          <span class="num">{{ item.trayCode }}</span>
+        </div>
+      </div>
+    </vue-easy-print>
   </div>
 </template>
 
 <script>
 import { listTraycode, getTraycode, delTraycode, addTraycode, updateTraycode } from "@/api/bas/traycode"
-import { getLodop } from "@/plugins/LodopFuncs"
+import { listTraycodeFormat } from "@/api/bas/traycodeFormat"
-import { listTraycodeFormat} from "@/api/bas/traycodeFormat"
+import vueEasyPrint from 'vue-easy-print'
+import VueQr from 'vue-qr'
 
 
 export default {
   name: "Traycode",
+  components: {
+    vueEasyPrint,
+    VueQr
+  },
   data() {
     return {
       // 设置标题
@@ -194,6 +211,7 @@ export default {
       // 条码信息表格数据
       traycodeList: [],
       traycodeFormatList: [],
+      printData:[],
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -335,45 +353,12 @@ export default {
     },
     /** 打印条码 */
     printBarcode: function (row) {
-      try {
+      this.printData = [row]
-        // 获取Lodop打印对象
+      this.$nextTick(() => {
-        let LODOP = getLodop()
+        setTimeout(() => {
-        if (!LODOP) {
+          this.$refs.easyPrint2.print()
-          this.$modal.msgError(this.$t('traycode.printControlError'))
+        }, 100)
-          return
+      })
-        }
-
-        LODOP.SET_SHOW_MODE("LANGUAGE", 0);
-        LODOP.PRINT_INITA(0, 0, 400, 300, this.$t('traycode.barcodePrint'));
-        LODOP.SET_PRINT_PAGESIZE(1, 400, 300, "");
-        LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", 1);
-
-        if (Array.isArray(row)) {
-          // 批量打印
-          row.forEach(item => {
-            LODOP.NewPage();
-            // 居中打印二维码
-            LODOP.ADD_PRINT_BARCODE(50, 140, 120, 120, "QRCode", item.trayCode);
-            // 在二维码下方显示条码文本
-            LODOP.ADD_PRINT_TEXT(180, 100, 200, 30, item.trayCode);
-            LODOP.SET_PRINT_STYLEA(0, "Alignment", 2); // 文字居中
-          });
-        } else {
-          // 单个打印
-          LODOP.NewPage();
-          // 居中打印二维码
-          LODOP.ADD_PRINT_BARCODE(50, 140, 120, 120, "QRCode", row.trayCode);
-          // 在二维码下方显示条码文本
-          LODOP.ADD_PRINT_TEXT(180, 100, 200, 30, row.trayCode);
-          LODOP.SET_PRINT_STYLEA(0, "Alignment", 2); // 文字居中
-        }
-
-        LODOP.PREVIEW();
-
-      } catch (error) {
-        console.error(this.$t('traycode.printFailed'), error)
-        this.$modal.msgError(this.$t('traycode.printError', { error: error.message }))
-      }
     },
     /** 批量打印按钮操作 */
     handleBatchPrint() {
@@ -382,8 +367,12 @@ export default {
         this.$modal.msgError(this.$t('traycode.selectPrintItems'));
         return;
       }
-      console.log(selection)
+      this.printData = selection;
-      this.printBarcode(selection);
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.$refs.easyPrint2.print()
+        }, 100)
+      });
     },
   }
 }
@@ -394,4 +383,47 @@ export default {
 .el-input {
   width: 100%;
 }
+
+/* 打印样式 */
+.vue-easy-print {
+  text-align: center;
+}
+
+.num {
+  display: block;
+  text-align: center;
+  font-size: 16px;
+  margin-top: 15px;
+  font-family: Arial, sans-serif;
+}
+
+.vue-qr {
+  display: block;
+  margin: 20px auto;
+  max-width: 100%;
+}
+
+@media print {
+  @page {
+    size: A4;
+    margin: 0;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  .vue-easy-print {
+    padding: 20px;
+  }
+
+  .num {
+    font-size: 14px;
+    margin-top: 10px;
+  }
+
+  .vue-qr {
+    margin: 10px auto;
+  }
+}
 </style>

ruoyi-ui/src/views/in/stockIn/index.vue

@@ -171,6 +171,16 @@
       :limit.sync="queryDetailParams.pageSize"
       @pagination="getDetailList"
     />
+
+    <!-- 打印模板 -->
+    <vue-easy-print v-show="true" ref="easyPrint2">
+      <div v-for="item  in printData" :key="item.stockinDetailId" style="page-break-after:always" class="vue-easy-print">
+        <vue-qr :text='item.stockinDetailId' :size="150" :margin="10" :align-item="center" :correctLevel="2"></vue-qr>
+        <div>
+          <span class="num">{{ item.stockinDetailId }}</span>
+        </div>
+      </div>
+    </vue-easy-print>
   </div>
 </template>
 
@@ -188,11 +198,18 @@ import {
 import {listStockInDetail, barcodePrinting} from "@/api/in/stockInDetail"
 import {getLodop} from "@/plugins/LodopFuncs.js"
 import {listWarehouse} from "@/api/bas/warehouse";
+import vueEasyPrint from 'vue-easy-print'
+import VueQr from 'vue-qr'
+
 
 
 export default {
   name: "StockIn",
   dicts: ['bill_resource', 'in_bill_status', 'in_bill_type'],
+  components: {
+    vueEasyPrint,
+    VueQr
+  },
   data() {
     return {
       // 遮罩层
@@ -205,6 +222,7 @@ export default {
       // 主表选中的数据
       stockInListSelected: [],
       stockInDetailListSelected: [],
+      printData:[],
       // 非单个禁用
       single: true,
       detailSingle: true,
@@ -401,50 +419,16 @@ export default {
     },
     /** 打印条码按钮操作 */
     handleBarcodePrinting(row){
-      let printData = this.stockInDetailListSelected
+      this.printData = this.stockInDetailListSelected
-
+      if (this.printData.length === 0) {
-
-
-      if (printData.length === 0) {
         this.$modal.msgWarning(this.$t('inStockin.selectPrintData'))
         return
       }
-      console.log(printData)
+      this.$nextTick(() => {
-
+        setTimeout(() => {
-      this.printBarcode(printData)
+          this.$refs.easyPrint2.print()
-    },
+        }, 100)
-    /** 打印条码 */
+      })
-    printBarcode(printData) {
-      try {
-        // 获取Lodop打印对象
-        let LODOP = getLodop()
-        if (!LODOP) {
-          this.$modal.msgError(this.$t('inStockin.printFail'))
-          return
-        }
-        LODOP.SET_SHOW_MODE("LANGUAGE", 0);
-        LODOP.PRINT_INITA(10, 10, 1000, 800, "物资条码");
-        LODOP.SET_PRINT_PAGESIZE(1, 1000, 500, 0);
-        LODOP.SET_PRINT_MODE("AUTO_CLOSE_PREWINDOW", 1);
-
-        for (let i = 0; i < printData.length; i++) {
-          LODOP.NewPage();
-          LODOP.ADD_PRINT_BARCODE(17,35,120,120,"QRCode",printData[i].stockinDetailId);
-          LODOP.ADD_PRINT_TEXT(22,147,72,20,this.$t('inReceiveStockin.productId')+":");
-          LODOP.ADD_PRINT_TEXT(22,205,180,20,printData[i].productId);
-          LODOP.ADD_PRINT_TEXT(44,147,66,20,this.$t('inReceiveStockin.materialDesc')+":");
-          LODOP.ADD_PRINT_TEXT(44,206,180,35,printData[i].extraField.materialDesc);
-          LODOP.ADD_PRINT_TEXT(66,148,64,20,this.$t('inReceiveStockin.englishDesc')+":");
-          LODOP.ADD_PRINT_TEXT(66,205,180,20,printData[i].extraField.englishDesc);
-          LODOP.ADD_PRINT_TEXT(88,148,64,20,this.$t('inReceiveStockin.packingMethod')+":");
-          LODOP.ADD_PRINT_TEXT(88,205,180,20,printData[i].extraField.packingMethod);
-          LODOP.ADD_PRINT_TEXT(110,147,61,20,this.$t('inReceiveStockin.cartonNo')+":");
-          LODOP.ADD_PRINT_TEXT(110,196,180,20,printData[i].extraField.cartonNo);
-        }
-        LODOP.PREVIEW();
-      } catch (error) {
-        this.$modal.msgError(this.$t('inStockin.printFail1') + error.message)
-      }
     },
     getDetailList(stockinId) {
       this.detailLoading = true;
@@ -475,4 +459,46 @@ export default {
   width: auto;
   min-width: fit-content;
 }
+/* 打印样式 */
+.vue-easy-print {
+  text-align: center;
+}
+
+.num {
+  display: block;
+  text-align: center;
+  font-size: 16px;
+  margin-top: 15px;
+  font-family: Arial, sans-serif;
+}
+
+.vue-qr {
+  display: block;
+  margin: 20px auto;
+  max-width: 100%;
+}
+
+@media print {
+  @page {
+    size: A4;
+    margin: 0;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  .vue-easy-print {
+    padding: 20px;
+  }
+
+  .num {
+    font-size: 14px;
+    margin-top: 10px;
+  }
+
+  .vue-qr {
+    margin: 10px auto;
+  }
+}
 </style>