admin-web/src/modules/overseas-warehouse/pages/InventoryDetailView.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import OverseasDetailShell from '../components/OverseasDetailShell.vue'

const route = useRoute()
const router = useRouter()
const inventoryId = computed(() => String(route.params.inventoryId || '—'))

const productFields = ['客户', '海外仓', 'SKU编码', '中文品名', '英文品名', '更新时间']
const stockFields = ['在库总量', '可用库存', '暂扣库存', '美本土散版', '在途库存', '采购库存', '预计总量']
const locationColumns: DataTableColumn[] = [
  { key: 'location', label: '库位', minWidth: 130 },
  { key: 'status', label: '库存状态', width: 120 },
  { key: 'palletNo', label: '托盘号', minWidth: 150 },
  { key: 'cartons', label: '箱数', width: 90, align: 'right' },
  { key: 'quantity', label: '库存数量', width: 110, align: 'right' },
  { key: 'available', label: '可用数量', width: 110, align: 'right' },
  { key: 'inboundDate', label: '入库日期', width: 130 },
  { key: 'ageDays', label: '库龄(天)', width: 100, align: 'right' },
]
const palletColumns: DataTableColumn[] = [
  { key: 'palletNo', label: '托盘号', minWidth: 150 },
  { key: 'cartons', label: '关联箱数', width: 110, align: 'right' },
  { key: 'cartonRange', label: '箱号范围', minWidth: 200 },
  { key: 'location', label: '库位', minWidth: 130 },
  { key: 'quantity', label: '库存数量', width: 110, align: 'right' },
]
const ledgerColumns: DataTableColumn[] = [
  { key: 'occurredAt', label: '发生时间', minWidth: 160 },
  { key: 'businessType', label: '业务类型', width: 120 },
  { key: 'businessOrderNo', label: '业务订单号', minWidth: 170 },
  { key: 'inboundOrderNo', label: '入库单号', minWidth: 160 },
  { key: 'outboundOrderNo', label: '出库单号', minWidth: 160 },
  { key: 'location', label: '库位', minWidth: 120 },
  { key: 'inboundQuantity', label: '入库数量', width: 110, align: 'right' },
  { key: 'outboundQuantity', label: '出库数量', width: 110, align: 'right' },
  { key: 'balance', label: '结存', width: 100, align: 'right' },
  { key: 'operator', label: '操作人', minWidth: 120 },
  { key: 'remark', label: '备注', minWidth: 180 },
]

function back() {
  void router.push({ name: 'overseas-inventory' })
}
</script>

<template>
  <OverseasDetailShell title="库存详情" reference-label="库存记录" :reference-value="inventoryId" back-label="返回库存管理" domain="库存详情" @back="back">
    <section class="overview-panel" aria-label="库存概览">
      <section aria-labelledby="inventory-product-heading">
        <h2 id="inventory-product-heading">商品信息</h2>
        <dl class="detail-fields"><div v-for="label in productFields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl>
      </section>
      <section aria-labelledby="inventory-summary-heading">
        <h2 id="inventory-summary-heading">库存状态汇总</h2>
        <dl class="detail-fields"><div v-for="label in stockFields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl>
      </section>
    </section>
    <section class="ledger-section" aria-labelledby="inventory-location-heading">
      <h2 id="inventory-location-heading">库位库存</h2>
      <DataTable :data="[]" :columns="locationColumns" column-settings-mode="hide" empty-text="海外区域库位库存契约待接入" />
    </section>
    <section class="ledger-section" aria-labelledby="inventory-pallet-heading">
      <h2 id="inventory-pallet-heading">托盘箱号信息</h2>
      <DataTable :data="[]" :columns="palletColumns" column-settings-mode="hide" empty-text="海外区域托盘箱号契约待接入" />
    </section>
    <section class="ledger-section" aria-labelledby="inventory-ledger-heading">
      <h2 id="inventory-ledger-heading">进销存单据明细</h2>
      <DataTable :data="[]" :columns="ledgerColumns" column-settings-mode="hide" empty-text="海外区域进销存契约待接入" />
    </section>
  </OverseasDetailShell>
</template>

<style scoped>
.overview-panel { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--cc-border); background: #fff; }
.overview-panel > section { min-width: 0; padding: 16px 18px 18px; border-right: 1px solid var(--cc-border); }
.overview-panel > section:last-child { border-right: 0; }
.overview-panel h2, .ledger-section h2 { margin: 0 0 12px; color: var(--cc-text); font-size: 15px; }
.detail-fields { margin: 0; border-top: 1px solid var(--cc-border); border-left: 1px solid var(--cc-border); }
.detail-fields > div { display: grid; min-width: 0; min-height: 46px; grid-template-columns: 120px minmax(0, 1fr); border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }
.detail-fields dt, .detail-fields dd { display: flex; min-width: 0; align-items: center; padding: 8px 10px; }
.detail-fields dt { background: #f8fafc; color: var(--cc-muted); font-size: 12px; }
.detail-fields dd { margin: 0; color: var(--cc-text); }
.ledger-section { min-width: 0; overflow: hidden; padding-top: 16px; border: 1px solid var(--cc-border); background: #fff; }
.ledger-section h2 { margin-right: 18px; margin-left: 18px; }
</style>