wms-pda/src/views/modules/recv/inspectionResults.vue

<template>
  <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>

          <!-- 扫描的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>
</template>

<script>
import { getUnqualifiedInspectionList, scanHandlingUnitLabel } from "@/api/po/po.js";

export default {
  data() {
    return {
      processFlag: 1, // 1-不合格列表, 2-处理确认
      scanCode: '',
      unqualifiedList: [],
      scannedItems: [],
      selectedItem: {},
      site: localStorage.getItem('site')
    };
  },
  methods: {
    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)
        }
      });
    },

    // 移除扫描的项目
    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] || '数量';
    },

    // 获取数量样式
    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(() => {
      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: 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);
}

.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-around;
}

.process-type-selector .el-radio {
  margin-right: 0;
}

.section-title {
  background: #17b3a3;
  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>