diff --git a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/controller/BasProductCodeController.java b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/controller/BasProductCodeController.java
index 908a041..a506ad6 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/controller/BasProductCodeController.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/controller/BasProductCodeController.java
@@ -25,7 +25,7 @@ import com.ruoyi.common.core.page.TableDataInfo;
  * 条码打印Controller
  * 
  * @author gw
- * @date 2025-09-11
+ * @date 2025-09-12
  */
 @RestController
 @RequestMapping("/bas/BasProductCode")
@@ -64,7 +64,7 @@ public class BasProductCodeController extends BaseController
      */
     @PreAuthorize("@ss.hasPermi('bas:BasProductCode:query')")
     @GetMapping(value = "/{id}")
-    public AjaxResult getInfo(@PathVariable("id") String id)
+    public AjaxResult getInfo(@PathVariable("id") Long id)
     {
         return success(basProductCodeService.selectBasProductCodeById(id));
     }
@@ -77,7 +77,6 @@ public class BasProductCodeController extends BaseController
     @PostMapping
     public AjaxResult add(@RequestBody BasProductCode basProductCode)
     {
-        
         return toAjax(basProductCodeService.insertBasProductCode(basProductCode));
     }
 
@@ -98,7 +97,7 @@ public class BasProductCodeController extends BaseController
     @PreAuthorize("@ss.hasPermi('bas:BasProductCode:remove')")
     @Log(title = "条码打印", businessType = BusinessType.DELETE)
 	@DeleteMapping("/{ids}")
-    public AjaxResult remove(@PathVariable String[] ids)
+    public AjaxResult remove(@PathVariable Long[] ids)
     {
         return toAjax(basProductCodeService.deleteBasProductCodeByIds(ids));
     }
diff --git a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/domain/BasProductCode.java b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/domain/BasProductCode.java
index 4ad1667..3993766 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/domain/BasProductCode.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/domain/BasProductCode.java
@@ -1,5 +1,6 @@
 package com.ruoyi.bas.BasProductCode.domain;
 
+import com.fasterxml.jackson.annotation.JsonProperty;
 import org.apache.commons.lang3.builder.ToStringBuilder;
 import org.apache.commons.lang3.builder.ToStringStyle;
 import com.ruoyi.common.annotation.Excel;
@@ -7,16 +8,16 @@ import com.ruoyi.common.core.domain.BaseEntity;
 
 /**
  * 条码打印对象 bas_product_code
- * 
+ *
  * @author gw
- * @date 2025-09-11
+ * @date 2025-09-12
  */
 public class BasProductCode extends BaseEntity
 {
     private static final long serialVersionUID = 1L;
 
     /** 主键 */
-    private String id;
+    private Long id;
 
     /** 型号 */
     @Excel(name = "型号")
@@ -44,155 +45,202 @@ public class BasProductCode extends BaseEntity
 
     /** 净重 */
     @Excel(name = "净重")
+    @JsonProperty("nW")
     private String nW;
 
     /** 毛重 */
     @Excel(name = "毛重")
+    @JsonProperty("gW")
     private String gW;
 
-    /** 类型 */
-    @Excel(name = "类型")
+    /** 类型（1为未打印，2为已打印） */
+    @Excel(name = "类型", readConverterExp = "1=为未打印，2为已打印")
     private String type;
 
-    /** $column.columnComment */
+    /** 订单号 */
+    @Excel(name = "订单号")
     private String spare1;
 
-    /** $column.columnComment */
+    /** 机型 */
+    @Excel(name = "机型")
     private String spare2;
 
-    /** $column.columnComment */
+    /** 分销 */
+    @Excel(name = "分销")
     private String spare3;
 
-    public void setId(String id) 
+    /** 备用字段1 */
+    @Excel(name = "备用字段1")
+    private String spare4;
+
+    /** 备用字段2 */
+    @Excel(name = "备用字段2")
+    private String spare5;
+
+    /** 备用字段3 */
+    @Excel(name = "备用字段3")
+    private String spare6;
+
+    public void setId(Long id)
     {
         this.id = id;
     }
 
-    public String getId() 
+    public Long getId()
     {
         return id;
     }
 
-    public void setModel(String model) 
+    public void setModel(String model)
     {
         this.model = model;
     }
 
-    public String getModel() 
+    public String getModel()
     {
         return model;
     }
 
-    public void setColor(String color) 
+    public void setColor(String color)
     {
         this.color = color;
     }
 
-    public String getColor() 
+    public String getColor()
     {
         return color;
     }
 
-    public void setSerial(String serial) 
+    public void setSerial(String serial)
     {
         this.serial = serial;
     }
 
-    public String getSerial() 
+    public String getSerial()
     {
         return serial;
     }
 
-    public void setV(String v) 
+    public void setV(String v)
     {
         this.v = v;
     }
 
-    public String getV() 
+    public String getV()
     {
         return v;
     }
 
-    public void setHz(String hz) 
+    public void setHz(String hz)
     {
         this.hz = hz;
     }
 
-    public String getHz() 
+    public String getHz()
     {
         return hz;
     }
 
-    public void setPh(String ph) 
+    public void setPh(String ph)
     {
         this.ph = ph;
     }
 
-    public String getPh() 
+    public String getPh()
     {
         return ph;
     }
 
-    public void setNw(String nW) 
+    public void setNW(String nW)
     {
         this.nW = nW;
     }
 
-    public String getNw() 
+    public String getNW()
     {
         return nW;
     }
 
-    public void setGw(String gW) 
+    public void setGW(String gW)
     {
         this.gW = gW;
     }
 
-    public String getGw() 
+    public String getGW()
     {
         return gW;
     }
 
-    public void setType(String type) 
+    public void setType(String type)
     {
         this.type = type;
     }
 
-    public String getType() 
+    public String getType()
     {
         return type;
     }
 
-    public void setSpare1(String spare1) 
+    public void setSpare1(String spare1)
     {
         this.spare1 = spare1;
     }
 
-    public String getSpare1() 
+    public String getSpare1()
     {
         return spare1;
     }
 
-    public void setSpare2(String spare2) 
+    public void setSpare2(String spare2)
     {
         this.spare2 = spare2;
     }
 
-    public String getSpare2() 
+    public String getSpare2()
     {
         return spare2;
     }
 
-    public void setSpare3(String spare3) 
+    public void setSpare3(String spare3)
     {
         this.spare3 = spare3;
     }
 
-    public String getSpare3() 
+    public String getSpare3()
     {
         return spare3;
     }
 
+    public void setSpare4(String spare4)
+    {
+        this.spare4 = spare4;
+    }
+
+    public String getSpare4()
+    {
+        return spare4;
+    }
+
+    public void setSpare5(String spare5)
+    {
+        this.spare5 = spare5;
+    }
+
+    public String getSpare5()
+    {
+        return spare5;
+    }
+
+    public void setSpare6(String spare6)
+    {
+        this.spare6 = spare6;
+    }
+
+    public String getSpare6()
+    {
+        return spare6;
+    }
+
     @Override
     public String toString() {
         return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
@@ -203,12 +251,16 @@ public class BasProductCode extends BaseEntity
             .append("v", getV())
             .append("hz", getHz())
             .append("ph", getPh())
-            .append("nW", getNw())
-            .append("gW", getGw())
+            .append("nW", getNW())
+            .append("gW", getGW())
             .append("type", getType())
             .append("spare1", getSpare1())
             .append("spare2", getSpare2())
             .append("spare3", getSpare3())
+            .append("createTime", getCreateTime())
+            .append("spare4", getSpare4())
+            .append("spare5", getSpare5())
+            .append("spare6", getSpare6())
             .toString();
     }
 }
