Industrial-image-management-system---web/src/views/system-resource/device-management/procurement/components/ReceiptDetailModal.vue

<template>
  <a-modal
    :visible="visible"
    title="收货详情"
    width="800px"
    @cancel="handleCancel"
    :footer="false"
  >
    <div class="receipt-detail">
      <!-- 基本信息 -->
      <a-card title="基本信息" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="设备名称">
            {{ receiptData?.equipmentName || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="设备类型">
            {{ receiptData?.equipmentType || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="设备型号">
            {{ receiptData?.equipmentModel || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="品牌">
            {{ receiptData?.brand || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="供应商">
            {{ receiptData?.supplierName || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="采购订单">
            {{ receiptData?.purchaseOrder || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 收货信息 -->
      <a-card title="收货信息" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="收货状态">
            <a-tag :color="getReceiptStatusColor(receiptData?.receiptStatus)">
              {{ getReceiptStatusText(receiptData?.receiptStatus) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="收货时间">
            {{ receiptData?.receiptTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="收货人">
            {{ receiptData?.receiptPerson || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="收货数量">
            {{ receiptData?.receiptQuantity || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="收货备注" :span="2">
            {{ receiptData?.receiptRemark || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 质量检查 -->
      <a-card title="质量检查" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="外观检查">
            {{ receiptData?.appearanceCheck || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="功能测试">
            {{ receiptData?.functionTest || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="包装完整性">
            {{ receiptData?.packageIntegrity || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="配件完整性">
            {{ receiptData?.accessoryIntegrity || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="检查结果" :span="2">
            <a-tag :color="getCheckResultColor(receiptData?.checkResult)">
              {{ getCheckResultText(receiptData?.checkResult) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="检查备注" :span="2">
            {{ receiptData?.checkRemark || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 入库信息 -->
      <a-card title="入库信息" class="detail-card" :bordered="false">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="入库状态">
            <a-tag :color="getStorageStatusColor(receiptData?.storageStatus)">
              {{ getStorageStatusText(receiptData?.storageStatus) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="入库时间">
            {{ receiptData?.storageTime || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="入库位置">
            {{ receiptData?.storageLocation || '-' }}
          </a-descriptions-item>
          <a-descriptions-item label="库管员">
            {{ receiptData?.storageManager || '-' }}
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { EquipmentResp } from '@/apis/equipment/type'

interface Props {
  visible: boolean
  receiptData?: EquipmentResp | null
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  receiptData: null,
})

const emit = defineEmits<{
  'update:visible': [value: boolean]
}>()

// 获取收货状态颜色
const getReceiptStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    NOT_RECEIVED: 'gray',
    RECEIVED: 'green',
    PARTIALLY_RECEIVED: 'orange',
    REJECTED: 'red',
  }
  return colorMap[status || ''] || 'blue'
}

// 获取收货状态文本
const getReceiptStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    NOT_RECEIVED: '未收货',
    RECEIVED: '已收货',
    PARTIALLY_RECEIVED: '部分收货',
    REJECTED: '已拒收',
  }
  return textMap[status || ''] || '未知'
}

// 获取检查结果颜色
const getCheckResultColor = (result?: string) => {
  const colorMap: Record<string, string> = {
    PASS: 'green',
    FAIL: 'red',
    CONDITIONAL: 'orange',
  }
  return colorMap[result || ''] || 'blue'
}

// 获取检查结果文本
const getCheckResultText = (result?: string) => {
  const textMap: Record<string, string> = {
    PASS: '通过',
    FAIL: '不通过',
    CONDITIONAL: '有条件通过',
  }
  return textMap[result || ''] || '未知'
}

// 获取入库状态颜色
const getStorageStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    NOT_STORED: 'gray',
    STORED: 'green',
    PARTIALLY_STORED: 'orange',
  }
  return colorMap[status || ''] || 'blue'
}

// 获取入库状态文本
const getStorageStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    NOT_STORED: '未入库',
    STORED: '已入库',
    PARTIALLY_STORED: '部分入库',
  }
  return textMap[status || ''] || '未知'
}

// 取消
const handleCancel = () => {
  emit('update:visible', false)
}
</script>

<style scoped lang="scss">
.receipt-detail {
  .detail-card {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .arco-descriptions-item-label {
    font-weight: 600;
    color: var(--color-text-1);
  }
  
  .arco-descriptions-item-value {
    color: var(--color-text-2);
  }
}
</style>