admin-web/src/modules/overseas-business/pages/PurchaseOrderDetailView.vue

<script setup lang="ts">
import '@/styles/adminWorkbench.css'
import '@/styles/adminDensity.css'
import { computed, onActivated, onBeforeUnmount, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@lucide/vue'
import { useAuthStore } from '@/core/auth/auth'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import OperationErrorToast from '@/shared/components/OperationErrorToast.vue'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import { getOverseasPurchase } from '../api/platformOverseasBusiness'
import { downloadProcurementFile } from '../api/procurementCommands'
import { getProcurementWorkflow, type ProcurementWorkflow } from '../api/procurementWorkflow'
import ProcurementWorkflowPanel from '../components/ProcurementWorkflowPanel.vue'
import BusinessDocumentFees from '../components/BusinessDocumentFees.vue'
import { statusLabel, money, dateTime, text } from '../procurementPresentation'
import type { PlatformProcurement } from '../procurementTypes'
import { directionLabel } from '../procurementDirection'
import { hasProcurementFeeDetails } from '../procurementOutboundFees'
const route = useRoute(); const router = useRouter(); const auth = useAuthStore()
const purchaseId = computed(() => typeof route.params.purchaseId === 'string' ? route.params.purchaseId : '')
const customerId = computed(() => typeof route.query.customerId === 'string' ? route.query.customerId : '')
const detail = ref<PlatformProcurement | null>(null), workflow = ref<ProcurementWorkflow | null>(null), loading = ref(false)
const loadError = ref<ApiErrorDetails | null>(null), operationError = ref<ApiErrorDetails | null>(null), downloading = ref('')
const order = computed(() => detail.value?.customerView.order)
const feePanel = ref<InstanceType<typeof BusinessDocumentFees>>()
async function beforeOutbound(): Promise<boolean | null> {
  if (!feePanel.value) return null
  try { return !hasProcurementFeeDetails(await feePanel.value.getFees()) }
  catch { return null }
}
const fields = computed(() => [
  ['客户', order.value?.customerName], ['采购方向', directionLabel(order.value?.procurementDirection)], ['收货仓', order.value?.actualWarehouseName || order.value?.plannedWarehouseName],
  ['采购品类', order.value?.purchaseCategory], ['商品名称', order.value?.productName], ['规格', order.value?.productSpecification],
  ['采购数量', order.value?.purchaseQuantity], ['预算单价', money(order.value?.budgetUnitPrice, order.value?.currency)], ['预计到仓', dateTime(order.value?.estimatedArrivalAt)],
  ['收件人', order.value?.contactName], ['联系电话', order.value?.contactPhone], ['收货地址', order.value?.receivingAddress],
  ...(order.value?.remark ? [['采购要求', order.value.remark]] : []),
  ...(detail.value?.internalRemark || order.value?.remark ? [['采购备注', detail.value?.internalRemark || order.value?.remark]] : []),
])
let generation = 0, inFlight: Promise<void> | null = null, inFlightScope = ''
const scope = computed(() => `${auth.user?.id || ''}:${customerId.value}:${purchaseId.value}`)
onBeforeUnmount(() => { generation++ })
function load() {
  const currentScope = scope.value
  if (inFlight && inFlightScope === currentScope) return inFlight
  const current = ++generation; const number = purchaseId.value; const customer = customerId.value
  detail.value = null; workflow.value = null; loadError.value = null; loading.value = false
  if (!number || !customer) { loadError.value = { message: '缺少采购订单号或客户标识，请从采购订单列表重新进入' }; return Promise.resolve() }
  loading.value = true; inFlightScope = currentScope
  const promise = Promise.all([getOverseasPurchase(number, customer), getProcurementWorkflow(number, customer)]).then(([result, process]) => {
    if (current === generation) { detail.value = result; workflow.value = process }
  }).catch(error => { if (current === generation) loadError.value = getApiErrorDetails(error, '采购详情加载失败') }).finally(() => {
    if (current === generation) loading.value = false
    if (inFlight === promise) inFlight = null
  })
  inFlight = promise; return promise
}
async function download(fileId: string) {
  if (!order.value || downloading.value) return
  const file = detail.value?.files.find(item => item.fileId === fileId)
  downloading.value = fileId; operationError.value = null; const current = scope.value
  try {
    const blob = await downloadProcurementFile(order.value.orderNo, customerId.value, fileId)
    if (scope.value !== current) return
    const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = file?.fileName || fileId; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000)
  } catch (error) { if (scope.value === current) operationError.value = getApiErrorDetails(error, '文件下载失败') }
  finally { downloading.value = '' }
}
let activatedOnce = false
watch(scope, () => { void load() }, { immediate: true })
onActivated(() => { if (activatedOnce) void load(); else activatedOnce = true })
</script>
<template>
  <AdminPage class="admin-density admin-workbench"><OperationErrorToast :details="operationError" />
    <DetailPageLayout class="purchase-detail density-detail-layout workbench-panel is-flush is-page-surface" aria-label="采购订单详情">
      <template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="router.push({ name: 'overseas-business-purchases' })"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ order?.orderNo || '—' }}</h1><StatusBadge v-if="workflow" :status="statusLabel(workflow.status)" /></div><div class="density-actions"><el-button :loading="loading" @click="load">刷新</el-button></div></div></template>
      <LoadErrorState v-if="loadError" title="采购详情暂时无法加载" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
      <div v-else v-loading="loading" class="detail-grid">
        <template v-if="detail && order && workflow">
          <section><h3>采购信息</h3><dl class="density-fields"><div v-for="field in fields" :key="String(field[0])"><dt>{{ field[0] }}</dt><dd>{{ text(field[1]) }}</dd></div></dl></section>
          <ProcurementWorkflowPanel :detail="detail" :workflow="workflow" :customer-id="customerId" :downloading="downloading" :before-outbound="beforeOutbound" @changed="load" @download="download" />
          <BusinessDocumentFees ref="feePanel" business-type="OVERSEAS_PROCUREMENT" :business-no="order.orderNo" :customer-id="customerId" :business-id="order.id" />
        </template>
      </div>
    </DetailPageLayout>
  </AdminPage>
</template>
<style scoped>
.detail-grid { display: grid; min-width: 0; gap: var(--admin-space-5); }
.detail-grid section { min-width: 0; }
.detail-grid h3 { margin: 0 0 var(--admin-space-3); font-size: var(--admin-font-section); }
</style>