diff --git a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/mapper/BasProductCodeMapper.java b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/mapper/BasProductCodeMapper.java
index 974214d..b099ffe 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/mapper/BasProductCodeMapper.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/mapper/BasProductCodeMapper.java
@@ -7,7 +7,7 @@ import com.ruoyi.bas.BasProductCode.domain.BasProductCode;
  * 条码打印Mapper接口
  * 
  * @author gw
- * @date 2025-09-11
+ * @date 2025-09-12
  */
 public interface BasProductCodeMapper 
 {
@@ -17,7 +17,7 @@ public interface BasProductCodeMapper
      * @param id 条码打印主键
      * @return 条码打印
      */
-    public BasProductCode selectBasProductCodeById(String id);
+    public BasProductCode selectBasProductCodeById(Long id);
 
     /**
      * 查询条码打印列表
@@ -49,7 +49,7 @@ public interface BasProductCodeMapper
      * @param id 条码打印主键
      * @return 结果
      */
-    public int deleteBasProductCodeById(String id);
+    public int deleteBasProductCodeById(Long id);
 
     /**
      * 批量删除条码打印
@@ -57,5 +57,5 @@ public interface BasProductCodeMapper
      * @param ids 需要删除的数据主键集合
      * @return 结果
      */
-    public int deleteBasProductCodeByIds(String[] ids);
+    public int deleteBasProductCodeByIds(Long[] ids);
 }
diff --git a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/service/IBasProductCodeService.java b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/service/IBasProductCodeService.java
index fca7649..6f40ce9 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/service/IBasProductCodeService.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/service/IBasProductCodeService.java
@@ -7,7 +7,7 @@ import com.ruoyi.bas.BasProductCode.domain.BasProductCode;
  * 条码打印Service接口
  * 
  * @author gw
- * @date 2025-09-11
+ * @date 2025-09-12
  */
 public interface IBasProductCodeService 
 {
@@ -17,7 +17,7 @@ public interface IBasProductCodeService
      * @param id 条码打印主键
      * @return 条码打印
      */
-    public BasProductCode selectBasProductCodeById(String id);
+    public BasProductCode selectBasProductCodeById(Long id);
 
     /**
      * 查询条码打印列表
@@ -49,7 +49,7 @@ public interface IBasProductCodeService
      * @param ids 需要删除的条码打印主键集合
      * @return 结果
      */
-    public int deleteBasProductCodeByIds(String[] ids);
+    public int deleteBasProductCodeByIds(Long[] ids);
 
     /**
      * 删除条码打印信息
@@ -57,5 +57,5 @@ public interface IBasProductCodeService
      * @param id 条码打印主键
      * @return 结果
      */
-    public int deleteBasProductCodeById(String id);
+    public int deleteBasProductCodeById(Long id);
 }
diff --git a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/service/impl/BasProductCodeServiceImpl.java b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/service/impl/BasProductCodeServiceImpl.java
index 4eef6d7..7bd821e 100644
--- a/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/service/impl/BasProductCodeServiceImpl.java
+++ b/ruoyi-admin/src/main/java/com/ruoyi/bas/BasProductCode/service/impl/BasProductCodeServiceImpl.java
@@ -1,8 +1,7 @@
 package com.ruoyi.bas.BasProductCode.service.impl;
 
 import java.util.List;
-
-import cn.hutool.core.util.IdUtil;
+import com.ruoyi.common.utils.DateUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import com.ruoyi.bas.BasProductCode.mapper.BasProductCodeMapper;
@@ -11,31 +10,31 @@ import com.ruoyi.bas.BasProductCode.service.IBasProductCodeService;
 
 /**
  * 条码打印Service业务层处理
- * 
+ *
  * @author gw
- * @date 2025-09-11
+ * @date 2025-09-12
  */
 @Service
