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..591ff11b 100644
--- a/klp-ui/src/views/wms/print/index.vue
+++ b/klp-ui/src/views/wms/print/index.vue
@@ -435,7 +435,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 +512,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 +521,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 +533,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..1f7e114e
--- /dev/null
+++ b/klp-ui/src/views/wms/print/pages/gen/index.vue
@@ -0,0 +1,737 @@
+<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-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">
+        <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-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 } 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;
+        }
+      }
+    },
+    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 || [];
+          this.$message.success({
+            message: '单据列表加载成功',
+            duration: 1500
+          });
+        })
+        .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状态，用于交互反馈
+      };
+
+      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,
+        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
+    }
+
+    .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