✨ feat: 特殊标签打印

klp-ui/package.json

@@ -42,6 +42,7 @@
     "bpmn-js-token-simulation": "0.10.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
+    "dom-to-image": "^2.6.0",
     "echarts": "5.4.0",
     "element-ui": "2.15.12",
     "file-saver": "2.0.5",
@@ -54,6 +55,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "mqtt": "^5.13.3",
     "nprogress": "0.2.0",
+    "print-js": "^1.6.0",
     "qrcode": "^1.5.4",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

klp-ui/src/views/wms/print/index.vue

@@ -346,7 +346,8 @@ export default {
       }
 
       try {
-        saveAsImage(
+        console.log(this.barCodeConfigs[index], index);
+       saveAsImage(
           this.barCodeConfigs[index].code,
           this.barCodeConfigs[index].textTpl,
           index,

klp-ui/src/views/wms/print/pages/gen/index.vue

@@ -21,160 +21,8 @@
         </el-button>
       </div>
     </div>
-
-    <el-alert title="信息填写完成后需要点击生成按钮才会出现在预览区域" type="info" show-icon></el-alert>
     <!-- 主内容区 - 增加卡片外层容器，提升整体层次感 -->
     <el-row :gutter="24" class="main-content">
-      
-      <!-- 左侧配置区 - 增加操作提示 -->
-      <el-col :span="8" class="left-col">
-        <div class="card-container">
-          <div class="left-container card">
-            <!-- 空状态提示 - 增加插图、优化文案 -->
-            <div v-if="drawerBarcodeData.length === 0" class="empty-state">
-              <div class="empty-icon">
-                <i class="el-icon-qrcode"></i>
-              </div>
-              <div class="empty-text">暂无二维码配置</div>
-              <div class="empty-desc">点击"添加二维码"按钮，开始创建打印配置</div>
-              <el-button type="primary" size="small" @click="handleAdd" class="empty-action-btn">
-                立即添加
-              </el-button>
-            </div>
-
-            <!-- 二维码配置表单列表 - 优化卡片间距和hover效果 -->
-            <el-form label-width="80px" size="small" label-position="top" v-else class="config-form-list">
-              <div v-for="(cfg, idx) in drawerBarcodeData" :key="idx" class="config-card"
-                :class="{ 'invalid-card': !isConfigValid(cfg) && cfg.ioType }" @mouseenter="cfg.hovered = true"
-                @mouseleave="cfg.hovered = false">
-                <!-- 配置卡片头部 - 增加序号背景色、优化操作按钮显示逻辑 -->
-                <div class="config-card-header">
-                  <div class="card-title-wrap">
-                    <span class="card-index">{{ idx + 1 }}</span>
-                    <span class="card-title">二维码配置</span>
-                    <el-tag size="mini" type="success" v-if="isConfigValid(cfg)" class="card-status-tag">
-                      已完善
-                    </el-tag>
-                    <el-tag size="mini" type="warning" v-else-if="cfg.ioType" class="card-status-tag">
-                      待完善
-                    </el-tag>
-                  </div>
-                  <div class="card-actions">
-                    <el-tooltip v-if="!cfg.gend" content="生成二维码" placement="top">
-                      <el-button v-loading="cfg.gening" type="text" size="mini" @click="handleGenerate(cfg, idx)" icon="el-icon-plus"
-                        :disabled="!isConfigValid(cfg)" class="action-btn">
-                      </el-button>
-                    </el-tooltip>
-                    <el-tooltip content="另存为图片" placement="top">
-                      <el-button type="text" size="mini" @click="saveAsImage(idx)" icon="el-icon-download"
-                        :disabled="!isConfigValid(cfg)" class="action-btn"></el-button>
-                    </el-tooltip>
-                    <el-tooltip content="删除配置" placement="top">
-                      <el-button type="text" size="mini" @click="handleDelete(cfg, idx)" icon="el-icon-delete"
-                        class="action-btn delete-btn"></el-button>
-                    </el-tooltip>
-                  </div>
-                </div>
-
-                <!-- 配置表单内容 - 优化间距、增加字段分组 -->
-                <div class="config-form-content">
-                  <el-row :gutter="8">
-                    <el-col :span="12">
-                      <el-form-item label="操作类型" :error="getError(cfg, 'ioType')" class="form-item">
-                        <el-select 
-                          v-model="cfg.ioType" 
-                          placeholder="请选择操作类型" 
-                          class="form-select"
-                          @change="(value) => {
-                            const prefix = value == 'in' ? '入库' : value == 'out' ? '出库' : value == 'transfer' ? '移库' : ''
-                            cfg.text = prefix + '二维码' + new Date().getTime()
-                          }"
-                        >
-                          <el-option label="入库" value="in" />
-                          <el-option label="出库" value="out" />
-                          <el-option label="移库" value="transfer" />
-                        </el-select>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                      <el-form-item 
-                        :label="cfg.ioType == 'in' ? '入库单据号' : cfg.ioType == 'out' ? '出库单据号' : cfg.ioType == 'transfer' ? '移库单据号' : '单据号'" 
-                        :error="getError(cfg, 'stockIoId')" 
-                        class="form-item"
-                      >
-                        <el-select clearable filterable size="mini" v-model="cfg.stockIoId" placeholder="请选择挂载单据"
-                          class="form-select" :disabled="!cfg.ioType">
-                          <el-option v-for="item in masterList.filter(i => i.ioType === cfg.ioType)"
-                            :key="item.stockIoId" :label="item.stockIoCode" :value="item.stockIoId" />
-                        </el-select>
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                  <el-row :gutter="8">
-                    <el-col :span="12">
-                      <el-form-item label="目标仓库" :error="getError(cfg, 'warehouseId')" class="form-item">
-                        <WarehouseSelect v-model="cfg.warehouseId" :disabled="!cfg.ioType" @change="(warehouse) => onTargetWarehouseChange(cfg, idx, warehouse)" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="12" v-if="cfg.ioType === 'transfer'">
-                      <el-form-item label="源仓库" :error="getError(cfg, 'fromWarehouseId')" class="form-item">
-                        <WarehouseSelect v-model="cfg.fromWarehouseId" :disabled="!cfg.ioType" @change="(warehouse) => onFromWarehouseChange(cfg, idx, warehouse)" />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                  <el-row :gutter="8">
-                    <el-col :span="12">
-                      <el-form-item label="物料类型" :error="getError(cfg, 'itemType')" class="form-item">
-                        <el-select v-model="cfg.itemType" placeholder="请选择物料类型" class="form-select">
-                          <el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
-                            :value="dict.value" />
-                        </el-select>
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                      <el-form-item label="物料信息" :error="getError(cfg, 'itemId')" class="form-item">
-                        <ProductSelect v-if="cfg.itemType === 'product'" v-model="cfg.itemId" placeholder="请选择产品"
-                          @change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
-                        <SemiSelect v-else-if="cfg.itemType === 'semi'" v-model="cfg.itemId" placeholder="请选择半成品"
-                          @change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
-                        <RawMaterialSelect v-else-if="cfg.itemType === 'raw_material'" v-model="cfg.itemId"
-                          placeholder="请选择原材料" @change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
-                        <el-input v-else disabled v-model="cfg.itemId" placeholder="请先选择物料类型" style="width: 100%;" />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-                  <el-row :gutter="8">
-                    <el-col :span="12">
-                      <el-form-item label="物料数量" :error="getError(cfg, 'count')" class="form-item">
-                        <el-input-number :controls=false controls-position="right" v-model="cfg.count" :min="1" :max="100" size="mini" placeholder="请输入数量" />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-
-                  <el-row :gutter="8">
-                    <el-col :span="12">
-                      <el-form-item label="下方文字" class="form-item">
-                        <el-input v-model="cfg.text" size="mini" placeholder="例如：产品入库二维码" />
-                      </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                      <el-form-item label="生成数量" class="form-item">
-                        <el-input v-model="cfg.totalCount" size="mini" placeholder="例如：产品入库二维码" />
-                      </el-form-item>
-                    </el-col>
-                  </el-row>
-
-                  <!-- 配置状态提示 - 优化背景色和图标 -->
-                  <div v-if="!isConfigValid(cfg) && cfg.ioType" class="config-warning">
-                    <i class="el-icon-warning-outline"></i>
-                    <span>请完善必填字段配置（标红项为未完成）</span>
-                  </div>
-                </div>
-              </div>
-            </el-form>
-          </div>
-        </div>
-      </el-col>
 
       <!-- 右侧预览区 - 增加预览说明、优化加载状态 -->
       <el-col :span="16" class="right-col">
@@ -208,6 +56,163 @@
           </div>
         </div>
       </el-col>
+      <!-- 左侧配置区 - 增加操作提示 -->
+      <el-col :span="8" class="left-col">
+        <el-alert title="信息填写完成后需要点击生成按钮才会出现在预览区域" type="info" show-icon></el-alert>
+        <div class="card-container">
+          <div class="left-container card">
+            <!-- 空状态提示 - 增加插图、优化文案 -->
+            <div v-if="drawerBarcodeData.length === 0" class="empty-state">
+              <div class="empty-icon">
+                <i class="el-icon-qrcode"></i>
+              </div>
+              <div class="empty-text">暂无二维码配置</div>
+              <div class="empty-desc">点击"添加二维码"按钮，开始创建打印配置</div>
+              <el-button type="primary" size="small" @click="handleAdd" class="empty-action-btn">
+                立即添加
+              </el-button>
+            </div>
+
+            <!-- 二维码配置表单列表 - 优化卡片间距和hover效果 -->
+            <el-form label-width="80px" size="small" label-position="top" v-else class="config-form-list">
+              <div v-for="(cfg, idx) in drawerBarcodeData" :key="idx" class="config-card"
+                :class="{ 'invalid-card': !isConfigValid(cfg) && cfg.ioType }" @mouseenter="cfg.hovered = true"
+                @mouseleave="cfg.hovered = false">
+                <!-- 配置卡片头部 - 增加序号背景色、优化操作按钮显示逻辑 -->
+                <div class="config-card-header">
+                  <div class="card-title-wrap">
+                    <span class="card-index">{{ idx + 1 }}</span>
+                    <span class="card-title">二维码配置{{ cfg.recordId }}</span>
+                    <el-tag size="mini" type="success" v-if="isConfigValid(cfg)" class="card-status-tag">
+                      已完善
+                    </el-tag>
+                    <el-tag size="mini" type="warning" v-else-if="cfg.ioType" class="card-status-tag">
+                      待完善
+                    </el-tag>
+                    <el-tag size="mini" type="info" v-else class="card-status-tag">
+                      未填写
+                    </el-tag>
+                  </div>
+                  <div class="card-actions">
+                    <el-tooltip v-if="!cfg.gend" content="生成二维码" placement="top">
+                      <el-button v-loading="cfg.gening" type="text" size="mini" @click="handleGenerate(cfg, idx)"
+                        icon="el-icon-plus" :disabled="!isConfigValid(cfg)" class="action-btn">
+                      </el-button>
+                    </el-tooltip>
+                    <el-tooltip v-else content="变更内容" placement="top">
+                      <el-button type="text" size="mini" @click="handleEditContent(cfg, idx)" icon="el-icon-edit"
+                        class="action-btn"></el-button>
+                    </el-tooltip>
+                    <el-tooltip content="表单展示开关" placement="top">
+                      <el-button type="text" size="mini" @click="handleShowForm(cfg, idx)" icon="el-icon-setting"
+                        class="action-btn"></el-button>
+                    </el-tooltip>
+                    <el-tooltip content="另存为图片" placement="top">
+                      <el-button type="text" size="mini" @click="saveAsImage(idx)" icon="el-icon-download"
+                        :disabled="!isConfigValid(cfg) && cfg.gend" class="action-btn"></el-button>
+                    </el-tooltip>
+                    <el-tooltip content="删除配置" placement="top">
+                      <el-button type="text" size="mini" @click="handleDelete(cfg, idx)" icon="el-icon-delete"
+                        class="action-btn delete-btn"></el-button>
+                    </el-tooltip>
+                  </div>
+                </div>
+
+                <!-- 配置表单内容 - 优化间距、增加字段分组 -->
+                <div class="config-form-content" v-if="cfg.showForm">
+                  <el-row :gutter="8">
+                    <el-col :span="12">
+                      <el-form-item label="操作类型" :error="getError(cfg, 'ioType')" class="form-item">
+                        <el-select v-model="cfg.ioType" placeholder="请选择操作类型" class="form-select" @change="(value) => {
+                          const prefix = value == 'in' ? '入库' : value == 'out' ? '出库' : value == 'transfer' ? '移库' : ''
+                          cfg.text = prefix + '二维码' + new Date().getTime()
+                        }">
+                          <el-option label="入库" value="in" />
+                          <el-option label="出库" value="out" />
+                          <el-option label="移库" value="transfer" />
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                      <el-form-item
+                        :label="cfg.ioType == 'in' ? '入库单据号' : cfg.ioType == 'out' ? '出库单据号' : cfg.ioType == 'transfer' ? '移库单据号' : '单据号'"
+                        :error="getError(cfg, 'stockIoId')" class="form-item">
+                        <el-select clearable filterable size="mini" v-model="cfg.stockIoId" placeholder="请选择挂载单据"
+                          class="form-select" :disabled="!cfg.ioType">
+                          <el-option v-for="item in masterList.filter(i => i.ioType === cfg.ioType)"
+                            :key="item.stockIoId" :label="item.stockIoCode" :value="item.stockIoId" />
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="8">
+                    <el-col :span="12">
+                      <el-form-item label="目标仓库" :error="getError(cfg, 'warehouseId')" class="form-item">
+                        <WarehouseSelect v-model="cfg.warehouseId" :disabled="!cfg.ioType"
+                          @change="(warehouse) => onTargetWarehouseChange(cfg, idx, warehouse)" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="cfg.ioType === 'transfer'">
+                      <el-form-item label="源仓库" :error="getError(cfg, 'fromWarehouseId')" class="form-item">
+                        <WarehouseSelect v-model="cfg.fromWarehouseId" :disabled="!cfg.ioType"
+                          @change="(warehouse) => onFromWarehouseChange(cfg, idx, warehouse)" />
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="8">
+                    <el-col :span="12">
+                      <el-form-item label="物料类型" :error="getError(cfg, 'itemType')" class="form-item">
+                        <el-select v-model="cfg.itemType" placeholder="请选择物料类型" class="form-select">
+                          <el-option v-for="dict in dict.type.stock_item_type" :key="dict.value" :label="dict.label"
+                            :value="dict.value" />
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                      <el-form-item label="物料信息" :error="getError(cfg, 'itemId')" class="form-item">
+                        <ProductSelect v-if="cfg.itemType === 'product'" v-model="cfg.itemId" placeholder="请选择产品"
+                          @change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
+                        <SemiSelect v-else-if="cfg.itemType === 'semi'" v-model="cfg.itemId" placeholder="请选择半成品"
+                          @change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
+                        <RawMaterialSelect v-else-if="cfg.itemType === 'raw_material'" v-model="cfg.itemId"
+                          placeholder="请选择原材料" @change="onItemChange($event, idx)" :disabled="!cfg.itemType" />
+                        <el-input v-else disabled v-model="cfg.itemId" placeholder="请先选择物料类型" style="width: 100%;" />
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="8">
+                    <el-col :span="12">
+                      <el-form-item label="物料数量" :error="getError(cfg, 'count')" class="form-item">
+                        <el-input-number :controls=false controls-position="right" v-model="cfg.count" :min="1"
+                          :max="100" size="mini" placeholder="请输入数量" />
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+
+                  <el-row :gutter="8">
+                    <el-col :span="12">
+                      <el-form-item label="下方文字" class="form-item">
+                        <el-input v-model="cfg.text" size="mini" placeholder="例如：产品入库二维码" />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                      <el-form-item label="生成数量" class="form-item">
+                        <el-input v-model="cfg.totalCount" size="mini" placeholder="例如：产品入库二维码" />
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+
+                  <!-- 配置状态提示 - 优化背景色和图标 -->
+                  <div v-if="!isConfigValid(cfg) && cfg.ioType" class="config-warning">
+                    <i class="el-icon-warning-outline"></i>
+                    <span>请完善必填字段配置（标红项为未完成）</span>
+                  </div>
+                </div>
+              </div>
+            </el-form>
+          </div>
+        </div>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -221,7 +226,7 @@ import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.v
 import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
 import { saveAsImage } from '@/utils/klp';
 import { listStockIo } from '@/api/wms/stockIo';
-import { addGenerateRecord, delGenerateRecord } from '@/api/wms/generateRecord';
+import { addGenerateRecord, delGenerateRecord, updateGenerateRecord } from '@/api/wms/generateRecord';
 
 export default {
   name: 'Print',
@@ -280,6 +285,19 @@ export default {
         }
       }
     },
