优化

2026-08-19 16:45:51 +08:00
parent d1de19dc82
commit 65cd9ecefa
79 changed files with 3397 additions and 38 deletions
@@ -0,0 +1,62 @@
+<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 orderId = computed(() => String(route.params.orderId || '—'))
+
+const groups = [
+  { title: '单据信息', fields: ['入库单号', '入仓码', '类型', '货主', '关联订单'] },
+  { title: '仓储信息', fields: ['海外仓', 'FBA仓库', '总箱数', '计费体积(m³)', '总托盘数'] },
+  { title: '预约与排车', fields: ['状态', '预约状态', '预约送仓时间', '预计装车时间', '排车状态', '创建时间', '更新时间', '备注'] },
+]
+const feeColumns: DataTableColumn[] = [
+  { key: 'index', label: '序号', width: 70, align: 'center' },
+  { key: 'name', label: '费用项目', minWidth: 180 },
+  { key: 'currency', label: '币种', width: 100 },
+  { key: 'amount', label: '金额', width: 140, align: 'right' },
+  { key: 'remark', label: '备注', minWidth: 200 },
+]
+
+function back() {
+  void router.push({ name: 'overseas-inbound-orders' })
+}
+</script>
+
+<template>
+  <OverseasDetailShell title="入库单详情" reference-label="入库单号" :reference-value="orderId" back-label="返回入库单" domain="入库单详情" @back="back">
+    <section class="detail-section" aria-label="入库单基本信息">
+      <div class="detail-groups">
+        <section v-for="group in groups" :key="group.title" class="detail-group" :aria-label="group.title">
+          <h2>{{ group.title }}</h2>
+          <dl class="detail-fields"><div v-for="label in group.fields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl>
+        </section>
+      </div>
+    </section>
+    <section class="detail-section fee-section" aria-labelledby="inbound-fees-heading">
+      <h2 id="inbound-fees-heading">应收费用明细</h2>
+      <DataTable :data="[]" :columns="feeColumns" column-settings-mode="hide" empty-text="海外区域应收费用契约待接入" />
+      <footer class="fee-total"><span>应收费用合计（USD）</span><strong>—</strong></footer>
+    </section>
+  </OverseasDetailShell>
+</template>
+
+<style scoped>
+.detail-section { min-width: 0; border: 1px solid var(--cc-border); background: #fff; }
+.detail-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.detail-group { min-width: 0; padding: 16px 18px 18px; border-right: 1px solid var(--cc-border); }
+.detail-group:last-child { border-right: 0; }
+.detail-group h2, .fee-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); overflow-wrap: anywhere; }
+.fee-section { overflow: hidden; padding-top: 16px; }
+.fee-section h2 { margin-right: 18px; margin-left: 18px; }
+.fee-total { display: flex; min-height: 48px; align-items: center; justify-content: flex-end; gap: 40px; padding: 10px 18px; border-top: 1px solid var(--cc-border); color: var(--cc-text); }
+.fee-total strong { min-width: 120px; font-size: 16px; }
+</style>