From bab408ba2fc92276e6ddd480d983891cd3facb1f Mon Sep 17 00:00:00 2001
From: "han\\hanst" <songtao.han@xujiesoft.com>
Date: Thu, 10 Jul 2025 13:40:21 +0800
Subject: [PATCH] init

---
 src/views/modules/recv/qualifiedStorage.vue | 543 ++++++++++++++++----
 src/views/modules/recv/recv.vue             | 439 +++++++---------
 2 files changed, 626 insertions(+), 356 deletions(-)

diff --git a/src/views/modules/recv/qualifiedStorage.vue b/src/views/modules/recv/qualifiedStorage.vue
index ad3adc6..8c08a5e 100644
--- a/src/views/modules/recv/qualifiedStorage.vue
+++ b/src/views/modules/recv/qualifiedStorage.vue
@@ -1,132 +1,495 @@
 <template>
   <div>
-  <div class="pda-container">
-    <div class="status-bar">
-      <div class="goBack" @click="$router.back()"><i class="el-icon-arrow-left"></i>上一页</div>
-      <div class="goBack">检验合格入库</div>
-      <div class="network" style="color: #fff" @click="$router.push({path: '/'})">🏠首页</div>
-    </div>
-    <!-- 扫描输入区 -->
-    <div class="scan-box">
-      <input
-        v-model="scanCode"
-        placeholder="扫描PO条码或输入PO号"
-        @keyup.enter="addItem"
-        ref="scanCodeRef"
-      />
-    </div>
+    <div class="pda-container">
+      <div class="status-bar">
+        <div class="goBack" @click="handleBack"><i class="el-icon-arrow-left"></i>上一页</div>
+        <div class="goBack">检验合格入库</div>
+        <div class="network" style="color: #fff" @click="$router.push({ path: '/' })">🏠首页</div>
+      </div>
+      <div style="overflow-y: auto">
+        <!-- Step 1: 扫描或查询检验合格单据 -->
+        <div v-if="processFlag === 1">
+          <div class="scan-box" style="margin: 2px;">
+            <el-input clearable v-model="scanCode" placeholder="扫描入库单条码或输入单号"
+                      @keyup.enter.native="searchQualifiedList" ref="scanCodeRef" />
+          </div>
+<!--          <div class="filter-box" style="margin: 2px;">
+            <el-button type="text" @click="searchQualifiedList" style="font-size: 16px;">查询检验合格单据</el-button>
+          </div>-->
+          <div class="item-list" v-if="qualifiedList.length > 0" style="margin: 2px;">
+            <el-form label-position="top" style="margin: 3px;">
+              <el-row :gutter="5" @click.native="selectInboundItem(qualifiedDetail)"
+                      v-for="(qualifiedDetail, index) in qualifiedList" :key="index"
+                      :class="index < qualifiedList.length - 1 ? 'bottom-line-row' : ''">
+                <el-col :span="8">
+                  <el-form-item label="物料编码"><span>{{ qualifiedDetail.partNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="入库单号"><span>{{ qualifiedDetail.transNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="">
+                    <el-button type="text" class="inboundButton" @click="selectInboundItem(qualifiedDetail)"
+                               style="margin-top: 10px;" size="small">入库</el-button>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="物料描述"><span>{{ qualifiedDetail.partDesc }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="合格数量"><span style="color: #67C23A;">{{ qualifiedDetail.qualifiedQty }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="批次号"><span>{{ qualifiedDetail.batchNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="PO号"><span>{{ qualifiedDetail.orderRef1 }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="检验日期"><span>{{ formatDate(qualifiedDetail.inspectionDate) }}</span></el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
 
-    <!-- 商品列表区 -->
-    <div class="item-list">
-      <el-table :height="240" :data="items" @row-click="rowClick"
-                stripe highlight-current-row border :row-style="{ height: '30px' }" style="width: 100%;">
-        <el-table-column prop="code" header-align="center" align="center" label="商品编码"></el-table-column>
-        <el-table-column prop="qty" header-align="center" align="center" label="数量" width="42"></el-table-column>
-        <el-table-column prop="recvQty" header-align="center" align="center" label="入库数量">
-          <template slot-scope="scope">
-            <el-input  v-model="scope.row.recvQty"  style="height: 11px;width:98%"></el-input>
-          </template>
-        </el-table-column>
-        <el-table-column prop="locnCode" header-align="center" align="center" label="库位">
-          <template slot-scope="scope">
-            <el-input  v-model="scope.row.locnCode"  style="height: 11px;width:98%"></el-input>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
+        <!-- Step 2: 入库确认 -->
+        <div v-if="processFlag === 2">
+          <el-form label-position="top" class="form-section" style="margin: 5px;">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item label="入库单号">
+                  <el-input v-model="inboundItem.transNo" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="物料编码">
+                  <el-input v-model="inboundItem.partNo" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="物料描述">
+                  <el-input v-model="inboundItem.partDesc" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="合格数量">
+                  <el-input v-model="inboundItem.qualifiedQty" disabled style="color: #67C23A;" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="批次号">
+                  <el-input v-model="inboundItem.batchNo" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="PO号">
+                  <el-input v-model="inboundItem.orderRef1" disabled />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="检验日期">
+                  <el-input :value="formatDate(inboundItem.inspectionDate)" disabled />
+                </el-form-item>
+              </el-col>
 
-    <!-- 操作按钮区 -->
-    <el-button prevent-re-click class="submit-btn" @click="submit">确认入库</el-button>
-  </div>
-    <el-dialog
-      style="font-size: 12px"
-      v-drag
-      :title="'Dialog'"
-      :visible.sync="siteVisible"
-      width="260px" :append-to-body="true" >
-      <el-form label-position="top"  style="margin-left: 7px;margin-top: 10px;">
-        <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item :label="'Test'" >
-              <el-radio label="Y">Y</el-radio>
-              <el-radio label="N">N</el-radio>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <el-footer style="height:40px;margin-top: 10px;text-align:center">
-        <el-button type="primary" @click="">确定</el-button>
-        <el-button type="primary" @click="siteVisible=false">关闭</el-button>
-      </el-footer>
-    </el-dialog>
+              <!-- 入库信息确认区域 -->
+              <el-col :span="24" style="border-top: 1px solid #ddd; padding-top: 15px; margin-top: 10px;">
+                <h4 style="margin: 0 0 15px 0; color: #67C23A;">入库信息确认</h4>
+              </el-col>
+
+              <el-col :span="12">
+                <el-form-item label="入库数量">
+                  <el-input v-model="inboundData.inboundQty" type="number"
+                            :max="inboundItem.qualifiedQty" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="目标库位">
+                  <el-input v-model="inboundData.targetLocationId" placeholder="请输入目标库位" />
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="12">
+                <el-form-item label="入库日期">
+                  <el-date-picker v-model="inboundData.inboundDate" type="date"
+                                  format="yyyy-MM-dd" value-format="yyyy-MM-dd"
+                                  placeholder="选择入库日期" style="width: 100%" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="操作员">
+                  <el-input v-model="inboundData.operatorName" placeholder="操作员姓名" />
+                </el-form-item>
+              </el-col>
+
+<!--
+              <el-col :span="24">
+                <el-form-item label="入库备注">
+                  <el-input v-model="inboundData.inboundRemark" type="textarea" rows="3"
+                            placeholder="请输入入库备注信息" />
+                </el-form-item>
+              </el-col>
+-->
+
+              <!-- 操作按钮 -->
+              <el-col :span="8">
+                <el-form-item>
+                  <el-button type="text" style="font-size: 16px;" @click="processFlag = 1">回退</el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item>
+                  <el-button type="text" style="font-size: 16px; color: #67C23A;" @click="confirmInbound">
+                    确认入库
+                  </el-button>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item>
+                  <el-button type="text" style="font-size: 16px;" @click="$router.push('/')">退出</el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+
+        <!-- Step 3: 入库历史查询 -->
+        <div v-if="processFlag === 3">
+          <div class="filter-box" style="margin: 2px;">
+            <el-button type="text" @click="searchInboundHistory" style="font-size: 16px;">查询入库历史</el-button>
+          </div>
+          <div class="item-list" v-if="historyList.length > 0" style="margin: 2px;">
+            <el-form label-position="top" style="margin: 3px;">
+              <el-row :gutter="5" v-for="(historyDetail, index) in historyList" :key="index"
+                      :class="index < historyList.length - 1 ? 'bottom-line-row' : ''">
+                <el-col :span="8">
+                  <el-form-item label="物料编码"><span>{{ historyDetail.partNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="入库单号"><span>{{ historyDetail.transNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="入库状态">
+                    <span style="color: #67C23A;">已入库</span>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="物料描述"><span>{{ historyDetail.partDesc }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="入库数量"><span>{{ historyDetail.inboundQty }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="批次号"><span>{{ historyDetail.batchNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="操作员"><span>{{ historyDetail.operatorName }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="入库日期"><span>{{ formatDate(historyDetail.inboundDate) }}</span></el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部导航 -->
+<!--      <div class="bottom-nav">
+        <el-button :type="processFlag === 1 ? 'primary' : 'text'" @click="processFlag = 1">待入库</el-button>
+        <el-button :type="processFlag === 3 ? 'primary' : 'text'" @click="processFlag = 3">入库历史</el-button>
+      </div>-->
+    </div>
   </div>
 </template>
 
 <script>
+import { getQualifiedInspectionList, confirmQualifiedInbound, getInboundHistory } from "@/api/po/po.js";
+
 export default {
   data() {
     return {
-      siteVisible: false,
+      processFlag: 1, // 1-检验合格列表, 2-入库确认, 3-入库历史
       scanCode: '',
-      items: [{code: 'A001', qty: 1}, {code: 'A002', qty: 2}]
-    }
-  },
-  computed: {
-    totalQty() {
-      return this.items.reduce((sum, item) => sum + item.qty, 0)
-    }
+      qualifiedList: [],
+      historyList: [],
+      inboundItem: {},
+      inboundData: {
+        inboundQty: '',
+        targetLocationId: '',
+        inboundDate: '',
+        operatorName: '',
+        inboundRemark: ''
+      }
+    };
   },
   methods: {
-    rowClick(row){
+    handleBack() {
+      if (this.processFlag === 1) {
+        this.$router.back();
+      } else if (this.processFlag === 2) {
+        this.processFlag = 1;
+        this.resetInboundData();
+      } else {
+        this.processFlag = 1;
+      }
+    },
+
+    // 查询检验合格单据
+    searchQualifiedList() {
+      const params = {
+        site: '1' // 默认站点
+      };
+      if (this.scanCode) {
+        params.transNo = this.scanCode;
+      }
+
+      getQualifiedInspectionList(params).then(({ data }) => {
+        if (data.code === 0) {
+          this.qualifiedList = data.rows || [];
+          if (this.qualifiedList.length === 0) {
+            this.$message.success("暂无检验合格待入库单据");
+          }
+        } else {
+          this.$message.error(data.msg || "查询失败");
+        }
+      }).catch(error => {
+        this.$message.error("查询失败");
+        console.error(error);
+      });
+    },
+
+    // 选择入库项目
+    selectInboundItem(item) {
+      this.inboundItem = { ...item };
+      this.resetInboundData();
+      // 默认入库数量为合格数量
+      this.inboundData.inboundQty = item.qualifiedQty;
+      this.inboundData.targetLocationId = item.locationId; // 默认使用原库位
+      this.inboundData.inboundDate = this.getCurrentDate();
+      this.inboundData.operatorName = 'current_user'; // 这里应该从用户信息中获取
+      this.processFlag = 2;
+    },
+
+    // 确认入库
+    confirmInbound() {
+      // 验证必填项
+      if (!this.inboundData.inboundQty || this.inboundData.inboundQty <= 0) {
+        return this.$message.error("请输入有效的入库数量");
+      }
+
+      if (!this.inboundData.targetLocationId) {
+        return this.$message.error("请输入目标库位");
+      }
+
+      if (!this.inboundData.inboundDate) {
+        return this.$message.error("请选择入库日期");
+      }
+
+      const inboundQty = parseFloat(this.inboundData.inboundQty);
+      const qualifiedQty = parseFloat(this.inboundItem.qualifiedQty);
+
+      if (inboundQty > qualifiedQty) {
+        return this.$message.error("入库数量不能大于合格数量");
+      }
+
+      const params = {
+        site: this.inboundItem.site,
+        transNo: this.inboundItem.transNo,
+        itemNo: this.inboundItem.itemNo,
+        partNo: this.inboundItem.partNo,
+        batchNo: this.inboundItem.batchNo,
+        inboundQty: inboundQty,
+        targetLocationId: this.inboundData.targetLocationId,
+        inboundDate: this.inboundData.inboundDate,
+        operatorName: this.inboundData.operatorName,
+        inboundRemark: this.inboundData.inboundRemark,
+        warehouseId: this.inboundItem.warehouseId,
+        orderRef1: this.inboundItem.orderRef1,
+        orderRef2: this.inboundItem.orderRef2,
+        orderRef3: this.inboundItem.orderRef3
+      };
 
+      confirmQualifiedInbound(params).then(({ data }) => {
+        if (data.code === 0) {
+          this.$message.success("检验合格入库成功");
+          this.processFlag = 1;
+          this.resetInboundData();
+          this.searchQualifiedList(); // 刷新列表
+        } else {
+          this.$message.error(data.msg || "入库失败");
+        }
+      }).catch(error => {
+        this.$message.error("入库失败");
+        console.error(error);
+      });
     },
-    addItem() {
-      if (!this.scanCode) return
-      this.items.push({
-        code: this.scanCode,
-        qty: 1
-      })
-      this.scanCode = ''
+
+    // 查询入库历史
+    searchInboundHistory() {
+      const params = {
+        site: '1'
+      };
+
+      getInboundHistory(params).then(({ data }) => {
+        if (data.code === 0) {
+          this.historyList = data.rows || [];
+          if (this.historyList.length === 0) {
+            this.$message.info("暂无入库历史记录");
+          }
+        } else {
+          this.$message.error(data.msg || "查询失败");
+        }
+      }).catch(error => {
+        this.$message.error("查询失败");
+        console.error(error);
+      });
     },
-    removeItem(index) {
-      this.items.splice(index, 1)
+
+    // 重置入库数据
+    resetInboundData() {
+      this.inboundData = {
+        inboundQty: '',
+        targetLocationId: '',
+        inboundDate: '',
+        operatorName: '',
+        inboundRemark: ''
+      };
+    },
+
+    // 获取当前日期
+    getCurrentDate() {
+      const now = new Date();
+      return now.getFullYear() + '-' +
+        String(now.getMonth() + 1).padStart(2, '0') + '-' +
+        String(now.getDate()).padStart(2, '0');
     },
-    submit() {
-      alert(`已提交${this.items.length}种商品`)
-      this.items = []
+
+    // 格式化日期
+    formatDate(date) {
+      if (!date) return '';
+      const d = new Date(date);
+      return d.getFullYear() + '-' +
+        String(d.getMonth() + 1).padStart(2, '0') + '-' +
+        String(d.getDate()).padStart(2, '0');
     }
   },
+
   mounted() {
     this.$nextTick(() => {
-      this.$refs.scanCodeRef.focus()
-    })
+      if (this.$refs.scanCodeRef) {
+        this.$refs.scanCodeRef.focus();
+      }
+    });
+    // 默认加载检验合格列表
+    this.searchQualifiedList();
   }
-}
+};
 </script>
 
 <style scoped>
+.pda-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  //background: #67C23A;
+  color: white;
+  padding: 10px 15px;
+  font-size: 16px;
+}
+
+.goBack {
+  cursor: pointer;
+}
+
 .scan-box input {
   width: 100%;
   padding: 12px;
   font-size: 16px;
 }
 
+.filter-box {
+  text-align: center;
+  padding: 10px;
+}
+
 .item-list {
   flex: 1;
   overflow-y: auto;
-  margin: 20px 0;
+  margin: 10px 0;
+  border: 1px solid rgba(200, 200, 200, 0.8);
+  background: white;
+}
+
+.item-list span {
+  color: #000;
+  font-size: 15px;
+}
+
+.bottom-line-row {
+  border-bottom: 1px solid rgba(200, 200, 200, 0.8);
+}
+
+.inboundButton {
+  font-size: 16px;
+  border-radius: 3px;
+  color: #67C23A;
 }
 
-.item-row {
+.item-list .el-row {
+  cursor: pointer;
+  transition: background 0.3s;
+  padding: 10px;
+}
+
+.item-list .el-row:hover {
+  background: #f5f7fa;
+}
+
+.form-section {
+  background: white;
+  border-radius: 5px;
+}
+
+.form-section >>> .el-col {
+  margin-bottom: 12px;
+}
+
+.bottom-nav {
   display: flex;
-  justify-content: space-between;
-  padding: 8px;
-  border-bottom: 1px solid #eee;
+  justify-content: space-around;
+  padding: 10px;
+  background: white;
+  border-top: 1px solid #ddd;
 }
 
-/deep/ .el-table .cell {
-  line-height: 24px;
-  font-size: 12px;
-  height: 24px;
+.bottom-nav .el-button {
+  flex: 1;
+  margin: 0 5px;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+  .status-bar {
+    font-size: 14px;
+    padding: 8px 10px;
+  }
+
+  .scan-box input {
+    padding: 10px;
+    font-size: 14px;
+  }
+
+  .item-list span {
+    font-size: 13px;
+  }
 }
 </style>
diff --git a/src/views/modules/recv/recv.vue b/src/views/modules/recv/recv.vue
index 42c983d..dfc5fe2 100644
--- a/src/views/modules/recv/recv.vue
+++ b/src/views/modules/recv/recv.vue
@@ -1,294 +1,205 @@
 <template>
   <div>
-  <div class="pda-container">
-    <div class="status-bar">
-      <div class="goBack" @click="processFlag===1?$router.back():processFlag===3?processFlag=2:processFlag=1"><i class="el-icon-arrow-left"></i>上一页</div>
-      <div class="goBack">采购订单接收</div>
-      <div class="network" style="color: #fff" @click="$router.push({path: '/'})">🏠首页</div>
-    </div>
-    <div style="overflow-y: auto">
-      <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"/>
+    <div class="pda-container">
+      <div class="status-bar">
+        <div class="goBack" @click="handleBack"><i class="el-icon-arrow-left"></i>上一页</div>
+        <div class="goBack">采购订单接收</div>
+        <div class="network" style="color: #fff" @click="$router.push({ path: '/' })">🏠首页</div>
+      </div>
+      <div style="overflow-y: auto">
+        <!-- Step 1: 扫描 -->
+        <div v-if="processFlag === 1">
+          <div class="scan-box" style="margin: 2px;">
+            <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: 2px;">
+            <el-form label-position="top" style="margin: 3px;">
+              <el-row :gutter="5" @click.native="recvLine(poDetail)"
+                      v-for="(poDetail, index) in poList" :key="index" :class="index < poList.length - 1 ? 'bottom-line-row' : ''">
+                <el-col :span="8">
+                  <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-col>
+                <el-col :span="8">
+                  <el-form-item label="">
+                    <el-button type="text" class="recvButton" @click="recvLine(poDetail)" style="margin-top: 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-col>
+                <el-col :span="6">
+                  <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-col>
+                <el-col :span="6">
+                  <el-form-item label="此次接收数量"><span>{{ poDetail.qty }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="单位"><span>{{ poDetail.unit }}</span></el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
         </div>
-        <!-- 商品列表区 -->
-        <div class="item-list" v-if="poList.length>0" style="margin-left: 2px;margin-right: 2px;">
-          <el-form label-position="top"  style="margin-left: 3px;margin-right: 3px;">
-            <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.partNo}}</span></el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <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>
+
+        <!-- Step 2: 收货明细 -->
+        <div v-if="processFlag === 2">
+          <el-form label-position="top" class="form-section" style="margin: 5px;">
+            <el-row :gutter="20">
+              <el-col :span="12"><el-form-item label="PO号码"><el-input v-model="recvItem.poNo" disabled /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="行号/下达号"><el-input v-model="recvItem.wdr" disabled /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="商品编码"><el-input v-model="recvItem.partNo" disabled /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="计量单位"><el-input v-model="recvItem.unit" disabled /></el-form-item></el-col>
+              <el-col :span="24"><el-form-item label="商品名称"><el-input v-model="recvItem.desc" disabled /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="订单数量"><el-input v-model="recvItem.qty" disabled /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="待收数量"><el-input v-model="recvItem.dueinQty" disabled /></el-form-item></el-col>
+              <el-col :span="12">
+                <el-form-item label="此次接收数量">
+                  <el-input v-model="recvItem.transQty" :disabled="recvItem.needHandlingUnit === 'Y'" />
                 </el-form-item>
               </el-col>
-              <el-col :span="24">
-                <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-col>
-              <el-col :span="6">
-                <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-col>
-              <el-col :span="6">
-                <el-form-item style="margin-left: 10px" :label="'单位'" ><span>{{poDetail.unit}}</span></el-form-item>
+              <el-col :span="12">
+                <el-form-item label=" ">
+                  <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>
+              <el-col :span="12"><el-form-item label="制造日期"><el-date-picker v-model="recvItem.productDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择制造日期" style="width: 100%" /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="失效日期"><el-date-picker v-model="recvItem.expiringDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择失效日期" style="width: 100%" /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="库位"><el-input v-model="recvItem.locationNo" placeholder="请输入库位" /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="批号"><el-input v-model="recvItem.batchNo" placeholder="请输入批号" /></el-form-item></el-col>
+              <el-col :span="8" style="margin-top: 10px"><el-form-item><el-button type="text" style="font-size: 16px;margin-left: 30px" @click="processFlag = 1">回退</el-button></el-form-item></el-col>
+              <el-col :span="8" style="margin-top: 10px"><el-form-item><el-button type="text" style="font-size: 16px;margin-left: 20px" @click="receivePo">保存</el-button></el-form-item></el-col>
+              <el-col :span="8" style="margin-top: 10px"><el-form-item><el-button type="text" style="font-size: 16px;margin-left: 10px" @click="$router.push('/')">退出</el-button></el-form-item></el-col>
             </el-row>
           </el-form>
         </div>
-      </div>
-      <div v-if="processFlag===2" style="overflow-y: auto">
-        <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>
-            </el-col>
-            <el-col :span="12">
-              <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.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-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-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>
-            </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>
-            </el-col>
-            <el-col :span="12" style="margin-top: 6px">
-              <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.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>
-            <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'制造日期'" >
-                <el-date-picker style="width: 100%" v-model="recvItem.productDate"
-                  type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择制造日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'失效日期'" >
-                <el-date-picker style="width: 100%" v-model="recvItem.expiringDate"
-                  type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择失效日期">
-                </el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'库位'" >
-                <el-input v-model="recvItem.locationNo" placeholder="请输入库位"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12" style="margin-top: 6px">
-              <el-form-item :label="'批号'" >
-                <el-input v-model="recvItem.batchNo" placeholder="请输入批号"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8" style="margin-top: 20px;">
-              <el-form-item :label="''" >
-                <el-button type="text" style="font-size: 16px;margin-left: 30px" size="small" @click="processFlag=1">回退</el-button>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8" style="margin-top: 20px">
-              <el-form-item :label="''" >
-                <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">
-              <el-form-item :label="''" >
-                <el-button type="text" style="font-size: 16px;margin-left: 10px" size="small">退出</el-button>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
 
-      <div v-if="processFlag===3" style="overflow-y: auto">
-        <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.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-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-col>
-            <el-col :span="8" style="margin-top: 6px;margin-bottom: 10px">
-              <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="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="createHandlingUnit" style="font-size: 18px" size="small">创建</el-button></el-form-item>
-            </el-col>
-            <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 header-align="center" align="center" label="操作">
-                <template slot-scope="scope">
-                  <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: 38%">{{totalQty}}</span>
-              </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: 60px" size="small" @click="processFlag=2">回退</el-button>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12" style="margin-top: 20px">
-              <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>
+        <!-- Step 3: 包装记录 -->
+        <div v-if="processFlag === 3">
+          <el-form label-position="top" class="form-section" style="margin: 5px;">
+            <el-row :gutter="20">
+              <el-col :span="12"><el-form-item label="商品编码"><el-input v-model="recvItem.partNo" disabled /></el-form-item></el-col>
+              <el-col :span="12"><el-form-item label="计量单位"><el-input v-model="recvItem.unit" disabled /></el-form-item></el-col>
+              <el-col :span="24"><el-form-item label="商品名称"><el-input v-model="recvItem.desc" disabled /></el-form-item></el-col>
+              <el-col :span="8"><el-form-item label="单包装数量"><el-input v-model="hanlingItem.perQty" /></el-form-item></el-col>
+              <el-col :span="8"><el-form-item label="包装数"><el-input v-model="hanlingItem.packageQty" /></el-form-item></el-col>
+              <el-col :span="8" style="margin-top: 24px"><el-form-item>
+                <el-button type="text" @click="createHandlingUnit" style="font-size: 16px">创建</el-button></el-form-item></el-col>
+              <el-table :data="handlingUnit" :row-style="{ height: '30px' }" style="width: 94%; margin-left: 10px;" highlight-current-row>
+                <el-table-column prop="code" label="Unit ID" />
+                <el-table-column prop="qty" label="数量" width="60" />
+                <el-table-column label="操作">
+                  <template slot-scope="scope">
+                    <a @click="removeItem(scope.$index)">删除</a>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <el-col :span="24"><el-form-item><span>合计</span><span style="margin-left: 38%">{{ totalQty }}</span></el-form-item></el-col>
+              <el-col :span="12"><el-form-item><el-button type="text" @click="processFlag = 2" style="font-size: 18px;margin-left: 60px">回退</el-button></el-form-item></el-col>
+              <el-col :span="12"><el-form-item><el-button type="text" @click="processFlag = 2" style="font-size: 18px;">确定</el-button></el-form-item></el-col>
+            </el-row>
+          </el-form>
+        </div>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
-import {
-  getPoList,receivePo,
-} from "@/api/po/po.js"
+import { getPoList, receivePo } from "@/api/po/po.js";
 
 export default {
   data() {
     return {
-      processFlag:1,
-      recvVisible: false,
-      handlingUnit: [],
-      hanlingItem:{code:'', qty: '',perQty: '', packageQty: ''},
-      rollqty:'',
+      processFlag: 1,
       scanCode: '',
       poList: [],
-      recvItem:{}
-    }
+      recvItem: {},
+      handlingUnit: [],
+      hanlingItem: { code: '', qty: '', perQty: '', packageQty: '' },
+    };
   },
   computed: {
     totalQty() {
-      let sum = this.handlingUnit.reduce((sum, item) => sum + item.qty, 0);
-      this.recvItem.transQty =  sum
-      return sum
+      const sum = this.handlingUnit.reduce((sum, item) => sum + Number(item.qty), 0);
+      this.recvItem.transQty = sum;
+      return sum;
     },
+    huKey() {
+      return `hu_${this.recvItem.poNo}_${this.recvItem.wdr}`;
+    }
   },
   methods: {
-    // 获取po列表
+    handleBack() {
+      if (this.processFlag === 1) this.$router.back();
+      else if (this.processFlag === 3) this.processFlag = 2;
+      else this.processFlag = 1;
+    },
     searchPoList() {
-      if (!this.scanCode) {
-        this.poList = []
-        return
+      if (!this.scanCode) return this.poList = [];
+      getPoList({ poNo: this.scanCode }).then(({ data }) => {
+        if (data.code === 0) this.poList = data.rows;
+      });
+    },
+    recvLine(row) {
+      this.recvItem = { ...row, poNo: this.scanCode };
+      this.processFlag = 2;
+    },
+    handlingUnitStep() {
+      this.processFlag = 3;
+      const saved = localStorage.getItem(this.huKey);
+      this.handlingUnit = saved ? JSON.parse(saved) : [];
+    },
+    createHandlingUnit() {
+      const { perQty, packageQty } = this.hanlingItem;
+      if (!perQty || !packageQty || isNaN(perQty) || isNaN(packageQty)) {
+        return this.$message.warning("请填写有效的包装信息");
       }
-      getPoList({}).then(({data}) => {
-        if (data.code == 0) {
-          this.poList = data.rows
-        }
-      })
+      const qty = parseFloat(perQty) * parseInt(packageQty);
+      const code = 'H' + String(this.handlingUnit.length + 1).padStart(3, '0');
+      const newItem = { ...this.hanlingItem, qty, code };
+      this.handlingUnit.push(newItem);
+      localStorage.setItem(this.huKey, JSON.stringify(this.handlingUnit));
     },
-    /*  第二步，收货 */
-    recvLine(row){
-     this.processFlag=2;
-     this.recvItem=row
-      this.recvItem.poNo = this.scanCode
+    removeItem(index) {
+      this.handlingUnit.splice(index, 1);
+      localStorage.setItem(this.huKey, JSON.stringify(this.handlingUnit));
     },
     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
+      const item = this.recvItem;
+      if (!item.transQty || !item.locationNo || !item.batchNo) {
+        return this.$message.error("请填写完整信息");
       }
-      // 如果启用hand领Unit，则获取handlingUnit
-      if (this.recvItem.needHandlingUnit==='Y') {
-        const handlingUnitList = JSON.parse(localStorage.getItem('handlingUnit'));
-        this.recvItem.handlingUnitList = handlingUnitList
+      if (item.needHandlingUnit === 'Y') {
+        item.handlingUnitList = this.handlingUnit;
       }
-      receivePo(this.recvItem).then(({data}) => {
-        if (data.code == 0) {
-          //this.poList = data.rows
-          this.$message({message: '操作成功', type: 'success',
-            duration: 1500, onClose: () => {}
-          })
+      receivePo({ ...item, site: '1', itemNo: '1' }).then(({ data }) => {
+        if (data.code === 0) {
+          this.$message.success("操作成功");
+          localStorage.removeItem(this.huKey);
+          this.processFlag = 1;
+          this.scanCode = '';
+          this.poList = [];
+          this.recvItem = {};
+          this.handlingUnit = [];
         } else {
-          this.$message({message: data.msg,
-            type: 'error', duration: 1500, onClose: () => {}
-          })
+          this.$message.error(data.msg);
         }
-      })
-    },
-    /* 第三步，包装记录 */
-    handlingUnitStep (row) {
-      this.processFlag=3
-      const handlingUnitList = JSON.parse(localStorage.getItem('handlingUnit'));
-      if (handlingUnitList && handlingUnitList.length > 0) {
-        this.handlingUnit = handlingUnitList
-      }
-    },
-    removeItem(index) {
-      this.handlingUnit.splice(index, 1)
-      localStorage.setItem('handlingUnit', JSON.stringify(this.handlingUnit));
-    },
-    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.$nextTick(() => this.$refs.scanCodeRef.focus());
   }
-}
+};
 </script>
 
 <style scoped>
@@ -297,40 +208,36 @@ export default {
   padding: 12px;
   font-size: 16px;
 }
-
 .item-list {
   flex: 1;
   overflow-y: auto;
   margin: 10px 0;
-  border: 1px solid rgba(200, 200, 200, 0.8); /* 浅灰色半透明 */
+  border: 1px solid rgba(200, 200, 200, 0.8);
 }
 .item-list span {
-  color: #000000;
+  color: #000;
   font-size: 15px;
 }
-
 .bottom-line-row {
   border-bottom: 1px solid rgba(200, 200, 200, 0.8);
-  //padding-bottom: 2px;  /* 可选间距调整 */
-}
-
-.submit-btn {
-  padding: 12px;
-  background: #07c160;
-  color: white;
-  border: none;
-  font-size: larger;
 }
 .recvButton {
   font-size: 16px;
   border-radius: 3px;
 }
-
-.item-list .el-row { cursor: pointer; transition: background 0.3s; }
-.item-list .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;
 }
+.form-section >>> .el-col {
+  margin-bottom: 12px;
+}
 
 </style>