diff --git a/klp-ui/package.json b/klp-ui/package.json
index cc73234a..4946dbd0 100644
--- a/klp-ui/package.json
+++ b/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",
diff --git a/klp-ui/src/api/wms/generateRecord.js b/klp-ui/src/api/wms/generateRecord.js
new file mode 100644
index 00000000..8faa544c
--- /dev/null
+++ b/klp-ui/src/api/wms/generateRecord.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询二维码生成记录列表
+export function listGenerateRecord(query) {
+  return request({
+    url: '/klp/generateRecord/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询二维码生成记录详细
+export function getGenerateRecord(recordId) {
+  return request({
+    url: '/klp/generateRecord/' + recordId,
+    method: 'get'
+  })
+}
+
+// 新增二维码生成记录
+export function addGenerateRecord(data) {
+  return request({
+    url: '/klp/generateRecord',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改二维码生成记录
+export function updateGenerateRecord(data) {
+  return request({
+    url: '/klp/generateRecord',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除二维码生成记录
+export function delGenerateRecord(recordId) {
+  return request({
+    url: '/klp/generateRecord/' + recordId,
+    method: 'delete'
+  })
+}
diff --git a/klp-ui/src/assets/styles/element-ui.scss b/klp-ui/src/assets/styles/element-ui.scss
index 7885fcec..c5ce8887 100644
--- a/klp-ui/src/assets/styles/element-ui.scss
+++ b/klp-ui/src/assets/styles/element-ui.scss
@@ -275,20 +275,25 @@ body {
 }
 
 .el-button--medium {
-  padding: 4px 8px;
+  padding: 4px 8px !important;
   font-size: 12px;
   height: $--btn-height - 4px;
 }
 
 // 迷你按钮（超紧凑）
 .el-button--mini {
-  padding: 4px 8px;
+  padding: 4px 8px !important;
   font-size: 12px;
   height: $--btn-height - 4px;
+  &.is-circle {
+    padding: 4px !important;
+  }
 }
 
-.el-button--mini.is-circle {
-  padding: 4px !important;
+.el-button--small {
+  padding: 4px 8px !important;
+  font-size: 12px;
+  height: $--btn-height - 4px;
 }
 
 
@@ -385,6 +390,10 @@ body {
     }
   }
 
+  &__empty-block {
+    background: #1e2227;
+  }
+
   // 适配尺寸类（统一紧凑）
   &.el-table--medium .el-table__cell,
   &.el-table--mini .el-table__cell {
@@ -1638,12 +1647,12 @@ div.pagination-container {
 
 // ---------------------- 3.8 自定义工具类 ----------------------
 // 固定按钮宽度
-.fixed-width {
-  .el-button--mini {
-    padding: 7px 10px;
-    width: 60px;
-  }
-}
+// .fixed-width {
+//   .el-button--mini {
+//     padding: 7px 10px;
+//     width: 60px;
+//   }
+// }
 
 // 居中单元格（深色表头）
 .is-center.is-leaf.el-table__cell {
diff --git a/klp-ui/src/assets/styles/sidebar.scss b/klp-ui/src/assets/styles/sidebar.scss
index fe9caed7..c08bd169 100644
--- a/klp-ui/src/assets/styles/sidebar.scss
+++ b/klp-ui/src/assets/styles/sidebar.scss
@@ -213,7 +213,7 @@
     min-width: $base-sidebar-width !important;
   }
 
-  .el-submenu .el-menu{
+  .el-submenu .el-menu {
     padding-left: 10px;
   }
 
diff --git a/klp-ui/src/components/WarehouseSelect/index.vue b/klp-ui/src/components/WarehouseSelect/index.vue
index 05083c19..3bfe376b 100644
--- a/klp-ui/src/components/WarehouseSelect/index.vue
+++ b/klp-ui/src/components/WarehouseSelect/index.vue
@@ -38,7 +38,8 @@ export default {
   data() {
     return {
       warehouseOptions: [],
-      innerValue: this.value
+      innerValue: this.value,
+      list: []
     };
   },
   watch: {
@@ -52,6 +53,7 @@ export default {
   methods: {
     loadOptions() {
       listWarehouse().then(response => {
+        this.list = response.data;
         const options = [];
         if (this.showTop) {
           const top = { warehouseId: 0, warehouseName: '顶级节点', children: [] };
@@ -88,6 +90,9 @@ export default {
         this.innerValue = null;
       } else {
         this.$emit('input', val);
+        // 查找完整的仓库对象
+        const warehouse = this.list.find(item => item.warehouseId === val);
+        this.$emit('change', warehouse);
       }
     }
   }
diff --git a/klp-ui/src/views/wms/print/components/QRCode.vue b/klp-ui/src/views/wms/print/components/QRCode.vue
new file mode 100644
index 00000000..586fe982
--- /dev/null
+++ b/klp-ui/src/views/wms/print/components/QRCode.vue
@@ -0,0 +1,40 @@
+<template>
+  <canvas ref="qrcode"></canvas>
+</template>
+
+<script>
+import QRCode from 'qrcode';
+
+export default {
+  name: 'QRCode',
+  props: {
+    content: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: Number,
+      default: 90
+    }
+  },  
+  data() {
+    return {
+      qrcode: null
+    }
+  },
+  mounted() {
+    this.generateQRCode();
+  },
+  methods: {
+    generateQRCode() {
+      const el = this.$refs.qrcode;
+      const content = this.content;
+      QRCode.toCanvas(el, content, {
+        width: this.size,
+        height: this.size,
+        margin: 0
+      });
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/print/index.vue b/klp-ui/src/views/wms/print/index.vue
index 487aa944..7847ddab 100644
--- a/klp-ui/src/views/wms/print/index.vue
+++ b/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,
@@ -435,7 +436,6 @@ $card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 // 页面整体容器 - 优化高度计算、增加内边距
 .print-page-container {
   padding: 16px 20px; // Slightly reduced padding
-  background-color: $gray-light;
   height: calc(100vh - 100px);
   box-sizing: border-box;
   overflow: hidden;
@@ -513,19 +513,7 @@ $card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
       display: block;
     }
 
-    ::-webkit-scrollbar-thumb {
-      background: #d1d5db;
-      display: block;
-      border-radius: 3px;
-      transition: background 0.3s ease;
-
-      &:hover {
-        background: #9ca3af;
-      }
-    }
-
     ::-webkit-scrollbar-track {
-      background: #f9fafb;
       display: block;
       border-radius: 3px;
     }
@@ -534,25 +522,10 @@ $card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 
 // 配置卡片 - 优化阴影和间距
 .config-card {
-  border: 1px solid $gray-mid;
   border-radius: 8px;
   transition: all 0.3s ease;
-  background-color: #fff;
   overflow: hidden;
-
-  &:hover {
-    border-color: $primary-color;
-    box-shadow: $card-hover-shadow;
-  }
-
-  &.invalid-card {
-    border-color: rgba($danger-color, 0.3);
-    background-color: rgba($danger-color, 0.02);
-
-    &:hover {
-      border-color: $danger-color;
-    }
-  }
+  border: 1px solid $gray-mid;
 }
 
 // 配置卡片头部 - 优化布局和样式
@@ -561,8 +534,6 @@ $card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   justify-content: space-between;
   align-items: center;
   padding: 10px 12px; // Reduced padding
-  border-bottom: 1px solid $gray-mid;
-  background-color: #f9fafb;
 
   .card-title-wrap {
     display: flex;
diff --git a/klp-ui/src/views/wms/print/pages/code/index.vue b/klp-ui/src/views/wms/print/pages/code/index.vue
new file mode 100644
index 00000000..11b8df56
--- /dev/null
+++ b/klp-ui/src/views/wms/print/pages/code/index.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="编号" prop="serialNumber">
+        <el-input
+          v-model="queryParams.serialNumber"
+          placeholder="请输入编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="二维码尺寸" prop="size">
+        <el-input
+          v-model="queryParams.size"
+          placeholder="请输入二维码尺寸"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+        
+      </el-col>
+
+        <el-col :span="1.5">
+          二维码预览：<el-switch v-model="showQRCode" />
+        </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="generateRecordList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="recordId" v-if="false"/>
+      <!-- <el-table-column label="二维码类型" align="center" prop="qrcodeType" /> -->
+      <!-- <el-table-column label="二维码内容" align="center" prop="content" /> -->
+      <!-- <el-table-column label="是否启用" align="center" prop="isEnabled" /> -->
+      <el-table-column label="编号" align="center" prop="serialNumber" />
+      <el-table-column label="二维码尺寸" align="center" prop="size" />
+      <el-table-column v-if="showQRCode" label="二维码" align="center" prop="content">
+        <template slot-scope="scope">
+          <QRCode :content="scope.row.recordId" :size="scope.row.size"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改二维码生成记录对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="二维码内容">
+          <editor v-model="form.content" :min-height="192"/>
+        </el-form-item>
+        <el-form-item label="是否启用" prop="isEnabled">
+          <!-- 单选框 -->
+          <el-radio-group v-model="form.isEnabled">
+            <el-radio :label="1">启用</el-radio>
+            <el-radio :label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="编号" prop="serialNumber">
+          <el-input v-model="form.serialNumber" placeholder="请输入编号" />
+        </el-form-item>
+        <el-form-item label="二维码尺寸" prop="size">
+          <el-input v-model="form.size" placeholder="请输入二维码尺寸" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listGenerateRecord, getGenerateRecord, delGenerateRecord, addGenerateRecord, updateGenerateRecord } from "@/api/wms/generateRecord";
+import QRCode from '../../components/QRCode.vue';
+
+export default {
+  name: "GenerateRecord",
+  components: {
+    QRCode
+  },
+  data() {
+    return {
+      // 是否显示二维码
+      showQRCode: false,
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 二维码生成记录表格数据
+      generateRecordList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        qrcodeType: undefined,
+        content: undefined,
+        isEnabled: undefined,
+        serialNumber: undefined,
+        size: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询二维码生成记录列表 */
+    getList() {
+      this.loading = true;
+      listGenerateRecord(this.queryParams).then(response => {
+        this.generateRecordList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        recordId: undefined,
+        qrcodeType: undefined,
+        content: undefined,
+        isEnabled: undefined,
+        serialNumber: undefined,
+        size: undefined,
+        delFlag: undefined,
+        remark: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.recordId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加二维码生成记录";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const recordId = row.recordId || this.ids
+      getGenerateRecord(recordId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改二维码生成记录";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.recordId != null) {
+            updateGenerateRecord(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addGenerateRecord(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const recordIds = row.recordId || this.ids;
+      this.$modal.confirm('是否确认删除二维码生成记录编号为"' + recordIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delGenerateRecord(recordIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('klp/generateRecord/export', {
+        ...this.queryParams
+      }, `generateRecord_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>
diff --git a/klp-ui/src/views/wms/print/pages/gen/index.vue b/klp-ui/src/views/wms/print/pages/gen/index.vue
new file mode 100644
index 00000000..22af5d0a
--- /dev/null
+++ b/klp-ui/src/views/wms/print/pages/gen/index.vue
@@ -0,0 +1,754 @@
+<template>
+  <div class="print-page-container">
+    <!-- 页面标题栏 - 增加面包屑导航，提升页面定位感 -->
+    <div class="page-header">
+      <div class="header-actions">
+        <el-tooltip content="清空所有已添加的二维码配置" placement="top" :disabled="drawerBarcodeData.length === 0">
+          <el-button type="default" icon="el-icon-refresh" @click="handleResetAll"
+            :disabled="drawerBarcodeData.length === 0" class="btn-reset">
+            清空所有
+          </el-button>
+        </el-tooltip>
+        <el-tooltip content="仅对完整配置的二维码进行打印预览" placement="top"
+          :disabled="drawerBarcodeData.length === 0 || !isAllValid">
+          <el-button type="success" icon="el-icon-printer" @click="handlePrintPreview"
+            :disabled="drawerBarcodeData.length === 0 || !isAllValid" class="btn-print">
+            打印预览
+          </el-button>
+        </el-tooltip>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">
+          添加二维码
+        </el-button>
+      </div>
+    </div>
+    <!-- 主内容区 - 增加卡片外层容器，提升整体层次感 -->
+    <el-row :gutter="24" class="main-content">
+
+      <!-- 右侧预览区 - 增加预览说明、优化加载状态 -->
+      <el-col :span="16" class="right-col">
+        <div class="card-container">
+          <div class="right-container card">
+            <div class="right-header">
+              <div class="preview-count">
+                共 {{ drawerBarcodeData.length }} 个二维码
+                <span v-if="drawerBarcodeData.length > 0">| 有效配置: {{ validConfigCount }} 个</span>
+              </div>
+            </div>
+
+            <!-- 预览区内容 - 增加预览容器边框、优化滚动体验 -->
+            <div class="preview-content">
+              <div v-loading="loading || !drawerBarcodeData.length" class="preview-loading"
+                :element-loading-text="drawerBarcodeData.length === 0 ? '暂无配置数据，无法预览' : '加载预览中...'"
+                element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.9)"
+                element-loading-offset="100">
+                <BarCode :barcodes="barCodeConfigs" v-if="drawerBarcodeData.length > 0" class="barcode-renderer" />
+              </div>
+
+              <!-- 预览为空提示 - 优化空状态样式 -->
+              <div v-if="drawerBarcodeData.length > 0 && validConfigCount === 0" class="preview-empty">
+                <div class="empty-icon">
+                  <i class="el-icon-info"></i>
+                </div>
+                <div class="empty-text">所有二维码配置均不完整</div>
+                <div class="empty-desc">请完善左侧标红的必填字段后，再查看预览</div>
+              </div>
+            </div>
+          </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>
+
+<script>
+// 保持原脚本逻辑不变，仅增加hover状态初始化
+import BarCode from '../../components/CodeRenderer.vue';
+import ProductSelect from '@/components/KLPService/ProductSelect/index.vue';
+import SemiSelect from '@/components/KLPService/SemiSelect/index.vue';
+import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect/index.vue';
+import WarehouseSelect from '@/components/WarehouseSelect/index.vue';
+import { saveAsImage } from '@/utils/klp';
+import { listStockIo } from '@/api/wms/stockIo';
+import { addGenerateRecord, delGenerateRecord, updateGenerateRecord } from '@/api/wms/generateRecord';
+
+export default {
+  name: 'Print',
+  components: {
+    BarCode,
+    ProductSelect,
+    SemiSelect,
+    RawMaterialSelect,
+    WarehouseSelect
+  },
+  dicts: ['stock_item_type', 'stock_io_type'],
+  data() {
+    return {
+      drawerBarcodeData: [], // 条码数据
+      loading: false, // 加载状态
+      masterList: [], // 单据列表
+    };
+  },
+  mounted() {
+    this.fetchMaster();
+  },
+  computed: {
+    // 有效的二维码配置数量
+    validConfigCount() {
+      return this.drawerBarcodeData.filter(cfg => this.isConfigValid(cfg)).length;
+    },
+    // 所有配置是否都有效
+    isAllValid() {
+      return this.drawerBarcodeData.length > 0 &&
+        this.drawerBarcodeData.every(cfg => this.isConfigValid(cfg));
+    },
+    // 二维码配置数据
+    barCodeConfigs() {
+      return this.drawerBarcodeData
+        .filter(cfg => this.isConfigValid(cfg))
+        .map(b => ({
+          code: b.recordId,
+          count: b.totalCount,
+          textTpl: b.text || '二维码'
+        }));
+    }
+  },
+  methods: {
+    // 物料选择变更
+    onItemChange(item, idx) {
+      if (item && this.drawerBarcodeData[idx]) {
+        // 设置对应的物料名称
+        const name = item.name || item.materialName || item.productName || item.rawMaterialName;
+        const code = item.code || item.materialCode || item.productCode || item.rawMaterialCode;
+        this.$set(this.drawerBarcodeData[idx], 'itemName', name);
+        this.$set(this.drawerBarcodeData[idx], 'itemCode', code);
+        // this.drawerBarcodeData[idx].unit = item.unit;
+        // 如果未设置数量，默认设置为1
+        if (!this.drawerBarcodeData[idx].count) {
+          this.drawerBarcodeData[idx].count = 1;
+        }
+      }
+    },
+    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);
+    },
+    onFromWarehouseChange(cfg, idx, warehouse) {
+      console.log(warehouse, '源仓库');
+      this.$set(this.drawerBarcodeData[idx], 'fromWarehouseName', warehouse.warehouseName);
+    },
+    // 获取单据列表
+    fetchMaster() {
+      this.loading = true;
+      listStockIo({ pageSize: 9999, pageNum: 1 })
+        .then(res => {
+          // 排除已完成的单据，因为已完成的但是不可以继续修改
+          this.masterList = res.rows.filter(item => item.status != 2) || [];
+        })
+        .catch(error => {
+          console.error("获取挂载单据失败", error);
+          this.$message.error("获取挂载单据失败，请稍后重试");
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    // 删除二维码配置
+    handleDelete(cfg, idx) {
+      this.$confirm('确定要删除这个二维码配置吗？', '确认删除', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const recordId = this.drawerBarcodeData[idx].recordId;
+        if (recordId) {
+          delGenerateRecord(recordId)
+        }
+        this.drawerBarcodeData.splice(idx, 1);
+        this.$message.success({
+          message: '删除成功',
+          duration: 1500
+        });
+      }).catch(() => {
+        // 取消删除
+      });
+    },
+    // 添加二维码配置 - 增加hover状态初始化
+    handleAdd() {
+      const newConfig = {
+        ioType: undefined,
+        stockIoId: undefined,
+        fromWarehouseId: undefined,
+        warehouseId: undefined,
+        itemType: undefined,
+        gend: false,
+        itemId: undefined,
+        batchNo: 'auto',
+        count: 1, // 默认数量1
+        totalCount: 1, // 默认数量1
+        unit: '',
+        text: '二维码', // 默认文字
+        hovered: false, // 新增hover状态，用于交互反馈,
+        showForm: true // 新增表单展示开关
+      };
+
+      this.drawerBarcodeData.push(newConfig);
+
+      // 滚动到最新添加的配置
+      this.$nextTick(() => {
+        const container = document.querySelector('.left-container');
+        container.scrollTop = container.scrollHeight;
+      });
+    },
+    // 保存为图片
+    saveAsImage(index) {
+      const config = this.drawerBarcodeData[index];
+      if (!this.isConfigValid(config)) {
+        this.$message.warning('配置不完整，无法保存图片');
+        return;
+      }
+
+      try {
+        saveAsImage(
+          this.barCodeConfigs[index].code,
+          this.barCodeConfigs[index].textTpl,
+          index,
+          this
+        );
+        this.$message.success('图片保存成功');
+      } catch (error) {
+        console.error('保存图片失败', error);
+        this.$message.error('保存图片失败，请稍后重试');
+      }
+    },
+    // 清空所有配置
+    handleResetAll() {
+      this.$confirm('确定要清空所有二维码配置吗？此操作不可恢复', '确认清空', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.drawerBarcodeData = [];
+        this.$message.success({
+          message: '已清空所有配置',
+          duration: 1500
+        });
+      }).catch(() => {
+        // 取消清空
+      });
+    },
+    // 打印预览 - 增加加载状态提示
+    handlePrintPreview() {
+      document.querySelector('#previewIframe').contentWindow.print();
+    },
+    handleGenerate(cfg, idx) {
+      // 乐观更新，直接隐藏按钮
+      // this.$set(this.drawerBarcodeData[idx], 'gend', true);
+      this.$set(this.drawerBarcodeData[idx], 'gening', true);
+      // 发送网络请求保存已经生成的二维码
+      addGenerateRecord({
+        content: JSON.stringify(this.drawerBarcodeData[idx]),
+        recordType: 1, // recordType为1的时候生成的是一次性的出入库记录码
+        size: 90,
+        serialNumber: new Date().getTime(),
+        remark: '',
+      }).then(res => {
+        console.log(res, '生成的二维码数据')
+        this.$message.success('生成二维码成功');
+        this.$set(this.drawerBarcodeData[idx], 'recordId', res.data.recordId);
+        this.$set(this.drawerBarcodeData[idx], 'gend', true);
+      }).catch(err => {
+        // 如果请求失败，则回滚乐观更新
+        this.$message.error('生成二维码失败');
+        // this.$set(this.drawerBarcodeData[idx], 'gend', false);
+      }).finally(() => {
+        this.$set(this.drawerBarcodeData[idx], 'gening', false);
+      });
+    },
+    // 验证单个配置是否有效
+    isConfigValid(cfg) {
+      if (!cfg) return false;
+
+      // 基础必填字段验证
+      const basicValid = !!cfg.ioType && !!cfg.stockIoId && !!cfg.warehouseId;
+      // 移库需要额外验证源仓库
+      const transferValid = cfg.ioType !== 'transfer' || !!cfg.fromWarehouseId;
+      // 物料相关验证
+      const itemValid = !!cfg.itemType && !!cfg.itemId && !!cfg.count && cfg.count >= 1;
+
+      return basicValid && transferValid && itemValid;
+    },
+    // 获取字段错误信息
+    getError(cfg, field) {
+      if (!cfg.ioType) return '';
+
+      switch (field) {
+        case 'ioType':
+          return !cfg.ioType ? '请选择操作类型' : '';
+        case 'stockIoId':
+          return !cfg.stockIoId ? '请选择挂载单据' : '';
+        case 'warehouseId':
+          return !cfg.warehouseId ? '请选择目标仓库' : '';
+        case 'fromWarehouseId':
+          return cfg.ioType === 'transfer' && !cfg.fromWarehouseId ? '请选择源仓库' : '';
+        case 'itemType':
+          return !cfg.itemType ? '请选择物料类型' : '';
+        case 'itemId':
+          return !cfg.itemId ? '请选择物料信息' : '';
+        case 'count':
+          return !cfg.count || cfg.count < 1 ? '请输入有效的数量（至少1）' : '';
+        default:
+          return '';
+      }
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+// 全局变量定义 - 便于统一维护
+$primary-color: #409eff;
+$success-color: #67c23a;
+$warning-color: #e6a23c;
+$danger-color: #f56c6c;
+$gray-light: #f5f7fa;
+$gray-mid: #e5e7eb;
+$gray-dark: #6b7280;
+$text-primary: #1f2329;
+$text-secondary: #6b7280;
+$card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+$card-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+
+// 页面整体容器 - 优化高度计算、增加内边距
+.print-page-container {
+  padding: 16px 20px; // Slightly reduced padding
+  height: calc(100vh - 100px);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+// 页面标题栏 - 增加面包屑、优化布局
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px; // Reduced space between header and content
+  padding-bottom: 8px;
+  border-bottom: 1px solid $gray-mid;
+
+  .header-breadcrumb {
+    .el-breadcrumb {
+      margin-bottom: 4px;
+    }
+
+    .page-title {
+      font-size: 18px; // Slightly smaller title
+      font-weight: 600;
+      color: $text-primary;
+      margin: 0;
+    }
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 12px; // Reduced gap between buttons
+
+    .btn-reset {
+      padding: 6px 12px; // Smaller padding
+      transition: all 0.2s ease;
+    }
+
+    .btn-print {
+      padding: 6px 12px; // Smaller padding
+      transition: all 0.2s ease;
+    }
+  }
+}
+
+// 主内容区 - 优化间距
+.main-content {
+  height: calc(100% - 80px);
+  display: flex;
+  gap: 16px; // Reduced gap between left and right content
+
+  .left-col,
+  .right-col {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-container {
+    padding: 1px;
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+// 左侧容器 - 优化滚动体验
+.left-container {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+
+  &:hover {
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+      display: block;
+    }
+
+    ::-webkit-scrollbar-track {
+      display: block;
+      border-radius: 3px;
+    }
+  }
+}
+
+// 配置卡片 - 优化阴影和间距
+.config-card {
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  border: 1px solid $gray-mid;
+}
+
+// 配置卡片头部 - 优化布局和样式
+.config-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 12px; // Reduced padding
+
+  .card-title-wrap {
+    display: flex;
+    align-items: center;
+    gap: 6px; // Reduced gap between elements
+
+    .card-index {
+      width: 18px; // Smaller index
+      height: 18px; // Smaller index
+      font-size: 10px; // Smaller font size for index
+    }
+
+    .card-title {
+      font-size: 12px; // Smaller title
+      color: white
+    }
+
+    .card-status-tag {
+      margin-left: 6px; // Reduced margin
+    }
+  }
+
+  .card-actions {
+    display: flex;
+    gap: 0px; // Reduced gap between actions
+
+    .action-btn {
+      color: #2bf !important;
+      transition: color 0.2s ease;
+      font-size: 12px; // Reduced font size for actions
+
+      &:hover {
+        color: $primary-color;
+      }
+
+      &.delete-btn {
+        color: $danger-color;
+
+        &:hover {
+          color: #e53e3e !important;
+        }
+      }
+
+      &:disabled {
+        color: $gray-dark;
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+// 配置表单内容 - 优化间距和分组
+.config-form-content {
+  padding: 12px; // Reduced padding
+
+  .form-group {
+    margin-bottom: 12px; // Reduced spacing between groups
+
+    .group-title {
+      font-size: 12px; // Smaller font size for group title
+      margin-bottom: 8px; // Reduced margin
+    }
+  }
+
+  .form-item {
+    margin-bottom: 8px !important; // Reduced spacing between form items
+  }
+
+  .form-select {
+    width: 100% !important;
+  }
+
+  .config-warning {
+    margin-top: 8px; // Reduced margin
+    padding: 8px 10px; // Reduced padding
+    font-size: 12px; // Smaller font size
+  }
+}
+
+// 空状态样式 - 优化间距和图标
+.empty-state,
+.preview-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0; // Reduced padding
+  color: $text-secondary;
+  text-align: center;
+
+  .empty-icon {
+    font-size: 48px; // Slightly smaller icon
+    color: $gray-mid;
+    margin-bottom: 16px; // Reduced margin
+  }
+
+  .empty-text {
+    font-size: 14px; // Slightly smaller text
+    margin-bottom: 6px; // Reduced margin
+  }
+
+  .empty-desc {
+    font-size: 12px; // Smaller description text
+    margin-bottom: 16px;
+  }
+
+  .empty-action-btn {
+    padding: 4px 12px; // Smaller button padding
+    font-size: 12px; // Smaller font size
+  }
+}
+
+// 响应式调整 - 优化小屏幕体验
+@media (max-width: 1200px) {
+  .main-content {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .left-col,
+  .right-col {
+    span: 24;
+  }
+
+  .print-page-container {
+    padding: 12px; // Reduced padding for smaller screens
+  }
+
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px; // Reduced gap
+  }
+}
+
+@media print {
+
+  .page-header,
+  .left-col,
+  .preview-count {
+    display: none !important;
+  }
+
+  .print-page-container,
+  .main-content,
+  .right-col,
+  .card-container,
+  .right-container,
+  .preview-content {
+    height: auto !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    box-shadow: none !important;
+    border: none !important;
+  }
+
+  .barcode-renderer {
+    gap: 20px; // Reduced gap for print
+    justify-content: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/print/pages/tt/LabelRender/ForgeTagPreview.vue b/klp-ui/src/views/wms/print/pages/tt/LabelRender/ForgeTagPreview.vue
new file mode 100644
index 00000000..aaa554fd
--- /dev/null
+++ b/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>
diff --git a/klp-ui/src/views/wms/print/pages/tt/LabelRender/OuterTagPreview.vue b/klp-ui/src/views/wms/print/pages/tt/LabelRender/OuterTagPreview.vue
new file mode 100644
index 00000000..39d58831
--- /dev/null
+++ b/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>
diff --git a/klp-ui/src/views/wms/print/pages/tt/LabelRender/ProductionTagPreview.vue b/klp-ui/src/views/wms/print/pages/tt/LabelRender/ProductionTagPreview.vue
new file mode 100644
index 00000000..8add397e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/print/pages/tt/LabelRender/SaltSprayTagPreview.vue b/klp-ui/src/views/wms/print/pages/tt/LabelRender/SaltSprayTagPreview.vue
new file mode 100644
index 00000000..704bc599
--- /dev/null
+++ b/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>
diff --git a/klp-ui/src/views/wms/print/pages/tt/LabelRender/SampleTagPreview.vue b/klp-ui/src/views/wms/print/pages/tt/LabelRender/SampleTagPreview.vue
new file mode 100644
index 00000000..1c9bb07b
--- /dev/null
+++ b/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>
diff --git a/klp-ui/src/views/wms/print/pages/tt/LabelRender/index.vue b/klp-ui/src/views/wms/print/pages/tt/LabelRender/index.vue
new file mode 100644
index 00000000..b4986b25
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/print/pages/tt/index.vue b/klp-ui/src/views/wms/print/pages/tt/index.vue
new file mode 100644
index 00000000..dfea6517
--- /dev/null
+++ b/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>
\ No newline at end of file