klp-oa/klp-ui/src/views/wms/coil/components/CoilInfo.vue

<template>
  <el-descriptions
    :column="column"
    :border="true"
    size="small"
  >
    <el-descriptions-item label="入场卷号">{{ coilInfo.enterCoilNo || '-' }}</el-descriptions-item>
    <el-descriptions-item label="当前卷号">{{ coilInfo.currentCoilNo || '-' }}</el-descriptions-item>
    <el-descriptions-item label="厂家原料号">{{ coilInfo.supplierCoilNo || '-' }}</el-descriptions-item>
    <el-descriptions-item label="逻辑库位">{{ coilInfo.warehouseName || '-' }}</el-descriptions-item>
    <el-descriptions-item label="实际库区">{{ coilInfo.actualWarehouseName || '-' }}</el-descriptions-item>

    <el-descriptions-item label="班组">{{ coilInfo.team || '-' }}</el-descriptions-item>
    <el-descriptions-item label="材料类型">{{ coilInfo.materialType || '-' }}</el-descriptions-item>
    <el-descriptions-item label="产品/原料">{{ coilInfo.itemName || '-' }}</el-descriptions-item>
    <el-descriptions-item label="规格">{{ coilInfo.specification || '-' }}</el-descriptions-item>
    <el-descriptions-item label="材质">{{ coilInfo.material || '-' }}</el-descriptions-item>

    <el-descriptions-item label="厂家">{{ coilInfo.manufacturer || '-' }}</el-descriptions-item>
    <el-descriptions-item label="镀层质量">{{ coilInfo.zincLayer || '-' }}</el-descriptions-item>
    <el-descriptions-item label="表面处理">{{ coilInfo.surfaceTreatmentDesc || '-' }}</el-descriptions-item>
    <el-descriptions-item label="质量状态">
      <span :class="getStatusClass(coilInfo.qualityStatus)">{{ coilInfo.qualityStatus || '-' }}</span>
    </el-descriptions-item>
    <el-descriptions-item label="切边要求">{{ coilInfo.trimmingRequirement || '-' }}</el-descriptions-item>

    <el-descriptions-item label="原料材质">{{ coilInfo.packingStatus || '-' }}</el-descriptions-item>
    <el-descriptions-item label="包装要求">{{ coilInfo.packagingRequirement || '-' }}</el-descriptions-item>
    <el-descriptions-item label="实测厚度[mm]">{{ coilInfo.actualThickness || '-' }}</el-descriptions-item>
    <el-descriptions-item label="实测宽度[mm]">{{ coilInfo.actualWidth || '-' }}</el-descriptions-item>
    <el-descriptions-item label="长度[mm]">{{ coilInfo.length || '-' }}</el-descriptions-item>

    <el-descriptions-item label="毛重[t]">{{ coilInfo.grossWeight || '-' }}</el-descriptions-item>
    <el-descriptions-item label="净重[t]">{{ coilInfo.netWeight || '-' }}</el-descriptions-item>
    <el-descriptions-item label="生产开始">{{ coilInfo.productionStartTime || '-' }}</el-descriptions-item>
    <el-descriptions-item label="生产结束">{{ coilInfo.productionEndTime || '-' }}</el-descriptions-item>
    <el-descriptions-item label="调制度">{{ coilInfo.temperGrade || '-' }}</el-descriptions-item>

    <el-descriptions-item label="镀层种类">{{ coilInfo.coatingType || '-' }}</el-descriptions-item>
    <el-descriptions-item label="表面处理">{{ coilInfo.coilSurfaceTreatment || '-' }}</el-descriptions-item>
    <el-descriptions-item label="备注" :span="column - 2">{{ coilInfo.remark || '-' }}</el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: 'CoilInfo',
  props: {
    coilInfo: {
      type: Object,
      default: () => ({})
    },
    column: {
      type: Number,
      default: 5
    },
    // 只显示有值的字段
    showOnlyValue: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    getStatusClass(status) {
      if (!status) return ''
      const statusLower = status.toLowerCase()
      if (statusLower.includes('合格')) return 'status-success'
      if (statusLower.includes('不合格')) return 'status-danger'
      if (statusLower.includes('待检')) return 'status-warning'
      return ''
    }
  }
}
</script>

<style scoped>
.status-success {
  color: #67c23a;
  font-weight: 500;
}

.status-danger {
  color: #f56c6c;
  font-weight: 500;
}

.status-warning {
  color: #e6a23c;
  font-weight: 500;
}
</style>