From b410c8c62fb66ebb18922028dff7b4a47e263fb8 Mon Sep 17 00:00:00 2001 From: "han\\hanst" Date: Fri, 15 Aug 2025 15:32:55 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9C=9F=E5=AE=9E=E6=95=B0=E6=8D=AE=E9=A2=84?= =?UTF-8?q?=E8=A7=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/labelSetting/label_setting.js | 6 + src/components/print/PrintService.vue | 4 +- src/utils/printUtils.js | 4 +- .../labelSetting/components/PropertyForm.vue | 4 +- .../labelSetting/components/PropertyPanel.vue | 13 ++ .../labelSetting/components/ZPLPreview.vue | 174 +++++++++++++++++- 6 files changed, 198 insertions(+), 7 deletions(-) diff --git a/src/api/labelSetting/label_setting.js b/src/api/labelSetting/label_setting.js index ac9d919..eff5e3f 100644 --- a/src/api/labelSetting/label_setting.js +++ b/src/api/labelSetting/label_setting.js @@ -17,3 +17,9 @@ export const getUserLabelPrinters = data => createAPI('/label/setting/getUserLab // 打印标签 export const printLabel = data => createAPI('/label/setting/printLabel','post',data) + +// 预览标签（手动数据） +export const previewLabelWithData = data => createAPI('/label/setting/previewLabelWithData','post',data) + +// 使用真实数据预览标签 +export const previewLabelWithRealData = data => createAPI('/label/setting/previewLabelWithRealData','post',data) diff --git a/src/components/print/PrintService.vue b/src/components/print/PrintService.vue index a1bd20b..c8c961c 100644 --- a/src/components/print/PrintService.vue +++ b/src/components/print/PrintService.vue @@ -205,7 +205,7 @@ export default { type: 'warning' } ).then(() => { - this.$message.info('请联系管理员配置打印机') + this.$message.warning('请联系管理员配置打印机') }) return } @@ -297,7 +297,7 @@ export default { localStorage.setItem('localPrinterIP', value) this.printToNetworkPrinter(value) }).catch(() => { - this.$message.info('已取消打印') + this.$message.warning('已取消打印') }) }, diff --git a/src/utils/printUtils.js b/src/utils/printUtils.js index af93794..2aa1f95 100644 --- a/src/utils/printUtils.js +++ b/src/utils/printUtils.js @@ -290,7 +290,7 @@ export async function quickPrint(vue, config) { type: 'warning' } ).then(() => { - vue.$message.info('请联系管理员配置打印机') + vue.$message.warning('请联系管理员配置打印机') }) return } @@ -338,4 +338,4 @@ export default { PrintService, quickPrint, createPrintService -} \ No newline at end of file +} diff --git a/src/views/modules/labelSetting/components/PropertyForm.vue b/src/views/modules/labelSetting/components/PropertyForm.vue index 940901c..b6c72d1 100644 --- a/src/views/modules/labelSetting/components/PropertyForm.vue +++ b/src/views/modules/labelSetting/components/PropertyForm.vue @@ -346,9 +346,9 @@ export default { // 根据数据长度给出尺寸建议 if (dataLength > 200 && this.element.height < 15) { - this.$message.info('长内容建议使用15mm或以上尺寸，以确保扫描成功') + this.$message.warning('长内容建议使用15mm或以上尺寸，以确保扫描成功') } else if (dataLength > 100 && this.element.height < 12) { - this.$message.info('中等长度内容建议使用12mm或以上尺寸') + this.$message.warning('中等长度内容建议使用12mm或以上尺寸') } }, diff --git a/src/views/modules/labelSetting/components/PropertyPanel.vue b/src/views/modules/labelSetting/components/PropertyPanel.vue index 11ff384..c557099 100644 --- a/src/views/modules/labelSetting/components/PropertyPanel.vue +++ b/src/views/modules/labelSetting/components/PropertyPanel.vue @@ -48,6 +48,7 @@ :canvas-size="canvasSize" :selectedDPI="canvasSize.dpi !== undefined ? canvasSize.dpi : 203" @preview="$emit('preview')" + @auto-save="handleAutoSave" /> @@ -83,6 +84,18 @@ export default { this.$set(this.selectedElement, 'data', imageData.zplData) this.$set(this.selectedElement, 'previewUrl', imageData.previewUrl) } + }, + + handleAutoSave(callback) { + // 触发保存事件到最顶层的LabelDesigner组件 + this.$emit('save') + + // 模拟保存完成（实际应该等待保存API返回） + setTimeout(() => { + if (callback && callback.success) { + callback.success() + } + }, 1000) } } } diff --git a/src/views/modules/labelSetting/components/ZPLPreview.vue b/src/views/modules/labelSetting/components/ZPLPreview.vue index 9745e67..1bf28e8 100644 --- a/src/views/modules/labelSetting/components/ZPLPreview.vue +++ b/src/views/modules/labelSetting/components/ZPLPreview.vue @@ -7,17 +7,33 @@ 预览DPI: {{ currentDpiLabel }} + +
预览 + + 真实数据预览 + + setTimeout(resolve, 500)) + + // 3. 调用真实数据预览API + const response = await previewLabelWithRealData({ + reportId: reportId + }) + + if (response && response.data && response.data.code === 200) { + const realZplCode = response.data.data + + // 使用真实数据的ZPL代码生成预览图 + await this.generatePreviewWithZpl(realZplCode) + + this.$message.success('真实数据预览生成成功') + } else { + this.$message.error((response.data && response.data.msg) || '真实数据预览失败') + } + } catch (error) { + console.error('真实数据预览失败:', error) + this.$message.error('真实数据预览失败: ' + (error.message || '网络错误')) + } finally { + this.realDataPreviewLoading = false + } + }, + + async autoSave() { + // 通过事件通知父组件执行保存 + return new Promise((resolve, reject) => { + // 发送保存事件到父组件 + this.$emit('auto-save', { + success: resolve, + error: reject + }) + }) + }, + + async generatePreviewWithZpl(zplCode) { + if (!zplCode) { + this.previewImage = null + return + } + + try { + const labelSize = this.getLabelarySize() + const apiUrl = `https://api.labelary.com/v1/printers/${this.labelaryDpmm}dpmm/labels/${labelSize}/0/` + const response = await axios.post(apiUrl, zplCode, { + responseType: 'blob', + timeout: 15000, + headers: { + 'Content-Type': 'application/x-www-form-urlencoded' + } + }) + + // 清理旧的预览图片URL + if (this.previewImage) { + URL.revokeObjectURL(this.previewImage) + } + this.previewImage = URL.createObjectURL(response.data) + } catch (error) { + console.error('预览图生成失败:', error) + this.$message.error('预览图生成失败') + } + }, + handlePrintSuccess(result) { console.log('打印成功:', result) // 可以在这里添加打印成功后的逻辑，比如更新状态等 @@ -341,6 +445,74 @@ export default { flex: 1; } +.button-row { + display: flex; + gap: 10px; + align-items: stretch; + justify-content: space-between; +} + +.button-row > * { + flex: 1 1 0; + height: 24px !important; + min-height: 24px !important; + max-height: 24px !important; + font-size: 10px !important; + line-height: 1.2 !important; + border-radius: 3px !important; + margin: 0 !important; + box-sizing: border-box !important; +} + +.button-row .el-button, +.button-row .compact-btn { + flex: 1 1 0 !important; + height: 24px !important; + min-height: 24px !important; + max-height: 24px !important; + font-size: 10px !important; + line-height: 1.2 !important; + border-radius: 3px !important; + margin: 0 !important; + box-sizing: border-box !important; +} + +.button-row .el-button .el-icon, +.button-row .compact-btn .el-icon { + font-size: 10px !important; + margin-right: 2px !important; +} + +/* 强制覆盖PrintButton组件的样式 */ +.button-row >>> .el-button { + flex: 1 1 0 !important; + height: 24px !important; + min-height: 24px !important; + max-height: 24px !important; + font-size: 10px !important; + line-height: 1.2 !important; + border-radius: 3px !important; + margin: 0 !important; + box-sizing: border-box !important; +} + +.dpi-info { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; +} + +.dpi-label { + color: #606266; + font-weight: 500; +} + +.dpi-value { + color: #303133; + font-weight: 600; +} + .preview-image { margin-bottom: 16px; text-align: center;