条形码生成

templates/package.json

@@ -37,7 +37,8 @@
     "webpack": "^5.56.0",
     "xmldom": "^0.6.0",
     "screenfull": "4.2.0",
-    "yargs-parser": "^20.2.9"
+    "yargs-parser": "^20.2.9",
+    "jsbarcode": "3.9.0"
   },
   "devDependencies": {
     "@quasar/app": "^2.2.10",

templates/src/boot/axios_request.js

@@ -13,7 +13,7 @@ function getBaseUrl (name) {
   return xhr.status === okStatus ? xhr.responseText : null
 }
 // 注意以后修改成服务器的地址
-const baseurl = "http://192.168.31.242:8008"
+const baseurl = "http://192.168.30.72:8008"
 
 const axiosInstance = axios.create({
   baseURL: baseurl,

templates/src/pages/inbound/asn.vue

@@ -730,13 +730,15 @@
                     class="row q-col-gutter-md q-mb-sm"
                   >
                     <div class="col-1">
-                      <q-btn icon="print" flat @click="print(item.id)"></q-btn>
-                      <q-tooltip
-                        content-class="bg-amber text-black shadow-4"
-                        :offset="[-0, 0]"
-                        content-style="font-size: 12px"
-                        >打印条码</q-tooltip
+                      <!-- 修改打印按钮，使用v-print指令 -->
+                      <q-btn
+                        icon="print"
+                        flat
+                        v-print="getPrintConfig(item)"
+                        @click="setCurrentBatch(item)"
                       >
+                        <q-tooltip>打印条码</q-tooltip>
+                      </q-btn>
                     </div>
                     <div class="col-3">
                       <q-input
@@ -794,13 +796,30 @@
         </div>
       </q-card>
     </q-dialog>
+    <div id="printBarcode" class="print-area">
+      <div class="q-pa-md text-center" style="flex: none">
+        <div class="row no-wrap">
+          <div class="col text-left">
+            <p style="font-weight: 500">{{ currentgoods.goods_desc }}</p>
+          </div>
+          <div class="col text-right">
+            <p>
+              数量: {{ currentgoods.goods_qty }}{{ currentgoods.goods_unit }}
+            </p>
+          </div>
+        </div>
+        <svg ref="barcodeElement" style="width: 100%; height: auto"></svg>
+      </div>
+
+    </div>
   </div>
 </template>
+
 <router-view />
 
 <script>
 import { getauth, postauth, putauth, deleteauth } from "boot/axios_request";
-
+import JsBarcode from "jsbarcode";
 import { date, exportFile, LocalStorage } from "quasar";
 import { QToggle } from "quasar";
 
@@ -932,6 +951,13 @@ export default {
       activeTab: "tab1",
       isorder: false,
       order: "false",
+      currentBarcode: "",
+      printConfig: {
+        id: "printBarcode",
+      },
+      currentBarcode: null,
+
+      currentgoods: {},
     };
   },
   computed: {
@@ -944,6 +970,31 @@ export default {
     },
   },
   methods: {
+    setCurrentBatch(item) {
+      this.currentBarcode = item.bound_batch?.bound_number || "";
+      this.currentgoods = item.bound_batch;
+    },
+    getPrintConfig() {
+      this.generateBarcode();
+      return {
+        id: "printBarcode",
+      };
+    },
+    generateBarcode() {
+      this.$refs.barcodeElement.innerHTML = "";
+
+      try {
+        JsBarcode(this.$refs.barcodeElement, this.currentBarcode, {
+          format: "CODE128",
+          displayValue: true,
+          fontSize: 16,
+          height: 60,
+          margin: 10,
+        });
+      } catch (error) {
+        console.error("条码生成失败:", error);
+      }
+    },
     getList(params = {}) {
       var _this = this;
       _this.loading = true;
@@ -1598,4 +1649,60 @@ export default {
   padding-left: 50px;
   margin-top: -5px;
 }
+
+/* 修改打印样式 */
+#printBarcode {
+  width: 80mm; /* 标准标签纸宽度 */
+  max-width: 50mm;
+  padding: 2mm;
+  box-sizing: border-box;
+}
+
+/* 打印时强制缩放 */
+@media print {
+  body {
+    margin: 0 !important;
+    visibility: hidden;
+  }
+
+  #printBarcode,
+  #printBarcode * {
+    visibility: visible;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  /* 强制单页布局 */
+  .print-area {
+    page-break-inside: avoid;
+    break-inside: avoid;
+    display: flex;
+    flex-direction: column;
+    gap: 2mm;
+  }
+
+  /* 条码缩放 */
+  svg {
+    transform: scale(0.9);
+    transform-origin: center top;
+    max-height: 30mm !important;
+  }
+
+  /* 文本适配 */
+  p {
+    font-size: 9pt !important;
+    margin: 0;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* 网格布局优化 */
+  .row {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr;
+    gap: 1mm;
+  }
+}
 </style>

templates/yarn.lock

@@ -6352,6 +6352,11 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+jsbarcode@3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/jsbarcode/-/jsbarcode-3.9.0.tgz#dabe86e28bc3f189a80dc9d88030036882967912"
+  integrity sha512-FWuQ+XJTvtF8urAjJCYxb14cA1QzItGj8Cw8Wnwii6KluWuPmmRbeP5G5Utbn7gy6yA+4vaaUg7GLii/dzXTBA==
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz"