art-design/src/components/custom/ProcurementDetailView.vue

<template>
  <div class="detail-wrap">
    <div class="detail-grid">
      <div class="item">
        <span class="label">采购单号:</span>
        <span class="value">{{ detailData.order_no || '—' }}</span>
      </div>
      <div class="item">
        <span class="label">PI号:</span>
        <span class="value">{{ detailData.pi_no || '—' }}</span>
      </div>
      <div class="item">
        <span class="label">提交人:</span>
        <span class="value">{{ detailData.buyer_name || '—' }}</span>
      </div>
      <div class="item full">
        <span class="label">备注:</span>
        <span class="value">{{ detailData.remark || '—' }}</span>
      </div>
    </div>

    <div class="detail-block">
      <div class="block-title">合同文件</div>
      <div
        v-if="detailData.contract_file_url && detailData.contract_file_url.length"
        class="files-list"
      >
        <div class="file-row" v-for="(f, idx) in detailData.contract_file_url" :key="idx">
          <el-icon class="file-icon"><Document /></el-icon>
          <span class="file-name">{{ f.name }}</span>
          <a class="el-link el-link--primary" :href="f.url" target="_blank" rel="noopener">查看</a>
          <a class="el-link el-link--info" :href="f.url" :download="f.name">下载</a>
        </div>
      </div>
      <div v-else class="empty-tip">无合同文件</div>
    </div>

    <div class="detail-block">
      <div class="block-title">备货单组</div>
      <div v-if="detailData.stock_order && detailData.stock_order.length" class="groups">
        <div class="group" v-for="(g, gi) in detailData.stock_order" :key="gi">
          <div class="group-head">
            <span class="order">{{ g.order_no || '备货单' }}</span>
            <span class="seller" v-if="g.salesperson_snapshot"
              >（{{ g.salesperson_snapshot }}）</span
            >
            <span class="date" v-if="g.biz_date">{{ g.biz_date }}</span>
          </div>
          <div class="chips">
            <span class="chip" v-for="(v, vi) in g.stock_order_items || []" :key="vi">
              {{ v.model_snapshot }}
            </span>
          </div>
        </div>
      </div>
      <div v-else class="empty-tip">无备货单数据</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Document } from '@element-plus/icons-vue'
  import { PropType } from 'vue'
  interface DetailData {
    order_no?: string
    pi_no?: string
    buyer_name?: string
    remark?: string
    contract_file_url?: Array<{ name: string; url: string }>
    stock_order?: Array<{
      order_no?: string
      salesperson_snapshot?: string
      biz_date?: string
      stock_order_items?: Array<{ model_snapshot: string }>
    }>
  }

  defineProps({
    detailData: {
      type: Object as PropType<DetailData>,
      required: true
    }
  })
</script>

<style scoped lang="scss">
  .detail-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 16px;
  }
  .detail-grid .item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .detail-grid .item.full {
    grid-column: 1 / -1;
  }
  .detail-grid .label {
    color: var(--el-text-color-regular);
  }
  .detail-grid .value {
    font-weight: 600;
    color: var(--el-text-color-primary);
  }
  .detail-block {
    border-top: 1px dashed var(--el-border-color-lighter);
    padding-top: 8px;
  }
  .block-title {
    font-weight: 600;
    margin-bottom: 8px;
  }
  .files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .file-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .file-name {
    flex: 1;
  }
  .empty-tip {
    color: var(--el-text-color-secondary);
  }
  .groups {
    display: flex;
    flex-direction: column;
    max-height: 38vh;
    overflow-y: auto;
    gap: 12px;
  }
  .group {
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 10px;
    padding: 14px 6px 8px;
    background: var(--el-fill-color-blank);
  }
  .group-head {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-content: center;
  }
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .chip {
    padding: 4px 8px;
    border-radius: 12px;
    background: #f0f6ff;
    color: #3a7af3;
    border: 1px solid #e3edff;
    font-size: 12px;
    line-height: 18px;
  }
</style>