diff --git a/package.json b/package.json
index 4c09651..3e692bc 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "babel-polyfill": "6.26.0",
     "dayjs": "^1.10.7",
     "decimal.js": "^10.3.1",
-    "element-ui": "2.8.2",
+    "element-ui": "2.15.14",
     "file-saver": "^2.0.5",
     "gulp": "4.0.2",
     "gulp-concat": "2.6.1",
diff --git a/src/api/po/po.js b/src/api/po/po.js
index 0b0502b..6fca71e 100644
--- a/src/api/po/po.js
+++ b/src/api/po/po.js
@@ -3,3 +3,6 @@ import { createAPI } from "@/utils/httpRequest.js";
 
 // 获取采购单信息
 export const getPoList = data => createAPI(`po/getPoList`,'post',data)
+
+// 接收采购单信息
+export const receivePo = data => createAPI(`po/receivePo`,'post',data)
diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss
index 0bd5ad3..f07f287 100644
--- a/src/assets/scss/global.scss
+++ b/src/assets/scss/global.scss
@@ -528,3 +528,15 @@ a:hover{
   margin-bottom: 10px;
 }
 
+@media screen and (max-width: 600px) {
+  .el-message {
+    top: 40% !important;
+    left: 60% !important;
+    transform: translate(-50%, -50%) !important;
+    max-width: 200px !important;  /* 弹窗最大宽度 */
+    width: 50vw !important;       /* 或者用百分比宽度，适应屏幕 */
+    padding: 10px 20px;           /* 适当调整内边距 */
+    box-sizing: border-box;
+  }
+}
+
diff --git a/src/router/index.js b/src/router/index.js
index 477050f..233e376 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -26,10 +26,19 @@ const globalRoutes = [
   {path: "/porecv",name: "porecv", component: resolve => require(["@/views/modules/recv/po-recv.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
   {path: "/recv",name: "recv", component: resolve => require(["@/views/modules/recv/recv.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
   {path: "/qualifiedStorage",name: "qualifiedStorage", component: resolve => require(["@/views/modules/recv/qualifiedStorage.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
-  {path: "/inspectionResults",name: "inspectionResults", component: resolve => require(["@/views/modules/recv/inspectionResults.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
+  {path: "/inspectionResults",name: "inspectionResults",
+    component: resolve => require(["@/views/modules/recv/inspectionResults.vue"], resolve),
+    meta: { transition: 'instant' ,preload: true,keepAlive: true}},
 
   // handlingunit
-  {path: "/handlingunit",name: "handlingunit", component: resolve => require(["@/views/modules/handlingunit/handlingunit.vue"], resolve),meta: { transition: 'instant' ,preload: true,keepAlive: true}},
+  // Handling Unit 相关路由,按照上面的格式添加
+  {path: "/handlingunit",name: "handlingunit", component: resolve => require(["@/views/modules/handlingunit/handlingunit.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
+  // Handling Unit 模块下页面
+  {path: "/handlingunit/merge",name: "handlingunit", component: resolve => require(["@/views/modules/handlingunit/mergeHu.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
+  {path: "/handlingunit/pack",name: "handlingunitdetail", component: resolve => require(["@/views/modules/handlingunit/packHu.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
+  {path: "/handlingunit/print",name: "handlingunitdetail2", component: resolve => require(["@/views/modules/handlingunit/printHu.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
+  {path: "/handlingunit/split",name: "handlingunitdetail3", component: resolve => require(["@/views/modules/handlingunit/splitHu.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
+  {path: "/handlingunit/view",name: "handlingunitdetail4", component: resolve => require(["@/views/modules/handlingunit/viewHu.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
   // 生产发料
   {path: "/productionissue",name: "productionissue", component: resolve => require(["@/views/modules/productionissue/productionissue.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
   {path: "/directissue",name: "directissue", component: resolve => require(["@/views/modules/productionissue/directissue.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
diff --git a/src/views/modules/handlingunit/handlingunit.vue b/src/views/modules/handlingunit/handlingunit.vue
index f41822c..7f6a1a6 100644
--- a/src/views/modules/handlingunit/handlingunit.vue
+++ b/src/views/modules/handlingunit/handlingunit.vue
@@ -40,11 +40,36 @@ export default {
       currentTime: new Date().toTimeString().substr(0, 5),
       activeIndex: null,
       buttons: [
-        { icon: '📦', label: '装Handling Unit', color: '#FF9800', action: 'stockIn',to:'recv' },
-        { icon: '📄', label: '合并Handling Unit', color: '#2196F3', action: 'stockOut',to:'recv' },
-        { icon: '✅', label: '拆Handling Unit', color: '#4CAF50', action: 'search' ,to:'recv' },
-        { icon: '📦', label: '补打印Handling Unit标签', color: '#FF9800', action: 'stockIn',to:'recv' },
-        { icon: '📄', label: '查看Handling Unit', color: '#2196F3', action: 'stockOut',to:'recv' },
+        {
+          icon: '📦',
+          label: '装Handling Unit',
+          color: '#FF9800',
+          to: '/handlingunit/pack'
+        },
+        {
+          icon: '📄',
+          label: '合并Handling Unit',
+          color: '#2196F3',
+          to: '/handlingunit/merge'
+        },
+        {
+          icon: '✅',
+          label: '拆Handling Unit',
+          color: '#4CAF50',
+          to: '/handlingunit/split'
+        },
+        {
+          icon: '🏷️',
+          label: '补打印Handling Unit标签',
+          color: '#FF9800',
+          to: '/handlingunit/print'
+        },
+        {
+          icon: '🔍',
+          label: '查看Handling Unit',
+          color: '#2196F3',
+          to: '/handlingunit/view'
+        }
       ]
     }
   },
diff --git a/src/views/modules/handlingunit/mergeHu.vue b/src/views/modules/handlingunit/mergeHu.vue
new file mode 100644
index 0000000..892175c
--- /dev/null
+++ b/src/views/modules/handlingunit/mergeHu.vue
@@ -0,0 +1,136 @@
+
+<template>
+  <div class="pda-container">
+    <div class="status-bar">
+      <div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div>
+      <div>合并Handling Unit</div>
+      <div class="network" @click="$router.push({path: '/'})">🏠首页</div>
+    </div>
+
+    <!-- 目标HU扫描 -->
+    <div class="scan-section">
+      <div class="section-title">目标HU</div>
+      <div class="scan-box">
+        <input v-model="targetHu" placeholder="扫描目标HU编码"
+               @keyup.enter="searchTargetHu" ref="targetHuInput"/>
+      </div>
+      <div v-if="targetHuInfo" class="info-box">
+        <div class="info-item">
+          <label>HU编码：</label>
+          <span>{{ targetHuInfo.huCode }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 来源HU扫描 -->
+    <div class="scan-section">
+      <div class="section-title">来源HU</div>
+      <div class="scan-box">
+        <input v-model="sourceHu" placeholder="扫描来源HU编码"
+               @keyup.enter="addSourceHu" :disabled="!targetHuInfo"/>
+      </div>
+    </div>
+
+    <!-- 来源HU列表 -->
+    <div class="hu-list">
+      <el-table :data="sourceHus" height="240" border>
+        <el-table-column prop="huCode" label="HU编码"></el-table-column>
+        <el-table-column prop="itemCount" label="物料数" width="80"></el-table-column>
+        <el-table-column label="操作" width="60">
+          <template slot-scope="scope">
+            <el-button type="danger" size="mini" @click="removeSourceHu(scope.$index)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="button-group">
+      <el-button type="primary" @click="mergePlus"
+                 :disabled="!targetHuInfo || sourceHus.length === 0">
+        确认合并
+      </el-button>
+      <el-button @click="resetForm">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      targetHu: '',
+      sourceHu: '',
+      targetHuInfo: null,
+      sourceHus: []
+    }
+  },
+  methods: {
+    searchTargetHu() {
+      if (!this.targetHu) return
+      // TODO: 调用API查询目标HU信息
+      this.targetHuInfo = {
+        huCode: this.targetHu,
+        itemCount: 0
+      }
+      this.sourceHu = ''
+    },
+    addSourceHu() {
+      if (!this.sourceHu || !this.targetHuInfo) return
+      if (this.sourceHu === this.targetHuInfo.huCode) {
+        this.$message.warning('不能合并相同的HU')
+        return
+      }
+      // TODO: 调用API查询来源HU信息
+      this.sourceHus.push({
+        huCode: this.sourceHu,
+        itemCount: 5
+      })
+      this.sourceHu = ''
+    },
+    removeSourceHu(index) {
+      this.sourceHus.splice(index, 1)
+    },
+    mergePlus() {
+      if (!this.targetHuInfo || this.sourceHus.length === 0) return
+      // TODO: 调用API提交合并
+      this.$message.success('合并成功')
+      this.resetForm()
+    },
+    resetForm() {
+      this.targetHu = ''
+      this.sourceHu = ''
+      this.targetHuInfo = null
+      this.sourceHus = []
+      this.$nextTick(() => {
+        this.$refs.targetHuInput.focus()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.targetHuInput.focus()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.scan-section {
+  margin: 10px;
+  padding: 10px;
+  background: #fff;
+  border-radius: 4px;
+}
+.section-title {
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.hu-list {
+  margin: 10px;
+  margin-bottom: 60px;
+}
+</style>
diff --git a/src/views/modules/handlingunit/packHu.vue b/src/views/modules/handlingunit/packHu.vue
new file mode 100644
index 0000000..39f65d1
--- /dev/null
+++ b/src/views/modules/handlingunit/packHu.vue
@@ -0,0 +1,276 @@
+<template>
+  <div class="pda-container">
+    <div class="status-bar">
+      <div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div>
+      <div>装Handling Unit</div>
+      <div class="network" @click="$router.push({path: '/'})">🏠首页</div>
+    </div>
+
+    <!-- HU扫描区域 -->
+    <div class="scan-section">
+      <div class="section-title">扫描HU</div>
+      <div class="scan-box">
+        <input v-model="huCode"
+               placeholder="扫描或输入HU编码"
+               @keyup.enter="searchHu"
+               ref="huInput"/>
+      </div>
+      <!-- HU信息展示 -->
+      <div v-if="huInfo" class="info-box">
+        <div class="info-item">
+          <label>HU编码：</label>
+          <span>{{ huInfo.huCode }}</span>
+        </div>
+        <div class="info-item">
+          <label>状态：</label>
+          <span>{{ huInfo.status }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 物料扫描区域 -->
+    <div class="scan-section" v-if="huInfo">
+      <div class="section-title">扫描物料</div>
+      <div class="scan-box">
+        <input v-model="materialCode"
+               placeholder="扫描物料条码"
+               @keyup.enter="addMaterial"/>
+      </div>
+    </div>
+
+    <!-- 物料列表 -->
+    <div class="material-list" v-if="items.length > 0">
+      <el-table :data="items"
+                height="calc(100vh - 400px)"
+                border>
+        <el-table-column prop="materialCode"
+                         label="物料编码"
+                         width="120">
+        </el-table-column>
+        <el-table-column prop="materialName"
+                         label="物料名称">
+        </el-table-column>
+        <el-table-column prop="batchNo"
+                         label="批次"
+                         width="100">
+        </el-table-column>
+        <el-table-column label="数量"
+                         width="120">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.quantity"
+                            :min="1"
+                            :max="scope.row.availableQty"
+                            size="mini">
+            </el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作"
+                         width="60"
+                         fixed="right">
+          <template slot-scope="scope">
+            <el-button type="danger"
+                       style="font-size: 18px" size="small"
+                       @click="removeItem(scope.$index)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="button-group">
+      <el-button type="text" style="font-size: 18px" size="small"
+                 @click="submitHu"
+                 :disabled="!canSubmit">
+        确认装箱
+      </el-button>
+      <el-button @click="resetForm" type="text" style="font-size: 18px" size="small">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      huCode: '',
+      materialCode: '',
+      huInfo: null,
+      items: []
+    }
+  },
+  computed: {
+    canSubmit() {
+      return this.huInfo && this.items.length > 0
+    }
+  },
+  methods: {
+    searchHu() {
+      if (!this.huCode) return
+      // TODO: 调用API查询HU信息
+      this.huInfo = {
+        huCode: this.huCode,
+        status: '新建'
+      }
+      this.materialCode = ''
+    },
+    addMaterial() {
+      if (!this.materialCode || !this.huInfo) return
+      // TODO: 调用API查询物料信息
+      this.items.push({
+        materialCode: this.materialCode,
+        materialName: '测试物料',
+        batchNo: 'B001',
+        quantity: 1,
+        availableQty: 100
+      })
+      this.materialCode = ''
+    },
+    removeItem(index) {
+      this.items.splice(index, 1)
+    },
+    submitHu() {
+      if (!this.canSubmit) return
+
+      const packData = {
+        huCode: this.huInfo.huCode,
+        items: this.items.map(item => ({
+          materialCode: item.materialCode,
+          batchNo: item.batchNo,
+          quantity: item.quantity
+        }))
+      }
+
+      // TODO: 调用API提交装箱
+      console.log('装箱数据:', packData)
+      this.$message.success('装箱成功')
+      this.resetForm()
+    },
+    resetForm() {
+      this.huCode = ''
+      this.materialCode = ''
+      this.huInfo = null
+      this.items = []
+      this.$nextTick(() => {
+        this.$refs.huInput.focus()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.huInput.focus()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.pda-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f7fa;
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background: #2196F3;
+  color: white;
+  font-size: 16px;
+}
+
+.goBack {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.network {
+  cursor: pointer;
+}
+
+.scan-section {
+  margin: 10px;
+  padding: 10px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.scan-box {
+  margin-bottom: 10px;
+}
+
+.scan-box input {
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  outline: none;
+}
+
+.scan-box input:focus {
+  border-color: #409EFF;
+}
+
+.info-box {
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 10px;
+  margin-top: 10px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  margin: 5px 0;
+  font-size: 14px;
+}
+
+.material-list {
+  flex: 1;
+  margin: 10px;
+  margin-bottom: 70px;
+}
+
+.button-group {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px 15px;
+  background: white;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-around;
+  z-index: 100;
+}
+
+/* 适配小屏幕 */
+@media screen and (max-width: 375px) {
+  .scan-section {
+    margin: 5px;
+    padding: 8px;
+  }
+
+  .material-list {
+    margin: 5px;
+  }
+
+  .button-group {
+    padding: 8px;
+  }
+}
+</style>
diff --git a/src/views/modules/handlingunit/printHu.vue b/src/views/modules/handlingunit/printHu.vue
new file mode 100644
index 0000000..8773030
--- /dev/null
+++ b/src/views/modules/handlingunit/printHu.vue
@@ -0,0 +1,128 @@
+
+<template>
+  <div class="pda-container">
+    <div class="status-bar">
+      <div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div>
+      <div>补打印HU标签</div>
+      <div class="network" @click="$router.push({path: '/'})">🏠首页</div>
+    </div>
+
+    <!-- 扫描区域 -->
+    <div class="scan-box">
+      <input v-model="huCode" placeholder="扫描HU编码"
+             @keyup.enter="searchHu" ref="huInput"/>
+    </div>
+
+    <!-- HU信息 -->
+    <div v-if="huInfo" class="info-box">
+      <div class="info-item">
+        <label>HU编码：</label>
+        <span>{{ huInfo.huCode }}</span>
+      </div>
+      <div class="info-item">
+        <label>创建时间：</label>
+        <span>{{ huInfo.createTime }}</span>
+      </div>
+      <div class="info-item">
+        <label>物料数：</label>
+        <span>{{ huInfo.itemCount }}</span>
+      </div>
+    </div>
+
+    <!-- 打印机选择 -->
+    <div class="printer-section" v-if="huInfo">
+      <div class="section-title">选择打印机</div>
+      <el-select v-model="selectedPrinter" placeholder="请选择打印机" style="width: 100%">
+        <el-option
+          v-for="printer in printers"
+          :key="printer.value"
+          :label="printer.label"
+          :value="printer.value">
+        </el-option>
+      </el-select>
+    </div>
+
+    <!-- 打印份数 -->
+    <div class="copies-section" v-if="huInfo">
+      <div class="section-title">打印份数</div>
+      <el-input-number v-model="copies" :min="1" :max="10"></el-input-number>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="button-group">
+      <el-button type="primary" @click="print"
+                 :disabled="!canPrint">
+        打印标签
+      </el-button>
+      <el-button @click="resetForm">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      huCode: '',
+      huInfo: null,
+      selectedPrinter: '',
+      copies: 1,
+      printers: [
+        { label: '打印机1', value: 'printer1' },
+        { label: '打印机2', value: 'printer2' }
+      ]
+    }
+  },
+  computed: {
+    canPrint() {
+      return this.huInfo && this.selectedPrinter && this.copies > 0
+    }
+  },
+  methods: {
+    searchHu() {
+      if (!this.huCode) return
+      // TODO: 调用API查询HU信息
+      this.huInfo = {
+        huCode: this.huCode,
+        createTime: '2024-03-14 10:00:00',
+        itemCount: 5
+      }
+    },
+    print() {
+      if (!this.canPrint) return
+      // TODO: 调用API执行打印
+      this.$message.success(`正在打印${this.copies}份标签`)
+      this.resetForm()
+    },
+    resetForm() {
+      this.huCode = ''
+      this.huInfo = null
+      this.selectedPrinter = ''
+      this.copies = 1
+      this.$nextTick(() => {
+        this.$refs.huInput.focus()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.huInput.focus()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.printer-section,
+.copies-section {
+  margin: 10px;
+  padding: 10px;
+  background: #fff;
+  border-radius: 4px;
+}
+.section-title {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 10px;
+}
+</style>
diff --git a/src/views/modules/handlingunit/splitHu.vue b/src/views/modules/handlingunit/splitHu.vue
new file mode 100644
index 0000000..d045d32
--- /dev/null
+++ b/src/views/modules/handlingunit/splitHu.vue
@@ -0,0 +1,201 @@
+
+<template>
+  <div class="pda-container">
+    <div class="status-bar">
+      <div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div>
+      <div>拆分Handling Unit</div>
+      <div class="network" @click="$router.push({path: '/'})">🏠首页</div>
+    </div>
+
+    <!-- 源HU扫描 -->
+    <div class="scan-box">
+      <input v-model="sourceHuCode" placeholder="扫描需要拆分的HU"
+             @keyup.enter="searchSourceHu" ref="sourceHuInput"/>
+    </div>
+
+    <!-- HU信息展示 -->
+    <div v-if="sourceHuInfo" class="info-box">
+      <div class="info-row">
+        <label>HU编码：</label>
+        <span>{{ sourceHuInfo.huCode }}</span>
+      </div>
+      <div class="info-row">
+        <label>物料数：</label>
+        <span>{{ sourceHuInfo.itemCount }}</span>
+      </div>
+    </div>
+
+    <!-- 物料列表 -->
+    <div class="material-list" v-if="materials.length > 0">
+      <el-table :data="materials" height="240" border>
+        <el-table-column prop="materialCode" label="物料编码"></el-table-column>
+        <el-table-column prop="materialName" label="物料名称"></el-table-column>
+        <el-table-column prop="totalQty" label="总数量" width="80"></el-table-column>
+        <el-table-column label="拆分数量" width="120">
+          <template slot-scope="scope">
+            <el-input-number v-model="scope.row.splitQty"
+                            :min="1"
+                            :max="scope.row.totalQty"
+                            size="mini">
+            </el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="选择" width="60">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.selected"></el-checkbox>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 新HU编码 -->
+    <div class="new-hu-section" v-if="materials.length > 0">
+      <div class="section-title">新HU信息</div>
+      <div class="scan-box">
+        <input v-model="newHuCode" placeholder="扫描或输入新HU编码"/>
+      </div>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="button-group">
+      <el-button type="primary" @click="submitSplit"
+                 :disabled="!canSubmit">
+        确认拆分
+      </el-button>
+      <el-button @click="resetForm">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sourceHuCode: '',
+      newHuCode: '',
+      sourceHuInfo: null,
+      materials: []
+    }
+  },
+  computed: {
+    canSubmit() {
+      return this.sourceHuInfo &&
+             this.newHuCode &&
+             this.materials.some(m => m.selected && m.splitQty > 0)
+    }
+  },
+  methods: {
+    searchSourceHu() {
+      if (!this.sourceHuCode) return
+      // TODO: 调用API查询HU信息
+      this.sourceHuInfo = {
+        huCode: this.sourceHuCode,
+        itemCount: 3
+      }
+      // TODO: 调用API获取物料列表
+      this.materials = [
+        {
+          materialCode: 'M001',
+          materialName: '物料1',
+          totalQty: 100,
+          splitQty: 0,
+          selected: false
+        },
+        {
+          materialCode: 'M002',
+          materialName: '物料2',
+          totalQty: 50,
+          splitQty: 0,
+          selected: false
+        }
+      ]
+    },
+    submitSplit() {
+      // 验证
+      if (!this.sourceHuInfo || !this.newHuCode) {
+        this.$message.warning('请完善HU信息')
+        return
+      }
+
+      const splitItems = this.materials
+        .filter(m => m.selected && m.splitQty > 0)
+        .map(m => ({
+          materialCode: m.materialCode,
+          quantity: m.splitQty
+        }))
+
+      if (splitItems.length === 0) {
+        this.$message.warning('请选择需要拆分的物料')
+        return
+      }
+
+      // TODO: 调用API执行拆分
+      this.$message.success('拆分成功')
+      this.resetForm()
+    },
+    resetForm() {
+      this.sourceHuCode = ''
+      this.newHuCode = ''
+      this.sourceHuInfo = null
+      this.materials = []
+      this.$nextTick(() => {
+        this.$refs.sourceHuInput.focus()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.sourceHuInput.focus()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.scan-box {
+  padding: 10px;
+}
+.scan-box input {
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+.info-box {
+  margin: 10px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+.info-row {
+  margin: 5px 0;
+  display: flex;
+  justify-content: space-between;
+}
+.material-list {
+  margin: 10px;
+}
+.new-hu-section {
+  margin: 10px;
+  padding: 10px;
+  background: #fff;
+  border-radius: 4px;
+}
+.section-title {
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 10px;
+}
+.button-group {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px;
+  background: #fff;
+  display: flex;
+  justify-content: space-around;
+}
+</style>
+
diff --git a/src/views/modules/handlingunit/viewHu.vue b/src/views/modules/handlingunit/viewHu.vue
new file mode 100644
index 0000000..91b8795
--- /dev/null
+++ b/src/views/modules/handlingunit/viewHu.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="pda-container">
+    <div class="status-bar">
+      <div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>返回</div>
+      <div>查看Handling Unit</div>
+      <div class="network" @click="$router.push({path: '/'})">🏠首页</div>
+    </div>
+
+    <!-- 扫描区域 -->
+    <div class="scan-box">
+      <input v-model="huCode"
+             placeholder="扫描HU编码"
+             @keyup.enter="searchHu"
+             ref="huInput"/>
+    </div>
+
+    <!-- HU基本信息 -->
+    <div v-if="huInfo" class="info-box">
+      <div class="info-row">
+        <label>HU编码:</label>
+        <span>{{ huInfo.huCode }}</span>
+      </div>
+      <div class="info-row">
+        <label>创建时间:</label>
+        <span>{{ huInfo.createTime }}</span>
+      </div>
+      <div class="info-row">
+        <label>状态:</label>
+        <span>{{ huInfo.status }}</span>
+      </div>
+    </div>
+
+    <!-- 物料列表 -->
+    <div v-if="materials.length > 0" class="material-list">
+      <el-table :data="materials"
+                height="calc(100vh - 280px)"
+                border>
+        <el-table-column prop="materialCode"
+                         label="物料编码"
+                         width="120">
+        </el-table-column>
+        <el-table-column prop="materialName"
+                         label="物料名称">
+        </el-table-column>
+        <el-table-column prop="quantity"
+                         label="数量"
+                         width="80">
+        </el-table-column>
+        <el-table-column prop="location"
+                         label="库位"
+                         width="100">
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 操作按钮 -->
+    <div class="button-group">
+      <el-button @click="resetForm">重置</el-button>
+      <el-button type="primary"
+                 @click="printHu"
+                 :disabled="!huInfo">
+        打印标签
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      huCode: '',
+      huInfo: null,
+      materials: []
+    }
+  },
+  methods: {
+    searchHu() {
+      if (!this.huCode) return
+
+      // TODO: 调用API查询HU信息
+      this.huInfo = {
+        huCode: this.huCode,
+        createTime: '2024-03-14 10:00:00',
+        status: '已完成'
+      }
+
+      // TODO: 调用API获取物料列表
+      this.materials = [
+        {
+          materialCode: 'M001',
+          materialName: '物料1',
+          quantity: 100,
+          location: 'A-01-01'
+        },
+        {
+          materialCode: 'M002',
+          materialName: '物料2',
+          quantity: 50,
+          location: 'A-01-02'
+        }
+      ]
+    },
+    printHu() {
+      if (!this.huInfo) return
+      this.$message.success('开始打印标签')
+    },
+    resetForm() {
+      this.huCode = ''
+      this.huInfo = null
+      this.materials = []
+      this.$nextTick(() => {
+        this.$refs.huInput.focus()
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$refs.huInput.focus()
+    })
+  }
+}
+</script>
+
+<style scoped>
+.scan-box {
+  padding: 10px;
+}
+.scan-box input {
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+.info-box {
+  margin: 10px;
+  padding: 10px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+.info-row {
+  margin: 5px 0;
+  display: flex;
+  justify-content: space-between;
+}
+.material-list {
+  margin: 10px;
+}
+.button-group {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 10px;
+  background: #fff;
+  display: flex;
+  justify-content: space-around;
+}
+</style>
diff --git a/src/views/modules/recv/recv.vue b/src/views/modules/recv/recv.vue
index 04fff84..42c983d 100644
--- a/src/views/modules/recv/recv.vue
+++ b/src/views/modules/recv/recv.vue
@@ -10,12 +10,8 @@
       <div v-if="processFlag===1">
         <!-- 扫描输入区 -->
         <div class="scan-box" style="margin-left: 2px;margin-right: 2px;">
-          <el-input clearable
-            v-model="scanCode"
-            placeholder="扫描PO条码或输入PO号"
-            @keyup.enter.native="searchPoList"
-            ref="scanCodeRef"
-          />
+          <el-input clearable v-model="scanCode" placeholder="扫描PO条码或输入PO号"
+            @keyup.enter.native="searchPoList" ref="scanCodeRef"/>
         </div>
         <!-- 商品列表区 -->
         <div class="item-list" v-if="poList.length>0" style="margin-left: 2px;margin-right: 2px;">
@@ -23,45 +19,30 @@
             <el-row :gutter="5" @click.native="recvLine(poDetail)"
                     :class="index<poList.length-1?'bottom-line-row':''" :key="index" :value="poDetail" v-for="(poDetail,index) in poList ">
               <el-col :span="8"  style="height: 40px">
-                <el-form-item :label="'商品编码'" >
-                  <span>{{poDetail.code}}</span>
-                </el-form-item>
+                <el-form-item :label="'商品编码'" ><span>{{poDetail.partNo}}</span></el-form-item>
               </el-col>
               <el-col :span="8">
-                <el-form-item :label="'行号/下达号'" >
-                  <span>{{poDetail.wdr}}</span>
-                </el-form-item>
+                <el-form-item :label="'行号/下达号'" ><span>{{poDetail.wdr}}</span></el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item :label="''" >
-                  <el-button type="text" class="recvButton" @click="recvLine(poDetail)"
-                             style="margin-top: 10px;margin-left: 10px" size="small">接收</el-button>
+                  <el-button type="text" class="recvButton" @click="recvLine(poDetail)" style="margin-top: 10px;margin-left: 10px" size="small">接收</el-button>
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item :label="'商品描述'" >
-                  <span>{{poDetail.desc}}</span>
-                </el-form-item>
+                <el-form-item :label="'商品描述'" ><span>{{poDetail.desc}}</span></el-form-item>
               </el-col>
               <el-col :span="6">
-                <el-form-item :label="'订单数量'" >
-                  <span>{{poDetail.qty}}</span>
-                </el-form-item>
+                <el-form-item :label="'订单数量'" ><span>{{poDetail.qty}}</span></el-form-item>
               </el-col>
               <el-col :span="6">
-                <el-form-item :label="'待收数量'" >
-                  <span>{{poDetail.qty}}</span>
-                </el-form-item>
+                <el-form-item :label="'待收数量'" ><span>{{poDetail.qty}}</span></el-form-item>
               </el-col>
               <el-col :span="6">
-                <el-form-item :label="'此次接收数量'" >
-                  <span>{{poDetail.qty}}</span>
-                </el-form-item>
+                <el-form-item :label="'此次接收数量'" ><span>{{poDetail.qty}}</span></el-form-item>
               </el-col>
               <el-col :span="6">
-                <el-form-item style="margin-left: 10px" :label="'单位'" >
-                  <span>{{poDetail.unit}}</span>
-                </el-form-item>
+                <el-form-item style="margin-left: 10px" :label="'单位'" ><span>{{poDetail.unit}}</span></el-form-item>
               </el-col>
             </el-row>
           </el-form>
@@ -71,48 +52,41 @@
         <el-form label-position="top"  style="margin-left: 5px;margin-right: 5px;">
           <el-row :gutter="20" style="">
             <el-col :span="12" style="height: 40px">
-              <el-form-item :label="'PO号码'" >
-                <el-input v-model="recvItem.poNo" disabled></el-input>
+              <el-form-item :label="'PO号码'" ><el-input v-model="recvItem.poNo" disabled></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item :label="'行号/下达号'" >
-                <el-input disabled v-model="recvItem.wdr"></el-input>
+              <el-form-item :label="'行号/下达号'" ><el-input disabled v-model="recvItem.wdr"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'商品编码'" >
-                <el-input disabled v-model="recvItem.code"></el-input>
+              <el-form-item :label="'商品编码'" ><el-input disabled v-model="recvItem.partNo"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'计量单位'" >
-                <el-input disabled v-model="recvItem.unit"></el-input>
+              <el-form-item :label="'计量单位'" ><el-input disabled v-model="recvItem.unit"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="24" style="margin-top: 6px">
-              <el-form-item :label="'商品名称'" >
-                <el-input disabled v-model="recvItem.desc"></el-input>
+              <el-form-item :label="'商品名称'" ><el-input disabled v-model="recvItem.desc"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'订单数量'" >
-                <el-input disabled v-model="recvItem.qty"></el-input>
+              <el-form-item :label="'订单数量'" ><el-input disabled v-model="recvItem.qty"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'待收数量'" >
-                <el-input disabled v-model="recvItem.dueinQty"></el-input>
+              <el-form-item :label="'待收数量'" ><el-input disabled v-model="recvItem.dueinQty"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'此次接收数量'" >
-                <el-input v-model="recvItem.thisQty" ></el-input>
+              <el-form-item :label="'此次接收数量'" ><el-input v-model="recvItem.transQty" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
               <el-form-item :label="' '" >
-                <el-button type="text" @click="processFlag=3"
+                <el-button type="text" @click.stop="handlingUnitStep" :disabled="recvItem.needHandlingUnit!=='Y'"
+                           :class="{ 'disabled-button': recvItem.needHandlingUnit !== 'Y' }"
                            style="font-size: 16px" size="small">包装记录</el-button>
               </el-form-item>
             </el-col>
@@ -132,7 +106,7 @@
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
               <el-form-item :label="'库位'" >
-                <el-input v-model="recvItem.locn" placeholder="请输入库位"></el-input>
+                <el-input v-model="recvItem.locationNo" placeholder="请输入库位"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
@@ -147,7 +121,7 @@
             </el-col>
             <el-col :span="8" style="margin-top: 20px">
               <el-form-item :label="''" >
-                <el-button type="text" style="font-size: 16px;margin-left: 20px" size="small">保存</el-button>
+                <el-button type="text" @click.stop="receivePo()" style="font-size: 16px;margin-left: 20px" size="small">保存</el-button>
               </el-form-item>
             </el-col>
             <el-col :span="8" style="margin-top: 20px">
@@ -163,48 +137,36 @@
         <el-form label-position="top"  style="margin-left: 5px;margin-right: 5px;">
           <el-row :gutter="20" style="">
             <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'商品编码'" >
-                <el-input disabled v-model="recvItem.code"></el-input>
-              </el-form-item>
+              <el-form-item :label="'商品编码'" ><el-input disabled v-model="recvItem.partNo"></el-input></el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'计量单位'" >
-                <el-input disabled v-model="recvItem.unit"></el-input>
-              </el-form-item>
+              <el-form-item :label="'计量单位'" ><el-input disabled v-model="recvItem.unit"></el-input></el-form-item>
             </el-col>
             <el-col :span="24" style="margin-top: 6px">
-              <el-form-item :label="'商品名称'" >
-                <el-input disabled v-model="recvItem.desc"></el-input>
-              </el-form-item>
+              <el-form-item :label="'商品名称'" ><el-input disabled v-model="recvItem.desc"></el-input></el-form-item>
             </el-col>
             <el-col :span="8" style="margin-top: 6px;margin-bottom: 10px">
-              <el-form-item :label="'单包装数量'" >
-                <el-input v-model="recvItem.qty"></el-input>
-              </el-form-item>
+              <el-form-item :label="'单包装数量'" ><el-input v-model="hanlingItem.perQty"></el-input></el-form-item>
             </el-col>
             <el-col :span="8" style="margin-top: 6px">
-              <el-form-item :label="'包装数'" >
-                <el-input v-model="packageqty" ></el-input>
-              </el-form-item>
+              <el-form-item :label="'包装数'" ><el-input v-model="hanlingItem.packageQty" ></el-input></el-form-item>
             </el-col>
             <el-col :span="8" style="margin-top: 6px">
               <el-form-item :label="' '" >
-                <el-button type="text" @click=""
-                           style="font-size: 18px" size="small">创建</el-button>
-              </el-form-item>
+                <el-button type="text" @click="createHandlingUnit" style="font-size: 18px" size="small">创建</el-button></el-form-item>
             </el-col>
-            <el-table :data="items" :row-style="{ height: '30px' }" style="width: 94%;margin-left: 10px" highlight-current-row>
+            <el-table :data="handlingUnit" :row-style="{ height: '30px' }" style="width: 94%;margin-left: 10px" highlight-current-row>
               <el-table-column prop="code" header-align="center" align="left" label="Unit ID"></el-table-column>
               <el-table-column prop="qty" header-align="center" align="right" label="数量" width="42"></el-table-column>
-              <el-table-column prop="recvQty" header-align="center" align="center" label="操作">
+              <el-table-column header-align="center" align="center" label="操作">
                 <template slot-scope="scope">
-                  <a type="text" style="font-size: 14px" @click="">删除</a>
+                  <a type="text" style="font-size: 14px" @click="removeItem">删除</a>
                 </template>
               </el-table-column>
             </el-table>
             <el-col :span="24" style="margin-top: -10px;margin-left: 4px;">
               <el-form-item :label="' '" >
-               <span>合计</span><span style="margin-left: 40%">{{totalQty}}</span>
+               <span>合计</span><span style="margin-left: 38%">{{totalQty}}</span>
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 20px;">
@@ -213,9 +175,7 @@
               </el-form-item>
             </el-col>
             <el-col :span="12" style="margin-top: 20px">
-              <el-form-item :label="''" >
-                <el-button type="text" style="font-size: 18px;margin-left: 20px" size="small">保存</el-button>
-              </el-form-item>
+              <el-form-item :label="''" ><el-button type="text" @click="processFlag=2" style="font-size: 18px;margin-left: 20px" size="small">确定</el-button></el-form-item>
             </el-col>
           </el-row>
         </el-form>
@@ -227,7 +187,7 @@
 
 <script>
 import {
-  getPoList,
+  getPoList,receivePo,
 } from "@/api/po/po.js"
 
 export default {
@@ -235,26 +195,20 @@ export default {
     return {
       processFlag:1,
       recvVisible: false,
-      packageqty:'',
+      handlingUnit: [],
+      hanlingItem:{code:'', qty: '',perQty: '', packageQty: ''},
       rollqty:'',
       scanCode: '',
       poList: [],
-      items: [
-        {code: 'A001',wdr:'1-1',desc:'PC模 230*230 UE PET', qty: 1,recvQty:0,unit:'卷'},
-        {code: 'A002',wdr:'1-2',desc:'UV油墨 5KG/罐 金利宝', qty: 2,recvQty:0,unit:'罐'},
-        {code: 'A003',wdr:'1-3',desc:'PET 230*230 5KG/罐', qty: 3,recvQty:0,unit:'罐'},
-        {code: 'A004',wdr:'1-4',desc:'PET 230*230 5KG/罐', qty: 4,recvQty:0,unit:'罐'},
-      ],
       recvItem:{}
     }
   },
   computed: {
-    number() {
-      return number
-    },
     totalQty() {
-      return this.items.reduce((sum, item) => sum + item.qty, 0)
-    }
+      let sum = this.handlingUnit.reduce((sum, item) => sum + item.qty, 0);
+      this.recvItem.transQty =  sum
+      return sum
+    },
   },
   methods: {
     // 获取po列表
@@ -269,27 +223,69 @@ export default {
         }
       })
     },
+    /*  第二步，收货 */
     recvLine(row){
      this.processFlag=2;
      this.recvItem=row
       this.recvItem.poNo = this.scanCode
     },
-    addItem() {
-      if (!this.scanCode) return
-      this.searchPoList()
+    receivePo() {
+      this.recvItem.site='1'
+      this.recvItem.itemNo = '1'
+      //校验数量库位批次是否为空
+      if (!this.recvItem.transQty) {
+        this.$message.error('请填写接收数量')
+        return
+      }
+      if (!this.recvItem.locationNo) {
+        this.$message.error('请填写库位')
+        return
+      }
+      if (!this.recvItem.batchNo) {
+        this.$message.error('请填写批次')
+        return
+      }
+      // 如果启用hand领Unit，则获取handlingUnit
+      if (this.recvItem.needHandlingUnit==='Y') {
+        const handlingUnitList = JSON.parse(localStorage.getItem('handlingUnit'));
+        this.recvItem.handlingUnitList = handlingUnitList
+      }
+      receivePo(this.recvItem).then(({data}) => {
+        if (data.code == 0) {
+          //this.poList = data.rows
+          this.$message({message: '操作成功', type: 'success',
+            duration: 1500, onClose: () => {}
+          })
+        } else {
+          this.$message({message: data.msg,
+            type: 'error', duration: 1500, onClose: () => {}
+          })
+        }
+      })
+    },
+    /* 第三步，包装记录 */
+    handlingUnitStep (row) {
+      this.processFlag=3
+      const handlingUnitList = JSON.parse(localStorage.getItem('handlingUnit'));
+      if (handlingUnitList && handlingUnitList.length > 0) {
+        this.handlingUnit = handlingUnitList
+      }
     },
     removeItem(index) {
-      this.items.splice(index, 1)
+      this.handlingUnit.splice(index, 1)
+      localStorage.setItem('handlingUnit', JSON.stringify(this.handlingUnit));
     },
-    submit() {
-      alert(`已提交${this.items.length}种商品`)
-      this.items = []
+    createHandlingUnit () {
+      this.hanlingItem.code = 'H'+String(this.handlingUnit.length+1).padStart(3, '0');
+      this.hanlingItem.qty = this.hanlingItem.perQty * this.hanlingItem.packageQty;
+      let item = JSON.parse(JSON.stringify(this.hanlingItem));
+      this.handlingUnit.push(item);
+      localStorage.setItem('handlingUnit', JSON.stringify(this.handlingUnit));
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.$refs.scanCodeRef.focus();
-      this.showKeyboard = true;
     })
   }
 }
@@ -330,7 +326,11 @@ export default {
   border-radius: 3px;
 }
 
-.el-row { cursor: pointer; transition: background 0.3s; }
-.el-row:hover { background: #f5f7fa; }
+.item-list .el-row { cursor: pointer; transition: background 0.3s; }
+.item-list .el-row:hover { background: #f5f7fa; }
+.disabled-button {
+  color: #ccc !important;
+  cursor: not-allowed !important;
+}
 
 </style>