真实数据预览

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)

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('已取消打印')
       })
     },
 

src/utils/printUtils.js

@@ -290,7 +290,7 @@ export async function quickPrint(vue, config) {
               type: 'warning'
             }
           ).then(() => {
-            vue.$message.info('请联系管理员配置打印机')
+            vue.$message.warning('请联系管理员配置打印机')
           })
           return
         }

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或以上尺寸')
       }
     },
 

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"
       />
     </div>
   </div>
@@ -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)
     }
   }
 }

src/views/modules/labelSetting/components/ZPLPreview.vue

@@ -7,17 +7,33 @@
           <span class="dpi-label">预览DPI:</span>
           <span class="dpi-value">{{ currentDpiLabel }}</span>
         </div>
+      </div>
 
+      <div class="control-row button-row">
         <el-button
           type="primary"
-          size="small"
+          size="mini"
           icon="el-icon-view"
           :loading="previewLoading"
           @click="generatePreview"
+          class="compact-btn"
+          style="flex: 1; height: 24px; min-height: 24px; max-height: 24px; padding: 4px 2px; font-size: 10px; margin: 0; border-radius: 3px;"
         >
           预览
         </el-button>
 
+        <el-button
+          type="warning"
+          size="mini"
+          icon="el-icon-data-analysis"
+          :loading="realDataPreviewLoading"
+          @click="generateRealDataPreview"
+          class="compact-btn"
+          style="flex: 1; height: 24px; min-height: 24px; max-height: 24px; padding: 4px 2px; font-size: 10px; margin: 0; border-radius: 3px;"
+        >
+          真实数据预览
+        </el-button>
+
         <PrintButton
           :zpl-code="zplCode"
           :report-id="$route.params.labelSetting && $route.params.labelSetting.labelNo"
@@ -83,6 +99,7 @@ import { ZPLGenerator } from '@/utils/zplGenerator.js'
 import dynamicPaperConfig from '@/utils/paperConfigDynamic.js'
 import { debounce } from 'lodash'
 import { PrintButton } from '@/components/print'
+import { previewLabelWithRealData } from '@/api/labelSetting/label_setting.js'
 
 export default {
   name: 'ZPLPreview',
@@ -111,10 +128,12 @@ export default {
       default: 203
     }
   },
+  emits: ['auto-save'],
   data() {
     return {
       previewImage: null,
       previewLoading: false,
+      realDataPreviewLoading: false,
       autoPreview: true // 默认开启实时预览
     }
   },
@@ -301,6 +320,91 @@ export default {
       console.log('预览已清除')
     },
 
+    async generateRealDataPreview() {
+      const reportId = this.$route.params.labelSetting && this.$route.params.labelSetting.labelNo
+      if (!reportId) {
+        this.$message.warning('请先设置标签编号')
+        return
+      }
+
+      // 检查是否有未保存的更改
+      if (this.elements.length === 0) {
+        this.$message.warning('请先添加标签元素')
+        return
+      }
+
+      this.realDataPreviewLoading = true
+
+      try {
+        // 1. 先自动保存当前标签设置
+
+        await this.autoSave()
+
+        // 2. 等待一下确保保存完成
+        await new Promise(resolve => 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;