-public class BasProductCodeServiceImpl implements IBasProductCodeService 
+public class BasProductCodeServiceImpl implements IBasProductCodeService
 {
     @Autowired
     private BasProductCodeMapper basProductCodeMapper;
 
     /**
      * 查询条码打印
-     * 
+     *
      * @param id 条码打印主键
      * @return 条码打印
      */
     @Override
-    public BasProductCode selectBasProductCodeById(String id)
+    public BasProductCode selectBasProductCodeById(Long id)
     {
         return basProductCodeMapper.selectBasProductCodeById(id);
     }
 
     /**
      * 查询条码打印列表
-     * 
+     *
      * @param basProductCode 条码打印
      * @return 条码打印
      */
@@ -47,21 +46,21 @@ public class BasProductCodeServiceImpl implements IBasProductCodeService
 
     /**
      * 新增条码打印
-     * 
+     *
      * @param basProductCode 条码打印
      * @return 结果
      */
     @Override
     public int insertBasProductCode(BasProductCode basProductCode)
     {
-        // 使用雪花算法生成ID
-        basProductCode.setId(IdUtil.simpleUUID());
+        basProductCode.setCreateTime(DateUtils.getNowDate());
+        basProductCode.setType("1");
         return basProductCodeMapper.insertBasProductCode(basProductCode);
     }
 
     /**
      * 修改条码打印
-     * 
+     *
      * @param basProductCode 条码打印
      * @return 结果
      */
@@ -73,24 +72,24 @@ public class BasProductCodeServiceImpl implements IBasProductCodeService
 
     /**
      * 批量删除条码打印
-     * 
+     *
      * @param ids 需要删除的条码打印主键
      * @return 结果
      */
     @Override
-    public int deleteBasProductCodeByIds(String[] ids)
+    public int deleteBasProductCodeByIds(Long[] ids)
     {
         return basProductCodeMapper.deleteBasProductCodeByIds(ids);
     }
 
     /**
      * 删除条码打印信息
-     * 
+     *
      * @param id 条码打印主键
      * @return 结果
      */
     @Override
-    public int deleteBasProductCodeById(String id)
+    public int deleteBasProductCodeById(Long id)
     {
         return basProductCodeMapper.deleteBasProductCodeById(id);
     }
diff --git a/ruoyi-admin/src/main/resources/mapper/bas/BasProductCodeMapper.xml b/ruoyi-admin/src/main/resources/mapper/bas/BasProductCodeMapper.xml
index 38f051e..5477ce9 100644
--- a/ruoyi-admin/src/main/resources/mapper/bas/BasProductCodeMapper.xml
+++ b/ruoyi-admin/src/main/resources/mapper/bas/BasProductCodeMapper.xml
@@ -18,10 +18,14 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="spare1"    column="spare1"    />
         <result property="spare2"    column="spare2"    />
         <result property="spare3"    column="spare3"    />
+        <result property="createTime"    column="create_time"    />
+        <result property="spare4"    column="spare4"    />
+        <result property="spare5"    column="spare5"    />
+        <result property="spare6"    column="spare6"    />
     </resultMap>
 
     <sql id="selectBasProductCodeVo">
-        select id, model, color, serial, v, hz, ph, n_w, g_w, type, spare1, spare2, spare3 from bas_product_code
+        select id, model, color, serial, v, hz, ph, n_w, g_w, type, spare1, spare2, spare3, create_time, spare4, spare5, spare6 from bas_product_code
     </sql>
 
     <select id="selectBasProductCodeList" parameterType="BasProductCode" resultMap="BasProductCodeResult">
@@ -36,10 +40,16 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="nW != null  and nW != ''"> and n_w like concat('%', #{nW}, '%')</if>
             <if test="gW != null  and gW != ''"> and g_w like concat('%', #{gW}, '%')</if>
             <if test="type != null  and type != ''"> and type = #{type}</if>
+            <if test="spare1 != null  and spare1 != ''"> and spare1 = #{spare1}</if>
+            <if test="spare2 != null  and spare2 != ''"> and spare2 = #{spare2}</if>
+            <if test="spare3 != null  and spare3 != ''"> and spare3 = #{spare3}</if>
+            <if test="spare4 != null  and spare4 != ''"> and spare4 = #{spare4}</if>
+            <if test="spare5 != null  and spare5 != ''"> and spare5 = #{spare5}</if>
+            <if test="spare6 != null  and spare6 != ''"> and spare6 = #{spare6}</if>
         </where>
     </select>
     
-    <select id="selectBasProductCodeById" parameterType="String" resultMap="BasProductCodeResult">
+    <select id="selectBasProductCodeById" parameterType="Long" resultMap="BasProductCodeResult">
         <include refid="selectBasProductCodeVo"/>
         where id = #{id}
     </select>
@@ -60,6 +70,10 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="spare1 != null">spare1,</if>
             <if test="spare2 != null">spare2,</if>
             <if test="spare3 != null">spare3,</if>
+            <if test="createTime != null">create_time,</if>
+            <if test="spare4 != null">spare4,</if>
+            <if test="spare5 != null">spare5,</if>
+            <if test="spare6 != null">spare6,</if>
          </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="id != null">#{id},</if>
@@ -75,6 +89,10 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="spare1 != null">#{spare1},</if>
             <if test="spare2 != null">#{spare2},</if>
             <if test="spare3 != null">#{spare3},</if>
+            <if test="createTime != null">#{createTime},</if>
+            <if test="spare4 != null">#{spare4},</if>
+            <if test="spare5 != null">#{spare5},</if>
+            <if test="spare6 != null">#{spare6},</if>
          </trim>
     </insert>
 
@@ -93,11 +111,15 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             <if test="spare1 != null">spare1 = #{spare1},</if>
             <if test="spare2 != null">spare2 = #{spare2},</if>
             <if test="spare3 != null">spare3 = #{spare3},</if>
+            <if test="createTime != null">create_time = #{createTime},</if>
+            <if test="spare4 != null">spare4 = #{spare4},</if>
+            <if test="spare5 != null">spare5 = #{spare5},</if>
+            <if test="spare6 != null">spare6 = #{spare6},</if>
         </trim>
         where id = #{id}
     </update>
 
-    <delete id="deleteBasProductCodeById" parameterType="String">
+    <delete id="deleteBasProductCodeById" parameterType="Long">
         delete from bas_product_code where id = #{id}
     </delete>
 
diff --git a/ruoyi-ui/src/views/bas/BasProductCode/index.vue b/ruoyi-ui/src/views/bas/BasProductCode/index.vue
index 49dedb9..eeecbd9 100644
--- a/ruoyi-ui/src/views/bas/BasProductCode/index.vue
+++ b/ruoyi-ui/src/views/bas/BasProductCode/index.vue
@@ -1,382 +1,884 @@
 <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="color">
-        <el-input
-          v-model="queryParams.color"
-          placeholder="请输入颜色"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="序列号" prop="serial">
-        <el-input
-          v-model="queryParams.serial"
-          placeholder="请输入序列号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="电压" prop="v">
-        <el-input
-          v-model="queryParams.v"
-          placeholder="请输入电压"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="功率" prop="hz">
-        <el-input
-          v-model="queryParams.hz"
-          placeholder="请输入功率"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="相位" prop="ph">
-        <el-input
-          v-model="queryParams.ph"
-          placeholder="请输入相位"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="净重" prop="nW">
-        <el-input
-          v-model="queryParams.nW"
-          placeholder="请输入净重"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="毛重" prop="gW">
-        <el-input
-          v-model="queryParams.gW"
-          placeholder="请输入毛重"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
-          <el-option
-            v-for="dict in dict.type.print_type"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
+    <el-row :gutter="20">
+      <!-- 左侧区域 -->
+      <el-col :span="8">
+        <!-- 表单区域 -->
+        <div class="form-container">
+          <div class="section-header">
+            <h3>生成条码</h3>
+          </div>
+          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+            <el-row :gutter="20">
+              <el-col 
+                v-for="field in formFields" 
+                :key="field.prop" 
+                :span="24"
+              >
+                <el-form-item :label="field.label" :prop="field.prop">
+                  <el-input 
+                    v-model="form[field.prop]" 
+                    :placeholder="field.placeholder"
+                    :disabled="loading"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item class="form-actions">
+              <el-button 
+                type="warning" 
+                @click="handlePreview"
+                :loading="previewLoading"
+                icon="el-icon-view"
+              >
+                预览
+              </el-button>
+              <el-button 
+                @click="resetForm"
+                icon="el-icon-refresh"
+              >
+                重置
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+
+      </el-col>
+      
+      <!-- 右侧预览区域 -->
+      <el-col :span="16">
+        <div class="preview-container">
+          <div class="section-header">
+            <h3>标签预览</h3>
+            <div class="header-actions">
+              <el-button
+                type="primary"
+                @click="submitForm"
+                :disabled="!showPreview"
+                :loading="submitLoading"
+                icon="el-icon-printer"
+              >
+                保存并打印
+              </el-button>
+            </div>
+          </div>
+
+          <!-- 空状态提示 -->
+          <div v-show="!showPreview" class="empty-preview">
+            <i class="el-icon-document"></i>
+            <p>点击"预览"按钮查看标签效果</p>
+          </div>
+
+          <!-- 预览显示区域 -->
+          <div v-show="showPreview" class="preview-display">
+            <div class="label-content">
+              <div class="preview-box">
+                <div class="preview-content">
+                  <div class="preview-row">
+                    <span class="preview-label">MODEL:</span>
+                    <span class="preview-value">{{ previewData.model }}</span>
+                  </div>
+                  <div class="preview-row">
+                    <span class="preview-label">SERIAL:</span>
+                    <span class="preview-value">{{ previewData.serial }}</span>
+                  </div>
+                  <div class="preview-row">
+                    <span class="preview-label">COLOR:</span>
+                    <span class="preview-value">{{ previewData.color }}</span>
+                  </div>
+                  <div class="preview-row">
+                    <div class="preview-col">
+                      <span class="preview-label">V:</span>
+                      <span class="preview-value">{{ previewData.v }}</span>
+                    </div>
+                    <div class="preview-col">
+                      <span class="preview-label">Hz:</span>
+                      <span class="preview-value">{{ previewData.hz }}</span>
+                    </div>
+                    <div class="preview-col">
+                      <span class="preview-label">PH:</span>
+                      <span class="preview-value">{{ previewData.ph }}</span>
+                    </div>
+                  </div>
+                  <div class="preview-row">
+                    <div class="preview-col">
+                      <span class="preview-label">N.W.:</span>
+                      <span class="preview-value">{{ previewData.nW }}kg</span>
+                    </div>
+                    <div class="preview-col">
+                      <span class="preview-label">G.W.:</span>
+                      <span class="preview-value">{{ previewData.gW }}kg</span>
+                    </div>
+                  </div>
+                </div>
+                <!-- 二维码区域 -->
+                <div class="qrcode-container">
+                  <vue-qr 
+                    :text="qrCodeValue" 
+                    :size="180" 
+                    :margin="0" 
+                    :correctLevel="2"
+                    error-correction-level="M"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 打印专用区域（隐藏） -->
+          <vue-easy-print style="display: none;" ref="easyPrint2">
+            <div class="vue-easy-print" style="page-break-after:always">
+              <div class="label-content">
+                <div class="preview-box">
+                  <div class="preview-content">
+                    <div class="preview-row">
+                      <span class="preview-label">MODEL:</span>
+                      <span class="preview-value">{{ previewData.model }}</span>
+                    </div>
+                    <div class="preview-row">
+                      <span class="preview-label">SERIAL:</span>
+                      <span class="preview-value">{{ previewData.serial }}</span>
+                    </div>
+                    <div class="preview-row">
+                      <span class="preview-label">COLOR:</span>
+                      <span class="preview-value">{{ previewData.color }}</span>
+                    </div>
+                    <div class="preview-row">
+                      <div class="preview-col">
+                        <span class="preview-label">V:</span>
+                        <span class="preview-value">{{ previewData.v }}</span>
+                      </div>
+                      <div class="preview-col">
+                        <span class="preview-label">Hz:</span>
+                        <span class="preview-value">{{ previewData.hz }}</span>
+                      </div>
+                      <div class="preview-col">
+                        <span class="preview-label">PH:</span>
+                        <span class="preview-value">{{ previewData.ph }}</span>
+                      </div>
+                    </div>
+                    <div class="preview-row">
+                      <div class="preview-col">
+                        <span class="preview-label">N.W.:</span>
+                        <span class="preview-value">{{ previewData.nW }}</span>
+                      </div>
+                      <div class="preview-col">
+                        <span class="preview-label">G.W.:</span>
+                        <span class="preview-value">{{ previewData.gW }}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- 二维码区域 -->
+                  <div class="qrcode-container">
+                    <vue-qr 
+                      :text="qrCodeValue" 
+                      :size="180" 
+                      :margin="0" 
+                      :correctLevel="2"
+                      error-correction-level="M"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </vue-easy-print>
+        </div>
+        
+        <!-- 历史数据区域 -->
+        <div class="list-container">
+          <div class="section-header">
+            <h3>历史数据</h3>
+            <div class="header-actions">
+              <el-button 
+                type="danger" 
+                size="small"
+                @click="handleBatchDelete"
+                :disabled="!hasSelection"
+                icon="el-icon-delete"
+              >
+                批量删除
+              </el-button>
+            </div>
+          </div>
+
+          <el-table
+            ref="table"
+            v-loading="loading"
+            :data="tableData"
+            @selection-change="handleSelectionChange"
+            stripe
+            border
+          >
+            <el-table-column type="selection" width="55" align="center"/>
+            <el-table-column 
+              v-for="column in tableColumns" 
+              :key="column.prop"
+              :label="column.label" 
+              :prop="column.prop"
+              :width="column.width"
+              :formatter="column.formatter"
+              show-overflow-tooltip
+            />
+            <el-table-column label="操作" width="180" align="center" fixed="right">
+              <template slot-scope="scope">
+                <el-button size="mini" type="text" @click="handleEdit(scope.row)" icon="el-icon-edit">编辑</el-button>
+                <el-button size="mini" type="text" @click="handlePrint(scope.row)" icon="el-icon-printer">打印</el-button>
+                <el-button size="mini" type="text" @click="handleDelete(scope.row)" icon="el-icon-delete" class="danger-text">删除</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-select>
-      </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"
-          v-hasPermi="['bas:BasProductCode:add']"
-        >新增</el-button>
+        </div>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['bas:BasProductCode:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['bas:BasProductCode:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['bas:BasProductCode:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
-
-    <el-table v-loading="loading" :data="BasProductCodeList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="型号" align="center" prop="model" />
-      <el-table-column label="颜色" align="center" prop="color" />
-      <el-table-column label="序列号" align="center" prop="serial" />
-      <el-table-column label="电压" align="center" prop="v" />
-      <el-table-column label="功率" align="center" prop="hz" />
-      <el-table-column label="相位" align="center" prop="ph" />
-      <el-table-column label="净重" align="center" prop="nW" />
-      <el-table-column label="毛重" align="center" prop="gW" />
-      <el-table-column label="类型" align="center" prop="type">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.print_type" :value="scope.row.type"/>
-        </template>
-      </el-table-column>
-      <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)"
-            v-hasPermi="['bas:BasProductCode:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['bas:BasProductCode:remove']"
-          >删除</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="型号" prop="model">
-          <el-input v-model="form.model" placeholder="请输入型号" />
-        </el-form-item>
-        <el-form-item label="颜色" prop="color">
-          <el-input v-model="form.color" placeholder="请输入颜色" />
-        </el-form-item>
-        <el-form-item label="序列号" prop="serial">
-          <el-input v-model="form.serial" placeholder="请输入序列号" />
-        </el-form-item>
-        <el-form-item label="电压" prop="v">
-          <el-input v-model="form.v" placeholder="请输入电压" />
-        </el-form-item>
-        <el-form-item label="功率" prop="hz">
-          <el-input v-model="form.hz" placeholder="请输入功率" />
-        </el-form-item>
-        <el-form-item label="相位" prop="ph">
-          <el-input v-model="form.ph" placeholder="请输入相位" />
-        </el-form-item>
-        <el-form-item label="净重" prop="nW">
-          <el-input v-model="form.nW" placeholder="请输入净重" />
-        </el-form-item>
-        <el-form-item label="毛重" prop="gW">
-          <el-input v-model="form.gW" placeholder="请输入毛重" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listBasProductCode, getBasProductCode, delBasProductCode, addBasProductCode, updateBasProductCode } from "@/api/bas/BasProductCode"
+import VueQr from 'vue-qr'
+import VueEasyPrint from 'vue-easy-print'
+import {
+  listBasProductCode,
+  getBasProductCode,
+  delBasProductCode,
+  addBasProductCode,
+  updateBasProductCode
+} from "@/api/bas/BasProductCode"
+
+// 常量配置
+const FORM_FIELDS = [
+  { prop: 'model', label: '型号', placeholder: '请输入型号', required: true },
+  { prop: 'serial', label: '序列号', placeholder: '请输入序列号', required: true },
+  { prop: 'color', label: '颜色', placeholder: '请输入颜色', required: true },
+  { prop: 'v', label: '电压', placeholder: '请输入电压' },
+  { prop: 'hz', label: '功率', placeholder: '请输入功率' },
+  { prop: 'ph', label: '相位', placeholder: '请输入相位' },
+  { prop: 'nW', label: '净重', placeholder: '请输入净重', required: true },
+  { prop: 'gW', label: '毛重', placeholder: '请输入毛重', required: true },
+  { prop: 'spare1', label: '订单号', placeholder: '请输入订单号' },
+  { prop: 'spare2', label: '机型', placeholder: '请输入机型' },
+  { prop: 'spare3', label: '分销', placeholder: '请输入分销' }
+]
+
+const TABLE_COLUMNS = [
+  { prop: 'model', label: '型号', width: 100 },
+  { prop: 'color', label: '颜色', width: 80 },
+  { prop: 'serial', label: '序列号', width: 120 },
+  { prop: 'v', label: '电压', width: 80 },
+  { prop: 'hz', label: '功率', width: 80 },
+  { prop: 'ph', label: '相位', width: 80 },
+  { prop: 'nW', label: '净重', width: 80 },
+  { prop: 'gW', label: '毛重', width: 80 },
+  {
+    prop: 'type',
+    label: '状态',
+    width: 80,
+    formatter: (row) => row.type === '1' ? '未打印' : '已打印'
+  },
+  { prop: 'spare1', label: '订单号', width: 120 },
+  { prop: 'spare2', label: '机型', width: 100 },
+  { prop: 'spare3', label: '分箱', width: 100 }
+]
+
+const DEFAULT_FORM = {
+  model: '',
+  color: '',
+  serial: '',
+  v: '',
+  hz: '',
+  ph: '',
+  nW: '',
+  gW: '',
+  type: '1',
+  spare1: '',
+  spare2: '',
+  spare3: ''
+}
+
+const DEFAULT_PREVIEW_DATA = {
+  model: '',
+  color: '',
+  serial: '',
+  v: '',
+  hz: '',
+  ph: '',
+  nW: '',
+  gW: ''
+}
 
 export default {
-  name: "BasProductCode",
-  dicts: ['print_type'],
+  name: 'BasProductCode',
+  components: {
+    VueQr,
+    VueEasyPrint
+  },
   data() {
     return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 条码打印表格数据
-      BasProductCodeList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
+      // 表单对象
+      form: { ...DEFAULT_FORM },
+      // 表单校验规则
+      rules: this.generateRules(),
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        model: null,
-        color: null,
-        serial: null,
-        v: null,
-        hz: null,
-        ph: null,
-        nW: null,
-        gW: null,
-        type: null,
+        searchText: ''
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        id: [
-          { required: true, message: "主键不能为空", trigger: "blur" }
-        ],
-        model: [
-          { required: true, message: "型号不能为空", trigger: "change" }
-        ],
-        color: [
-          { required: true, message: "颜色不能为空", trigger: "blur" }
-        ],
-        serial: [
-          { required: true, message: "序列号不能为空", trigger: "blur" }
-        ],
-        v: [
-          { required: true, message: "电压不能为空", trigger: "blur" }
-        ],
-        hz: [
-          { required: true, message: "功率不能为空", trigger: "blur" }
-        ],
-        ph: [
-          { required: true, message: "相位不能为空", trigger: "blur" }
-        ],
-        nW: [
-          { required: true, message: "净重不能为空", trigger: "blur" }
-        ],
-        gW: [
-          { required: true, message: "毛重不能为空", trigger: "blur" }
-        ],
-      }
+      // 表格数据
+      tableData: [],
+      // 加载状态
+      loading: false,
+      previewLoading: false,
+      submitLoading: false,
+      // 总条数
+      total: 0,
+      // 预览数据
+      previewData: { ...DEFAULT_PREVIEW_DATA },
+      // 选中数据
+      selectedRows: [],
+      // 是否显示预览
+      showPreview: false,
+      // 表单字段配置
+      formFields: FORM_FIELDS,
+      // 表格列配置
+      tableColumns: TABLE_COLUMNS
+    }
+  },
+  computed: {
+    // 二维码内容
+    qrCodeValue() {
+      const text = `${this.previewData.spare1}@${this.previewData.model}@${this.previewData.spare2}@${this.previewData.spare3}@${this.previewData.serial}`
+      return this.procode(text)
+    },
+    // 是否有选中项
+    hasSelection() {
+      return this.selectedRows.length > 0
     }
   },
   created() {
-    this.getList()
+    this.init()
   },
   methods: {
-    /** 查询条码打印列表 */
-    getList() {
-      this.loading = true
-      listBasProductCode(this.queryParams).then(response => {
-        this.BasProductCodeList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.reset()
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        model: null,
-        color: null,
-        serial: null,
-        v: null,
-        hz: null,
-        ph: null,
-        nW: null,
-        gW: null,
-        type: null,
-        spare1: null,
-        spare2: null,
-        spare3: null
+    // 初始化
+    async init() {
+      try {
+        await this.getList()
+      } catch (error) {
+        this.$message.error('初始化失败：' + error.message)
       }
-      this.resetForm("form")
     },
-    /** 搜索按钮操作 */
+
+    // 生成表单验证规则
+    generateRules() {
+      const rules = {}
+      FORM_FIELDS.forEach(field => {
+        if (field.required) {
+          rules[field.prop] = [
+            { required: true, message: `请输入${field.label}`, trigger: 'blur' }
+          ]
+        }
+      })
+      return rules
+    },
+
+    // 获取列表数据
+    async getList() {
+      this.loading = true
+      try {
+        const response = await listBasProductCode(this.queryParams)
+        this.tableData = response.rows || []
+        this.total = response.total || 0
+      } catch (error) {
+        this.$message.error('获取数据失败：' + error.message)
+        this.tableData = []
+        this.total = 0
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 查询按钮操作
     handleQuery() {
       this.queryParams.pageNum = 1
       this.getList()
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm")
-      this.handleQuery()
+
+    // 重置表单
+    resetForm() {
+      this.$refs.form.resetFields()
+      this.form = { ...DEFAULT_FORM }
+      this.previewData = { ...DEFAULT_PREVIEW_DATA }
+      this.showPreview = false
     },
+
+    // 预览按钮操作
+    async handlePreview() {
+      try {
+        await this.$refs.form.validate()
+        this.previewLoading = true
+
+        // 模拟预览加载
+        setTimeout(() => {
+          this.previewData = { ...this.form }
+          this.showPreview = true
+          this.previewLoading = false
+          this.$message.success('预览生成成功')
+        }, 300)
+      } catch (error) {
+        this.$message.warning('请完善必填信息')
+      }
+    },
+
+    // 表单提交
+    async submitForm() {
+      try {
+        await this.$refs.form.validate()
+        this.submitLoading = true
+
+        const apiCall = this.form.id != null
+          ? updateBasProductCode(this.form)
+          : addBasProductCode(this.form)
+
+        await apiCall
+
+        const message = this.form.id != null ? '修改成功' : '新增成功'
+        this.$message.success(message)
+
+        await this.getList()
+        await this.autoPrint()
+
+      } catch (error) {
+        this.$message.error('保存失败：' + error.message)
+      } finally {
+        this.submitLoading = false
+      }
+    },
+
+    // 新增按钮操作
+    handleAdd() {
+      this.resetForm()
+    },
+
+    // 编辑按钮操作
+    handleEdit(row) {
+      this.form = { ...row }
+      this.previewData = { ...row }
+      this.showPreview = true
+    },
+
+    // 删除按钮操作
+    async handleDelete(row) {
+      try {
+        await this.$confirm(
+          `是否确认删除条码打印编号为"${row.id}"的数据项？`,
+          '警告',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        )
+
+        await delBasProductCode(row.id)
+        this.$message.success('删除成功')
+        await this.getList()
+
+      } catch (error) {
+        if (error !== 'cancel') {
+          this.$message.error('删除失败：' + error.message)
+        }
+      }
+    },
+
+    // 批量删除
+    async handleBatchDelete() {
+      if (!this.hasSelection) {
+        this.$message.warning('请选择要删除的数据')
+        return
+      }
+
+      try {
+        await this.$confirm(
+          `是否确认删除选中的${this.selectedRows.length}条数据？`,
+          '警告',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        )
+
+        const ids = this.selectedRows.map(row => row.id)
+        await delBasProductCode(ids.join(','))
+
+        this.$message.success('批量删除成功')
+        await this.getList()
+
+      } catch (error) {
+        if (error !== 'cancel') {
+          this.$message.error('批量删除失败：' + error.message)
+        }
+      }
+    },
+
+    // 打印按钮操作
+    async handlePrint(row) {
+      try {
+        this.previewData = { ...row }
+        this.showPreview = true
+
+        await this.$nextTick()
+        setTimeout(() => {
+          this.$refs.easyPrint2.print()
+        }, 100)
+
+      } catch (error) {
+        this.$message.error('打印失败：' + error.message)
+      }
+    },
+
+    // 自动打印功能
+    async autoPrint() {
+      try {
+        this.previewData = { ...this.form }
+        this.showPreview = true
+
+        await this.$nextTick()
+        setTimeout(() => {
+          this.$refs.easyPrint2.print()
+        }, 500)
+
+      } catch (error) {
+        this.$message.error('自动打印失败：' + error.message)
+      }
+    },
+
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.selectedRows = selection
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      this.open = true
-      this.title = "添加条码打印"
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-      const id = row.id || this.ids
-      getBasProductCode(id).then(response => {
-        this.form = response.data
-        this.open = true
-        this.title = "修改条码打印"
-      })
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateBasProductCode(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
-              this.open = false
-              this.getList()
-            })
-          } else {
-            addBasProductCode(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功")
-              this.open = false
-              this.getList()
-            })
-          }
+
+    // 二维码编码方法
+    procode(text) {
+      const key = "0"
+
+      const mystr = text.split("@")
+      const text1 = `@${mystr[1]}@${mystr[2]}@${mystr[3]}@`
+
+      let str = key + text1
+      let str1 = ""
+
+      for (let i = 0; i < str.length; i++) {
+        // 获取字符的Unicode编码并转换为16进制
+        let str2 = str.charCodeAt(i).toString(16).toUpperCase()
+        // 补齐到4位
+        while (str2.length < 4) {
+          str2 = "0" + str2
         }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除条码打印编号为"' + ids + '"的数据项？').then(function() {
-        return delBasProductCode(ids)
-      }).then(() => {
-        this.getList()
-        this.$modal.msgSuccess("删除成功")
-      }).catch(() => {})
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('bas/BasProductCode/export', {
-        ...this.queryParams
-      }, `BasProductCode_${new Date().getTime()}.xlsx`)
+        str1 += str2
+      }
+
+      // 反转字符串
+      str1 = str1.split('').reverse().join('')
+
+      // 替换操作
+      str1 = str1.replace(/100/g, "Q")
+      str1 = str1.replace(/200/g, "R")
+      str1 = str1.replace(/300/g, "S")
+      str1 = str1.replace(/400/g, "T")
+      str1 = str1.replace(/500/g, "U")
+      str1 = str1.replace(/600/g, "V")
+      str1 = str1.replace(/700/g, "W")
+      str1 = str1.replace(/800/g, "X")
+      str1 = str1.replace(/900/g, "Y")
+      str1 = str1.replace(/00/g, "Z")
+
+      // 最终结果反转
+      const result = `${mystr[0]}$${str1}$${mystr[4]}`
+      return result.split('').reverse().join('')
     }
   }
 }
 </script>
+
+<style scoped>
+/* 基础布局 */
+.app-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+}
+
+/* 容器样式 */
+.form-container,
+.list-container,
+.preview-container {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.form-container {
+  margin-bottom: 20px;
+}
+
+.list-container {
+  margin-bottom: 20px;
+  height: 400px;
+  overflow-y: auto;
+}
+
+.list-container .el-table {
+  height: 100%;
+}
+
+.preview-container {
+  position: sticky;
+  top: 20px;
+  height: 450px;
+  overflow: hidden;
+}
+
+.preview-display {
+  height: 100%;
+  overflow: hidden;
+}
+
+/* 区域标题 */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 20px 0;
+  margin-bottom: 20px;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+/* 表单样式 */
+.form-container .el-form {
+  padding: 0 20px 20px;
+}
+
+.form-actions {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.form-actions .el-button {
+  margin: 0 10px;
+}
+
+/* 表格样式 */
+.list-container .el-table {
+  margin: 0 20px;
+}
+
+.list-container .pagination {
+  margin: 20px;
+  text-align: center;
+}
+
+.danger-text {
+  color: #f56c6c !important;
+}
+
+.danger-text:hover {
+  color: #f78989 !important;
+}
+
+/* 预览区域样式 */
+.preview-container {
+  padding: 0;
+}
+
+.empty-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  margin: 0 20px 20px;
+  border: 2px dashed #dcdfe6;
+  border-radius: 8px;
+  color: #909399;
+  font-size: 14px;
+}
+
+.empty-preview i {
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: #c0c4cc;
+}
+
+.empty-preview p {
+  margin: 0;
+}
+
+.preview-display {
+  padding: 0 20px 20px;
+}
+
+.label-content {
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.preview-box {
+  padding: 20px;
+  font-family: 'Arial', sans-serif;
+  position: relative;
+  background-color: #fff;
+  height: 350px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.preview-content {
+  margin-right: 200px;
+}
+
+.preview-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+  min-height: 40px;
+}
+
+.preview-row:last-child {
+  margin-bottom: 0;
+}
+
+.preview-col {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.preview-label {
+  font-weight: 600;
+  margin-right: 15px;
+  min-width: 80px;
+  font-size: 24px;
+  color: #303133;
+}
+
+.preview-value {
+  flex: 1;
+  font-size: 24px;
+  color: #606266;
+  word-break: break-all;
+}
+
+.qrcode-container {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .app-container {
+    padding: 10px;
+  }
+
+  .preview-container {
+    position: static;
+    max-height: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .preview-content {
+    margin-right: 0;
+    margin-bottom: 140px;
+  }
+
+  .qrcode-container {
+    position: static;
+    margin-top: 20px;
+    text-align: center;
+  }
+}
+
+/* 动画效果 */
+.preview-display {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 加载状态 */
+.el-button.is-loading {
+  pointer-events: none;
+}
+
+/* 打印样式 */
+@media print {
+  @page {
+    margin: 0;
+    size: auto;
+  }
+  
+  body {
+    margin: 0;
+  }
+  
+  .preview-box {
+    border: none;
+    box-shadow: none;
+    position: relative;
+  }
+  
+  .qrcode-container {
+    border: none;
+    position: absolute !important;
+    top: 20px !important;
+    right: 20px !important;
+    padding: 0;
+    background-color: transparent;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/bas/basProduct/index.vue b/ruoyi-ui/src/views/bas/basProduct/index.vue
index 8e7f123..d6aef35 100644
--- a/ruoyi-ui/src/views/bas/basProduct/index.vue
+++ b/ruoyi-ui/src/views/bas/basProduct/index.vue
@@ -138,14 +138,14 @@
 <!--      <el-table-column label="主键" align="center" prop="productGuid" />-->
       <el-table-column label="物料编码" align="center" prop="productId" />
       <el-table-column label="物料名称" align="center" prop="productName" />
-      <el-table-column label="序列号" align="center" prop="spare4" />
-      <el-table-column label="相位" align="center" prop="spare7" />
       <el-table-column label="型号" align="center" prop="spare1" />
-      <el-table-column label="净重" align="center" prop="spare2" />
-      <el-table-column label="毛重" align="center" prop="spare8" />
       <el-table-column label="颜色" align="center" prop="spare3" />
+      <el-table-column label="序列号" align="center" prop="spare4" />
       <el-table-column label="电压" align="center" prop="spare5" />
       <el-table-column label="功率" align="center" prop="spare6" />
+      <el-table-column label="相位" align="center" prop="spare7" />
+      <el-table-column label="净重" align="center" prop="spare2" />
+      <el-table-column label="毛重" align="center" prop="spare8" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -184,30 +184,30 @@
         <el-form-item label="物料名称" prop="productName">
           <el-input v-model="form.productName" placeholder="请输入物料名称" />
         </el-form-item>
-        <el-form-item label="序列号" prop="spare4">
-          <el-input v-model="form.spare4" placeholder="请输入序列号" />
-        </el-form-item>
-        <el-form-item label="相位" prop="spare7">
-          <el-input v-model="form.spare7" placeholder="请输入相位" />
-        </el-form-item>
         <el-form-item label="型号" prop="spare1">
           <el-input v-model="form.spare1" placeholder="请输入型号" />
         </el-form-item>
-        <el-form-item label="净重" prop="spare2">
-          <el-input v-model="form.spare2" placeholder="请输入净重" />
-        </el-form-item>
-        <el-form-item label="毛重" prop="spare8">
-          <el-input v-model="form.spare8" placeholder="请输入毛重" />
-        </el-form-item>
         <el-form-item label="颜色" prop="spare3">
           <el-input v-model="form.spare3" placeholder="请输入颜色" />
         </el-form-item>
+        <el-form-item label="序列号" prop="spare4">
+          <el-input v-model="form.spare4" placeholder="请输入序列号" />
+        </el-form-item>
         <el-form-item label="电压" prop="spare5">
           <el-input v-model="form.spare5" placeholder="请输入电压" />
         </el-form-item>
         <el-form-item label="功率" prop="spare6">
           <el-input v-model="form.spare6" placeholder="请输入功率" />
         </el-form-item>
+        <el-form-item label="相位" prop="spare7">
+          <el-input v-model="form.spare7" placeholder="请输入相位" />
+        </el-form-item>
+        <el-form-item label="净重" prop="spare2">
+          <el-input v-model="form.spare2" placeholder="请输入净重" />
+        </el-form-item>
+        <el-form-item label="毛重" prop="spare8">
+          <el-input v-model="form.spare8" placeholder="请输入毛重" />
+        </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
diff --git a/ruoyi-ui/src/views/bas/traycode/index.vue b/ruoyi-ui/src/views/bas/traycode/index.vue
index 7ecf647..1e5973c 100644
--- a/ruoyi-ui/src/views/bas/traycode/index.vue
+++ b/ruoyi-ui/src/views/bas/traycode/index.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-      <el-form-item label="格式ID" prop="formatId">
-<!--        <el-input
-          v-model="queryParams.formatId"
-          placeholder="请输入格式ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />-->
-        <el-select v-model="queryParams.formatId" placeholder="请选择格式ID">
-          <el-option
-            v-for="item in traycodeFormatList"
-            :key="item.id"
-            :label="item.remarks"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="托盘编码" prop="trayCode">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" >
+<!--      <el-form-item label="格式ID" prop="formatId">-->
+<!--&lt;!&ndash;        <el-input-->
+<!--          v-model="queryParams.formatId"-->
+<!--          placeholder="请输入格式ID"-->
+<!--          clearable-->
+<!--          @keyup.enter.native="handleQuery"-->
+<!--        />&ndash;&gt;-->
+<!--        <el-select v-model="queryParams.formatId" placeholder="请选择格式ID">-->
+<!--          <el-option-->
+<!--            v-for="item in traycodeFormatList"-->
+<!--            :key="item.id"-->
+<!--            :label="item.remarks"-->
+<!--            :value="item.id"-->
+<!--          />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+      <el-form-item label="条码" prop="trayCode">
         <el-input
           v-model="queryParams.trayCode"
-          placeholder="请输入托盘编码"
+          placeholder="请输入条码"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -92,11 +92,11 @@
     <el-table ref="table" v-loading="loading" :data="traycodeList" @selection-change="handleSelectionChange" max-height="700">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="序号" align="left" prop="id" width="120" />
-      <el-table-column label="格式ID" align="left" prop="formatName"  />
-      <el-table-column label="托盘编码" align="left" prop="trayCode"  />
-      <!-- <el-table-column label="Spare Field 1" align="center" prop="spare1" />
+<!--      <el-table-column label="格式ID" align="left" prop="formatName"  />-->
+      <el-table-column label="条码" align="left" prop="trayCode"  />
+      <el-table-column label="Spare Field 1" align="center" prop="spare1" />
       <el-table-column label="Spare Field 2" align="center" prop="spare2" />
-      <el-table-column label="Spare Field 3" align="center" prop="spare3" /> -->
+      <el-table-column label="Spare Field 3" align="center" prop="spare3" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
         <template slot-scope="scope">
           <el-button
@@ -136,7 +136,7 @@
     <!-- 添加或修改条码信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="格式ID" prop="formatId">
+<!--        <el-form-item label="格式ID" prop="formatId">
           <el-select v-model="form.formatId" placeholder="请选择格式ID">
             <el-option
               v-for="item in traycodeFormatList"
@@ -145,12 +145,12 @@
               :value="item.id"
             />
           </el-select>
-        </el-form-item>
+        </el-form-item>-->
         <el-form-item label="托盘编码" prop="trayCode">
 
           <el-input v-model="form.trayCode" placeholder="请输入托盘编码" />
         </el-form-item>
-        <!-- <el-form-item label="Spare Field 1" prop="spare1">
+         <el-form-item label="Spare Field 1" prop="spare1">
           <el-input v-model="form.spare1" placeholder="Enter spare field 1" />
         </el-form-item>
         <el-form-item label="Spare Field 2" prop="spare2">
@@ -158,7 +158,7 @@
         </el-form-item>
         <el-form-item label="Spare Field 3" prop="spare3">
           <el-input v-model="form.spare3" placeholder="Enter spare field 3" />
-        </el-form-item> -->
+        </el-form-item> 
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确定</el-button>