49 lines
4.1 KiB
Vue
49 lines
4.1 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed } from 'vue'
|
|||
|
|
import { useRoute, useRouter } from 'vue-router'
|
|||
|
|
import { ArrowLeft } from '@lucide/vue'
|
|||
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
|||
|
|
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
|||
|
|
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
|
|||
|
|
import ContractPendingNotice from '../components/ContractPendingNotice.vue'
|
|||
|
|
import type { InventoryTransaction } from '../types'
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const purchaseId = computed(() => typeof route.params.purchaseId === 'string' ? route.params.purchaseId : '')
|
|||
|
|
const fields = ['客户名称', '采购仓库', '采购品类', '商品名称', '商品规格', '商品链接']
|
|||
|
|
const stockFields = ['入库量', '出库量', '库存量', '库存状态']
|
|||
|
|
const orderFields = ['订单编号', '采购数量', '预算单价', '预算总价', '订单状态', '联系人', '联系电话', '收货地址', '订单备注']
|
|||
|
|
const courierFields = ['国内承运商', '国内运单号', '海外承运商', '海外运单号', '预计到达时间']
|
|||
|
|
const transactionColumns: DataTableColumn[] = [
|
|||
|
|
{ key: 'occurredAt', prop: 'occurredAt', label: '时间', minWidth: 155 },
|
|||
|
|
{ key: 'documentType', prop: 'documentType', label: '单据类型', minWidth: 120 },
|
|||
|
|
{ key: 'documentNo', prop: 'documentNo', label: '关联单号', minWidth: 160 },
|
|||
|
|
{ key: 'inboundQuantity', prop: 'inboundQuantity', label: '入库量', width: 95, align: 'right' },
|
|||
|
|
{ key: 'outboundQuantity', prop: 'outboundQuantity', label: '出库量', width: 95, align: 'right' },
|
|||
|
|
{ key: 'balanceQuantity', prop: 'balanceQuantity', label: '结存量', width: 95, align: 'right' },
|
|||
|
|
{ key: 'remark', prop: 'remark', label: '备注', minWidth: 180 },
|
|||
|
|
]
|
|||
|
|
const transactions: InventoryTransaction[] = []
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<AdminPage><DetailPageLayout aria-label="海外采购订单详情">
|
|||
|
|
<template #header><div class="detail-header"><div><h2>海外采购订单详情</h2><span>订单标识：{{ purchaseId || '—' }}</span></div><el-button @click="router.push({ name: 'overseas-business-purchases' })"><ArrowLeft :size="16" />返回</el-button></div></template>
|
|||
|
|
<ContractPendingNotice domain="海外采购订单详情" />
|
|||
|
|
<div class="detail-surface surface-panel">
|
|||
|
|
<div class="detail-grid">
|
|||
|
|
<section><h3>商品信息</h3><dl><div v-for="label in fields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl></section>
|
|||
|
|
<section><h3>库存信息</h3><dl><div v-for="label in stockFields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl></section>
|
|||
|
|
<section><h3>订单信息</h3><dl><div v-for="label in orderFields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl></section>
|
|||
|
|
<section><h3>快递信息</h3><dl><div v-for="label in courierFields" :key="label"><dt>{{ label }}</dt><dd>—</dd></div></dl></section>
|
|||
|
|
<section class="full"><h3>进销存明细</h3><DataTable :data="transactions" :columns="transactionColumns" row-key="id" empty-text="进销存明细接口待接入" /></section>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</DetailPageLayout></AdminPage>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.detail-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border:1px solid var(--cc-border); border-radius:8px; background:#fff; }.detail-header h2 { margin:0; font-size:16px; }.detail-header span { display:block; margin-top:4px; color:var(--cc-muted); font-size:12px; }.detail-surface { padding:20px; }.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }.detail-grid section { padding:0 0 18px; border-bottom:1px solid var(--cc-border); }.detail-grid section:nth-last-child(-n+2) { border-bottom:0; }.detail-grid h3 { margin:0 0 12px; font-size:14px; }.detail-grid .full { grid-column:1 / -1; padding-top:18px; }.detail-grid dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 18px; margin:0; }.detail-grid dl div { min-width:0; }.detail-grid dt { color:var(--cc-muted); font-size:12px; }.detail-grid dd { margin:4px 0 0; color:var(--cc-text); font-size:13px; }
|
|||
|
|
</style>
|