检验不合格处理

src/api/po/po.js

@@ -13,11 +13,20 @@ export const getNextItemNo = data => createAPI(`po/getNextItemNo`,'post',data)
 // 获取待检验入库单列表
 export const getQualifiedInspectionList = data => createAPI(`inspection/getQualifiedInspectionList`,'post',data)
 
+// 获取检验不合格待处理单据列表
+export const getUnqualifiedInspectionList = data => createAPI(`inspection/getUnqualifiedInspectionList`,'post',data)
+
+// 扫描条码获取HandlingUnit信息
+export const scanHandlingUnitLabel = data => createAPI(`handlingunit/getHandlingUnitDetail`,'post',data)
+
 // 检验合格入库
 export const confirmQualifiedInbound = data => createAPI(`inspection/confirmQualifiedInbound`,'post',data)
 
 // 获取检验历史记录
 export const getInboundHistory = data => createAPI(`inspection/getInboundHistory`,'post',data)
 
+// 确认不合格处理
+export const confirmUnqualifiedProcess = data => createAPI(`inspection/confirmUnqualifiedProcess`,'post',data)
+
 // 打印标签
 export const printLabel = data => createAPI('/label/setting/printLabel','post',data)

src/assets/scss/global.scss

@@ -808,7 +808,7 @@ a:hover{
 .el-input__inner {
   height: 44px;
   font-size: 16px;
-  padding: 0 15px;
+  padding: 0 5px;
 }
 
 .el-button {

src/router/index.js

@@ -35,6 +35,9 @@ const globalRoutes = [
     component: resolve => require(["@/views/modules/recv/inspectionResults.vue"], resolve),
     meta: { transition: 'instant' ,preload: true,keepAlive: true}},
   
+  // 检验不合格处理页面（统一处理页面）
+  {path: "/unqualified-process",name: "unqualifiedProcess", component: resolve => require(["@/views/modules/recv/unqualifiedProcess.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},
+
 // V1
   // handlingunit
   {path: "/handlingunit",name: "handlingunit", component: resolve => require(["@/views/modules/handling-unit/handling-unit-management.vue"], resolve), meta: { transition: 'instant' ,preload: true,keepAlive: true}},

src/views/modules/recv/inspectionResults.vue

@@ -1,109 +1,447 @@
 <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="handleScan" ref="scanCodeRef" />
+          </div>
+          <div class="item-list" v-if="unqualifiedList.length > 0" style="margin: 2px;">
+            <el-form label-position="top" style="margin: 3px;">
+              <el-row :gutter="5" @click.native="selectProcessItem(unqualifiedDetail)"
+                      v-for="(unqualifiedDetail, index) in unqualifiedList" :key="index"
+                      :class="index < unqualifiedList.length - 1 ? 'bottom-line-row' : ''">
+                <el-col :span="6">
+                  <el-form-item label="物料编码"><span>{{ unqualifiedDetail.partNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="单据号"><span>{{ unqualifiedDetail.transNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="4">
+                  <el-form-item label="类型">
+                    <span >
+                      {{ getProcessTypeText(unqualifiedDetail.processType) }}
+                    </span>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="">
+                    <el-button type="text" class="processButton" @click="selectProcessItem(unqualifiedDetail)"
+                               style="margin-top: 10px;margin-left: 20px" size="small">处理</el-button>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="物料描述"><span>{{ unqualifiedDetail.partDesc }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item :label="getQtyLabel(unqualifiedDetail.processType)">
+                    <span :style="getQtyStyle(unqualifiedDetail.processType)">{{ unqualifiedDetail.unqualifiedQty }}</span>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="批次号"><span>{{ unqualifiedDetail.batchNo }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="PO号"><span>{{ unqualifiedDetail.orderRef1 }}</span></el-form-item>
+                </el-col>
+                <el-col :span="6">
+                  <el-form-item label="检验日期"><span>{{ formatDate(unqualifiedDetail.inspectionDate) }}</span></el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </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="qty" header-align="center" align="center" label="不合格数量">
-          <template slot-scope="scope">
-            <span style="height: 11px;width:98%;color: red">{{scope.row.qty}}</span>
-          </template>
-        </el-table-column>
-      </el-table>
+          <!-- 扫描的HandlingUnit明细列表 -->
+          <div class="scanned-items" v-if="scannedItems.length > 0" style="margin: 2px;">
+            <div class="section-title">已扫描明细</div>
+            <div class="item-list">
+              <el-form label-position="top" style="margin: 3px;">
+                <el-row :gutter="5" v-for="(item, index) in scannedItems" :key="index"
+                        :class="index < scannedItems.length - 1 ? 'bottom-line-row' : ''">
+                  <el-col :span="8">
+                    <el-form-item label="物料编码"><span>{{ item.partNo }}</span></el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item label="HandlingUnit"><span>{{ item.unitId }}</span></el-form-item>
+                  </el-col>
+                  <el-col :span="8">
+                    <el-form-item label="">
+                      <el-button type="text" style="color: #F56C6C;" @click="removeScannedItem(index)"
+                                 size="small">移除</el-button>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="物料描述"><span>{{ item.partDesc }}</span></el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="数量"><span>{{ item.qty }}</span></el-form-item>
+                  </el-col>
+                  <el-col :span="6">
+                    <el-form-item label="批次号"><span>{{ item.batchNo }}</span></el-form-item>
+                  </el-col>
+                </el-row>
+              </el-form>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-
-    <!-- 操作按钮区 -->
-
-  </div>
-
   </div>
 </template>
 
 <script>
+import { getUnqualifiedInspectionList, scanHandlingUnitLabel } from "@/api/po/po.js";
+
 export default {
   data() {
     return {
-      siteVisible: false,
+      processFlag: 1, // 1-不合格列表, 2-处理确认
       scanCode: '',
-      items: [{code: 'A001', qty: 1}, {code: 'A002', qty: 2}]
-    }
-  },
-  computed: {
-    totalQty() {
-      return this.items.reduce((sum, item) => sum + item.qty, 0)
-    }
+      unqualifiedList: [],
+      scannedItems: [],
+      selectedItem: {},
+      site: localStorage.getItem('site')
+    };
   },
   methods: {
-    addItem() {
-      if (!this.scanCode) return
-      this.items.push({
-        code: this.scanCode,
-        qty: 1
-      })
-      this.scanCode = ''
+    handleBack() {
+      if (this.processFlag === 1) {
+        this.$router.back();
+      } else if (this.processFlag === 2) {
+        this.processFlag = 1;
+        this.scannedItems = [];
+      } else {
+        this.processFlag = 1;
+      }
+    },
+
+    // 处理扫描
+    handleScan() {
+      if (!this.scanCode.trim()) {
+        return;
+      }
+
+      // 判断是否为采购单条码或HandlingUnit条码
+      if (this.scanCode.startsWith('PO') || this.scanCode.startsWith('REC')) {
+        // 采购单或接收单条码，查询不合格单据
+        this.searchUnqualifiedList();
+      } else {
+        // HandlingUnit条码，扫描添加明细
+        this.scanHandlingUnit();
+      }
+    },
+
+    // 查询检验不合格单据
+    searchUnqualifiedList() {
+      const params = {
+        site: this.site
+      };
+      if (this.scanCode && (this.scanCode.startsWith('PO') || this.scanCode.startsWith('REC'))) {
+        params.transNo = this.scanCode;
+      }
+
+      getUnqualifiedInspectionList(params).then(({ data }) => {
+        if (data.code === 0) {
+          this.unqualifiedList = data.rows || [];
+          if (this.unqualifiedList.length === 0) {
+            this.$message.success("暂无检验不合格待处理单据");
+          }
+        } else {
+          this.$message.error(data.msg || "查询失败");
+        }
+      }).catch(error => {
+        this.$message.error("查询失败");
+        console.error(error);
+      });
+
+      this.scanCode = '';
+    },
+
+    // 扫描HandlingUnit条码
+    scanHandlingUnit() {
+      const params = {
+        site: this.site,
+        unitId: this.scanCode.trim()
+      };
+
+      scanHandlingUnitLabel(params).then(({ data }) => {
+        if (data.code === 0 && data.data) {
+          const huInfo = data.data;
+
+          // 检查是否已经扫描过
+          const exists = this.scannedItems.find(item => item.unitId === huInfo.unitId);
+          if (exists) {
+            this.$message.warning('该HandlingUnit已扫描，请勿重复扫描');
+            this.scanCode = '';
+            return;
+          }
+
+          // 添加到扫描列表
+          this.scannedItems.push({
+            unitId: huInfo.unitId,
+            partNo: huInfo.partNo,
+            partDesc: huInfo.partDesc,
+            qty: huInfo.qty,
+            batchNo: huInfo.batchNo,
+            locationId: huInfo.locationId
+          });
+
+          this.$message.success('扫描成功');
+        } else {
+          this.$message.error(data.msg || 'HandlingUnit不存在或查询失败');
+        }
+      }).catch(error => {
+        this.$message.error("扫描失败");
+        console.error(error);
+      });
+
+      this.scanCode = '';
+    },
+
+    // 选择处理项目
+    selectProcessItem(item) {
+      this.selectedItem = { ...item };
+
+      // 跳转到统一的不合格处理页面，通过processType参数区分处理类型
+      this.$router.push({
+        path: '/unqualified-process',
+        query: {
+          transNo: item.transNo,
+          itemNo: item.itemNo,
+          processType: item.processType,
+          partNo: item.partNo,
+          unqualifiedQty: item.unqualifiedQty,
+          scannedItems: JSON.stringify(this.scannedItems)
+        }
+      });
     },
-    removeItem(index) {
-      this.items.splice(index, 1)
+
+    // 移除扫描的项目
+    removeScannedItem(index) {
+      this.scannedItems.splice(index, 1);
+      this.$message.success('移除成功');
+    },
+
+    // 获取处理类型文本
+    getProcessTypeText(processType) {
+      const typeMap = {
+        'RETURN': '退货',
+        'SCRAP': '报废',
+        'EXCHANGE': '换货'
+      };
+      return typeMap[processType] || '未知';
+    },
+
+    // 获取数量标签
+    getQtyLabel(processType) {
+      const labelMap = {
+        'RETURN': '退货数量',
+        'SCRAP': '报废数量',
+        'EXCHANGE': '换货数量'
+      };
+      return labelMap[processType] || '数量';
     },
-    submit() {
-      alert(`已提交${this.items.length}种商品`)
-      this.items = []
+
+    // 获取数量样式
+    getQtyStyle(processType) {
+      const styleMap = {
+        'RETURN': 'color: #E6A23C; font-weight: 500;', // 橙色
+        'SCRAP': 'color: #F56C6C; font-weight: 500;',  // 红色
+        'EXCHANGE': 'color: #409EFF; font-weight: 500;' // 蓝色
+      };
+      return styleMap[processType] || 'color: #666; font-weight: 500;';
+    },
+
+
+    // 获取当前日期
+    getCurrentDate() {
+      const now = new Date();
+      return now.getFullYear() + '-' +
+        String(now.getMonth() + 1).padStart(2, '0') + '-' +
+        String(now.getDate()).padStart(2, '0');
+    },
+
+    // 格式化日期
+    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.searchUnqualifiedList();
   }
-}
+};
 </script>
 
 <style scoped>
 
+.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-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px;
-  border-bottom: 1px solid #eee;
+.item-list span {
+  color: #000;
+  font-size: 15px;
 }
 
-.status-bar {
+.bottom-line-row {
+  border-bottom: 1px solid rgba(200, 200, 200, 0.8);
+}
+
+.processButton {
+  font-size: 16px;
+  border-radius: 3px;
+  color: #17b3a3;
+}
+
+.process-type-selector {
+  background: white;
+  padding: 15px;
+  border-radius: 5px;
+  border: 1px solid rgba(200, 200, 200, 0.8);
+}
+
+.process-type-selector .el-radio-group {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  justify-content: space-around;
+}
+
+.process-type-selector .el-radio {
+  margin-right: 0;
+}
+
+.section-title {
   background: #17b3a3;
-  color: #fff;
-  padding: 8px 12px;
+  color: white;
+  padding: 8px 15px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 3px 3px 0 0;
+}
+
+/* 处理类型样式 */
+.process-type-return {
+  background: #FDF6EC;
+  color: #E6A23C;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid #F5DAB1;
+}
+
+.process-type-scrap {
+  background: #FEF0F0;
+  color: #F56C6C;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid #FAB6B6;
+}
+
+.process-type-exchange {
+  background: #ECF5FF;
+  color: #409EFF;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid #B3D8FF;
+}
+
+.process-type-unknown {
+  background: #F5F7FA;
+  color: #909399;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid #DCDFE6;
+}
+
+.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-around;
+  padding: 10px;
+  background: white;
+  border-top: 1px solid #ddd;
+}
+
+.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>

src/views/modules/recv/unqualifiedProcess.vue

@@ -0,0 +1,942 @@
+<template>
+  <div class="pda-container">
+    <!-- 头部栏 -->
+    <div class="header-bar" :style="getHeaderStyle()">
+      <div class="header-left" @click="$router.back()">
+        <i class="el-icon-arrow-left"></i>
+        <span>{{ getProcessTitle() }}</span>
+      </div>
+      <div class="header-right" @click="$router.push({ path: '/' })">
+        首页
+      </div>
+    </div>
+
+    <!-- 搜索框 -->
+    <div class="search-container">
+      <el-input clearable class="compact-input"
+        v-model="scanCode"
+        placeholder="请扫描HandlingUnit条码"
+        prefix-icon="el-icon-search"
+        @keyup.enter.native="handleScan"
+        ref="scanInput"
+      />
+      <div class="mode-switch">
+        <el-switch
+          class="custom-switch"
+          v-model="isRemoveMode"
+          active-color="#ff4949"
+          inactive-color="#13ce66">
+        </el-switch>
+        <span v-if="isRemoveMode" class="switch-text">{{ '移除' }}</span>
+        <span v-else class="switch-text2">{{ '添加' }}</span>
+      </div>
+    </div>
+
+    <!-- 单据信息卡片 -->
+    <div class="material-info-card" v-if="processInfo.transNo">
+      <div class="card-title">
+        <span class="title-label">{{ getProcessTitle() }}单据号:</span>
+        <span class="title-value">{{ processInfo.transNo }}</span>
+      </div>
+
+      <div class="card-details">
+        <div class="detail-item">
+          <div class="detail-label">物料编码</div>
+          <div class="detail-value">{{ processInfo.partNo }}</div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label">{{ getQtyLabel() }}</div>
+          <div class="detail-value">
+            <span class="unqualified" :style="getQtyStyle()">{{ processInfo.unqualifiedQty }}</span>
+          </div>
+        </div>
+        <div class="detail-item">
+          <div class="detail-label">已扫描数量</div>
+          <div class="detail-value">
+            <span class="scanned">{{ getTotalScannedQty() }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 处理信息确认标题 -->
+    <div class="section-title" :style="getSectionStyle()">
+      <div class="title-left">
+        <i :class="getProcessIcon()" :style="getIconStyle()"></i>
+        <span :style="getIconStyle()">{{ getProcessTitle() }}信息确认</span>
+      </div>
+    </div>
+
+     <!-- 标签列表 -->
+     <div class="label-list" v-if="scannedItems.length > 0" style="margin: 2px;">
+       <el-form label-position="top" style="margin: 3px;">
+         <el-row :gutter="5"
+                 v-for="(label, index) in scannedItems"
+                 :key="label.id"
+                 :class="index < scannedItems.length - 1 ? 'bottom-line-row' : ''"
+                 style="border: 1px solid #e0e0e0; border-radius: 4px;  padding: 2px 6px;">
+           <el-col :span="12">
+             <el-form-item label="HandlingUnit"><span>{{ label.unitId }}</span></el-form-item>
+           </el-col>
+           <el-col :span="8">
+             <el-form-item label="物料编码"><span>{{ label.partNo }}</span></el-form-item>
+           </el-col>
+           <el-col :span="4">
+             <el-form-item label="数量"><span>{{ label.qty }} {{ label.unit || '个' }}</span></el-form-item>
+           </el-col>
+           <el-col :span="24" v-if="label.partDesc">
+             <el-form-item label="物料描述"><span>{{ label.partDesc }}</span></el-form-item>
+           </el-col>
+           <el-col :span="12" v-if="label.batchNo">
+             <el-form-item label="批次号"><span>{{ label.batchNo }}</span></el-form-item>
+           </el-col>
+           <el-col :span="12" v-if="label.locationId">
+             <el-form-item label="库位"><span>{{ label.locationId }}</span></el-form-item>
+           </el-col>
+         </el-row>
+       </el-form>
+     </div>
+
+      <!-- 空状态 -->
+      <div v-if="scannedItems.length === 0" class="empty-labels">
+        <p>暂无扫描HandlingUnit</p>
+      </div>
+
+    <!-- 底部操作按钮 -->
+    <div class="bottom-actions">
+      <button class="action-btn primary" :style="getButtonStyle()" @click="confirmProcess">
+        确认{{ getProcessTitle() }}
+      </button>
+      <button class="action-btn secondary" :style="getSecondaryButtonStyle()" style="margin-left: 10px;" @click="cancelProcess">
+        取消
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { scanHandlingUnitLabel, confirmUnqualifiedProcess } from '@/api/po/po.js';
+
+export default {
+  data() {
+    return {
+      scanCode: '',
+      processInfo: {},
+      scannedItems: [],
+      isRemoveMode: false, // 默认为添加模式
+      processType: '' // RETURN/SCRAP/EXCHANGE
+    };
+  },
+  computed: {
+    // 处理类型配置
+    processConfig() {
+      const configs = {
+        'RETURN': {
+          title: '退货',
+          color: '#E6A23C',
+          icon: 'el-icon-refresh-left',
+          qtyLabel: '退货数量'
+        },
+        'SCRAP': {
+          title: '报废',
+          color: '#F56C6C',
+          icon: 'el-icon-delete',
+          qtyLabel: '报废数量'
+        },
+        'EXCHANGE': {
+          title: '换货',
+          color: '#409EFF',
+          icon: 'el-icon-refresh',
+          qtyLabel: '换货数量'
+        }
+      };
+      return configs[this.processType] || configs['RETURN'];
+    }
+  },
+  methods: {
+    // 获取处理标题
+    getProcessTitle() {
+      return this.processConfig.title;
+    },
+
+    // 获取数量标签
+    getQtyLabel() {
+      return this.processConfig.qtyLabel;
+    },
+
+    // 获取处理图标
+    getProcessIcon() {
+      return this.processConfig.icon;
+    },
+
+    // 获取头部样式
+    getHeaderStyle() {
+      return `background: ${this.processConfig.color};`;
+    },
+
+    // 获取区域标题样式
+    getSectionStyle() {
+      return `border-bottom: 2px solid ${this.processConfig.color};`;
+    },
+
+    // 获取图标样式
+    getIconStyle() {
+      return `color: ${this.processConfig.color};`;
+    },
+
+    // 获取数量样式
+    getQtyStyle() {
+      return `color: ${this.processConfig.color}; font-weight: 500;`;
+    },
+
+    // 获取主按钮样式
+    getButtonStyle() {
+      return `border: 1px solid ${this.processConfig.color}; background: ${this.processConfig.color}; color: white;`;
+    },
+
+    // 获取次要按钮样式
+    getSecondaryButtonStyle() {
+      return `border: 1px solid ${this.processConfig.color}; background: white; color: ${this.processConfig.color};`;
+    },
+
+    // 处理扫描
+    handleScan() {
+      if (!this.scanCode.trim()) {
+        return;
+      }
+
+      if (this.isRemoveMode) {
+        this.removeLabelByCode(this.scanCode.trim());
+      } else {
+        this.validateAndAddLabel(this.scanCode.trim());
+      }
+      this.scanCode = '';
+    },
+
+    // 验证标签并添加到列表
+    validateAndAddLabel(unitId) {
+      const params = {
+        unitId: unitId,
+        site: this.$store.state.user.site,
+      };
+
+      scanHandlingUnitLabel(params).then(({ data }) => {
+        if (data && data.code === 0 && data.data) {
+          const huInfo = data.data;
+
+          // 检查是否已经扫描过
+          const exists = this.scannedItems.find(item => item.unitId === unitId);
+          if (exists) {
+            this.$message.warning('该HandlingUnit已扫描，请勿重复扫描');
+            return;
+          }
+
+          // 校验HU是否属于当前单据
+          if (huInfo.site !== this.$store.state.user.site) {
+            this.$message.error('HandlingUnit站点不匹配');
+            return;
+          }
+
+          if (huInfo.orderRef2 !== this.processInfo.transNo) {
+            this.$message.error('该HandlingUnit不属于当前接收单，请检查');
+            return;
+          }
+
+          // 检查物料是否匹配
+          if (this.processInfo.partNo && huInfo.partNo !== this.processInfo.partNo) {
+            this.$message.error('物料编码不匹配，请检查');
+            return;
+          }
+
+           // 添加到列表
+           this.scannedItems.push({
+             id: Date.now(),
+             unitId: unitId,
+             partNo: huInfo.partNo,
+             partDesc: huInfo.partDesc,
+             qty: huInfo.qty,
+             unit: huInfo.unit,
+             batchNo: huInfo.batchNo,
+             locationId: huInfo.locationId
+           });
+
+          this.$message.success('扫描成功');
+        } else {
+          this.$message.error(data.msg || 'HandlingUnit不存在或查询失败');
+        }
+      }).catch(error => {
+        this.$message.error('扫描失败');
+      });
+    },
+
+    // 通过条码移除标签
+    removeLabelByCode(unitId) {
+      const index = this.scannedItems.findIndex(item => item.unitId === unitId);
+      if (index !== -1) {
+        this.scannedItems.splice(index, 1);
+        this.$message.success('移除成功');
+      } else {
+        this.$message.warning('未找到该HandlingUnit');
+      }
+    },
+
+    // 获取总扫描数量
+    getTotalScannedQty() {
+      return this.scannedItems.reduce((total, item) => {
+        return total + (parseFloat(item.qty) || 0);
+      }, 0);
+    },
+
+    // 确认处理
+    confirmProcess() {
+      if (this.scannedItems.length === 0) {
+        this.$message.warning('请先扫描HandlingUnit');
+        return;
+      }
+
+      const processTitle = this.getProcessTitle();
+      this.$confirm(`确认要${processTitle}这些物料吗？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.submitConfirmProcess();
+      }).catch(() => {
+        // 用户取消
+      });
+    },
+
+    // 提交确认处理
+    submitConfirmProcess() {
+      const handlingUnitIds = this.scannedItems.map(item => item.unitId);
+      
+      const params = {
+        transNo: this.processInfo.transNo,
+        processType: this.processInfo.processType,
+        handlingUnitIds: handlingUnitIds
+      };
+
+      confirmUnqualifiedProcess(params).then(({ data }) => {
+        if (data && data.code === 0) {
+          const processTitle = this.getProcessTitle();
+          this.$message.success(`${processTitle}处理成功`);
+          this.$router.back();
+        } else {
+          this.$message.error(data.msg || '处理失败');
+        }
+      }).catch(error => {
+        console.error('确认处理失败:', error);
+        this.$message.error('处理失败，请重试');
+      });
+    },
+
+    // 取消处理
+    cancelProcess() {
+      if (this.scannedItems.length > 0) {
+        this.$confirm('取消后将清空已扫描的HandlingUnit，确定取消吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '继续操作',
+          type: 'warning'
+        }).then(() => {
+          this.$router.back();
+        }).catch(() => {
+          // 用户选择继续操作
+        });
+      } else {
+        this.$router.back();
+      }
+    }
+  },
+
+  mounted() {
+    // 获取路由参数
+    const query = this.$route.query;
+    this.processType = query.processType || 'RETURN';
+    this.processInfo = {
+      transNo: query.transNo,
+      itemNo: query.itemNo,
+      processType: query.processType,
+      partNo: query.partNo,
+      unqualifiedQty: query.unqualifiedQty
+    };
+
+    // 如果有传入的扫描项目，恢复它们
+    if (query.scannedItems) {
+      try {
+        this.scannedItems = JSON.parse(query.scannedItems);
+      } catch (e) {
+        console.error('解析扫描项目失败:', e);
+      }
+    }
+
+    // 聚焦扫描框
+    this.$nextTick(() => {
+      if (this.$refs.scanInput) {
+        this.$refs.scanInput.focus();
+      }
+    });
+  }
+};
+</script>
+
+<style scoped>
+/* 复用生产领料页面的样式，只修改必要的部分 */
+.pda-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+}
+
+/* 头部栏 */
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: #17B3A3;
+  color: white;
+  height: 40px;
+  min-height: 40px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.header-left i {
+  margin-right: 8px;
+  font-size: 18px;
+}
+
+.header-right {
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+/* 搜索容器 */
+.search-container {
+  padding: 12px 16px;
+  background: white;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.search-container .el-input {
+  width: 240px;
+  margin-right: 12px;
+}
+
+/* 紧凑型输入框样式 */
+.compact-input ::v-deep .el-input__inner {
+  height: 36px;
+  padding: 0 12px 0 35px;
+  font-size: 14px;
+}
+
+.compact-input ::v-deep .el-input__prefix {
+  left: 10px;
+}
+
+.compact-input ::v-deep .el-input__suffix {
+  right: 30px;
+}
+
+/* 模式切换开关 */
+.mode-switch {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-switch {
+  transform: scale(1.3);
+}
+/* 中间文字 */
+.switch-text {
+  position: absolute;
+  left: 25%;
+  transform: translateX(-50%);
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  font-size: 12px;
+  font-weight: 500;
+  color: #606266;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+  top: 53%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.switch-text2 {
+  position: absolute;
+  left: 75%;
+  transform: translateX(-50%);
+  top: 50%;
+  transform: translateY(-50%) translateX(-50%);
+  font-size: 12px;
+  font-weight: 500;
+  color: #606266;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 1;
+  top: 53%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 调整 switch 尺寸以便容纳文字 */
+.custom-switch ::v-deep .el-switch__core {
+  width: 60px;
+  height: 28px;
+}
+
+/* 物料信息卡片 */
+.material-info-card {
+  background: white;
+  margin: 4px 16px;
+  padding: 6px 20px;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #f0f0f0;
+}
+
+.card-title {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title-label {
+  font-size: 12px;
+  color: #666;
+  font-weight: 500;
+}
+
+.title-value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.2;
+}
+
+.card-details {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.detail-item {
+  flex: 1;
+  text-align: center;
+  min-width: 60px;
+  max-width: 60px;
+}
+
+.detail-label {
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 6px;
+  font-weight: normal;
+  line-height: 1.2;
+  margin-left: -12px;
+}
+
+.detail-value {
+  font-size: 13px;
+  color: #333;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.detail-value .qualified {
+  color: #17B3A3;
+  font-weight: 500;
+}
+
+.detail-value .total {
+  color: #333;
+  font-weight: 500;
+}
+
+.detail-value .total::before {
+  content: '/';
+  color: #333;
+}
+
+/* 区域标题 */
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 8px;
+  background: white;
+  margin: 0 16px;
+  margin-top: 4px;
+  border-radius: 8px 8px 0 0;
+  border-bottom: 2px solid #17B3A3;
+}
+
+.title-left {
+  display: flex;
+  align-items: center;
+}
+
+.title-left i {
+  color: #17B3A3;
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.title-left span {
+  color: #17B3A3;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.title-right {
+  display: flex;
+  align-items: center;
+}
+
+.material-list-link {
+  color: #17B3A3;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: underline;
+  transition: color 0.2s ease;
+}
+
+.material-list-link:hover {
+  color: #0d8f7f;
+}
+
+/* 标签列表 */
+.label-list {
+  background: white;
+  margin: 0 16px 12px;
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+}
+
+.label-list .el-form-item {
+  margin-bottom: 1px;
+}
+
+.label-list .el-form-item__label {
+  padding-bottom: 1px;
+  margin-bottom: 0;
+  line-height: 1.1;
+  font-size: 11px;
+}
+
+.label-list .el-form-item__content {
+  line-height: 1.2;
+  font-size: 12px;
+}
+
+.empty-labels {
+  padding: 40px 20px;
+  text-align: center;
+  color: #999;
+}
+
+.empty-labels p {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* 底部操作按钮 */
+.bottom-actions {
+  display: flex;
+  padding: 16px;
+  gap: 20px;
+  background: white;
+  margin-top: auto;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 12px;
+  border: 1px solid #17B3A3;
+  background: white;
+  color: #17B3A3;
+  border-radius: 20px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: #17B3A3;
+  color: white;
+}
+
+.action-btn:active {
+  transform: scale(0.98);
+}
+
+/* 物料清单弹窗样式 */
+.material-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.material-modal {
+  background: white;
+  border-radius: 12px;
+  width: 100%;
+  max-width: 800px;
+  max-height: 80vh;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.material-modal .modal-header {
+  background: #17B3A3;
+  color: white;
+  padding: 5px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 28px;
+}
+
+.close-btn {
+  font-size: 16px;
+  cursor: pointer;
+  color: white;
+  transition: color 0.2s ease;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #e0e0e0;
+}
+
+.material-modal .modal-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+  line-height: 1.2;
+}
+
+.material-modal .modal-body {
+  flex: 1;
+  overflow: auto;
+  padding: 0;
+}
+
+.material-table {
+  width: 100%;
+}
+
+.table-header {
+  display: flex;
+  background: #f8f9fa;
+  padding: 10px 6px;
+  border-bottom: 2px solid #17B3A3;
+  font-size: 12px;
+  color: #333;
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.table-body {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.table-row {
+  display: flex;
+  padding: 10px 6px;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 12px;
+  color: #333;
+  transition: background-color 0.2s ease;
+}
+
+.table-row:hover {
+  background-color: #f8f9fa;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.material-table .col-no {
+  width: 25px;
+  text-align: center;
+  flex-shrink: 0;
+  font-size: 12px;
+}
+
+.material-table .col-material-code {
+  flex: 1.8;
+  text-align: center;
+  min-width: 100px;
+  font-size: 12px;
+  word-break: break-all;
+}
+
+.material-table .col-required-qty {
+  flex: 0.8;
+  text-align: center;
+  min-width: 65px;
+  font-size: 12px;
+}
+
+.material-table .col-inbound-qty {
+  flex: 0.8;
+  text-align: center;
+  min-width: 65px;
+  font-size: 12px;
+}
+
+.material-modal .modal-footer {
+  padding: 15px 20px;
+  display: flex;
+  justify-content: center;
+  border-top: 1px solid #f0f0f0;
+}
+
+.btn-close {
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid #17B3A3;
+  background: white;
+  color: #17B3A3;
+}
+
+.btn-close:hover {
+  background: #17B3A3;
+  color: white;
+}
+
+/* 加载状态样式 */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #666;
+}
+
+.loading-container i {
+  font-size: 24px;
+  margin-bottom: 12px;
+  color: #17B3A3;
+}
+
+.loading-container span {
+  font-size: 14px;
+}
+
+/* 空数据状态样式 */
+.empty-material {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #999;
+}
+
+.empty-material i {
+  font-size: 48px;
+  margin-bottom: 16px;
+  color: #ddd;
+}
+
+.empty-material p {
+  margin: 0;
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media (max-width: 360px) {
+  .header-bar {
+    padding: 8px 12px;
+  }
+
+  .search-container {
+    padding: 8px 12px;
+  }
+
+  .material-info-card {
+    margin: 4px 12px;
+    padding: 6px 16px;
+  }
+
+  .section-title {
+    margin: 0 12px;
+    margin-top: 4px;
+  }
+
+  .label-list {
+    margin: 0 12px 8px;
+  }
+
+  .card-details {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .detail-item {
+    flex: 0 0 48%;
+    margin-bottom: 6px;
+    min-width: 50px;
+  }
+
+  .label-list .el-form-item__label {
+    font-size: 10px;
+  }
+
+  .label-list .el-form-item__content {
+    font-size: 10px;
+  }
+
+  .label-list .el-form-item {
+    margin-bottom: 2px;
+  }
+}
+</style>