+    handleShowForm(cfg, idx) {
+      this.$set(this.drawerBarcodeData[idx], 'showForm', !this.drawerBarcodeData[idx].showForm);
+    },
+    handleEditContent(cfg, idx) {
+      updateGenerateRecord({
+        recordId: cfg.recordId,
+        content: JSON.stringify(this.drawerBarcodeData[idx])
+      }).then(res => {
+        this.$message.success('变更内容成功');
+      }).catch(err => {
+        this.$message.error('变更内容失败');
+      });
+    },
     onTargetWarehouseChange(cfg, idx, warehouse) {
       console.log(warehouse, '目标仓库');
       this.$set(this.drawerBarcodeData[idx], 'warehouseName', warehouse.warehouseName);
@@ -293,11 +311,8 @@ export default {
       this.loading = true;
       listStockIo({ pageSize: 9999, pageNum: 1 })
         .then(res => {
-          this.masterList = res.rows || [];
+          // 排除已完成的单据，因为已完成的但是不可以继续修改
-          this.$message.success({
+          this.masterList = res.rows.filter(item => item.status != 2) || [];
-            message: '单据列表加载成功',
-            duration: 1500
-          });
         })
         .catch(error => {
           console.error("获取挂载单据失败", error);
@@ -342,7 +357,8 @@ export default {
         totalCount: 1, // 默认数量1
         unit: '',
         text: '二维码', // 默认文字
-        hovered: false // 新增hover状态，用于交互反馈
+        hovered: false, // 新增hover状态，用于交互反馈,
+        showForm: true // 新增表单展示开关
       };
 
       this.drawerBarcodeData.push(newConfig);
@@ -401,7 +417,7 @@ export default {
       // 发送网络请求保存已经生成的二维码
       addGenerateRecord({
         content: JSON.stringify(this.drawerBarcodeData[idx]),
-        recordType: 1,
+        recordType: 1, // recordType为1的时候生成的是一次性的出入库记录码
         size: 90,
         serialNumber: new Date().getTime(),
         remark: '',
@@ -587,6 +603,7 @@ $card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 
     .card-title {
       font-size: 12px; // Smaller title
+      color: white
     }
 
     .card-status-tag {

klp-ui/src/views/wms/print/pages/tt/LabelRender/ForgeTagPreview.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="label-container">
+    <div class="company-name">嘉祥科伦普重工有限公司</div>
+    <div class="label-title">力学性能标签</div>
+    <table class="info-table">
+      <tr>
+        <td class="label-cell">卷号</td>
+        <td class="value-cell">{{ content.coilNumber || '' }}</td>
+        <td class="label-cell">屈服</td>
+        <td class="value-cell">{{ content.yieldStrength || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">规格</td>
+        <td class="value-cell">{{ content.specification || '' }}</td>
+        <td class="label-cell">抗拉</td>
+        <td class="value-cell">{{ content.tensileStrength || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">{{ content.material || '' }}</td>
+        <td class="label-cell">延伸</td>
+        <td class="value-cell">{{ content.elongation || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">原料厂家</td>
+        <td class="value-cell">{{ content.rawMaterialFactory || '' }}</td>
+        <td class="label-cell">锌层质量</td>
+        <td class="value-cell">{{ content.platingQuality || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">备注</td>
+        <td class="value-cell" colspan="3">{{ content.remark || '' }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MechanicalPropertyLabel',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        coilNumber: '',
+        yieldStrength: '',
+        specification: '',
+        tensileStrength: '',
+        material: '',
+        elongation: '',
+        rawMaterialFactory: '',
+        platingQuality: '',
+        remark: ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.label-container {
+  width: 50em; /* 容器宽度（可根据需求调整） */
+  min-height: 30em; /* 容器最小高度 */
+  border: 1px solid #000;
+  padding: 2px;
+  box-sizing: border-box;
+  font-family: "SimSun", serif;
+  font-size: 8px;
+  line-height: 1.2;
+  display: flex;
+  flex-direction: column; /* 垂直分布子元素 */
+}
+
+.company-name {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 1px;
+  font-size: 2em;
+}
+
+.label-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 2px;
+  border-bottom: 1px solid #000;
+  padding-bottom: 1px;
+  font-size: 2em;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse; /* 合并边框 */
+  font-size: 7px;
+  flex-grow: 1; /* 拉伸占据剩余垂直空间 */
+}
+
+.info-table td {
+  border: 1px solid #000; /* 表格单元格边框 */
+  text-align: center;
+  vertical-align: middle;
+  font-size: 2em;
+  width: 25%; /* 4列均分宽度，每列占25%，确保 label/value 空间相同 */
+}
+
+.label-cell {
+  font-weight: bold;
+  /* 去掉背景色：删除原有的 background-color 声明 */
+}
+
+.value-cell {
+  background-color: #fff; /* 可根据需求保留/删除，与原图视觉一致 */
+}
+
+.label-footnote {
+  margin-top: 2px;
+  text-align: center;
+  font-size: 7px;
+  color: #555;
+}
+</style>

klp-ui/src/views/wms/print/pages/tt/LabelRender/OuterTagPreview.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="label-container">
+    <!-- 顶部公司信息 -->
+    <div class="company-header">
+      <img :src="logo" alt="Company Logo" class="company-logo" />
+      <div class="company-name">
+        嘉祥科伦普重工有限公司<br />
+        <span class="english-name">Jiaxiang KLP Heavy Industry Co., Ltd.</span>
+      </div>
+    </div>
+
+    <!-- 产品标题 -->
+    <div class="product-title">
+      {{ content.productName || '产品名称' }}
+    </div>
+
+    <!-- 核心信息表格：每行四列 = 2个键值对 -->
+    <table class="info-table">
+      <tr>
+        <td class="label-cell">订货单位</td>
+        <td class="value-cell">{{ content.orderUnit || '' }}</td>
+        <td class="label-cell">合同号</td>
+        <td class="value-cell">{{ content.contractNumber || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">执行标准</td>
+        <td class="value-cell">{{ content.executionStandard || '' }}</td>
+        <td class="label-cell">钢卷号</td>
+        <td class="value-cell">{{ content.coilNumber || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">原料卷号</td>
+        <td class="value-cell">{{ content.rawBlankNumber || '' }}</td>
+        <td class="label-cell">规格</td>
+        <td class="value-cell">{{ content.specification || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">{{ content.material || '' }}</td>
+        <td class="label-cell">表面质量</td>
+        <td class="value-cell">{{ content.surfaceQuality || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">表面处理</td>
+        <td class="value-cell">{{ content.surfaceTreatment || '' }}</td>
+        <td class="label-cell">剪切要求</td>
+        <td class="value-cell">{{ content.cuttingRequirements || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">包装种类</td>
+        <td class="value-cell">{{ content.packagingType || '' }}</td>
+        <td class="label-cell">毛重</td>
+        <td class="value-cell">{{ content.grossWeight || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">净重</td>
+        <td class="value-cell">{{ content.netWeight || '' }}</td>
+        <td class="label-cell">参考长度</td>
+        <td class="value-cell">{{ content.referenceLength || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">生产日期</td>
+        <td class="value-cell" colspan="3">{{ content.productionDate || '' }}</td>
+      </tr>
+    </table>
+
+    <!-- 底部信息 -->
+    <div class="footer-info">
+      <div class="address">
+        地址：{{ content.address || '' }}<br />
+        <span class="english-address">{{ content.englishAddress || '' }}</span>
+      </div>
+      <div class="contact-timestamp">
+        <div class="contact">TEL：{{ content.tel || '' }}</div>
+        <div class="timestamp">{{ content.timestamp || '' }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import logo from '@/assets/logo/logo.png'
+
+export default {
+  name: 'MetalSheetLabel',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        // form3 所有字段
+        orderUnit: '',
+        contractNumber: '',
+        productName: '镀锌卷板合格品(GI)',
+        executionStandard: '',
+        coilNumber: 'D2Z125031809202',
+        rawBlankNumber: '',
+        specification: '2.28*1250',
+        material: '',
+        surfaceQuality: '',
+        surfaceTreatment: '环保钝化/不涂油',
+        cuttingRequirements: '',
+        packagingType: 'A03',
+        grossWeight: '',
+        netWeight: '7080',
+        referenceLength: '320',
+        productionDate: '2025-03-19',
+        // 底部信息字段
+        address: '唐山市滦州市茨榆坨工业区',
+        englishAddress: 'Donghai special steel, ciyutuo Industrial Zone, Luanzhou, Tangshan, Hebei province, China.',
+        tel: '0315-7560777',
+        timestamp: '2025.04.12 10:14'
+      })
+    }
+  },
+  data() {
+    return {
+      logo,
+    }
+  }
+}
+</script>
+
+<style scoped>
+.label-container {
+  width: 45em;
+  height: 25em;
+  padding: 0.5em;
+  box-sizing: border-box;
+  font-family: 'Arial', sans-serif;
+  border: 1px solid #000;
+}
+
+.company-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.3em;
+}
+
+.company-logo {
+  width: 2.8em;
+  height: 2.8em;
+  margin-right: 0.5em;
+}
+
+.company-name {
+  font-size: 0.95em;
+  line-height: 1.1;
+}
+
+.english-name {
+  font-size: 0.6em;
+  opacity: 0.8;
+}
+
+.product-title {
+  font-size: 1.4em;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 0.4em;
+  border-bottom: 1.5px solid #000;
+  padding-bottom: 0.2em;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 0.5em;
+  table-layout: fixed;
+}
+
+.info-table td {
+  border: 1px solid #000;
+  padding: 0.25em;
+  font-size: 0.78em; /* 微调字体确保所有字段显示完整 */
+  width: 25%;
+  height: 2.1em;
+  text-align: center;
+  vertical-align: middle;
+  word-break: break-all;
+}
+
+.label-cell {
+  font-weight: bold;
+}
+
+.footer-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 0.7em;
+  margin-top: 0.3em;
+}
+
+.address {
+  line-height: 1.2;
+  width: 65%;
+}
+
+.english-address {
+  opacity: 0.8;
+  font-size: 0.9em;
+}
+
+.contact-timestamp {
+  text-align: right;
+  line-height: 1.4;
+}
+</style>

klp-ui/src/views/wms/print/pages/tt/LabelRender/ProductionTagPreview.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="material-label-container">
+    <table class="material-label-table">
+      <!-- 调整第一行结构，使label和value各占2列（等宽） -->
+      <tr>
+        <td class="label-cell" colspan="1">料卷号</td>
+        <td class="value-cell" colspan="3">{{ content.coilNumber || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">规格(mm)</td>
+        <td class="value-cell">{{ content.specification || '' }}</td>
+        <td class="label-cell">净重</td>
+        <td class="value-cell">{{ content.netWeight || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">{{ content.material || '' }}</td>
+        <td class="label-cell">下道</td>
+        <td class="value-cell">{{ content.nextProcess || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">生产班组</td>
+        <td class="value-cell">{{ content.productionTeam || '' }}</td>
+        <td class="label-cell">时间</td>
+        <td class="value-cell">{{ content.productionDate || '' }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MaterialLabel',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        coilNumber: '',
+        specification: '',
+        netWeight: '',
+        material: '',
+        nextProcess: '',
+        productionTeam: '',
+        productionDate: ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.material-label-container {
+  border: 1px solid #333;
+  width: 25em;
+  height: 15em;
+  padding: 5px;
+  display: flex; /* 启用Flex布局 */
+  flex-direction: column; /* 子元素垂直排列 */
+  font-family: "SimSun", serif;
+  box-sizing: border-box; /* 确保内边距/边框不影响总尺寸 */
+}
+
+.material-label-table {
+  border-collapse: collapse;
+  width: 100%;
+  table-layout: fixed;
+  flex-grow: 1; /* 让表格拉伸，占满剩余垂直空间 */
+  height: 0; /* 配合flex-grow，自动计算高度 */
+}
+
+/* 四列均分宽度，每列占25% */
+.material-label-table td {
+  border: 1px solid #333;
+  padding: 3px 5px;
+  font-size: 14px;
+  /* width: 25%; */
+  box-sizing: border-box;
+  text-align: center;
+}
+
+.label-cell {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
+
+.value-cell {
+  text-align: center;
+}
+</style>

klp-ui/src/views/wms/print/pages/tt/LabelRender/SaltSprayTagPreview.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="label-container">
+    <div class="company-name">嘉祥科伦普重工有限公司</div>
+    <div class="label-title">盐雾试验标签</div>
+    <table class="info-table">
+      <tr>
+        <td class="label-cell">卷号</td>
+        <td class="value-cell">{{ content.coilNumber || '' }}</td>
+        <td class="label-cell">开始时间</td>
+        <td class="value-cell">{{ content.startDate || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">规格</td>
+        <td class="value-cell">{{ content.specification || '' }}</td>
+        <td class="label-cell">结束时间</td>
+        <td class="value-cell">{{ content.endDate || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">{{ content.material || '' }}</td>
+        <td class="label-cell">锌层质量</td>
+        <td class="value-cell">{{ content.platingQuality || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">原料厂家</td>
+        <td class="value-cell" colspan="3">{{ content.rawMaterialFactory || '' }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SaltSprayTestLabel',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        coilNumber: '',
+        startDate: '',
+        specification: '',
+        endDate: '',
+        material: '',
+        rawMaterialFactory: '',
+        platingQuality: ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.label-container {
+  width: 50em; /* 容器宽度（可根据需求调整） */
+  min-height: 30em; /* 容器最小高度 */
+  border: 1px solid #000;
+  padding: 2px;
+  box-sizing: border-box;
+  font-family: "SimSun", serif;
+  font-size: 8px;
+  line-height: 1.2;
+  display: flex;
+  flex-direction: column; /* 垂直分布子元素 */
+}
+
+.company-name {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 1px;
+  font-size: 2em;
+}
+
+.label-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 2px;
+  border-bottom: 1px solid #000;
+  padding-bottom: 1px;
+  font-size: 2em;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse; /* 合并边框 */
+  font-size: 7px;
+  flex-grow: 1; /* 拉伸占据剩余垂直空间 */
+}
+
+.info-table td {
+  border: 1px solid #000; /* 表格单元格边框 */
+  text-align: center;
+  vertical-align: middle;
+  font-size: 2em;
+  width: 25%; /* 4列均分宽度，每列占25%，确保 label/value 空间相同 */
+}
+
+.label-cell {
+  font-weight: bold;
+  /* 去掉背景色：删除原有的 background-color 声明 */
+}
+
+.value-cell {
+  background-color: #fff; /* 可根据需求保留/删除，与原图视觉一致 */
+}
+
+.label-footnote {
+  margin-top: 2px;
+  text-align: center;
+  font-size: 7px;
+  color: #555;
+}
+</style>

klp-ui/src/views/wms/print/pages/tt/LabelRender/SampleTagPreview.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="sample-label-container">
+    <div class="company-title">嘉祥科伦普重工有限公司</div>
+    <div class="label-title">样品标签</div>
+    <table class="info-table">
+      <tr>
+        <td class="label-cell">品名</td>
+        <td class="value-cell" colspan="3">{{ content.productName || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">执行标准</td>
+        <td class="value-cell" colspan="3">{{ content.executionStandard || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">材质</td>
+        <td class="value-cell">{{ content.material || '' }}</td>
+        <td class="label-cell">厚度</td>
+        <td class="value-cell">{{ content.thickness || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">镀层种类</td>
+        <td class="value-cell">{{ content.platingType || '' }}</td>
+        <td class="label-cell">镀层质量</td>
+        <td class="value-cell">{{ content.platingQuality || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">表面状态</td>
+        <td class="value-cell">{{ content.surfaceState || '' }}</td>
+        <td class="label-cell">表面处理</td>
+        <td class="value-cell">{{ content.surfaceTreatment || '' }}</td>
+      </tr>
+      <tr>
+        <td class="label-cell">样品日期</td>
+        <td class="value-cell" colspan="3">{{ content.sampleDate || '' }}</td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SampleLabelRenderer',
+  props: {
+    content: {
+      type: Object,
+      default: () => ({
+        productName: '',
+        executionStandard: '',
+        material: '',
+        thickness: '',
+        platingType: '',
+        platingQuality: '',
+        surfaceState: '',
+        surfaceTreatment: '',
+        sampleDate: ''
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sample-label-container {
+  width: 50em;
+  height: 40em;
+  border: 1px solid #000;
+  padding: 2px;
+  box-sizing: border-box;
+  font-family: "SimSun", serif;
+  font-size: 10px;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+}
+
+.company-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 2px;
+  font-size: 11px;
+}
+
+.label-title {
+  text-align: center;
+  font-weight: bold;
+  margin-bottom: 3px;
+  border-bottom: 1px solid #000;
+  padding-bottom: 1px;
+  font-size: 11px;
+}
+
+.info-table {
+  width: 100%;
+  border-collapse: collapse;
+  flex-grow: 1; /* 让表格占据剩余空间 */
+  table-layout: fixed; /* 固定表格布局，确保列宽均匀 */
+}
+
+.info-table td {
+  border: 1px solid #000;
+  padding: 4px 2px;
+  text-align: center;
+  vertical-align: middle;
+  word-break: break-all; /* 处理长文本 */
+}
+
+.label-cell {
+  font-weight: bold;
+  width: 25%; /* 标签单元格固定占25%宽度 */
+  background-color: #f9f9f9;
+}
+
+/* 调整不同单元格的宽度比例 */
+.value-cell {
+  width: 75%; /* 单标签对应的值占75% */
+}
+
+/* 四列布局时，每个单元格占25% */
+tr:nth-child(n+3) td:not([colspan]) {
+  width: 25%;
+}
+</style>

klp-ui/src/views/wms/print/pages/tt/LabelRender/index.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="label-render-container">
+    <!-- 操作按钮 -->
+    <div class="action-buttons">
+      <el-button type="primary" @click="downloadLabelAsImage">下载标签图片</el-button>
+      <el-button type="primary" @click="printLabel" style="margin-left: 10px;">打印标签</el-button>
+    </div>
+    <!-- 标签预览容器 -->
+    <div class="preview-container" id="label-preview-container" ref="labelRef">
+      <ProductionTagPreview v-if="labelType === '2'" :content="content" />
+      <OuterTagPreview v-if="labelType === '3'" :content="content" />
+      <SampleTagPreview v-if="labelType === '4'" :content="content" />
+      <ForgeTagPreview v-if="labelType === '5'" :content="content" />
+      <SaltSprayTagPreview v-if="labelType === '6'" :content="content" />
+    </div>
+  </div>
+</template>
+
+<script>
+import domToImage from 'dom-to-image';
+import printJS from 'print-js';
+import { Message } from 'element-ui'; // 若使用Element UI，引入消息提示
+
+import ProductionTagPreview from './ProductionTagPreview.vue';
+import OuterTagPreview from './OuterTagPreview.vue';
+import SampleTagPreview from './SampleTagPreview.vue';
+import ForgeTagPreview from './ForgeTagPreview.vue';
+import SaltSprayTagPreview from './SaltSprayTagPreview.vue';
+
+export default {
+  name: 'LabelRender',
+  components: {
+    ProductionTagPreview,
+    OuterTagPreview,
+    SampleTagPreview,
+    ForgeTagPreview,
+    SaltSprayTagPreview,
+  },
+  props: {
+    labelType: {
+      type: String,
+      required: true,
+    },
+    content: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    // -------- 图片下载方法 --------
+    async downloadLabelAsImage() {
+      // 1. 获取要转换的DOM容器
+      const labelContainer = document.getElementById('label-preview-container');
+      if (!labelContainer) {
+        Message.error('未找到标签容器，无法下载');
+        return;
+      }
+
+      try {
+        // 2. 用dom-to-image生成PNG图片的DataURL
+        const dataUrl = await domToImage.toPng(labelContainer);
+
+        // 3. 创建临时a标签，触发下载
+        const downloadLink = document.createElement('a');
+        downloadLink.href = dataUrl;
+        downloadLink.download = `标签_${new Date().getTime()}.png`; // 自定义文件名（带时间戳防重复）
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+        document.body.removeChild(downloadLink); // 下载后移除临时标签
+      } catch (error) {
+        console.error('标签图片下载失败：', error);
+        Message.error('标签图片下载失败，请重试');
+      }
+    },
+
+    // 打印方法
+    printLabel() {
+      // 1. 获取标签容器DOM
+      const labelContainer = document.getElementById('label-preview-container');
+      if (!labelContainer) {
+        Message.error('未找到标签容器，无法打印');
+        return;
+      }
+
+      // 2. 获取标签原始宽高（用于保持尺寸）
+      const labelWidth = labelContainer.offsetWidth;
+      const labelHeight = labelContainer.offsetHeight;
+
+      // 3. 定义打印样式（确保与预览一致）
+      const printStyles = `
+    /* 基础容器样式 */
+    #label-preview-container {
+      width: ${labelWidth}px !important;
+      height: ${labelHeight}px !important;
+      padding: 1.5rem !important;
+      box-sizing: border-box !important;
+      border: 1px solid #333 !important;
+      background-color: #fff !important;
+    }
+
+    .company-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.3em;
+}
+
+.company-logo {
+  width: 2.8em;
+  height: 2.8em;
+  margin-right: 0.5em;
+}
+
+.company-name {
+  font-size: 0.95em;
+  line-height: 1.1;
+}
+
+.english-name {
+  font-size: 0.6em;
+  opacity: 0.8;
+}
+
+.product-title {
+  font-size: 1.4em;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 0.4em;
+  border-bottom: 1.5px solid #000;
+  padding-bottom: 0.2em;
+}
+
+
+.footer-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 0.7em;
+  margin-top: 0.3em;
+}
+
+.address {
+  line-height: 1.2;
+  width: 65%;
+}
+
+.english-address {
+  opacity: 0.8;
+  font-size: 0.9em;
+}
+
+.contact-timestamp {
+  text-align: right;
+  line-height: 1.4;
+}
+
+
+    /* 表格与单元格样式（解决空单元格问题） */
+    table {
+      border-collapse: collapse !important;
+      width: 100% !important;
+      table-layout: fixed !important; /* 固定列宽 */
+    }
+
+    td {
+      border: 1px solid #000 !important;
+      padding: 6px 4px !important; /* 确保单元格大小 */
+      min-height: 28px !important; /* 空单元格最小高度 */
+      vertical-align: middle !important;
+      text-align: center !important;
+      word-break: break-all !important; /* 长文本换行 */
+      font-family: "SimSun", serif !important;
+      font-size: 14px !important;
+    }
+
+    /* 标签与值单元格样式 */
+    .label-cell {
+      font-weight: bold !important;
+      background-color: #f5f5f5 !important;
+    }
+
+    .value-cell {
+      background-color: #fff !important;
+    }
+
+    /* 列宽分配（根据实际列数调整） */
+    td { width: 25% !important; } /* 4列布局 */
+    td[colspan="2"] { width: 50% !important; }
+    td[colspan="3"] { width: 75% !important; }
+    td[colspan="4"] { width: 100% !important; }
+  `;
+
+      // 4. 调用print-js打印
+      printJS({
+        printable: 'label-preview-container', // 要打印的元素ID
+        type: 'html', // 打印类型为HTML
+        header: null, // 不显示页眉
+        footer: null, // 不显示页脚
+        style: printStyles, // 注入打印样式
+        scanStyles: false, // 禁用自动扫描页面样式（避免冲突）
+        targetStyles: ['*'], // 允许所有样式生效
+        printContainer: true, // 打印指定容器
+        onError: (error) => { // 错误处理
+          console.error('打印失败:', error);
+          Message.error('打印失败，请重试');
+        }
+      });
+    }
+  },
+};
+</script>
+
+<style scoped>
+.label-render-container {
+  width: 100%;
+  height: calc(100vh - 200px);
+  display: flex;
+  flex-direction: column;
+  /* 按钮与预览垂直排列 */
+  justify-content: flex-start;
+  align-items: center;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.action-buttons {
+  margin-bottom: 1rem;
+  /* 按钮与预览区的间距 */
+}
+
+.preview-container {
+  background-color: #fff;
+  color: #000;
+  padding: 1.5rem;
+  width: fit-content;
+  min-width: 200px;
+  border-radius: 6px;
+  box-shadow: 0 0 60px rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.preview-container:hover {
+  box-shadow: 0 0 80px rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+</style>

klp-ui/src/views/wms/print/pages/tt/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="6">
+        <el-row>
+          <el-button type="primary" @click="handleGen">生成标签</el-button>
+          <!-- 只有在预览状态才显示关闭按钮 -->
+          <el-button 
+            type="danger" 
+            @click="handleClosePreview"
+            v-if="showPreview"
+            style="margin-left: 10px;"
+          >
+            关闭预览
+          </el-button>
+        </el-row>
+        <el-row style="margin-top: 15px;">
+          <el-select v-model="recordType" placeholder="请选择标签类型" style="width: auto;">
+            <!-- 第一个选项默认选中，对应原radio的label="2" -->
+            <el-option label="内标签" value="2"></el-option>
+            <el-option label="外标签" value="3"></el-option>
+            <el-option label="样品标签" value="4"></el-option>
+            <el-option label="力学性能标签" value="5"></el-option>
+            <el-option label="盐雾试验标签" value="6"></el-option>
+          </el-select>
+        </el-row>
+        <el-row style="margin-top: 15px;">
+          <el-form inline v-if="recordType === '2'" :model="form2" label-width="80px">
+            <el-form-item label="钢卷号">
+              <el-input v-model="form2.coilNumber" placeholder="输入钢卷号"></el-input>
+            </el-form-item>
+            <el-form-item label="规格">
+              <el-input v-model="form2.specification" placeholder="输入规格"></el-input>
+            </el-form-item>
+            <el-form-item label="净重">
+              <el-input v-model="form2.netWeight" placeholder="输入净重"></el-input>
+            </el-form-item>
+            <el-form-item label="材质">
+              <el-input v-model="form2.material" placeholder="输入材质"></el-input>
+            </el-form-item>
+            <el-form-item label="下工序">
+              <el-input v-model="form2.nextProcess" placeholder="输入下工序"></el-input>
+            </el-form-item>
+            <el-form-item label="生产班组">
+              <el-input v-model="form2.productionTeam" placeholder="输入生产班组"></el-input>
+            </el-form-item>
+            <el-form-item label="生产日期">
+              <el-input v-model="form2.productionDate" placeholder="输入生产日期"></el-input>
+            </el-form-item>
+          </el-form>
+
+          <el-form inline v-if="recordType === '3'" :model="form3" label-width="80px">
+            <el-form-item label="订货单位">
+              <el-input v-model="form3.orderUnit" placeholder="输入订货单位"></el-input>
+            </el-form-item>
+            <el-form-item label="合同号">
+              <el-input v-model="form3.contractNumber" placeholder="输入合同号"></el-input>
+            </el-form-item>
+            <el-form-item label="产品名称">
+              <el-input v-model="form3.productName" placeholder="输入产品名称"></el-input>
+            </el-form-item>
+            <el-form-item label="执行标准">
+              <el-input v-model="form3.executionStandard" placeholder="输入执行标准"></el-input>
+            </el-form-item>
+            <el-form-item label="卷号">
+              <el-input v-model="form3.coilNumber" placeholder="输入卷号"></el-input>
+            </el-form-item>
+            <el-form-item label="原料坯号">
+              <el-input v-model="form3.rawBlankNumber" placeholder="输入原料坯号"></el-input>
+            </el-form-item>
+            <el-form-item label="规格">
+              <el-input v-model="form3.specification" placeholder="输入规格"></el-input>
+            </el-form-item>
+            <el-form-item label="材质">
+              <el-input v-model="form3.material" placeholder="输入材质"></el-input>
+            </el-form-item>
+            <el-form-item label="表面质量">
+              <el-input v-model="form3.surfaceQuality" placeholder="输入表面质量"></el-input>
+            </el-form-item>
+            <el-form-item label="表面处理">
+              <el-input v-model="form3.surfaceTreatment" placeholder="输入表面处理"></el-input>
+            </el-form-item>
+            <el-form-item label="切边要求">
+              <el-input v-model="form3.cuttingRequirements" placeholder="输入切边要求"></el-input>
+            </el-form-item>
+            <el-form-item label="包装种类">
+              <el-input v-model="form3.packagingType" placeholder="输入包装种类"></el-input>
+            </el-form-item>
+            <el-form-item label="毛重kg">
+              <el-input v-model="form3.grossWeight" placeholder="输入毛重kg"></el-input>
+            </el-form-item>
+            <el-form-item label="净重kg">
+              <el-input v-model="form3.netWeight" placeholder="输入净重kg"></el-input>
+            </el-form-item>
+            <el-form-item label="参考长度">
+              <el-input v-model="form3.referenceLength" placeholder="输入参考长度"></el-input>
+            </el-form-item>
+            <el-form-item label="生产日期">
+              <el-input v-model="form3.productionDate" placeholder="输入生产日期"></el-input>
+            </el-form-item>
+          </el-form>
+
+          <el-form inline v-if="recordType === '4'" :model="form4" label-width="80px">
+            <el-form-item label="品名">
+              <el-input v-model="form4.productName" placeholder="输入品名"></el-input>
+            </el-form-item>
+            <el-form-item label="执行标准">
+              <el-input v-model="form4.executionStandard" placeholder="输入执行标准"></el-input>
+            </el-form-item>
+            <el-form-item label="材质">
+              <el-input v-model="form4.material" placeholder="输入材质"></el-input>
+            </el-form-item>
+            <el-form-item label="厚度">
+              <el-input v-model="form4.thickness" placeholder="输入厚度"></el-input>
+            </el-form-item>
+            <el-form-item label="镀层种类">
+              <el-input v-model="form4.platingType" placeholder="输入镀层种类"></el-input>
+            </el-form-item>
+            <el-form-item label="镀层质量">
+              <el-input v-model="form4.platingQuality" placeholder="输入镀层质量"></el-input>
+            </el-form-item>
+            <el-form-item label="表面状态">
+              <el-input v-model="form4.surfaceState" placeholder="输入表面状态"></el-input>
+            </el-form-item>
+            <el-form-item label="表面处理">
+              <el-input v-model="form4.surfaceTreatment" placeholder="输入表面处理"></el-input>
+            </el-form-item>
+            <el-form-item label="样品日期">
+              <el-input v-model="form4.sampleDate" placeholder="输入样品日期"></el-input>
+            </el-form-item>
+          </el-form>
+
+          <el-form inline v-if="recordType === '5'" :model="form5" label-width="80px">
+            <el-form-item label="卷号">
+              <el-input v-model="form5.coilNumber" placeholder="输入卷号"></el-input>
+            </el-form-item>
+            <el-form-item label="屈服">
+              <el-input v-model="form5.yieldStrength" placeholder="输入屈服强度"></el-input>
+            </el-form-item>
+            <el-form-item label="规格">
+              <el-input v-model="form5.specification" placeholder="输入规格"></el-input>
+            </el-form-item>
+            <el-form-item label="抗拉">
+              <el-input v-model="form5.tensileStrength" placeholder="输入抗拉"></el-input>
+            </el-form-item>
+            <el-form-item label="材质">
+              <el-input v-model="form5.material" placeholder="输入材质"></el-input>
+            </el-form-item>
+            <el-form-item label="延伸">
+              <el-input v-model="form5.elongation" placeholder="输入延伸"></el-input>  
+            </el-form-item>
+            <el-form-item label="原料厂家">
+              <el-input v-model="form5.rawMaterialFactory" placeholder="输入原料厂家"></el-input>
+            </el-form-item>
+            <el-form-item label="镀层质量">
+              <el-input v-model="form5.platingQuality" placeholder="输入镀层质量"></el-input>
+            </el-form-item>
+            <el-form-item label="备注">
+              <el-input v-model="form5.remark" placeholder="输入备注"></el-input>
+            </el-form-item>
+          </el-form>
+
+          <el-form inline v-if="recordType === '6'" :model="form6" label-width="80px">
+            <el-form-item label="卷号">
+              <el-input v-model="form6.coilNumber" placeholder="输入卷号"></el-input>
+            </el-form-item>
+            <el-form-item label="开始时间">
+              <el-input v-model="form6.startDate" placeholder="输入开始时间"></el-input>
+            </el-form-item>
+            <el-form-item label="规格">
+              <el-input v-model="form6.specification" placeholder="输入规格"></el-input>
+            </el-form-item>
+            <el-form-item label="材质">
+              <el-input v-model="form6.material" placeholder="输入材质"></el-input>
+            </el-form-item>
+            <el-form-item label="原料厂家">
+              <el-input v-model="form6.rawMaterialFactory" placeholder="输入原料厂家"></el-input>
+            </el-form-item>
+            <el-form-item label="结束时间">
+              <el-input v-model="form6.endDate" placeholder="输入结束时间"></el-input>
+            </el-form-item>
+            <el-form-item label="锌层质量">
+              <el-input v-model="form6.platingQuality" placeholder="输入锌层质量"></el-input>
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-col>
+      <el-col :span="18">
+        <!-- 预览区域，只有showPreview为true时才显示 -->
+        <div v-if="showPreview" class="preview-container">
+          <div class="preview-header">
+            <h3>标签预览</h3>
+          </div>
+          <div class="preview-content">
+            <LabelRender :labelType="getLabelType()" :content="getLabelContent()" />
+          </div>
+        </div>
+        
+        <!-- 未预览时显示的提示信息 -->
+        <div v-else class="preview-placeholder">
+          <p>请填写表单并点击"生成标签"按钮预览</p>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import LabelRender from './LabelRender/index.vue'
+
+export default {
+  components: {
+    LabelRender
+  },
+  data() {
+    return {
+      recordType: '2',
+      // 控制预览显示状态
+      showPreview: false,
+      form2: {
+        coilNumber: '',
+        specification: '',
+        netWeight: '',
+        material: '',
+        nextProcess: '',
+        productionTeam: '',
+        productionDate: ''
+      },
+      form3: {
+        orderUnit: '',
+        contractNumber: '',
+        productName: '',
+        executionStandard: '',
+        coilNumber: '',
+        rawBlankNumber: '',
+        specification: '',
+        material: '',
+        surfaceQuality: '',
+        surfaceTreatment: '',
+        cuttingRequirements: '',
+        packagingType: '',
+        grossWeight: '',
+        netWeight: '',
+        referenceLength: '',
+        productionDate: ''
+      },
+      form4: {
+        productName: '',
+        executionStandard: '',
+        material: '',
+        thickness: '',
+        platingType: '',
+        platingQuality: '',
+        surfaceState: '',
+        surfaceTreatment: '',
+        sampleDate: ''
+      },
+      form5: {
+        coilNumber: '',
+        yieldStrength: '',
+        specification: '',
+        tensileStrength: '',
+        material: '',
+        elongation: '',
+        rawMaterialFactory: '',
+        platingQuality: '',
+        remark: ''
+      },
+      form6: {
+        coilNumber: '',
+        startDate: '',
+        tensileStrength: '',
+        material: '',
+        rawMaterialFactory: '',
+        endDate: '',
+        platingQuality: ''
+      }
+    }
+  },
+  methods: {
+    handleGen() {
+      const payload = {}
+      if (this.recordType === '2') {
+        payload.recordType = this.recordType
+        payload.content = this.form2
+      } else if (this.recordType === '3') {
+        payload.recordType = this.recordType
+        payload.content = this.form3
+      } else if (this.recordType === '4') {
+        payload.recordType = this.recordType
+        payload.content = this.form4
+      } else if (this.recordType === '5') {
+        payload.recordType = this.recordType
+        payload.content = this.form5
+      } else if (this.recordType === '6') {
+        payload.recordType = this.recordType
+        payload.content = this.form6
+      } 
+      console.log('生成标签数据', payload)
+      
+      // 生成标签后显示预览
+      this.showPreview = true
+    },
+    // 关闭预览
+    handleClosePreview() {
+      this.showPreview = false
+    },
+    getLabelType() {
+      return this.recordType
+    },
+    getLabelContent() {
+      if (this.recordType === '2') {
+        return this.form2
+      } else if (this.recordType === '3') {
+        return this.form3
+      } else if (this.recordType === '4') {
+        return this.form4
+      } else if (this.recordType === '5') {
+        return this.form5
+      } else if (this.recordType === '6') {
+        return this.form6
+      } 
+    }
+  }
+}
+</script>