96 lines
8.2 KiB
Vue
96 lines
8.2 KiB
Vue
<script setup lang="ts">
|
|
import '@/styles/adminDensity.css'
|
|
import '@/styles/adminWorkbench.css'
|
|
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { 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'
|
|
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
|
import ListPageLayout from '@/shared/components/ListPageLayout.vue'
|
|
import { getApiErrorDetails } from '@/shared/api/http'
|
|
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
|
|
import { listOceanBookings, type OceanBookingResource } from '../api/platformOceanBookings'
|
|
import type { OceanBookingQuery, OceanBookingStatus } from '../types'
|
|
import { oceanBookingStatusLabel, oceanBookingStatusOptions } from '../status'
|
|
import OceanBookingPrintDialog from '../components/OceanBookingPrintDialog.vue'
|
|
|
|
const router = useRouter()
|
|
const access = useAccessPreviewStore()
|
|
const rows = ref<OceanBookingResource[]>([])
|
|
const loading = ref(false)
|
|
const error = ref<ReturnType<typeof getApiErrorDetails> | null>(null)
|
|
const page = ref(1)
|
|
const pageSize = ref(20)
|
|
const total = ref(0)
|
|
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 canPrint = computed(() => access.can('platform:firstleg:ocean-booking:list'))
|
|
const printOpen = ref(false)
|
|
const printBooking = ref<{ id: string; bookingNo?: string | null } | null>(null)
|
|
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 } },
|
|
{ key: 'keyword', type: 'input', label: '关键词', placeholder: '订舱号/提单号/船名/航次', width: 260 },
|
|
{ key: 'status', type: 'select', label: '状态', width: 160, options: oceanBookingStatusOptions },
|
|
])
|
|
const columns = [
|
|
{ key: 'actions', label: '操作', fixed: 'left', width: 196, slotName: 'actions', hideable: false, movable: false },
|
|
{ prop: 'bookingNo', label: '订舱号', minWidth: 150 },
|
|
{ prop: 'customerName', label: '客户', minWidth: 160, formatter: (row: OceanBookingResource) => row.customerName || '—' },
|
|
{ prop: 'billOfLadingNo', label: '提单号', minWidth: 155, formatter: (row: OceanBookingResource) => row.billOfLadingNo || '—' },
|
|
{ prop: 'shipperName', label: '提单发货人', minWidth: 160, formatter: (row: OceanBookingResource) => row.shipperName || '—' },
|
|
{ prop: 'consigneeName', label: '提单收货人', minWidth: 160, formatter: (row: OceanBookingResource) => row.consigneeName || '—' },
|
|
{ prop: 'containerCount', label: '订舱柜量', width: 100, align: 'right' },
|
|
{ prop: 'carrierName', label: '船公司', minWidth: 130 },
|
|
{ prop: 'bookingAgent', label: '订舱代理', minWidth: 140 },
|
|
{ prop: 'vesselName', label: '船名 / 航次', minWidth: 175, slotName: 'vessel' },
|
|
{ prop: 'pol', label: '起运港', minWidth: 125 },
|
|
{ prop: 'pod', label: '目的港', minWidth: 125 },
|
|
{ prop: 'etd', label: '预计开船', minWidth: 155, slotName: 'etd' },
|
|
{ prop: 'eta', label: '预计到港', minWidth: 155, slotName: 'eta' },
|
|
{ prop: 'status', label: '状态', minWidth: 110, slotName: 'status' },
|
|
{ prop: 'updatedAt', label: '更新时间', minWidth: 155, slotName: 'updatedAt' },
|
|
]
|
|
function formatDateTime(value?: string | null) { return value ? value.replace('T', ' ').slice(0, 16) : '—' }
|
|
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 keyword = String(query.keyword ?? '').trim(); const customerId = String(query.customerId ?? '').trim(); const status = String(query.status ?? '').trim(); const result = await listOceanBookings({ page: page.value, size: pageSize.value, customerId: customerId || undefined, keyword: keyword || undefined, status: (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 openPrint(row: Record<string, unknown>) { printBooking.value = { id: String(row.id), bookingNo: typeof row.bookingNo === 'string' ? row.bookingNo : null }; printOpen.value = true }
|
|
function printHint() { return !canPrint.value ? '暂无订舱单据打印权限' : '按当前已保存资料打印出口货物托运单或提单确认件' }
|
|
function search() { if (page.value === 1) void load(); else page.value = 1 }
|
|
watch([page, pageSize], () => void load()); onMounted(() => void loadCustomers())
|
|
onActivated(() => void load())
|
|
</script>
|
|
<template>
|
|
<AdminPage as="div" class="ocean-bookings-page admin-density admin-workbench">
|
|
<ListPageLayout aria-label="订舱列表">
|
|
|
|
|
|
<section><div class="workbench-table is-page-surface"><DataTable appearance="integrated" column-settings-mode="show" :results-visible="!error" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="ocean-bookings" aria-label="订舱列表" row-key="id" empty-text="暂无符合筛选条件的订舱">
|
|
<template #toolbar-start><h1>订舱列表</h1></template>
|
|
<template #filters><QueryToolbar v-model="query" ariaLabel="订舱筛选" :fields="fields" @search="search" /></template>
|
|
<template #notices><template v-if="error"><LoadErrorState title="订舱列表加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template></template>
|
|
|
|
|
|
<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 density-actions row-actions admin-text-actions"><el-button data-tone="primary" class="density-action" size="small" type="primary" plain @click="open(row.id)">{{ row.status === 'DRAFT' ? '编辑' : '查看' }}</el-button><el-tooltip :content="printHint()" placement="top"><span><el-button class="density-action" size="small" plain :disabled="!canPrint" @click="openPrint(row)">打印单据</el-button></span></el-tooltip></div></template>
|
|
<template #vessel="{ row }">{{ row.vesselName || '—' }}<span v-if="row.voyageNo"> / {{ row.voyageNo }}</span></template>
|
|
<template #etd="{ row }">{{ formatDateTime(row.etd) }}</template>
|
|
<template #eta="{ row }">{{ formatDateTime(row.eta) }}</template>
|
|
<template #status="{ row }"><StatusBadge :status="oceanBookingStatusLabel(row.status)" /></template>
|
|
<template #updatedAt="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
|
|
</DataTable></div></section>
|
|
</ListPageLayout>
|
|
<OceanBookingPrintDialog v-if="printBooking" v-model="printOpen" :booking-id="printBooking.id" :booking-no="printBooking.bookingNo" :allowed="canPrint" />
|
|
</AdminPage>
|
|
</template>
|
|
<style scoped>.ocean-bookings-page{min-width:0}.table-actions{flex-wrap:wrap}.table-actions :deep(.el-button){margin-left:0}@media(max-width:420px){.table-actions{flex-direction:column}.table-actions :deep(.el-button){width:100%;min-height:40px}}</style>
|