admin-web/src/modules/domestic-containers/pages/DomesticContainerInventoryDetailView.vue

<script setup lang="ts">
import '@/styles/adminDensity.css'
import '@/styles/adminWorkbench.css'
import { onMounted, ref } from 'vue'
import { ArrowLeft } from '@lucide/vue'
import { useRoute, useRouter } from 'vue-router'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import { getDomesticContainerInventory } from '../api/domesticContainers'
import type { InventoryDetail, InventoryStatus, TransactionRecord } from '../types'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const error = ref<ApiErrorDetails | null>(null)
const detail = ref<InventoryDetail | null>(null)

const transactionColumns: DataTableColumn[] = [
  { prop: 'businessType', label: '业务类型', width: 110, slotName: 'businessType' },
  { prop: 'orderNo', label: '单号', minWidth: 210 },
  { prop: 'quantity', label: '数量', width: 110, align: 'right', formatter: (row: TransactionRecord) => `${row.quantity} 箱` },
  { prop: 'operationTime', label: '操作时间', width: 170, formatter: (row: TransactionRecord) => displayTime(row.operationTime) },
  { prop: 'remark', label: '备注', minWidth: 180, formatter: (row: TransactionRecord) => row.remark || '—' },
]

function inventoryStatus(status: InventoryStatus) {
  return ({ IN_STOCK: '在库', PARTIALLY_OUTBOUND: '部分出库', OUTBOUND: '已出库' } as const)[status]
}

function displayTime(value: string) {
  return value ? value.replace('T', ' ').slice(0, 16) : '—'
}

function back() {
  void router.push({ name: 'domestic-containers' })
}

async function load() {
  loading.value = true
  error.value = null
  try {
    detail.value = await getDomesticContainerInventory(String(route.params.inventoryId))
  } catch (cause) {
    error.value = getApiErrorDetails(cause, '整柜库存详情加载失败')
  } finally {
    loading.value = false
  }
}

onMounted(load)
</script>

<template>
  <AdminPage as="div" class="inventory-detail-page admin-density admin-workbench">
    <section class="inventory-overview workbench-panel is-flush is-page-surface">
      <header class="density-detail-header">
        <div class="density-detail-heading">
          <el-button link class="density-back" aria-label="返回整柜业务" @click="back"><ArrowLeft :size="16" />返回列表</el-button>
          <h1 class="density-detail-title">{{ detail?.inventory.containerNo || '整柜库存详情' }}</h1>
          <StatusBadge v-if="detail" :status="inventoryStatus(detail.inventory.inventoryStatus)" />
        </div>
      </header>

    <LoadErrorState v-if="error" title="整柜库存详情加载失败" :message="error.message" :loading="loading" @retry="load">
      <template #details><ApiErrorMeta :details="error" /></template>
    </LoadErrorState>

      <section v-else-if="detail" class="detail-section" aria-labelledby="inventory-basic-heading">
        <h2 id="inventory-basic-heading">整柜信息</h2>
        <dl class="detail-fields density-fields">
          <div><dt>货物名称</dt><dd>{{ detail.inventory.cargoName }}</dd></div>
          <div><dt>集装箱号</dt><dd>{{ detail.inventory.containerNo }}</dd></div>
          <div><dt>国内仓</dt><dd>{{ detail.inventory.warehouseName }}</dd></div>
          <div><dt>库存状态</dt><dd>{{ inventoryStatus(detail.inventory.inventoryStatus) }}</dd></div>
          <div><dt>入库单数量</dt><dd>{{ detail.inboundOrderCount }}</dd></div>
          <div><dt>出库单数量</dt><dd>{{ detail.outboundOrderCount }}</dd></div>
          <div><dt>入库箱数</dt><dd>{{ detail.inventory.inboundBoxes }} 箱</dd></div>
          <div><dt>已出库箱数</dt><dd>{{ detail.inventory.outboundBoxes }} 箱</dd></div>
          <div><dt>当前库存</dt><dd><strong class="inventory-available">{{ detail.inventory.availableBoxes }}</strong> 箱</dd></div>
          <div><dt>累计入库体积</dt><dd>{{ detail.inventory.inboundVolumeCbm.toFixed(2) }} m³</dd></div>
          <div><dt>最后更新时间</dt><dd>{{ displayTime(detail.inventory.updatedAt) }}</dd></div>
          <div><dt>库存版本</dt><dd>{{ detail.inventory.version }}</dd></div>
        </dl>
      </section>
      <div v-else class="detail-loading" v-loading="loading">正在加载整柜库存详情</div>
    </section>

      <section v-if="detail && !error" class="transactions" aria-labelledby="transactions-heading">
        <h2 id="transactions-heading">进销存交易记录</h2>
        <div class="transactions-table workbench-table is-page-surface"><DataTable :data="detail.transactions" :columns="transactionColumns" row-key="id" stripe column-settings-mode="hide" empty-text="暂无进销存流水">
          <template #businessType="{ row }"><el-tag :type="row.businessType === 'INBOUND' ? 'success' : 'primary'" effect="light" size="small" round>{{ row.businessType === 'INBOUND' ? '入库' : '出库' }}</el-tag></template>
        </DataTable></div>
      </section>
  </AdminPage>
</template>

<style scoped>
.inventory-detail-page { display: grid; min-width: 0; gap: var(--admin-space-5, 12px); }
.inventory-overview { min-width: 0; }
.transactions { min-width: 0; }
.detail-section { min-width: 0; padding: 0 var(--admin-space-5, 12px) var(--admin-space-5, 12px); }
.detail-section h2, .transactions h2 { margin: 0; font-size: var(--admin-font-section, 14px); letter-spacing: 0; }
.detail-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--admin-space-3, 8px) 0 0; }
.transactions { padding-top: var(--admin-space-5, 12px); overflow: hidden; }
.transactions h2 { margin: 0 var(--admin-space-5, 12px) var(--admin-space-3, 8px); }
.transactions-table { padding: 0 var(--admin-space-5, 12px); }
.inventory-available { color: var(--workbench-number); font-variant-numeric: tabular-nums; }
.detail-loading { min-height: 180px; padding: var(--admin-space-7, 24px); border: 1px solid var(--workbench-border); background: var(--admin-surface, #fff); color: var(--workbench-muted); }
@media (max-width: 960px) { .detail-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .density-detail-heading { flex-wrap: wrap; } .density-detail-title { width: 100%; font-size: 18px; } .detail-fields { grid-template-columns: 1fr; } }
</style>