64 lines
6.9 KiB
Vue
64 lines
6.9 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { onMounted, reactive, ref } from 'vue'
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
import AppDialog from '@/shared/components/AppDialog.vue'
|
|||
|
|
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
|||
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
|||
|
|
import { getImpact, handleImpact, impactStatus, type ImpactDetail, type ImpactCommand } from './impactApi'
|
|||
|
|
const props = defineProps<{ containerId: string; canWrite: boolean }>()
|
|||
|
|
const emit = defineEmits<{ close: []; saved: [] }>()
|
|||
|
|
const router = useRouter(), detail = ref<ImpactDetail | null>(null), loading = ref(false), saving = ref(false), historyPage = ref(1)
|
|||
|
|
const error = ref<ApiErrorDetails | null>(null), pending = ref<ImpactCommand | null>(null)
|
|||
|
|
const form = reactive({ result: '', nextAction: '', followupDate: '' })
|
|||
|
|
const actions: Record<string, string> = { OBSERVED: '船期核对', CLAIM: '认领', RECORD: '记录处理', RESOLVE: '完成核对' }
|
|||
|
|
async function load() {
|
|||
|
|
loading.value = true; error.value = null
|
|||
|
|
try { detail.value = await getImpact(props.containerId, historyPage.value) }
|
|||
|
|
catch (cause) { error.value = getApiErrorDetails(cause, '影响详情加载失败') }
|
|||
|
|
finally { loading.value = false }
|
|||
|
|
}
|
|||
|
|
async function save(action: ImpactCommand['action']) {
|
|||
|
|
if (!detail.value || saving.value || !props.canWrite) return
|
|||
|
|
if (!pending.value && action !== 'CLAIM' && !form.result.trim()) { ElMessage.warning('请填写实际处理结果'); return }
|
|||
|
|
pending.value ||= { expectedVersion: detail.value.impact.version, forecastToken: detail.value.impact.forecastToken, idempotencyKey: crypto.randomUUID(), action, result: form.result.trim() || null, nextAction: form.nextAction.trim() || null, followupDate: form.followupDate || null }
|
|||
|
|
saving.value = true; error.value = null
|
|||
|
|
try { await handleImpact(props.containerId, pending.value); pending.value = null; emit('saved'); historyPage.value = 1; await load() }
|
|||
|
|
catch (cause) { error.value = getApiErrorDetails(cause, '处理结果待核实，请重试原请求'); if (['400','403','404','409','A0400','A0403','A0404','A0409'].includes(error.value.code || '')) pending.value = null }
|
|||
|
|
finally { saving.value = false }
|
|||
|
|
}
|
|||
|
|
function close() { if (saving.value || pending.value) { ElMessage.warning('请先核实本次处理结果，再关闭'); return } emit('close') }
|
|||
|
|
onMounted(load)
|
|||
|
|
</script>
|
|||
|
|
<template>
|
|||
|
|
<AppDialog :model-value="true" title="船期变化影响核对" width="min(1200px, calc(100vw - 48px))" :show-confirm="false" class="admin-density-dialog" @update:model-value="close">
|
|||
|
|
<LoadErrorState v-if="error" title="核对未完成" :message="error.message" :show-retry="!pending" @retry="load" />
|
|||
|
|
<template v-if="detail">
|
|||
|
|
<p>{{ detail.impact.impactNo }} · {{ impactStatus[detail.impact.status] }} · 负责人：{{ detail.impact.ownerName || '未认领' }}</p>
|
|||
|
|
<p>基准 ETA：{{ detail.impact.baseline?.estimatedAt || '待核实' }} → 最新 ETA：{{ detail.impact.latest?.estimatedAt || '待核实' }}</p>
|
|||
|
|
<p>来源：{{ detail.impact.latest?.providerCode || '待核实' }} · {{ detail.impact.latest?.sourceReference || '—' }} · 观察时间：{{ detail.impact.latest?.observedAt || '—' }}</p>
|
|||
|
|
<p>实际到港：{{ detail.impact.latest?.actualAt || '未记录' }}。以上为来源原始时间，时区未核实；不能据此判定跨时区违约。</p>
|
|||
|
|
<details open><summary>直接关联货物 {{ detail.cargo.length }} 票</summary><div class="impact-list"><p v-for="(row, index) in detail.cargo" :key="index">{{ row.inboundCode || '未关联入仓码' }} · {{ row.customerName || '—' }} · {{ row.destination || '—' }} · {{ row.packages ?? '待核实' }} 箱</p></div></details>
|
|||
|
|
<details open><summary>需复核的收货预约 {{ detail.appointments.length }} 张（确认时间不自动修改）</summary><div class="impact-list"><p v-for="row in detail.appointments" :key="row.appointmentNo">{{ row.appointmentNo }} · {{ row.destination }} · {{ row.confirmedAt || '尚未确认时段' }} {{ row.timezone || '时区待核实' }}</p></div></details>
|
|||
|
|
<p v-if="!detail.transport">无车次查看权限，运输影响未加载。</p>
|
|||
|
|
<template v-else>
|
|||
|
|
<details open><summary>关联车次 {{ detail.transport.trips.length }} 辆</summary><div class="impact-list"><p v-for="row in detail.transport.trips" :key="row.tripNo"><el-button link type="primary" @click="router.push(`/overseas-master-data/trips/${encodeURIComponent(row.tripNo)}`)">{{ row.tripNo }}</el-button> · 计划出发（UTC）：{{ row.plannedDepartureAt || '待定' }}</p></div></details>
|
|||
|
|
<details><summary>同车外接承诺 {{ detail.transport.sameTripBookings.length }} 票，仅提示运输安排复核</summary><div class="impact-list"><p v-for="row in detail.transport.sameTripBookings" :key="row.bookingNo">{{ row.bookingNo }} · {{ row.customerName || '—' }} · {{ row.tripNo }} · {{ row.destinationLabel || '—' }}</p></div></details>
|
|||
|
|
</template>
|
|||
|
|
<el-form v-if="canWrite && detail.impact.status === 'OPEN'" label-position="top" :disabled="saving || !!pending">
|
|||
|
|
<el-form-item label="实际处理结果"><el-input v-model="form.result" type="textarea" maxlength="1000" placeholder="记录已联系、核对或改约的实际结果；此处不会自动改约" /></el-form-item>
|
|||
|
|
<el-form-item label="下一步"><el-input v-model="form.nextAction" maxlength="500" placeholder="填写后续处理事项" /></el-form-item>
|
|||
|
|
<el-form-item label="下次跟进日期"><el-date-picker v-model="form.followupDate" value-format="YYYY-MM-DD" /></el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<div v-if="canWrite && detail.impact.status === 'OPEN'">
|
|||
|
|
<el-button v-if="!pending" :disabled="saving || loading" @click="save('CLAIM')">认领跟进</el-button>
|
|||
|
|
<el-button v-if="!pending" :disabled="saving || loading" @click="save('RECORD')">记录处理</el-button>
|
|||
|
|
<el-button v-if="!pending" type="primary" :disabled="saving || loading" @click="save('RESOLVE')">完成本次核对</el-button>
|
|||
|
|
<el-button v-else type="primary" :loading="saving" @click="save(pending.action)">重试本次处理</el-button>
|
|||
|
|
</div>
|
|||
|
|
<details><summary>观察及处理历史（{{ detail.history.total }} 条）</summary><div class="impact-list"><p v-for="row in detail.history.records" :key="row.version">{{ actions[row.action] || '核对记录' }} · {{ row.operatorName || '—' }} · {{ row.createdAt }} UTC<br>{{ row.result || '记录来源观察' }} · {{ row.nextAction || '—' }} · {{ row.followupDate || '—' }}</p></div><el-pagination v-model:current-page="historyPage" :page-size="20" :total="detail.history.total" layout="prev, pager, next" :disabled="saving || !!pending" @current-change="load" /></details>
|
|||
|
|
</template>
|
|||
|
|
</AppDialog>
|
|||
|
|
</template>
|
|||
|
|
<style scoped>.impact-list { max-height: 220px; overflow-y: auto; overflow-wrap: anywhere; }</style>
|