优化

src/modules/ocean-bookings/pages/OceanBookingsView.vue

@@ -13,6 +13,7 @@ import { getApiErrorDetails } from '@/shared/api/http'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listOceanBookings, type OceanBookingResource } from '../api/platformOceanBookings'
 import type { OceanBookingQuery, OceanBookingStatus } from '../types'
+import { oceanBookingStatusLabel, oceanBookingStatusOptions } from '../status'
 
 const router = useRouter()
 const access = useAccessPreviewStore()
@@ -23,13 +24,9 @@ const page = ref(1)
 const pageSize = ref(20)
 const total = ref(0)
 const query = reactive<QueryModel>({ keyword: '', status: '' })
-const statuses: Array<{ label: string; value: string }> = [
-  { label: '草稿', value: 'DRAFT' }, { label: '已提交', value: 'SUBMITTED' }, { label: '已确认', value: 'CONFIRMED' },
-  { label: '已放舱', value: 'RELEASED' }, { label: '失败', value: 'FAILED' }, { label: '变更中', value: 'CHANGE_PENDING' }, { label: '已取消', value: 'CANCELLED' },
-]
 const fields: QueryField[] = [
   { key: 'keyword', type: 'input', label: '关键词', placeholder: '订舱号/订单号/客户', width: 220 },
-  { key: 'status', type: 'select', label: '状态', options: statuses },
+  { key: 'status', type: 'select', label: '状态', options: oceanBookingStatusOptions },
 ]
 const columns = [
   { key: 'actions', label: '操作', fixed: 'left', width: 170, slotName: 'actions', hideable: false, movable: false },
@@ -54,7 +51,7 @@ watch([page, pageSize], () => void load()); onMounted(load)
         <template #toolbar-actions><el-button v-if="access.can('platform:firstleg:ocean-booking:create')" type="primary" @click="open()"><Plus :size="16" />新增订舱</el-button></template>
         <template #actions="{ row }"><el-button v-if="access.can('platform:firstleg:ocean-booking:view')" link type="primary" @click="open(row.id)"><Eye :size="15" />查看</el-button><el-button v-if="access.can('platform:firstleg:ocean-booking:edit')" link @click="open(row.id)"><Pencil :size="15" />编辑</el-button></template>
         <template #vessel="{ row }">{{ row.vesselName || '—' }}<span v-if="row.voyageNo"> / {{ row.voyageNo }}</span></template>
-        <template #status="{ row }"><StatusBadge :status="row.status" /></template>
+        <template #status="{ row }"><StatusBadge :status="oceanBookingStatusLabel(row.status)" /></template>
       </DataTable>
       </section>
     </ListPageLayout>