|
@@ -1,5 +1,30 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <div class="search-area">
|
|
|
+ <el-form ref="searchForm" :model="searchForm" :inline="true">
|
|
|
+ <el-form-item label="商品名称">
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.goods_name"
|
|
|
+ placeholder="请输入商品名称"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleSearch"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="SKU">
|
|
|
+ <el-input
|
|
|
+ v-model="searchForm.sku"
|
|
|
+ placeholder="请输入SKU"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleSearch"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleSearch">搜索</el-button>
|
|
|
+ <el-button @click="handleReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
<en-table-layout
|
|
|
:tableData="tableData.data"
|
|
|
:loading="loading"
|
|
@@ -14,6 +39,12 @@
|
|
|
:disabled="multipleSelection.length === 0"
|
|
|
@click="batchPrint"
|
|
|
>批量打印</el-button
|
|
|
+ ><el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ :disabled="multipleSelection.length === 0"
|
|
|
+ @click="qRcode"
|
|
|
+ >二维码打印</el-button
|
|
|
>
|
|
|
</div>
|
|
|
<!-- <en-table-search @search="searchEvent" @advancedSearch="advancedSearchEvent" advanced advancedWidth="465"
|
|
@@ -86,9 +117,8 @@
|
|
|
</el-table-column> -->
|
|
|
<el-table-column label="操作" width="310">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button size="mini" @click="PrintIng(scope.row)"
|
|
|
- >打印SKU</el-button
|
|
|
- >
|
|
|
+ <el-button size="mini" @click="PrintIng(scope.row)">打印SKU</el-button>
|
|
|
+ <el-button size="mini" @click="handleSingleQRCode(scope.row)">二维码打印</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
@@ -117,7 +147,7 @@
|
|
|
<div class="logInfo">操作时间:{{ currDetailLog.operate_time | unixToDate }}</div>
|
|
|
</el-dialog> -->
|
|
|
<el-dialog
|
|
|
- title="打印预览"
|
|
|
+ title="打印设置"
|
|
|
:visible.sync="PrintVisible"
|
|
|
width="940px"
|
|
|
center
|
|
@@ -126,7 +156,13 @@
|
|
|
<el-form :inline="true" class="print-options">
|
|
|
<el-form-item label="打印规格">
|
|
|
<el-select v-model="selectedSize" placeholder="请选择打印规格">
|
|
|
- <el-option label="大号 (9.5cm × 3.5cm)" value="large"></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="option in sizeOptions"
|
|
|
+ :key="option.value"
|
|
|
+ :label="option.label"
|
|
|
+ :value="option.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="缩放">
|
|
@@ -137,13 +173,9 @@
|
|
|
:step="10"
|
|
|
></el-input-number>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="打印方向">
|
|
|
- <el-select v-model="printOrientation" placeholder="请选择打印方向">
|
|
|
- <el-option label="纵向" value="portrait"></el-option>
|
|
|
- <el-option label="横向" value="landscape"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
</el-form>
|
|
|
+
|
|
|
+ <!-- 预览区域 -->
|
|
|
<div class="print-preview-container">
|
|
|
<div id="deliverySheet" :style="{ transform: `scale(${scale / 100})` }">
|
|
|
<div class="tips-t" v-for="(item, index) in codeList" :key="index">
|
|
@@ -156,11 +188,62 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
<el-button @click="handleCancle">取消</el-button>
|
|
|
<el-button type="primary" @click="handlePrintGoodsLend">打印</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 添加新的二维码打印弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="二维码打印设置"
|
|
|
+ :visible.sync="qrCodeVisible"
|
|
|
+ width="940px"
|
|
|
+ center
|
|
|
+ @close="handleQRCodeCancel"
|
|
|
+ >
|
|
|
+ <el-form :inline="true" class="print-options">
|
|
|
+ <el-form-item label="打印规格">
|
|
|
+ <el-select v-model="qrCodeSelectedSize" placeholder="请选择打印规格">
|
|
|
+ <el-option
|
|
|
+ v-for="option in qrCodeSizeOptions"
|
|
|
+ :key="option.value"
|
|
|
+ :label="option.label"
|
|
|
+ :value="option.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="缩放">
|
|
|
+ <el-input-number
|
|
|
+ v-model="qrCodeScale"
|
|
|
+ :min="50"
|
|
|
+ :max="150"
|
|
|
+ :step="10"
|
|
|
+ ></el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 预览区域 -->
|
|
|
+ <div class="print-preview-container">
|
|
|
+ <div id="qrCodeSheet">
|
|
|
+ <div class="tips-t" v-for="(item, index) in qrCodeList" :key="index">
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <div class="qrcode-container">
|
|
|
+ <div :id="`qrcode-${index}`"></div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="numOrder">{{ String(item).toUpperCase() }}</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="handleQRCodeCancel">取消</el-button>
|
|
|
+ <el-button type="primary" @click="handleQRCodePrint">打印</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -169,11 +252,101 @@ import * as API_Setting from "@/api/setting";
|
|
|
import * as API_ProductClass from "@/api/productClass";
|
|
|
import JsBarcode from "jsbarcode";
|
|
|
import Sortable from "sortablejs";
|
|
|
-import Print from "print-js";
|
|
|
+// 首先在文件顶部正确导入 QRCode
|
|
|
+import QRCode from "qrcodejs2";
|
|
|
+/* import Print from "print-js"; */
|
|
|
+/* import Print from "vue-print-nb";
|
|
|
+import Vue from "vue";
|
|
|
+Vue.use(Print); */
|
|
|
+// 添加 ArgoxPrinter 类
|
|
|
+
|
|
|
+// 修改 ArgoxPrinter 类
|
|
|
+class ArgoxPrinter {
|
|
|
+ constructor() {
|
|
|
+ this.printWindow = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ print(content, options = {}) {
|
|
|
+ const { width, height, marginTop, marginLeft, fontSize } = options;
|
|
|
+ /* margin-top: ${marginTop}mm; */
|
|
|
+ this.printWindow = window.open("", "_blank");
|
|
|
+ this.printWindow.document.write(`
|
|
|
+ <html>
|
|
|
+ <head>
|
|
|
+ <title>打印标签</title>
|
|
|
+ <style>
|
|
|
+ @page {
|
|
|
+ size: ${width}mm ${height}mm;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ -webkit-print-color-adjust: exact;
|
|
|
+ }
|
|
|
+ * {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ }
|
|
|
+ .print-content {
|
|
|
+ width: ${width}mm;
|
|
|
+ height: ${height}mm;
|
|
|
+ page-break-after: always;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 1mm;
|
|
|
+ margin-top: ${marginTop}mm;
|
|
|
+ margin-left: ${marginLeft}mm;
|
|
|
+ }
|
|
|
+ .barcode-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 70%;
|
|
|
+ }
|
|
|
+ .barcode-container svg {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: ${fontSize}px;
|
|
|
+ margin-top: 0mm;
|
|
|
+ }
|
|
|
+ @media print {
|
|
|
+ * {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ -webkit-print-color-adjust: exact;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>${content}</body>
|
|
|
+ </html>
|
|
|
+ `);
|
|
|
+
|
|
|
+ this.printWindow.document.close();
|
|
|
+
|
|
|
+ // 延迟执行打印操作,确保内容加载完成
|
|
|
+ setTimeout(() => {
|
|
|
+ this.printWindow.focus();
|
|
|
+ this.printWindow.print();
|
|
|
+ // 打印完成后关闭窗口
|
|
|
+ setTimeout(() => {
|
|
|
+ this.printWindow.close();
|
|
|
+ }, 500);
|
|
|
+ }, 500);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
export default {
|
|
|
name: "systemLogs",
|
|
|
data() {
|
|
|
return {
|
|
|
+ printer: null, // 添加打印机实例
|
|
|
// 列表loading状态
|
|
|
loading: false,
|
|
|
// 列表参数
|
|
@@ -191,23 +364,162 @@ export default {
|
|
|
currDetailLog: {},
|
|
|
// 高级搜索数据
|
|
|
advancedForm: {},
|
|
|
- PrintVisible: false,
|
|
|
codeList: [],
|
|
|
barcodeValue: "",
|
|
|
// 当前已选择的行
|
|
|
multipleSelection: [],
|
|
|
- selectedSize: "large",
|
|
|
scale: 100,
|
|
|
- codeList: [], // 假设这里存储了需要生成条形码的数据
|
|
|
+ codeList: [], // 假设这里存储了需要生成条形码的据
|
|
|
PrintVisible: false,
|
|
|
printOrientation: "portrait", // 默认为纵向打印
|
|
|
+ // 修改 selectedSize 的初始值为 'large',确保与 sizeOptions 中的值对应
|
|
|
+ selectedSize: "large",
|
|
|
+
|
|
|
+ // 修改 sizeOptions 的结构,使其更清晰
|
|
|
+ sizeOptions: [
|
|
|
+ {
|
|
|
+ label: "45×10mm",
|
|
|
+ value: "medium",
|
|
|
+ width: 45,
|
|
|
+ height: 12,
|
|
|
+ marginTop: 0, // 添加边距配置 -0.4
|
|
|
+ marginLeft: 2,
|
|
|
+ fontSize: 7,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "50×20mm",
|
|
|
+ value: "large",
|
|
|
+ width: 50,
|
|
|
+ height: 20,
|
|
|
+ marginTop: 0, //5
|
|
|
+ marginLeft: 2.5,
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "25×10mm",
|
|
|
+ value: "small",
|
|
|
+ width: 25,
|
|
|
+ height: 10,
|
|
|
+ marginTop: 0,
|
|
|
+ marginLeft: 0, //-1
|
|
|
+ fontSize: 6,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 添加 printOptions
|
|
|
+ printOptions: {
|
|
|
+ id: "deliverySheet",
|
|
|
+ popTitle: "条码打印",
|
|
|
+ preview: false,
|
|
|
+ extraCss: `
|
|
|
+ @page {
|
|
|
+ size: auto;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ -webkit-print-color-adjust: exact;
|
|
|
+ }
|
|
|
+ .tips-t {
|
|
|
+ page-break-after: always;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 1mm;
|
|
|
+ /* 移除边框 */
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ }
|
|
|
+ /* 移除所有可能的边框和轮廓 */
|
|
|
+ * {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ }
|
|
|
+ .content-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .barcode-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 70%;
|
|
|
+ }
|
|
|
+ .numOrder {
|
|
|
+ font-size: 10px;
|
|
|
+ margin-top: 0.5mm;
|
|
|
+ }
|
|
|
+ /* 打印时隐藏所有边框 */
|
|
|
+ @media print {
|
|
|
+ * {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ -webkit-print-color-adjust: exact;
|
|
|
+ }
|
|
|
+ .tips-t {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ `,
|
|
|
+ },
|
|
|
+ searchForm: {
|
|
|
+ goods_name: "",
|
|
|
+ sku: "",
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 二维码 */
|
|
|
+ // 添加新的数据属性
|
|
|
+ qrCodeVisible: false,
|
|
|
+ qrCodeList: [],
|
|
|
+ qrCodeScale: 100,
|
|
|
+ qrCodeSelectedSize: "large",
|
|
|
+ qrCodeSizeOptions: [
|
|
|
+ {
|
|
|
+ label: "45×45mm",
|
|
|
+ value: "medium",
|
|
|
+ width: 45,
|
|
|
+ height: 45,
|
|
|
+ marginTop: 0,
|
|
|
+ marginLeft: 0,
|
|
|
+ qrSize: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "50×50mm",
|
|
|
+ value: "large",
|
|
|
+ width: 50,
|
|
|
+ height: 50,
|
|
|
+ marginTop: 0,
|
|
|
+ marginLeft: 0,
|
|
|
+ qrSize: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "25×25mm",
|
|
|
+ value: "small",
|
|
|
+ width: 20,
|
|
|
+ height: 20,
|
|
|
+ marginTop: 0,
|
|
|
+ marginLeft: 0,
|
|
|
+ qrSize: 30,
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.GET_SystemLogs();
|
|
|
this.rowDrop();
|
|
|
},
|
|
|
+ created() {
|
|
|
+ // 创建打印机实例
|
|
|
+ this.printer = new ArgoxPrinter();
|
|
|
+ },
|
|
|
watch: {
|
|
|
+ // 监听打印弹窗显示状态
|
|
|
PrintVisible(newVal) {
|
|
|
if (newVal) {
|
|
|
this.$nextTick(() => {
|
|
@@ -215,20 +527,246 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ // 监听打印规格变化
|
|
|
+ selectedSize: {
|
|
|
+ handler(newSize) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.generateBarcodes();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 添加 watch 以更新打印尺寸
|
|
|
+ selectedSize: {
|
|
|
+ handler(newSize) {
|
|
|
+ const sizeStyles = {
|
|
|
+ large: { width: "50mm", height: "20mm" },
|
|
|
+ medium: { width: "45mm", height: "10mm" },
|
|
|
+ small: { width: "25mm", height: "10mm" },
|
|
|
+ };
|
|
|
+ const selectedSizeStyle = sizeStyles[newSize];
|
|
|
+
|
|
|
+ this.printOptions.extraCss = `
|
|
|
+ @page {
|
|
|
+ size: ${selectedSizeStyle.width} ${selectedSizeStyle.height};
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ -webkit-print-color-adjust: exact;
|
|
|
+ }
|
|
|
+ * {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ }
|
|
|
+ .tips-t {
|
|
|
+ width: ${selectedSizeStyle.width};
|
|
|
+ height: ${selectedSizeStyle.height};
|
|
|
+ page-break-after: always;
|
|
|
+ margin-top:-15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 1mm;
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ }
|
|
|
+ .content-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .barcode-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 70%;
|
|
|
+ }
|
|
|
+ .barcode-container svg {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ .numOrder {
|
|
|
+ font-size: 10px;
|
|
|
+ margin-top: 0.5mm;
|
|
|
+ }
|
|
|
+ @media print {
|
|
|
+ * {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ -webkit-print-color-adjust: exact;
|
|
|
+ }
|
|
|
+ .tips-t {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ `;
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ qrCodeSelectedSize: {
|
|
|
+ handler(newSize) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.generateQRCodes();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- generateBarcodes() {
|
|
|
+ /* 二维码打印 */
|
|
|
+ qRcode() {
|
|
|
+ if (this.multipleSelection.length === 0) {
|
|
|
+ this.$message.warning("请先选择要打印的商品");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.qrCodeList = this.multipleSelection.map((item) => item.sku);
|
|
|
+ this.qrCodeVisible = true;
|
|
|
this.$nextTick(() => {
|
|
|
- this.codeList.forEach((item, index) => {
|
|
|
- JsBarcode(`#barcode-${index}`, item, {
|
|
|
- format: "CODE128",
|
|
|
- width: 2,
|
|
|
- height: 60,
|
|
|
- displayValue: false,
|
|
|
+ this.generateQRCodes();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ generateQRCodes() {
|
|
|
+ this.qrCodeList.forEach((code, index) => {
|
|
|
+ const element = document.getElementById(`qrcode-${index}`);
|
|
|
+ if (element) {
|
|
|
+ element.innerHTML = ""; // 清除现有内容
|
|
|
+
|
|
|
+ // 获取选中尺寸的配置
|
|
|
+ const selectedSize = this.qrCodeSizeOptions.find(
|
|
|
+ (option) => option.value === this.qrCodeSelectedSize
|
|
|
+ );
|
|
|
+
|
|
|
+ // 使用对应尺寸的 qrSize
|
|
|
+ new QRCode(element, {
|
|
|
+ text: code,
|
|
|
+ width: selectedSize.qrSize,
|
|
|
+ height: selectedSize.qrSize,
|
|
|
+ colorDark: "#000000",
|
|
|
+ colorLight: "#ffffff",
|
|
|
+ correctLevel: QRCode.CorrectLevel.H
|
|
|
});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleQRCodePrint() {
|
|
|
+ try {
|
|
|
+ const selectedOption = this.qrCodeSizeOptions.find(
|
|
|
+ (option) => option.value === this.qrCodeSelectedSize
|
|
|
+ );
|
|
|
+
|
|
|
+ const printContent = this.qrCodeList
|
|
|
+ .map((code, index) => {
|
|
|
+ const qrcodeElement = document.getElementById(`qrcode-${index}`);
|
|
|
+ return `
|
|
|
+ <div class="print-content">
|
|
|
+ <div class="qrcode-container">
|
|
|
+ ${qrcodeElement ? qrcodeElement.outerHTML : ""}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ })
|
|
|
+ .join("");
|
|
|
+
|
|
|
+ this.printer.print(printContent, {
|
|
|
+ width: selectedOption.width,
|
|
|
+ height: selectedOption.height,
|
|
|
+ marginTop: selectedOption.marginTop,
|
|
|
+ marginLeft: selectedOption.marginLeft,
|
|
|
+ fontSize: 12,
|
|
|
});
|
|
|
+
|
|
|
+ this.$message.success("打印成功");
|
|
|
+ this.qrCodeVisible = false;
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("打印失败:" + error.message);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleQRCodeCancel() {
|
|
|
+ this.qrCodeVisible = false;
|
|
|
+ this.qrCodeList = [];
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加搜索方法
|
|
|
+ handleSearch() {
|
|
|
+ this.params = {
|
|
|
+ ...this.params,
|
|
|
+ name: this.searchForm.goods_name,
|
|
|
+ sku: this.searchForm.sku,
|
|
|
+ page_no: 1,
|
|
|
+ };
|
|
|
+ this.GET_SystemLogs();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加重置方法
|
|
|
+ handleReset() {
|
|
|
+ this.searchForm.goods_name = "";
|
|
|
+ this.searchForm.sku = "";
|
|
|
+ this.params = {
|
|
|
+ page_no: 1,
|
|
|
+ page_size: 20,
|
|
|
+ };
|
|
|
+ this.GET_SystemLogs();
|
|
|
+ },
|
|
|
+ // 修改生成条形码的方法
|
|
|
+ generateBarcodes() {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ try {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.codeList.forEach((code, index) => {
|
|
|
+ const options = this.getBarcodeOptions();
|
|
|
+ const element = document.getElementById(`barcode-${index}`);
|
|
|
+ if (element) {
|
|
|
+ // 清除之前的内容
|
|
|
+ while (element.firstChild) {
|
|
|
+ element.removeChild(element.firstChild);
|
|
|
+ }
|
|
|
+ // 生成新的条形码
|
|
|
+ JsBarcode(
|
|
|
+ `#barcode-${index}`,
|
|
|
+ code, //String().toUpperCase()
|
|
|
+ options
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ resolve();
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ reject(error);
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ // ��改获取条码配置的方法
|
|
|
+ getBarcodeOptions() {
|
|
|
+ const sizeConfig = {
|
|
|
+ large: { width: 1.5, height: 40 },
|
|
|
+ medium: { width: 1.2, height: 20 },
|
|
|
+ small: { width: 1, height: 15 },
|
|
|
+ };
|
|
|
+
|
|
|
+ // 添加默认值处理
|
|
|
+ const defaultConfig = { width: 1.5, height: 40 };
|
|
|
+ const config = sizeConfig[this.selectedSize] || defaultConfig;
|
|
|
+
|
|
|
+ return {
|
|
|
+ format: "CODE128",
|
|
|
+ width: config.width,
|
|
|
+ height: config.height,
|
|
|
+ displayValue: false,
|
|
|
+ margin: 5,
|
|
|
+ fontSize: this.selectedSize === "small" ? 8 : 12,
|
|
|
+ textMargin: 2,
|
|
|
+ };
|
|
|
+ },
|
|
|
/* handlePrintGoodsLend() {
|
|
|
this.generateBarcodes();
|
|
|
this.$nextTick(() => {
|
|
@@ -290,85 +828,109 @@ export default {
|
|
|
this.multipleSelection = val;
|
|
|
},
|
|
|
// 批量打印
|
|
|
- batchPrint() {
|
|
|
- const ids = this.multipleSelection.map((item) => item.sku);
|
|
|
- this.codeList = ids;
|
|
|
- this.PrintVisible = true;
|
|
|
+ // 修改批量打印方法
|
|
|
+ async batchPrint() {
|
|
|
+ try {
|
|
|
+ const ids = this.multipleSelection.map((item) => item.sku);
|
|
|
+ this.codeList = ids;
|
|
|
+ // 打开选择尺寸弹窗
|
|
|
+ this.PrintVisible = true;
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("批量打印失败:" + error.message);
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
/** 打印对账详情 */
|
|
|
- handlePrintGoodsLend() {
|
|
|
- // 生成条形码
|
|
|
+ /* handlePrintGoodsLend() {
|
|
|
this.generateBarcodes();
|
|
|
+ const _this = this;
|
|
|
|
|
|
- // 准备打印样式
|
|
|
- const style = `
|
|
|
- @page {
|
|
|
- size: ${this.printOrientation};
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- body {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- .tips-t {
|
|
|
- width: 95mm;
|
|
|
- height: 35mm;
|
|
|
- page-break-after: always;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 2mm;
|
|
|
- }
|
|
|
- .content-wrapper {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .barcode-container {
|
|
|
- margin-bottom: 2mm;
|
|
|
- }
|
|
|
- .numOrder {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- ${
|
|
|
- this.printOrientation !== "landscape"
|
|
|
- ? `
|
|
|
- .tips-t {
|
|
|
- transform: rotate(90deg);
|
|
|
- transform-origin: top left;
|
|
|
- width: 35mm;
|
|
|
- height: 95mm;
|
|
|
- position: absolute;
|
|
|
- left: 35mm;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- `
|
|
|
- : ""
|
|
|
- }
|
|
|
- `;
|
|
|
-
|
|
|
- // 使用 print-js 打印
|
|
|
- Print({
|
|
|
- printable: "deliverySheet",
|
|
|
- type: "html",
|
|
|
- css: style,
|
|
|
- style: style,
|
|
|
- scanStyles: false,
|
|
|
- targetStyles: ["*"],
|
|
|
+ // 更新回调函数
|
|
|
+ this.printOptions.beforeOpenCallback = function () {
|
|
|
+ console.log("打印窗口即将打开");
|
|
|
+ };
|
|
|
+ this.printOptions.openCallback = function () {
|
|
|
+ console.log("打印窗口已打开");
|
|
|
+ };
|
|
|
+ this.printOptions.closeCallback = function () {
|
|
|
+ _this.handleCancle();
|
|
|
+ console.log("打印窗口已关闭");
|
|
|
+ };
|
|
|
+
|
|
|
+ // 触发打印
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const printElement = document.getElementById("deliverySheet");
|
|
|
+ if (printElement) {
|
|
|
+ const event = new Event("click");
|
|
|
+ printElement.dispatchEvent(event);
|
|
|
+ }
|
|
|
});
|
|
|
+ }, */
|
|
|
+ // 修改 handlePrintGoodsLend 方法
|
|
|
+ async handlePrintGoodsLend() {
|
|
|
+ try {
|
|
|
+ if (!this.selectedSize) {
|
|
|
+ this.$message.warning("请先选择打印尺寸");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const selectedOption = this.sizeOptions.find(
|
|
|
+ (option) => option.value === this.selectedSize
|
|
|
+ );
|
|
|
+ if (!selectedOption) {
|
|
|
+ throw new Error("无效的打印尺寸");
|
|
|
+ }
|
|
|
+
|
|
|
+ await this.generateBarcodes();
|
|
|
+
|
|
|
+ const printContent = this.codeList
|
|
|
+ .map((code, index) => {
|
|
|
+ const barcodeElement = document.getElementById(`barcode-${index}`);
|
|
|
+ if (!barcodeElement) {
|
|
|
+ throw new Error("条形码生成失败");
|
|
|
+ }
|
|
|
+ return `
|
|
|
+ <div class="print-content">
|
|
|
+ <div class="barcode-container">
|
|
|
+ ${barcodeElement.outerHTML}
|
|
|
+ </div>
|
|
|
+ <div class="text">${String(code).toUpperCase()}</div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ })
|
|
|
+ .join("");
|
|
|
+
|
|
|
+ // 使用 ArgoxPrinter 执行打印,传入所有尺寸相关的配置
|
|
|
+ this.printer.print(printContent, {
|
|
|
+ width: selectedOption.width,
|
|
|
+ height: selectedOption.height,
|
|
|
+ marginTop: selectedOption.marginTop,
|
|
|
+ marginLeft: selectedOption.marginLeft,
|
|
|
+ fontSize: selectedOption.fontSize,
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$message.success("打印成功");
|
|
|
+ this.PrintVisible = false;
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("打印失败:" + error.message);
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
handleCancle() {
|
|
|
this.PrintVisible = false;
|
|
|
this.codeList = [];
|
|
|
},
|
|
|
- // 打印
|
|
|
- PrintIng(row) {
|
|
|
- this.barcodeValue = row.sku;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.codeList.push(row.sku);
|
|
|
+
|
|
|
+ // 修改单个打印方法
|
|
|
+ async PrintIng(row) {
|
|
|
+ try {
|
|
|
+ this.barcodeValue = row.sku;
|
|
|
+ this.codeList = [row.sku];
|
|
|
+ // 打开选择尺寸弹窗
|
|
|
this.PrintVisible = true;
|
|
|
- });
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("打印失败:" + error.message);
|
|
|
+ }
|
|
|
},
|
|
|
// 行拖拽
|
|
|
rowDrop() {
|
|
@@ -491,6 +1053,14 @@ export default {
|
|
|
this.showLogDetail = true;
|
|
|
this.currDetailLog = row;
|
|
|
},
|
|
|
+ /** 单个二维码打印 */
|
|
|
+ handleSingleQRCode(row) {
|
|
|
+ this.qrCodeList = [row.sku];
|
|
|
+ this.qrCodeVisible = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.generateQRCodes();
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -567,33 +1137,63 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: flex-start;
|
|
|
+}
|
|
|
|
|
|
- &.portrait {
|
|
|
- #deliverySheet {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+#deliverySheet {
|
|
|
+ transform-origin: top left;
|
|
|
+ padding: 10mm;
|
|
|
+}
|
|
|
|
|
|
- .tips-t {
|
|
|
- width: 95mm;
|
|
|
- height: 35mm;
|
|
|
- }
|
|
|
+.tips-t {
|
|
|
+ margin-bottom: 2mm;
|
|
|
+ padding: 2mm;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .content-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
- &.landscape {
|
|
|
- #deliverySheet {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: flex-start;
|
|
|
- }
|
|
|
+ .barcode-container {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .tips-t {
|
|
|
- width: 35mm;
|
|
|
- height: 95mm;
|
|
|
- margin-right: 2mm;
|
|
|
+ svg {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .numOrder {
|
|
|
+ margin-top: 1mm;
|
|
|
+ font-size: v-bind('selectedSize === "small" ? "8px" : "12px"');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 根据不同尺寸设置预览大小
|
|
|
+.tips-t {
|
|
|
+ &[data-size="large"] {
|
|
|
+ width: 50mm;
|
|
|
+ height: 20mm;
|
|
|
+ }
|
|
|
+ &[data-size="medium"] {
|
|
|
+ width: 45mm;
|
|
|
+ height: 10mm;
|
|
|
+ }
|
|
|
+ &[data-size="small"] {
|
|
|
+ width: 25mm;
|
|
|
+ height: 10mm;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
#deliverySheet {
|
|
@@ -626,15 +1226,21 @@ export default {
|
|
|
|
|
|
.barcode-container {
|
|
|
width: 100%;
|
|
|
+ height: v-bind('selectedSize === "small" ? "60%" : "70%"');
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- margin-bottom: 2mm;
|
|
|
+ align-items: center;
|
|
|
|
|
|
svg {
|
|
|
max-width: 100%;
|
|
|
- height: auto;
|
|
|
+ max-height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .numOrder {
|
|
|
+ font-size: v-bind('selectedSize === "small" ? "8px" : "14px"');
|
|
|
+ margin-top: 1mm;
|
|
|
+ }
|
|
|
}
|
|
|
#deliverySheet {
|
|
|
transform-origin: top left;
|