优化

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { Eye } from '@lucide/vue'
+import { Eye, Plus } from '@lucide/vue'
+import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
 import DataTable from '@/shared/components/DataTable.vue'
 import StatusBadge from '@/shared/components/StatusBadge.vue'
@@ -16,6 +17,7 @@ import type { OceanBookingQuery, OceanBookingStatus } from '../types'
 import { oceanBookingStatusLabel, oceanBookingStatusOptions } from '../status'
 
 const router = useRouter()
+const access = useAccessPreviewStore()
 const rows = ref<OceanBookingResource[]>([])
 const loading = ref(false)
 const error = ref<ReturnType<typeof getApiErrorDetails> | null>(null)
@@ -26,6 +28,7 @@ const customers = ref<PlatformTenantResource[]>([])
 const customersLoading = ref(false)
 const query = reactive<QueryModel>({ customerId: '', keyword: '', status: '' })
 const activeCustomers = computed(() => customers.value.filter((customer) => customer.status === 'ACTIVE'))
+const canCreate = computed(() => access.can('platform:firstleg:ocean-booking:create'))
 const formalStatusOptions = oceanBookingStatusOptions.filter((item) => ['CONFIRMED', 'CHANGE_PENDING', 'RELEASED', 'CANCELLED'].includes(item.value))
 const fields = computed<QueryField[]>(() => [
   { key: 'customerId', type: 'select', label: '客户', placeholder: '全部客户', width: 220, options: activeCustomers.value.map((customer) => ({ label: customer.tenantName, value: String(customer.id) })), props: { filterable: true, loading: customersLoading.value } },
@@ -50,6 +53,7 @@ function formatDateTime(value?: string | null) { return value ? value.replace('T
 async function loadCustomers() { customersLoading.value = true; try { const result = await listPlatformTenants({ page: 1, size: 200, status: 'ACTIVE' }); customers.value = result.records.filter((customer) => customer.status === 'ACTIVE') } catch { customers.value = [] } finally { customersLoading.value = false } }
 async function load() { loading.value = true; error.value = null; try { const result = await listOceanBookings({ page: page.value, size: pageSize.value, customerId: String(query.customerId || '') || undefined, keyword: String(query.keyword || '') || undefined, status: (query.status || undefined) as OceanBookingStatus | undefined } satisfies OceanBookingQuery); rows.value = result.records; total.value = result.total } catch (e) { error.value = getApiErrorDetails(e) } finally { loading.value = false } }
 function open(id: string) { void router.push(`/ocean-bookings/${id}`) }
+function createBooking() { void router.push('/ocean-bookings/new') }
 function search() { if (page.value === 1) void load(); else page.value = 1 }
 watch([page, pageSize], () => void load()); onMounted(() => { void load(); void loadCustomers() })
 </script>
@@ -60,6 +64,7 @@ watch([page, pageSize], () => void load()); onMounted(() => { void load(); void
       <template v-if="error" #state><LoadErrorState title="订舱列表加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template>
       <section v-if="!error" class="surface-panel table-panel">
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" stripe preference-key="ocean-bookings" aria-label="订舱列表" row-key="id" empty-text="暂无符合筛选条件的订舱">
+        <template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="createBooking"><Plus :size="16" />新增订舱</el-button></template>
         <template #actions="{ row }"><div class="table-actions"><el-button size="small" type="primary" plain @click="open(row.id)"><Eye :size="15" />查看</el-button></div></template>
         <template #vessel="{ row }">{{ row.vesselName || '—' }}<span v-if="row.voyageNo"> / {{ row.voyageNo }}</span></template>
         <template #etd="{ row }">{{ formatDateTime(row.etd) }}</template>