|
|
@@ -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>
|
flower_mr