From 71a5e76478ed203ea22970a7505c0b89f1592a9a Mon Sep 17 00:00:00 2001 From: "han\\hanst" Date: Fri, 15 Aug 2025 10:03:20 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E6=9D=A1=E7=A0=81=EF=BC=9B?= =?UTF-8?q?=E6=89=93=E5=8B=BE=EF=BC=9B=E5=AE=BD=E9=AB=98=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/print/PrintService.vue | 38 +--- src/utils/zplGenerator.js | 143 +++++++++---- src/utils/zplUtil.js | 56 ----- src/utils/zplUtil2.js | 59 ------ .../modules/labelSetting/LabelDesigner.vue | 42 ++-- .../labelSetting/components/DesignCanvas.vue | 6 +- .../labelSetting/components/DesignElement.vue | 13 -- .../components/HorizontalToolbar.vue | 7 - .../labelSetting/components/PropertyForm.vue | 191 +++++++++++++++--- .../labelSetting/components/PropertyPanel.vue | 2 +- .../labelSetting/components/ZPLPreview.vue | 2 +- .../modules/labelSetting/label_setting.vue | 3 +- 12 files changed, 313 insertions(+), 249 deletions(-) delete mode 100644 src/utils/zplUtil.js delete mode 100644 src/utils/zplUtil2.js diff --git a/src/components/print/PrintService.vue b/src/components/print/PrintService.vue index 273d772..a1bd20b 100644 --- a/src/components/print/PrintService.vue +++ b/src/components/print/PrintService.vue @@ -77,12 +77,14 @@
+
支持1-10份打印，RFID标签将逐张处理
@@ -303,22 +305,6 @@ export default { * 直接网络打印 */ async printToNetworkPrinter(printerIP) { - /*this.printLoading = true - this.$emit('print-start') - - try { - - - } catch (error) { - console.error('网络打印失败:', error) - this.$message.error(`网络打印失败: ${error.message}`) - this.$emit('print-error', error) - } finally { - this.printLoading = false - this.$emit('print-end') - }*/ - // 直接发送到网络打印机 - //this.$emit('print-start') await fetch(`http://${printerIP}:9100`, { method: 'POST', headers: { @@ -328,15 +314,6 @@ export default { mode: 'no-cors' }) this.$message.success(`打印任务已发送到 ${printerIP}`) - //this.$emit('print-success', { printerIP }) - console.log('网络打印成功:', { - printerIP, - zplCode: this.zplCode, - paperSize: this.paperSize, - orientation: this.orientation, - dpi: this.dpi - }) - //this.$emit('print-end') } } } @@ -511,6 +488,13 @@ export default { line-height: 1.4; } +.form-hint { + margin-top: 6px; + font-size: 12px; + color: #909399; + line-height: 1.4; +} + /* 响应式设计 */ @media (max-width: 600px) { .print-method { diff --git a/src/utils/zplGenerator.js b/src/utils/zplGenerator.js index 30e48b0..01632ab 100644 --- a/src/utils/zplGenerator.js +++ b/src/utils/zplGenerator.js @@ -5,11 +5,12 @@ import { CoordinateTransformer } from './coordinateTransform.js' * 统一处理不同打印方向的ZPL代码生成 */ export class ZPLGenerator { - constructor(orientation = 'portrait', paperType = '60x40', customSize = null, paperId = null) { + constructor(orientation = 'portrait', paperType = '60x40', customSize = null, paperId = null, dpi = 300) { this.orientation = orientation this.paperType = paperType this.customSize = customSize this.paperId = paperId // 新增纸张ID支持 + this.dpi = dpi // 新增DPI支持 this.transformer = new CoordinateTransformer(orientation, paperType, customSize, paperId) this.config = this.getConfig() } @@ -32,6 +33,13 @@ export class ZPLGenerator { this.transformer.updatePaperId(paperId) } + /** + * 更新DPI（新增方法） + */ + updateDPI(dpi) { + this.dpi = dpi + } + /** * 获取配置参数 */ @@ -89,8 +97,6 @@ export class ZPLGenerator { switch (element.type) { case 'text': return this.generateTextZPL(element, x, y) - case 'barcode': - return this.generateBarcodeZPL(element, x, y) case 'onecode': return this.generateOnecodeZPL(element, x, y) case 'qrcode': @@ -113,10 +119,11 @@ export class ZPLGenerator { */ generateTextZPL(element, x, y) { const zpl = [] - // 设置中文字体 zpl.push(`^CI28 ^CWJ,E:MSYH.TTF ^CFJ,${element.fontSize}`) - + if (element.isChecked) { + zpl.push(`^FO${x-60},${y}^GB45,45,2,B,0^FS ^FO${x-50},${y+10}^AJN,35,35^FD√^FS `) + } // 基础文本 const textCommand = element.newline ? `^FO${x},${y}^FB${element.lineWidth},${element.lineRows},0^CFJ,${element.fontSize}^FD${element.data}^FS` @@ -127,13 +134,13 @@ export class ZPLGenerator { // 加粗效果（通过偏移重复打印实现） if (element.bold) { const boldCommands = element.newline ? [ - `^FO${x+1},${y}^FB${element.lineWidth},${element.lineRows},0^CFJ,${element.fontSize}^FD${element.data}^FS`, - `^FO${x},${y+1}^FB${element.lineWidth},${element.lineRows},0^CFJ,${element.fontSize}^FD${element.data}^FS`, - `^FO${x+1},${y+1}^FB${element.lineWidth},${element.lineRows},0^CFJ,${element.fontSize}^FD${element.data}^FS` + `^FO${x + 1},${y}^FB${element.lineWidth},${element.lineRows},0^CFJ,${element.fontSize}^FD${element.data}^FS`, + `^FO${x},${y + 1}^FB${element.lineWidth},${element.lineRows},0^CFJ,${element.fontSize}^FD${element.data}^FS`, + `^FO${x + 1},${y + 1}^FB${element.lineWidth},${element.lineRows},0^CFJ,${element.fontSize}^FD${element.data}^FS` ] : [ - `^FO${x+1},${y}^FD${element.data}^FS`, - `^FO${x},${y+1}^FD${element.data}^FS`, - `^FO${x+1},${y+1}^FD${element.data}^FS` + `^FO${x + 1},${y}^FD${element.data}^FS`, + `^FO${x},${y + 1}^FD${element.data}^FS`, + `^FO${x + 1},${y + 1}^FD${element.data}^FS` ] zpl.push(...boldCommands) @@ -142,24 +149,57 @@ export class ZPLGenerator { return zpl.join('\n') } - /** - * 生成条码ZPL代码 - */ - generateBarcodeZPL(element, x, y) { - const orientation = this.config.barcodeOrientation - const additionalParams = orientation === 'B' ? ',Y,N,N' : ',' - - return `^FO${x},${y}^BY${element.width}^BC${orientation},${element.height}${additionalParams}^FD${element.data}^FS` - } - /** * 生成一维码ZPL代码 */ generateOnecodeZPL(element, x, y) { const orientation = this.config.barcodeOrientation - const additionalParams = orientation === 'B' ? ',' : ',' + const barcodeType = element.barcodeType || 'CODE128' + const showContent = element.showContent !== false // 默认显示内容 + + // 将毫米转换为ZPL单位 + // 宽度：ZPL的^BY宽度参数控制窄条宽度倍数 (范围1-10) + // 根据ZPL规范，这个参数不是直接的物理尺寸，而是相对倍数 + // 使用经验公式：倍数 ≈ 宽度(mm) * 1.5，确保在1-10范围内 + const widthMM = parseFloat(element.width) || 2 + const width = Math.max(1, Math.min(10, Math.round(widthMM * 1.5))) + + // 高度：毫米转换为点数，使用精确的DPI转换公式 + const height = Math.max(1, Math.round((element.height || 15) * this.dpi / 25.4)) + + // 根据条码类型选择ZPL指令 + let zplCommand = '' + switch (barcodeType) { + case 'CODE128': + zplCommand = `^BC${orientation}` + break + case 'CODE39': + zplCommand = `^B3${orientation}` + break + case 'CODE93': + zplCommand = `^BA${orientation}` + break + case 'EAN13': + zplCommand = `^BE${orientation}` + break + case 'EAN8': + zplCommand = `^B8${orientation}` + break + case 'UPCA': + zplCommand = `^BU${orientation}` + break + case 'UPCE': + zplCommand = `^B9${orientation}` + break + default: + zplCommand = `^BC${orientation}` // 默认使用CODE128 + } - return `^FO${x},${y}^BY${element.width}^BC${orientation},${element.height}${additionalParams}^FD${element.data}^FS` + // 构建完整的ZPL指令 + const contentParam = showContent ? 'Y' : 'N' + const additionalParams = orientation === 'B' ? `,${contentParam},N,N` : `,${contentParam}` + + return `^FO${x},${y}^BY${width}${zplCommand},${height}${additionalParams}^FD${element.data}^FS` } /** @@ -167,10 +207,37 @@ export class ZPLGenerator { */ generateQRCodeZPL(element, x, y) { const orientation = this.config.qrcodeOrientation + const data = element.data || '' + + // 将毫米转换为ZPL尺寸单位，使用精确的DPI转换公式 + // 二维码的尺寸参数是模块大小，通常1-10 + const sizeInDots = Math.max(1, Math.round((element.height || 10) * this.dpi / 25.4)) + // 将点数转换为ZPL模块大小 (大约每20-30个点为1个模块) + let size = Math.max(1, Math.min(10, Math.round(sizeInDots / 25))) + + // 根据数据长度自动调整最小尺寸，确保能容纳数据 + if (data.length > 300) { + size = Math.max(size, 8) // 超长数据需要更大的尺寸 + } else if (data.length > 200) { + size = Math.max(size, 6) // 长数据需要更大的尺寸 + } else if (data.length > 100) { + size = Math.max(size, 4) // 中等数据需要中等尺寸 + } else { + size = Math.max(size, 2) // 短数据使用较小尺寸 + } - return `^FO${x},${y}^BQ${orientation},2,${element.height},^FDLA,${element.data}^FS` + // 尝试使用更明确的二维码格式 + // 对于长数字内容，使用数字模式可能更有效 + if (/^\d+$/.test(data)) { + // 纯数字内容，使用数字模式 + return `^FO${x},${y}^BQ${orientation},2,${size}^FDMN,${data}^FS` + } else { + // 混合内容，使用自动模式 + return `^FO${x},${y}^BQ${orientation},2,${size}^FDMA,${data}^FS` + } } + /** * 生成图片ZPL代码 */ @@ -209,15 +276,17 @@ export class ZPLGenerator { */ generateSerialNumberZPL(element, x, y) { const zpl = [] + // 设置中文字体 + zpl.push(`^CI28 ^CWJ,E:MSYH.TTF ^CFJ,${element.fontSize}`) const bold = element.bold || false // 加粗（可选） const serialStr = '流水号' const base = `^FO${x},${y}^FD${element.data}^FS` zpl.push(base) // 可选：加粗效果（重复打印） if (bold) { - zpl.push(`^FO${x+1},${y}^FD${serialStr}^FS`) - zpl.push(`^FO${x},${y+1}^FD${serialStr}^FS`) - zpl.push(`^FO${x+1},${y+1}^FD${serialStr}^FS`) + zpl.push(`^FO${x + 1},${y}^FD${serialStr}^FS`) + zpl.push(`^FO${x},${y + 1}^FD${serialStr}^FS`) + zpl.push(`^FO${x + 1},${y + 1}^FD${serialStr}^FS`) } return zpl.join('\n') } @@ -229,20 +298,22 @@ export class ZPLGenerator { * @param {string} paperType - 纸张类型（兼容性） * @param {Object} customSize - 自定义尺寸（兼容性） * @param {number} paperId - 纸张ID（新增） + * @param {number} dpi - DPI（新增） * @returns {ZPLGenerator} 生成器实例 */ -export function createZPLGenerator(orientation, paperType = null, customSize = null, paperId = null) { - return new ZPLGenerator(orientation, paperType, customSize, paperId) +export function createZPLGenerator(orientation, paperType = null, customSize = null, paperId = null, dpi = 300) { + return new ZPLGenerator(orientation, paperType, customSize, paperId, dpi) } /** * 根据纸张ID创建ZPL生成器实例（新增方法） * @param {number} paperId - 纸张ID * @param {string} orientation - 打印方向 + * @param {number} dpi - DPI（新增） * @returns {ZPLGenerator} 生成器实例 */ -export function createZPLGeneratorById(paperId, orientation = 'portrait') { - return new ZPLGenerator(orientation, null, null, paperId) +export function createZPLGeneratorById(paperId, orientation = 'portrait', dpi = 300) { + return new ZPLGenerator(orientation, null, null, paperId, dpi) } /** @@ -251,10 +322,11 @@ export function createZPLGeneratorById(paperId, orientation = 'portrait') { * @param {string} orientation - 打印方向 * @param {string} paperType - 纸张类型（兼容性） * @param {number} paperId - 纸张ID（新增） + * @param {number} dpi - DPI（新增） * @returns {string} ZPL代码 */ -export function generateZPL(elements, orientation = 'portrait', paperType = null, paperId = null) { - const generator = new ZPLGenerator(orientation, paperType, null, paperId) +export function generateZPL(elements, orientation = 'portrait', paperType = null, paperId = null, dpi = 300) { + const generator = new ZPLGenerator(orientation, paperType, null, paperId, dpi) return generator.generate(elements) } @@ -263,10 +335,11 @@ export function generateZPL(elements, orientation = 'portrait', paperType = null * @param {Array} elements - 设计元素 * @param {number} paperId - 纸张ID * @param {string} orientation - 打印方向 + * @param {number} dpi - DPI（新增） * @returns {string} ZPL代码 */ -export function generateZPLById(elements, paperId, orientation = 'portrait') { - const generator = new ZPLGenerator(orientation, null, null, paperId) +export function generateZPLById(elements, paperId, orientation = 'portrait', dpi = 300) { + const generator = new ZPLGenerator(orientation, null, null, paperId, dpi) return generator.generate(elements) } diff --git a/src/utils/zplUtil.js b/src/utils/zplUtil.js deleted file mode 100644 index a6b09e1..0000000 --- a/src/utils/zplUtil.js +++ /dev/null @@ -1,56 +0,0 @@ -export function generateZPL(elements,zplHOrP) { - const zpl = ['^XA']; - zpl.push(zplHOrP) - elements.forEach(el => { - const x = Math.round(el.x); - const y = Math.round(el.y * 1.5); // 画布到 ZPL 像素转换 - - switch (el.type) { - case 'text': - zpl.push(`^CI28^LH0,^JUS^CWJ,E:SIMSUN.FNT^CFJ,${el.fontSize},${el.fontSize}`); - zpl.push(el.newline - ? `^FO${x},${y}^FB${el.lineWidth},${el.lineRows},0^CFJ,${el.fontSize}^FD${el.data}^FS` - : `^FO${x},${y}^FD${el.data}^FS`); - if (el.bold) { - zpl.push(el.newline - ? `^FO${x+1},${y}^FB${el.lineWidth},${el.lineRows},0^CFJ,${el.fontSize}^FD${el.data}^FS` - : `^FO${x+1},${y}^FD${el.data}^FS`); - zpl.push(el.newline - ? `^FO${x},${y+1}^FB${el.lineWidth},${el.lineRows},0^CFJ,${el.fontSize}^FD${el.data}^FS` - : `^FO${x},${y+1}^FD${el.data}^FS`); - zpl.push(el.newline - ? `^FO${x+1},${y+1}^FB${el.lineWidth},${el.lineRows},0^CFJ,${el.fontSize}^FD${el.data}^FS` - : `^FO${x+1},${y+1}^FD${el.data}^FS`); - } - break; - - case 'barcode': - zpl.push(`^FO${x},${y}^BY${el.width}^BCN,${el.height},^FD${el.data}^FS`); - break; - - case 'qrcode': - zpl.push(`^FO${x},${y}^BQN,2,${el.height},^FDLA,${el.data}^FS`); - break; - - case 'onecode': - zpl.push(`^FO${x},${y}^BY${el.width}^BCN,${el.height},^FD${el.data}^FS`); - break; - - case 'pic': - if (el.data) { - zpl.push(`^FO${x},${y}^GFA,${el.data}`); - } - break; - - case 'hLine': - zpl.push(`^FO${x},${y}^GB${el.width},${el.height},3,B^FS`); - break; - - case 'vLine': - zpl.push(`^FO${x},${y}^GB1,${el.height},${el.width},B^FS`); - break; - } - }); - zpl.push('^XZ'); - return zpl.join('\n'); -} diff --git a/src/utils/zplUtil2.js b/src/utils/zplUtil2.js deleted file mode 100644 index 09b0dc4..0000000 --- a/src/utils/zplUtil2.js +++ /dev/null @@ -1,59 +0,0 @@ -export function generateZPL(elements,zplHOrP) { - const zpl = ['^XA']; - //zpl.push('^POI'); - zpl.push(zplHOrP) - elements.forEach(el => { - const x = Math.round(el.y * 1.3); - const y = Math.round((750-el.x) * 1.5); // 你之前的转换比例保持不变 - - switch (el.type) { - case 'text': - zpl.push(`^CI28^LH0,^JUS^CWJ,E:SIMSUN.FNT^CFJ,${el.fontSize},${el.fontSize}`); - zpl.push(el.newline - ? `^FO${x},${y}^FB${el.lineWidth},${el.lineRows},0^CFJ,${el.fontSize}^FD${el.data}^FS` - : `^FO${x},${y}^FD${el.data}^FS`); - if (el.bold) { - zpl.push(el.newline - ? `^FO${x+1},${y}^FB${el.lineWidth},${el.lineRows},0^CFJ,${el.fontSize}^FD${el.data}^FS` - : `^FO${x+1},${y}^FD${el.data}^FS`); - zpl.push(el.newline - ? `^FO${x},${y+1}^FB${el.lineWidth},${el.lineRows},0^CFJ,${el.fontSize}^FD${el.data}^FS` - : `^FO${x},${y+1}^FD${el.data}^FS`); - zpl.push(el.newline - ? `^FO${x+1},${y+1}^FB${el.lineWidth},${el.lineRows},0^CFJ,${el.fontSize}^FD${el.data}^FS` - : `^FO${x+1},${y+1}^FD${el.data}^FS`); - } - break; - - case 'barcode': - zpl.push(`^FO${x},${y}^BY${el.width}^BCB,${el.height},Y,N,N^FD${el.data}^FS`); - break; - - case 'qrcode': - zpl.push(`^FO${x},${y}^BQB,2,${el.height},^FDLA,${el.data}^FS`); - break; - - case 'onecode': - zpl.push(`^FO${x},${y}^BY${el.width}^BCB,${el.height},^FD${el.data}^FS`); - break; - - case 'pic': - if (el.data) { - zpl.push(`^FO${x},${y}^GFA,${el.data}`); - } - break; - - case 'hLine': - const y1 = Math.round(1200-el.x)-el.width; - zpl.push(`^FO${x},${y1}^FWR^GB${el.height},${el.width},3,B^FS`); - break; - case 'vLine': - zpl.push(`^FO${x},${y}^FWR^GB${el.height},${el.width},3,B^FS`); - break; - - - } - }); - zpl.push('^XZ'); - return zpl.join('\n'); -} diff --git a/src/views/modules/labelSetting/LabelDesigner.vue b/src/views/modules/labelSetting/LabelDesigner.vue index 3c2c0c9..f3c5247 100644 --- a/src/views/modules/labelSetting/LabelDesigner.vue +++ b/src/views/modules/labelSetting/LabelDesigner.vue @@ -286,8 +286,8 @@ export default { return new CoordinateTransformer(this.orientation, null, null, this.selectedPaper) }, zplGenerator() { - // 使用纸张ID创建ZPL生成器 - return new ZPLGenerator(this.orientation, null, null, this.selectedPaper) + // 使用纸张ID和DPI创建ZPL生成器 + return new ZPLGenerator(this.orientation, null, null, this.selectedPaper, this.selectedDPI) } }, async created() { @@ -432,9 +432,19 @@ export default { if (data.code === 200) { // 修复：对每个元素补全属性，保证响应式 const defaultElement = { - type: '', x: 0, y: 0, data: '', fontSize: 30, bold: false, newline: false, lineRows: 2, lineWidth: 200, digits: 6, step: 1, width: 100, height: 30, previewUrl: '' + type: '', x: 0, y: 0, data: '', fontSize: 30, bold: false, newline: false, lineRows: 2, + lineWidth: 200, digits: 6, step: 1, width: 100, height: 30, previewUrl: '', barcodeType: '', showContent: true,showPic:true, + showMainSeq:false,seqName:'',isChecked:false }; - this.elements = (data.data || []).map(item => Object.assign({}, defaultElement, item)); + this.elements = (data.data || []).map(item => { + const element = Object.assign({}, defaultElement, item); + // 为一维码元素确保有新属性和合理的毫米默认值 + if (element.type === 'onecode') { + if (!element.barcodeType) element.barcodeType = 'CODE128'; + if (element.showContent === undefined) element.showContent = true; + } + return element; + }); } } catch (error) { this.$message.error('加载标签元素失败') @@ -486,21 +496,19 @@ export default { text: { width: 100, height: 30, - data: '' - }, - barcode: { - width: 3, - height: 50, - data: '' + data: '', + isChecked:false, }, onecode: { - width: 3, - height: 50, - data: '' + width: 2, // 默认宽度2mm + height: 15, // 默认高度15mm + data: '', + barcodeType: 'CODE128', // 默认条码类型 + showContent: true // 默认显示内容 }, qrcode: { width: 10, - height: 10, + height: 10, // 默认尺寸10mm data: '' }, pic: { @@ -521,7 +529,8 @@ export default { digits: 6, step: 1, data: '流水号', // 默认显示值 - fontSize: 30 + fontSize: 30, + showMainSeq: false, } } @@ -609,7 +618,7 @@ export default { * 判断是否为严格模式元素 */ isStrictElement(elementType) { - return ['barcode', 'onecode', 'qrcode'].includes(elementType) + return ['onecode', 'qrcode'].includes(elementType) }, /** @@ -618,7 +627,6 @@ export default { getElementTypeName(elementType) { const nameMap = { text: '文本', - barcode: '条形码', onecode: '一维码', qrcode: '二维码', pic: '图片', diff --git a/src/views/modules/labelSetting/components/DesignCanvas.vue b/src/views/modules/labelSetting/components/DesignCanvas.vue index fb7e1f9..adc18ab 100644 --- a/src/views/modules/labelSetting/components/DesignCanvas.vue +++ b/src/views/modules/labelSetting/components/DesignCanvas.vue @@ -240,7 +240,6 @@ export default { getBoundaryStrategy(elementType) { const strategyMap = { text: 'flexible', // 文本允许部分超出 - barcode: 'strict', // 条码必须完全在画布内 onecode: 'strict', // 一维码必须完全在画布内 qrcode: 'strict', // 二维码必须完全在画布内 pic: 'flexible', // 图片允许部分超出 @@ -295,7 +294,6 @@ export default { // 更新后的基础尺寸映射（更小巧） const baseSizeMap = { text: { width: 80, height: 24 }, // 文本元素更紧凑 - barcode: { width: 70, height: 46 }, // 条码元素缩小 onecode: { width: 70, height: 46 }, // 一维码元素缩小 qrcode: { width: 60, height: 60 }, // 二维码元素缩小 pic: { width: 60, height: 60 }, // 图片元素缩小 @@ -332,8 +330,8 @@ export default { } } - // 对于条码和一维码，保持固定尺寸 - if (element.type === 'barcode' || element.type === 'onecode') { + // 对于一维码，保持固定尺寸 + if (element.type === 'onecode') { return { width: 70, // 固定宽度 height: 46 // 固定高度 diff --git a/src/views/modules/labelSetting/components/DesignElement.vue b/src/views/modules/labelSetting/components/DesignElement.vue index 2780235..55228c7 100644 --- a/src/views/modules/labelSetting/components/DesignElement.vue +++ b/src/views/modules/labelSetting/components/DesignElement.vue @@ -12,15 +12,6 @@ {{ element.data || '文本元素' }} - -
- - - -
条码
-
-
@@ -244,7 +235,6 @@ export default { white-space: nowrap; } -.barcode-element, .onecode-element { display: flex; flex-direction: column; @@ -255,7 +245,6 @@ export default { min-width: 60px; } -.barcode-element svg, .onecode-element svg { width: 60px; height: 36px; @@ -340,7 +329,6 @@ export default { border-color: rgba(52, 152, 219, 0.3); } -.design-element[data-type="barcode"], .design-element[data-type="onecode"] { border-color: rgba(255, 152, 0, 0.4); } @@ -398,7 +386,6 @@ export default { padding: 3px 6px; } - .barcode-element svg, .onecode-element svg { width: 50px; height: 30px; diff --git a/src/views/modules/labelSetting/components/HorizontalToolbar.vue b/src/views/modules/labelSetting/components/HorizontalToolbar.vue index e65512e..2000979 100644 --- a/src/views/modules/labelSetting/components/HorizontalToolbar.vue +++ b/src/views/modules/labelSetting/components/HorizontalToolbar.vue @@ -61,13 +61,6 @@ export default { label: '文本', color: '#409EFF' }, - { - type: 'barcode', - icon: 'el-icon-tickets', - label: '条码', - rotate: true, - color: '#67C23A' - }, { type: 'qrcode', icon: 'el-icon-menu', diff --git a/src/views/modules/labelSetting/components/PropertyForm.vue b/src/views/modules/labelSetting/components/PropertyForm.vue index 181d8e7..75c5a0d 100644 --- a/src/views/modules/labelSetting/components/PropertyForm.vue +++ b/src/views/modules/labelSetting/components/PropertyForm.vue @@ -26,6 +26,9 @@ 自动换行
+ + 打勾 + @@ -263,7 +315,7 @@ export default { this.$refs.fileInput.click() } }, - + /*流水号信息的modal*/ serialInfoModal(row){ let rowData = { @@ -276,9 +328,21 @@ export default { }) }, validateQRSize() { - if (this.element.height > 10) { - this.$message.warning('二维码最大尺寸为10') - this.element.height = 10 + const dataLength = this.element.data ? this.element.data.length : 0 + + // 毫米单位限制 + if (this.element.height > 50) { + this.$message.warning('二维码最大尺寸为50mm') + this.element.height = 50 + } else if (this.element.height < 3) { + this.element.height = 3 + } + + // 根据数据长度给出尺寸建议 + if (dataLength > 200 && this.element.height < 15) { + this.$message.info('长内容建议使用15mm或以上尺寸，以确保扫描成功') + } else if (dataLength > 100 && this.element.height < 12) { + this.$message.info('中等长度内容建议使用12mm或以上尺寸') } }, @@ -289,7 +353,7 @@ export default { try { const imageData = await this.processImage(file) this.$emit('image-upload', imageData) - + // 重置文件输入框的值，确保下次选择相同文件时也能触发change事件 event.target.value = '' } catch (error) { @@ -431,17 +495,39 @@ export default { border-left: 2px solid #409eff; } +.form-tip .tip-warning { + color: #f56c6c; + font-weight: 500; + border-left: 2px solid #f56c6c; + padding-left: 6px; +} + +.form-tip .tip-info { + color: #e6a23c; + font-weight: 500; + border-left: 2px solid #e6a23c; + padding-left: 6px; +} + +.form-tip .tip-normal { + color: #67c23a; + font-weight: 500; + border-left: 2px solid #67c23a; + padding-left: 6px; +} + .image-upload { margin-bottom: 8px; } .image-upload .el-button { width: 100%; - height: 60px; + height: 30px; border: 1px dashed #d9d9d9; border-radius: 4px; background: #fafafa; font-size: 12px; + color: black; } .image-upload .el-button:hover { @@ -628,6 +714,55 @@ export default { margin-bottom: 0 !important; } +/* 单选按钮组样式 */ +.form-item-half .el-radio-group { + display: flex !important; + gap: 8px !important; + align-items: center !important; + padding-top: 4px; +} + +.form-item-half .el-radio { + margin-right: 0 !important; + font-size: 12px !important; + height: 20px !important; + line-height: 20px !important; +} + +.form-item-half .el-radio__label { + font-size: 12px !important; + padding-left: 4px !important; +} + +.form-item-half .el-radio__inner { + width: 12px !important; + height: 12px !important; +} + +/* 下拉选择框样式 */ +.form-item-half .el-select { + width: 100% !important; +} + +.form-item-half .el-select .el-input__inner { + height: 32px !important; + font-size: 13px !important; + border: 1px solid #dcdfe6 !important; + border-radius: 6px !important; + padding: 0 30px 0 12px !important; + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important; +} + +.form-item-half .el-select .el-input__inner:hover { + border-color: #c0c4cc !important; +} + +.form-item-half .el-select .el-input__inner:focus { + border-color: #409eff !important; + outline: none !important; + box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1) !important; +} + /* 复选框组样式 */ .checkbox-group { position: relative; diff --git a/src/views/modules/labelSetting/components/PropertyPanel.vue b/src/views/modules/labelSetting/components/PropertyPanel.vue index fb2f813..11ff384 100644 --- a/src/views/modules/labelSetting/components/PropertyPanel.vue +++ b/src/views/modules/labelSetting/components/PropertyPanel.vue @@ -147,7 +147,7 @@ export default { .property-form { flex: 0 0 auto; - max-height: 200px; + max-height: 250px; overflow-y: auto; } diff --git a/src/views/modules/labelSetting/components/ZPLPreview.vue b/src/views/modules/labelSetting/components/ZPLPreview.vue index 714a354..9745e67 100644 --- a/src/views/modules/labelSetting/components/ZPLPreview.vue +++ b/src/views/modules/labelSetting/components/ZPLPreview.vue @@ -122,7 +122,7 @@ export default { zplGenerator() { // 使用纸张ID创建ZPL生成器 if (typeof this.selectedPaper === 'number') { - return new ZPLGenerator(this.orientation, null, null, this.selectedPaper) + return new ZPLGenerator(this.orientation, null, null, this.selectedPaper, this.selectedDPI) } // 兼容旧格式 diff --git a/src/views/modules/labelSetting/label_setting.vue b/src/views/modules/labelSetting/label_setting.vue index a8fbf42..e59e572 100644 --- a/src/views/modules/labelSetting/label_setting.vue +++ b/src/views/modules/labelSetting/label_setting.vue @@ -61,9 +61,10 @@ fixed="left" header-align="center" align="center" - width="160" + width="200" :label=labels.operationLabel>