76 lines
5.6 KiB
Vue
76 lines
5.6 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
|||
|
|
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
|||
|
|
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
|
|||
|
|
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
|||
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
|||
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
|||
|
|
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
|||
|
|
import { listPlanningContainers, resolvePlanningContainer, type PlanningContainer, type ContainerFollowupContext } from './planningApi'
|
|||
|
|
import AppointmentFollowupDialog from './AppointmentFollowupDialog.vue'
|
|||
|
|
|
|||
|
|
const access = useAccessPreviewStore()
|
|||
|
|
const query = ref<QueryModel>({ keyword: '' })
|
|||
|
|
const fields: QueryField[] = [{ key: 'keyword', type: 'input', label: '整柜', placeholder: '柜号或入仓码', width: 300 }]
|
|||
|
|
const rows = ref<PlanningContainer[]>([]), page = ref(1), size = ref(20), total = ref(0)
|
|||
|
|
const loading = ref(false), opening = ref(false)
|
|||
|
|
const error = ref<ApiErrorDetails | null>(null), contextError = ref<ApiErrorDetails | null>(null)
|
|||
|
|
const context = ref<ContainerFollowupContext | null>(null)
|
|||
|
|
let request = 0, contextRequest = 0, controller: AbortController | undefined
|
|||
|
|
const columns: DataTableColumn[] = [
|
|||
|
|
{ key: 'actions', label: '操作', slotName: 'actions', width: 130, fixed: 'left' },
|
|||
|
|
{ prop: 'containerNo', label: '集装箱号', minWidth: 170 },
|
|||
|
|
{ prop: 'orderCount', label: '美国范围票数', width: 120 },
|
|||
|
|
{ prop: 'customerCount', label: '客户数', width: 90 },
|
|||
|
|
{ key: 'packages', label: '预报箱数', slotName: 'packages', width: 130 },
|
|||
|
|
{ key: 'arrival', label: '来源预计到港', slotName: 'arrival', minWidth: 200 },
|
|||
|
|
{ key: 'receiving', label: '接仓点及跟进', slotName: 'receiving', minWidth: 280, singleLine: false },
|
|||
|
|
{ key: 'scope', label: '范围核对', slotName: 'scope', minWidth: 200 },
|
|||
|
|
]
|
|||
|
|
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 listPlanningContainers({ page: page.value, size: size.value, keyword: String(query.value.keyword || '').trim() || undefined }, controller.signal)
|
|||
|
|
if (current !== request) return
|
|||
|
|
rows.value = result.records; total.value = result.total
|
|||
|
|
} catch (cause) { if (current === request) { error.value = getApiErrorDetails(cause, '整柜货源加载失败'); rows.value = []; total.value = 0 } }
|
|||
|
|
finally { if (current === request) loading.value = false }
|
|||
|
|
}
|
|||
|
|
async function follow(row: PlanningContainer, warehouseId?: string) {
|
|||
|
|
const current = ++contextRequest
|
|||
|
|
contextError.value = null; opening.value = true
|
|||
|
|
try {
|
|||
|
|
const result = await resolvePlanningContainer(row.containerBookingId, warehouseId)
|
|||
|
|
if (current === contextRequest) context.value = result
|
|||
|
|
} catch (cause) { if (current === contextRequest) contextError.value = getApiErrorDetails(cause, '整柜范围核对失败') }
|
|||
|
|
finally { if (current === contextRequest) opening.value = false }
|
|||
|
|
}
|
|||
|
|
const displayTime = (value: string | null) => value?.replace('T', ' ') || '—'
|
|||
|
|
onMounted(() => load())
|
|||
|
|
onBeforeUnmount(() => { ++request; ++contextRequest; controller?.abort() })
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<DataTable v-model:page="page" v-model:page-size="size" appearance="integrated" :columns="columns" :data="rows" :total="total" :loading="loading" :results-visible="!error" row-key="containerBookingId" @update:page="load()" @update:page-size="load(true)">
|
|||
|
|
<template #filters><QueryToolbar v-model="query" ariaLabel="整柜提柜与接仓查询" :fields="fields" :loading="loading" @search="load(true)" /></template>
|
|||
|
|
<template #notices>
|
|||
|
|
<LoadErrorState v-if="error" title="整柜货源加载失败" :message="error.message" @retry="load()"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
|
|||
|
|
<LoadErrorState v-if="contextError" title="整柜范围核对失败" :message="contextError.message" :show-retry="false"><template #details><ApiErrorMeta :details="contextError" /></template></LoadErrorState>
|
|||
|
|
<p>同柜多客户只记录一份提柜跟进；接仓按实际仓库分别跟进。预计到港为来源快照，不是对方确认时间。</p>
|
|||
|
|
</template>
|
|||
|
|
<template #actions="{ row }"><el-button class="density-action" size="small" :disabled="opening" @click="follow(row as PlanningContainer)">提柜跟进</el-button></template>
|
|||
|
|
<template #packages="{ row }">{{ row.packages ?? '待核实' }}</template>
|
|||
|
|
<template #arrival="{ row }">{{ displayTime(row.earliestArrivalAt) }}<span v-if="row.latestArrivalAt && row.latestArrivalAt !== row.earliestArrivalAt"> 至 {{ displayTime(row.latestArrivalAt) }}</span></template>
|
|||
|
|
<template #receiving="{ row }"><div v-for="warehouse in row.warehouses" :key="warehouse.warehouseId" class="receiving-row"><span>{{ warehouse.warehouseName }} · {{ warehouse.orderCount }} 票</span><el-button class="density-action" size="small" :disabled="opening" @click="follow(row as PlanningContainer, warehouse.warehouseId)">接仓跟进</el-button></div></template>
|
|||
|
|
<template #scope="{ row }">{{ row.incompleteScope ? '有未明确或非美国接仓点，待核对' : '接仓点已核实' }}</template>
|
|||
|
|
</DataTable>
|
|||
|
|
<AppointmentFollowupDialog v-if="context" :container="context" :can-write="access.can('platform:appointment:followup')" @close="context = null" />
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.receiving-row { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3); }
|
|||
|
|
</style>
|