diff --git a/src/views/modules/warehouse/LocationLabelPrint.vue b/src/views/modules/warehouse/LocationLabelPrint.vue new file mode 100644 index 0000000..bf6de2c --- /dev/null +++ b/src/views/modules/warehouse/LocationLabelPrint.vue @@ -0,0 +1,149 @@ + + + + + 货位信息标签 + + + + + + + + + + + + + 货位编码:{{ locationData.locationId || '' }} + + + 货位名称:{{ locationData.locationName || '' }} + + + 所属仓库:{{ locationData.warehouseName || locationData.warehouseId || '' }} + + + + + + + + + + + + + diff --git a/src/views/modules/warehouse/location.vue b/src/views/modules/warehouse/location.vue index 82ee9c7..4022df3 100644 --- a/src/views/modules/warehouse/location.vue +++ b/src/views/modules/warehouse/location.vue @@ -27,6 +27,7 @@ class="el-button el-button--primary el-button--medium"> {{buttons.download}} + 打印 {{ buttons.deleteList}} @@ -77,6 +78,12 @@ v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> + + import column from "../common/column"; + import LocationLabelPrint from './LocationLabelPrint.vue' + import Vue from 'vue' import { searchSysLanguagePackList, searchSysLanguageParam, @@ -174,6 +183,7 @@ saveSysLanguageOne } from "@/api/sysLanguage.js" import getLodop from '@/utils/LodopFuncs.js' + import QRCode from 'qrcode' import { saveTableDefaultList, saveTableUser, @@ -647,29 +657,172 @@ } }, - // 打印方式 - printReport() { - alert(this.$store.state.user.site) - // - // const LODOP = getLodop() - // if (LODOP) { - // var strBodyStyle = '' //设置打印样式 - // var strFormHtml = strBodyStyle + '' + document.getElementById('commmon').innerHTML + '' //获取打印内容 - // - // LODOP.PRINT_INIT('') //初始化 - // LODOP.PRINT_DESIGN(); - // //LODOP.PREVIEW(); - // //LODOP.PRINT(); - // - // LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //设置横向 - // LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //设置打印内容 - // LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //设置预览窗口模式和大小 - // LODOP.PREVIEW() - // } + // 生成标签HTML + generateLabelHtml(locationData, qrCodeDataUrl) { + // 创建临时容器 + const tempDiv = document.createElement('div') + + // 创建组件实例 + const LabelComponent = Vue.extend(LocationLabelPrint) + const instance = new LabelComponent({ + propsData: { + locationData: locationData, + qrCodeDataUrl: qrCodeDataUrl + } + }) + + // 挂载到临时容器 + instance.$mount(tempDiv) + + // 获取样式 + const styles = Array.from(document.styleSheets) + .map(sheet => { + try { + return Array.from(sheet.cssRules) + .map(rule => rule.cssText) + .join('\n') + } catch (e) { + return '' + } + }) + .join('\n') + + // 组合HTML和样式 + const fullHtml = ` + + ${instance.$el.outerHTML} + ` + + // 销毁实例 + instance.$destroy() + + return fullHtml + }, + // 打印货位标签 + async printLocationLabels() { + if (this.dataListSelections.length === 0) { + this.$message.warning('请选择要打印的货位!') + return + } + + const LODOP = getLodop() + if (!LODOP) { + this.$message.error('未检测到打印控件,请安装CLodop打印控件!') + return + } + + try { + // 初始化打印 + LODOP.PRINT_INIT('货位标签打印') + + // 设置纸张尺寸:80mm x 80mm + LODOP.SET_PRINT_PAGESIZE(0, 800, 800, '') + + // 循环打印每个选中的货位 + for (let i = 0; i < this.dataListSelections.length; i++) { + const location = this.dataListSelections[i] + + if (i > 0) { + LODOP.NEWPAGE() // 新页 + } + + // 绘制外边框(圆角效果) + LODOP.ADD_PRINT_RECT('3mm', '3mm', '74mm', '74mm', 0, 1) + + // 添加标题背景条 + LODOP.ADD_PRINT_RECT('8mm', '8mm', '64mm', '8mm', 0, 1) + const titleBg = LODOP.ADD_PRINT_RECT('8mm', '8mm', '64mm', '8mm', 0, 1) + LODOP.SET_PRINT_STYLEA(titleBg, "ItemType", 1) + LODOP.SET_PRINT_STYLEA(titleBg, "FillStyle", 1) + LODOP.SET_PRINT_STYLEA(titleBg, "FillColor", "#F5F5F5") + + // 添加标题文字 + const titleIndex = LODOP.ADD_PRINT_TEXT('9.5mm', '10mm', '60mm', '6mm', '货位信息标签') + LODOP.SET_PRINT_STYLEA(titleIndex, "FontName", "Microsoft YaHei") + LODOP.SET_PRINT_STYLEA(titleIndex, "FontSize", 11) + LODOP.SET_PRINT_STYLEA(titleIndex, "Bold", 1) + LODOP.SET_PRINT_STYLEA(titleIndex, "Alignment", 2) + + // 使用 LODOP 原生二维码打印功能(缩小尺寸) + const qrIndex = LODOP.ADD_PRINT_BARCODE('20mm', '10mm', '25mm', '25mm', 'QRCode', location.locationId) + LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeVersion", 4) + LODOP.SET_PRINT_STYLEA(qrIndex, "QRCodeErrorLevel", "M") + + // 添加右侧信息(左右分布格式) + // 货位编码 + const text1 = LODOP.ADD_PRINT_TEXT('22mm', '38mm', '36mm', '6mm', '货位编码:' + (location.locationId || '')) + LODOP.SET_PRINT_STYLEA(text1, "FontName", "Microsoft YaHei") + LODOP.SET_PRINT_STYLEA(text1, "FontSize", 10) + LODOP.SET_PRINT_STYLEA(text1, "Bold", 1) + + // 货位名称 + const text2 = LODOP.ADD_PRINT_TEXT('32mm', '38mm', '36mm', '6mm', '货位名称:' + (location.locationName || '')) + LODOP.SET_PRINT_STYLEA(text2, "FontName", "Microsoft YaHei") + LODOP.SET_PRINT_STYLEA(text2, "FontSize", 10) + + // 所属仓库 + const text3 = LODOP.ADD_PRINT_TEXT('42mm', '38mm', '36mm', '6mm', '所属仓库:' + (location.warehouseName || location.warehouseId || '')) + LODOP.SET_PRINT_STYLEA(text3, "FontName", "Microsoft YaHei") + LODOP.SET_PRINT_STYLEA(text3, "FontSize", 10) + + // 添加底部文字(可选) + const footer = LODOP.ADD_PRINT_TEXT('68mm', '10mm', '60mm', '4mm', '请扫描二维码查看详情') + LODOP.SET_PRINT_STYLEA(footer, "FontName", "Microsoft YaHei") + LODOP.SET_PRINT_STYLEA(footer, "FontSize", 7) + LODOP.SET_PRINT_STYLEA(footer, "FontColor", "#999999") + LODOP.SET_PRINT_STYLEA(footer, "Alignment", 2) + } + + // 预览打印 + LODOP.PREVIEW() + + } catch (error) { + console.error('打印失败:', error) + this.$message.error('打印失败: ' + error.message) + } }, // 校验用户是否收藏 favoriteIsOk() {