221 lines
17 KiB
Vue
221 lines
17 KiB
Vue
<script setup lang="ts">
|
||
import { inject, computed, onBeforeUnmount, onMounted, ref, reactive } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { FbaAppointmentFields, createAppointmentForm, appointmentPayload, appointmentFormError, overseasWarehousePermissions } from '@/modules/overseas-warehouse'
|
||
import AppDialog from '@/shared/components/AppDialog.vue'
|
||
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router'
|
||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||
import QueryToolbar, { type QueryModel, type QueryField } from '@/shared/components/QueryToolbar.vue'
|
||
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||
import RowActions from '@/shared/components/RowActions.vue'
|
||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||
import { listPlanningCargo, resolvePlanningSource, previewPlanningBatch, createSourceAppointment, type SourceAppointmentPayload, type PlanningBatchPreview, type ResolvedPlanningSource, type PlanningCargo, type PlanningSource } from './planningApi'
|
||
import AppointmentFollowupDialog from './AppointmentFollowupDialog.vue'
|
||
import AppointmentExternalCandidates from './AppointmentExternalCandidates.vue'
|
||
import AppointmentCargoTabs from './AppointmentCargoTabs.vue'
|
||
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
||
|
||
const router = useRouter()
|
||
const access = useAccessPreviewStore()
|
||
const props = defineProps<{ externalSource?: PlanningSource | null }>()
|
||
const emit = defineEmits<{ created: []; sourceAccepted: [] }>()
|
||
const arrangement = reactive(createAppointmentForm())
|
||
const creating = ref(false), createError = ref<ApiErrorDetails | null>(null)
|
||
const pendingCreate = ref<SourceAppointmentPayload | null>(null)
|
||
const following = ref<ResolvedPlanningSource | null>(null)
|
||
const candidateMode = ref<'firstleg' | 'external'>('firstleg')
|
||
const externalRevision = ref(0)
|
||
const followupError = ref<ApiErrorDetails | null>(null)
|
||
type Selection = Pick<PlanningSource, 'sourceKey' | 'customerId' | 'originWarehouseId' | 'destinationWarehouseCode' | 'inboundCode'> & { bookingNo?: string | null }
|
||
const selected = ref<Record<string, Selection>>({})
|
||
const selectedRows = computed(() => Object.values(selected.value))
|
||
const externalRows = computed(() => selectedRows.value.filter(row => row.sourceKey.startsWith('BOOKING:')))
|
||
const batchPreview = ref<PlanningBatchPreview | null>(null)
|
||
const batchLoading = ref(false), batchError = ref<ApiErrorDetails | null>(null)
|
||
let batchRequest = 0
|
||
function addSource(source: PlanningSource) {
|
||
if (!access.can(overseasWarehousePermissions.inboundOrderAppointment) || batchLoading.value || creating.value) return false
|
||
if (!source.canFollowup) { ElMessage.warning('当前来源尚不能安排预约'); return false }
|
||
const anchor = selectedRows.value[0]
|
||
if (anchor && (anchor.originWarehouseId !== source.originWarehouseId || anchor.destinationWarehouseCode !== source.destinationWarehouseCode)) {
|
||
ElMessage.warning('请先完成或清空当前合批选择；不同起运仓或目的仓不能混入'); return false
|
||
}
|
||
if (!selected.value[source.sourceKey] && selectedRows.value.length >= 100) { ElMessage.warning('每批最多选择100票'); return false }
|
||
selected.value[source.sourceKey] = source; batchError.value = null
|
||
return true
|
||
}
|
||
function acceptExternalSource() {
|
||
if (props.externalSource && addSource(props.externalSource)) emit('sourceAccepted')
|
||
}
|
||
function arrangeFollowing() {
|
||
if (following.value && !following.value.coverage.appointments.length && addSource(following.value.source)) following.value = null
|
||
}
|
||
function selectable(row: PlanningCargo) {
|
||
const anchor = selectedRows.value[0]
|
||
return !row.detained && !row.mixedDestinations && !row.hasActiveAppointment && (!anchor || (anchor.originWarehouseId === row.originWarehouseId && anchor.destinationWarehouseCode === row.destinationWarehouseCode))
|
||
}
|
||
function toggle(row: PlanningCargo, checked: unknown) {
|
||
batchError.value = null
|
||
if (checked && selectable(row) && selectedRows.value.length < 100) selected.value[row.sourceKey] = row
|
||
else delete selected.value[row.sourceKey]
|
||
}
|
||
function selectPage() { for (const row of rows.value) if (selectable(row) && selectedRows.value.length < 100) selected.value[row.sourceKey] = row }
|
||
async function previewBatch() {
|
||
if (!selectedRows.value.length || batchLoading.value || creating.value || pendingCreate.value) return
|
||
const current = ++batchRequest
|
||
batchLoading.value = true; batchError.value = null
|
||
try {
|
||
const result = await previewPlanningBatch(selectedRows.value.map(row => ({ sourceKey: row.sourceKey, customerId: row.customerId, destinationKey: `FBA:${row.destinationWarehouseCode}` })))
|
||
if (current === batchRequest) { batchPreview.value = result; Object.assign(arrangement, createAppointmentForm()); pendingCreate.value = null; createError.value = null }
|
||
} catch (cause) { if (current === batchRequest) batchError.value = getApiErrorDetails(cause, '所选货物暂不能合批') }
|
||
finally { if (current === batchRequest) batchLoading.value = false }
|
||
}
|
||
async function saveArrangement() {
|
||
if (!batchPreview.value || creating.value || !access.can(overseasWarehousePermissions.inboundOrderAppointment)) return
|
||
const error = appointmentFormError(arrangement)
|
||
if (!pendingCreate.value && error) { ElMessage.warning(error); return }
|
||
pendingCreate.value ||= { originWarehouseId: batchPreview.value.group.originWarehouseId, fbaWarehouseCode: batchPreview.value.destinationWarehouseCode, sources: batchPreview.value.sources.map(row => ({sourceKey: row.sourceKey, customerId: row.customerId, destinationKey: row.destinationKey})), details: appointmentPayload(arrangement), idempotencyKey: crypto.randomUUID() }
|
||
creating.value = true; createError.value = null
|
||
try {
|
||
const result = await createSourceAppointment(pendingCreate.value)
|
||
pendingCreate.value = null; batchPreview.value = null; selected.value = {}
|
||
ElMessage.success(`预约安排 ${result.appointmentNo} 已保存`); ++externalRevision.value; emit('created'); await load()
|
||
} catch (cause) {
|
||
createError.value = getApiErrorDetails(cause, '保存结果待核实，请重试原请求')
|
||
if (['400','403','404','409','A0400','A0403','A0404','A0409'].includes(createError.value.code || '')) pendingCreate.value = null
|
||
} finally { creating.value = false }
|
||
}
|
||
let followupRequest = 0
|
||
const query = ref<QueryModel>({ keyword: '' })
|
||
const fields: QueryField[] = [{ key: 'keyword', type: 'input', label: '货物', placeholder: '入仓码、柜号、客户名称', width: 300 }]
|
||
const page = ref(1), size = ref(20), total = ref(0)
|
||
const rows = ref<PlanningCargo[]>([])
|
||
const loading = ref(false)
|
||
const error = ref<ApiErrorDetails | null>(null)
|
||
let request = 0
|
||
let controller: AbortController | undefined
|
||
const columns: DataTableColumn[] = [
|
||
{ key: 'actions', label: '操作', slotName: 'actions', width: 150, fixed: 'left' },
|
||
{ key: 'select', label: '选择', slotName: 'select', width: 65 },
|
||
{ prop: 'inboundCode', label: '入仓码', minWidth: 180 },
|
||
{ prop: 'customerName', label: '客户', minWidth: 150 },
|
||
{ prop: 'containerNo', label: '柜号', minWidth: 150 },
|
||
{ prop: 'originWarehouseName', label: '接仓点', minWidth: 140 },
|
||
{ prop: 'destinationWarehouseCode', label: '目的FBA仓', width: 110 },
|
||
{ prop: 'packages', label: '预报箱数', width: 100 },
|
||
{ prop: 'receivedPackages', label: '实收箱数', width: 100 },
|
||
{ prop: 'estimatedArrivalAt', label: '来源预计到港', minWidth: 170 },
|
||
{ prop: 'estimatedWarehouseAt', label: '已保存预计到仓', minWidth: 180, slotName: 'warehouseEta', singleLine: false },
|
||
{ key: 'progress', label: '当前事项', slotName: 'progress', minWidth: 170 },
|
||
]
|
||
|
||
async function load(reset = false) {
|
||
if (reset) page.value = 1
|
||
const current = ++request
|
||
controller?.abort(); controller = new AbortController()
|
||
loading.value = true; error.value = null
|
||
try {
|
||
const result = await listPlanningCargo({ page: page.value, size: size.value, keyword: String(query.value.keyword || '').trim() || undefined }, controller.signal)
|
||
if (request !== current) return
|
||
rows.value = result.records; total.value = result.total
|
||
} catch (cause) {
|
||
if (request === current) { error.value = getApiErrorDetails(cause, '已开船货物加载失败'); rows.value = []; total.value = 0 }
|
||
} finally { if (request === current) loading.value = false }
|
||
}
|
||
function source(row: PlanningCargo) {
|
||
return router.push({ name: 'overseas-last-mile-order-detail', params: { orderId: row.orderId }, query: { customerId: row.customerId } })
|
||
}
|
||
async function openFollowup(row: Pick<PlanningCargo, 'sourceKey' | 'customerId' | 'destinationWarehouseCode'>) {
|
||
const request = ++followupRequest
|
||
followupError.value = null
|
||
try {
|
||
const result = await resolvePlanningSource({ sourceKey: row.sourceKey, customerId: row.customerId, destinationKey: `FBA:${row.destinationWarehouseCode}` })
|
||
if (request === followupRequest) following.value = result
|
||
} catch (cause) { if (request === followupRequest) followupError.value = getApiErrorDetails(cause, '来源核对失败') }
|
||
}
|
||
function canLeave() {
|
||
if (creating.value || pendingCreate.value) { ElMessage.warning('请先核实本次保存结果，再关闭或切换'); return false }
|
||
return true
|
||
}
|
||
function closeBatch() { if (canLeave()) batchPreview.value = null }
|
||
function beforeClose(done: () => void) { if (canLeave()) done() }
|
||
const registerLeaveGuard = inject<((guard: () => boolean) => () => void) | undefined>('appointment-register-leave-guard', undefined)
|
||
const unregisterLeaveGuard = registerLeaveGuard?.(canLeave)
|
||
onBeforeUnmount(() => unregisterLeaveGuard?.())
|
||
onBeforeRouteLeave(canLeave)
|
||
onBeforeRouteUpdate(canLeave)
|
||
onMounted(() => load())
|
||
onBeforeUnmount(() => { ++request; ++followupRequest; ++batchRequest; controller?.abort() })
|
||
</script>
|
||
|
||
<template>
|
||
<AppointmentExternalCandidates v-if="candidateMode === 'external'" :key="externalRevision" :can-arrange="access.can(overseasWarehousePermissions.inboundOrderAppointment)" :selected-keys="Object.keys(selected)" :busy="batchLoading || creating" @select="addSource" @followup="openFollowup($event.source)">
|
||
<template #query-tabs><AppointmentCargoTabs v-model="candidateMode" /></template>
|
||
<template #toolbar-actions>
|
||
<el-button :disabled="!selectedRows.length || batchLoading" @click="selected = {}; batchError = null">清空选择</el-button>
|
||
<el-button type="primary" :disabled="!selectedRows.length" :loading="batchLoading" @click="previewBatch">合批核对（{{ selectedRows.length }}/100）</el-button>
|
||
</template>
|
||
<template #notices>
|
||
<details v-if="selectedRows.length" class="external-selection"><summary>已选 {{ selectedRows.length }} 票（切换货源保留选择）</summary>
|
||
<div class="external-selection-list"><div v-for="row in selectedRows" :key="row.sourceKey">{{ row.bookingNo || row.inboundCode || '尚未关联业务编号' }}<el-button :disabled="batchLoading || creating" @click="delete selected[row.sourceKey]">移除选择</el-button></div></div>
|
||
</details>
|
||
<LoadErrorState v-if="batchError" title="所选货物暂不能合批" :message="batchError.message" :show-retry="false" />
|
||
<LoadErrorState v-if="followupError" title="来源核对失败" :message="followupError.message" :show-retry="false" />
|
||
</template>
|
||
</AppointmentExternalCandidates>
|
||
<DataTable v-show="candidateMode === 'firstleg'" v-model:page="page" v-model:page-size="size" appearance="integrated" :columns="columns" :data="rows" :total="total" :loading="loading" :results-visible="!error" row-key="sourceKey" @update:page="load()" @update:page-size="load(true)">
|
||
<template #toolbar-start>已选 {{ selectedRows.length }} 票，可跨客户选择同一起运仓、同一目的仓货物</template>
|
||
<template #toolbar-actions>
|
||
<el-button :disabled="loading || batchLoading" @click="selectPage">选择本页可合批货物</el-button>
|
||
<el-button :disabled="!selectedRows.length || batchLoading" @click="selected = {}; batchError = null">清空选择</el-button>
|
||
<el-button type="primary" :disabled="!selectedRows.length" :loading="batchLoading" @click="previewBatch">合批核对（{{ selectedRows.length }}/100）</el-button>
|
||
</template>
|
||
<template #filters>
|
||
<section class="integrated-query-group" aria-label="头程货物类型与筛选">
|
||
<AppointmentCargoTabs v-if="candidateMode === 'firstleg'" v-model="candidateMode" />
|
||
<QueryToolbar v-model="query" ariaLabel="在途货物查询" :fields="fields" :loading="loading" @search="load(true)" />
|
||
</section>
|
||
</template>
|
||
<template #notices>
|
||
<div v-if="externalSource" class="cargo-note">
|
||
待加入来源：{{ externalSource.bookingNo || externalSource.inboundCode || '尚未关联业务编号' }} · {{ externalSource.originWarehouseName }} → {{ externalSource.destinationWarehouseCode }}
|
||
<el-button v-if="access.can(overseasWarehousePermissions.inboundOrderAppointment)" :disabled="batchLoading || creating" @click="acceptExternalSource">加入本次选择</el-button>
|
||
</div>
|
||
<details v-if="externalRows.length" class="external-selection">
|
||
<summary>已选外接货 {{ externalRows.length }} 票（可与同仓头程货合批）</summary>
|
||
<div class="external-selection-list"><div v-for="row in externalRows" :key="row.sourceKey">{{ row.bookingNo || row.inboundCode || '尚未关联业务编号' }}<el-button :disabled="batchLoading || creating" @click="delete selected[row.sourceKey]">移除选择</el-button></div></div>
|
||
</details>
|
||
<LoadErrorState v-if="batchError" title="所选货物暂不能合批" :message="batchError.message" :show-retry="false"><template #details><ApiErrorMeta :details="batchError" /></template></LoadErrorState>
|
||
<LoadErrorState v-if="followupError" title="来源核对失败" :message="followupError.message" :show-retry="false" />
|
||
<LoadErrorState v-if="error" title="已开船货物加载失败" :message="error.message" :loading="loading" @retry="load()"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
|
||
<p v-else class="cargo-note">来源预计时间供筹划核对，确认预约前请核对最新船期与货物备妥情况。</p>
|
||
</template>
|
||
<template #actions="{ row }"><RowActions :actions="[{ key: 'followup', label: '跟进' }, { key: 'source', label: '查看来源' }]" text-actions @action="key => key === 'followup' ? openFollowup(row as PlanningCargo) : source(row as PlanningCargo)" /></template>
|
||
<template #select="{ row }"><el-checkbox :model-value="!!selected[row.sourceKey]" :aria-label="`选择 ${row.inboundCode || '未关联入仓码'}`" :disabled="batchLoading || (!selected[row.sourceKey] && (!selectable(row as PlanningCargo) || selectedRows.length >= 100))" @change="(value: boolean | string | number) => toggle(row as PlanningCargo, value)" /></template>
|
||
<template #warehouseEta="{ row }"><span>{{ row.estimatedWarehouseAt?.replace('T', ' ') || '—' }}</span><div v-if="row.estimatedWarehouseAt" class="cargo-note">来源时区未明确</div></template>
|
||
<template #progress="{ row }">
|
||
<span v-if="row.detained">暂扣，待处理</span>
|
||
<span v-else-if="row.mixedDestinations">含多个目的地，待核对</span>
|
||
<span v-else-if="row.hasActiveAppointment">已有预约</span>
|
||
<span v-else>{{ row.hasInboundPlan ? '已建入仓计划，待安排' : '尚未建入仓计划' }}</span>
|
||
</template>
|
||
</DataTable>
|
||
<AppointmentFollowupDialog v-if="following" :source="following.source" :coverage="following.coverage" :can-write="access.can('platform:appointment:followup')" :can-arrange="access.can(overseasWarehousePermissions.inboundOrderAppointment)" @arrange="arrangeFollowing" @close="following = null" />
|
||
<AppDialog v-if="batchPreview" :model-value="true" class="admin-density-dialog" title="合批预约安排" width="min(1080px, calc(100vw - 48px))" :show-confirm="access.can(overseasWarehousePermissions.inboundOrderAppointment)" :confirm-text="pendingCreate ? '重试本次保存' : '保存预约安排'" :confirm-loading="creating" cancel-text="关闭" @confirm="saveArrangement" @update:model-value="closeBatch" :before-close="beforeClose">
|
||
<p>{{ batchPreview.originWarehouseName }} → {{ batchPreview.destinationWarehouseCode }}</p>
|
||
<p>{{ batchPreview.group.sourceCount }} 票 / {{ batchPreview.group.customerCount }} 个客户 / 预报 {{ batchPreview.group.packages ?? '待核实' }} 箱</p>
|
||
<p v-if="batchPreview.group.readinessIncomplete">货物备妥窗口待核实；预计到港或预计到仓不能替代备妥时间。</p>
|
||
<p>保存前尚未占用货物；先保存安排不代表已取得对方确认。</p>
|
||
<LoadErrorState v-if="createError" title="预约安排保存未完成" :message="createError.message" :show-retry="false"><template #details><ApiErrorMeta :details="createError" /></template></LoadErrorState>
|
||
<FbaAppointmentFields :timezone="batchPreview.destinationTimezone" :model="arrangement" :disabled="creating || !!pendingCreate" />
|
||
</AppDialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.cargo-note { margin: var(--admin-space-3) 0; color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
|
||
.external-selection { margin: var(--admin-space-3) 0; }
|
||
.external-selection-list { max-height: 216px; overflow-y: auto; }
|
||
.external-selection-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; overflow-wrap: anywhere; }
|
||
</style>
|