feat(procurement): add sample fulfillment operation workspace

src/modules/overseas-business/pages/PurchaseOrdersView.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
-import { computed, onActivated, onMounted, ref, watch } from 'vue'
+import { computed, onActivated, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/core/auth/auth'
+import { procurementStatuses, statusLabel, money } from '../procurementPresentation'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
@@ -14,16 +16,17 @@ import { listOverseasPurchaseCustomerOptions, listOverseasPurchases } from '../a
 import { overseasBusinessPermissions } from '../permissions'
 import type { OverseasPurchaseCustomerOption, OverseasPurchaseQuery, OverseasPurchaseStatus, OverseasPurchaseSummary } from '../types'
 
-const router = useRouter(); const access = useAccessPreviewStore()
+const router = useRouter(); const access = useAccessPreviewStore(); const auth = useAuthStore()
 const rows = ref<OverseasPurchaseSummary[]>([]); const loading = ref(false); const loadError = ref<ApiErrorDetails | null>(null)
 const page = ref(1); const pageSize = ref(20); const total = ref(0)
-const filters = ref<QueryModel>({ orderNo: '', customerId: '', purchaseCategory: '', productName: '' }); const applied = ref({ ...filters.value })
+const filters = ref<QueryModel>({ orderNo: '', customerId: '', purchaseCategory: '', productName: '', status: '' }); const applied = ref({ ...filters.value })
 const customerOptions = ref<OverseasPurchaseCustomerOption[]>([]); const customersLoading = ref(false)
 const fields = computed<QueryField[]>(() => [
   { key: 'orderNo', type: 'input', label: '订单编号', placeholder: '请输入订单编号', width: 210 },
   { key: 'customerId', type: 'select', label: '客户', placeholder: '全部客户', width: 210, options: customerOptions.value.map((item) => ({ label: item.customerName, value: item.customerId })), props: { filterable: true, loading: customersLoading.value } },
   { key: 'purchaseCategory', type: 'input', label: '采购品类', placeholder: '请输入采购品类', width: 190 },
   { key: 'productName', type: 'input', label: '商品名称', placeholder: '请输入商品名称', width: 210 },
+  { key: 'status', type: 'select', label: '履约状态', placeholder: '全部状态', width: 190, options: Object.entries(procurementStatuses).map(([value, label]) => ({ value, label })) },
 ])
 const columns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 176, fixed: 'left', slotName: 'actions' },
@@ -33,24 +36,30 @@ const columns: DataTableColumn[] = [
   { key: 'purchaseCategory', prop: 'purchaseCategory', label: '采购品类', minWidth: 130 },
   { key: 'productName', prop: 'productName', label: '商品名称', minWidth: 160 },
   { key: 'productSpecification', prop: 'productSpecification', label: '商品规格', minWidth: 180, formatter: (row: OverseasPurchaseSummary) => row.productSpecification || '—' },
-  { key: 'budgetUnitPrice', label: '采购单价', width: 120, align: 'right', formatter: (row: OverseasPurchaseSummary) => formatAmount(row.budgetUnitPrice, row.currency) },
-  { key: 'inboundQuantity', prop: 'inboundQuantity', label: '入库量', width: 95, align: 'right' },
-  { key: 'outboundQuantity', prop: 'outboundQuantity', label: '出库量', width: 95, align: 'right' },
-  { key: 'inventoryQuantity', prop: 'inventoryQuantity', label: '库存量', width: 95, align: 'right' },
-  { key: 'status', label: '状态', width: 105, formatter: (row: OverseasPurchaseSummary) => purchaseStatusLabel(row.status) },
+  { key: 'budgetUnitPrice', label: '预算单价', width: 120, align: 'right', formatter: (row: OverseasPurchaseSummary) => money(row.budgetUnitPrice, row.currency) },
+  { key: 'purchaseQuantity', prop: 'purchaseQuantity', label: '采购数量', width: 100, align: 'right' },
+  { key: 'status', label: '状态', minWidth: 145, formatter: (row: OverseasPurchaseSummary) => statusLabel(row.status) },
   { key: 'createdAt', prop: 'createdAt', label: '创建时间', minWidth: 165, formatter: (row: OverseasPurchaseSummary) => formatDateTime(row.createdAt) },
 ]
-const statusLabels: Record<OverseasPurchaseStatus, string> = { PENDING_REVIEW: '待审核', APPROVED: '已通过', REJECTED: '已拒绝', PENDING_OUTBOUND: '待出库', PARTIALLY_OUTBOUND: '部分出库', OUTBOUNDED: '全部出库' }
-function purchaseStatusLabel(status: OverseasPurchaseStatus) { return statusLabels[status] || status }
-function formatAmount(value: string | null, currency: string) { if (value == null) return '—'; const amount = Number(value); return `${Number.isFinite(amount) ? amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : value} ${currency}` }
 function formatDateTime(value?: string | null) { return value ? value.replace('T', ' ').slice(0, 16) : '—' }
-async function load() {
+let generation = 0; let inFlight: Promise<void> | null = null; let requestKey = ''
+onBeforeUnmount(() => { generation++ })
+function load() {
+  const query: OverseasPurchaseQuery = { page: page.value, size: pageSize.value, customerId: String(applied.value.customerId || ''), orderNo: String(applied.value.orderNo || ''), purchaseCategory: String(applied.value.purchaseCategory || ''), productName: String(applied.value.productName || ''), status: String(applied.value.status || '') as OverseasPurchaseStatus | '' }
+  const key = JSON.stringify([auth.user?.id, query])
+  if (inFlight && key === requestKey) return inFlight
+  requestKey = key; const current = ++generation
   loading.value = true; loadError.value = null
-  try {
-    const result = await listOverseasPurchases({ page: page.value, size: pageSize.value, customerId: String(applied.value.customerId || ''), orderNo: String(applied.value.orderNo || ''), purchaseCategory: String(applied.value.purchaseCategory || ''), productName: String(applied.value.productName || '') } satisfies OverseasPurchaseQuery)
+  const promise = listOverseasPurchases(query).then(result => {
+    if (current !== generation) return
     rows.value = result.records; total.value = result.total
-  } catch (error) { rows.value = []; total.value = 0; loadError.value = getApiErrorDetails(error, '海外采购订单加载失败，请稍后重试') } finally { loading.value = false }
+  }).catch(error => { if (current === generation) { rows.value = []; total.value = 0; loadError.value = getApiErrorDetails(error, '采购订单加载失败，请稍后重试') } }).finally(() => {
+    if (current === generation) loading.value = false
+    if (inFlight === promise) inFlight = null
+  })
+  inFlight = promise; return promise
 }
+watch(() => auth.user?.id, () => { rows.value = []; total.value = 0; void load() })
 function search(model: QueryModel) { applied.value = { ...model }; if (page.value === 1) void load(); else page.value = 1 }
 function open(row: OverseasPurchaseSummary, edit = false) { void router.push({ name: edit ? 'overseas-business-purchase-edit' : 'overseas-business-purchase-detail', params: { purchaseId: row.orderNo }, query: { customerId: row.customerId } }) }
 async function loadCustomerOptions() { customersLoading.value = true; try { customerOptions.value = await listOverseasPurchaseCustomerOptions() } catch { customerOptions.value = [] } finally { customersLoading.value = false } }