124 lines
10 KiB
Vue
124 lines
10 KiB
Vue
<script setup lang="ts">
|
||
import { inject, computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
|
||
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
|
||
import { ElMessage } from 'element-plus'
|
||
import AppDialog from '@/shared/components/AppDialog.vue'
|
||
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
||
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
||
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
||
import { getFollowups, saveFollowup, getContainerFollowups, saveContainerFollowup, type ContainerFollowupContext, type PlanningSource, type AppointmentCoverage, type FollowupRecord, type FollowupStage, type SaveFollowup } from './planningApi'
|
||
|
||
const props = defineProps<({ source: PlanningSource; coverage: AppointmentCoverage; container?: never } | { container: ContainerFollowupContext; source?: never; coverage?: never }) & { canWrite: boolean; canArrange?: boolean }>()
|
||
const emit = defineEmits<{ close: []; arrange: [] }>()
|
||
const stages: Record<FollowupStage, string> = { DRAYAGE_CONTACT: '拖车联系', TERMINAL_APPOINTMENT: '码头约号', WAREHOUSE_RECEIVING: '接仓跟进', FBA_RECEIVING: 'FBA收货跟进' }
|
||
const coverageNeeds: Record<string, string> = {
|
||
DESTINATION: '目的仓与原安排不一致，请核对。',
|
||
DESTINATION_UNVERIFIED: '来源目的地资料待核实，尚不能判断是否发生变更。',
|
||
CARRIER_CONFIRMATION: '尚未确认承运，请先在原登记完成确认。',
|
||
REAL_CARGO_MATERIALS: '尚未关联实际货物资料，可先保存待确认安排；正式确认前需补齐资料。',
|
||
CARGO_QUANTITY_REVIEW: '货量或重复关联需要核对。',
|
||
RECEIVING_APPOINTMENT: '尚未安排收货预约。',
|
||
UNCOVERED_CARGO: '部分货物尚未纳入收货预约。',
|
||
RECEIVING_CONFIRMATION: '尚未取得全部货物的收货确认。',
|
||
APPOINTMENT_TIMEZONE_UNVERIFIED: '原预约未记录时区，请核实收货地点当地时间。',
|
||
FBA_SHIPMENT_REFERENCES: 'FBA货件资料尚未齐全，请补充货件号或追踪号。',
|
||
SOURCE_CHANGED_REVIEW: '货源资料更新晚于预约，请核对是否需要改约。',
|
||
}
|
||
const allowedStages = computed(() => props.container ? props.container.warehouseId ? { WAREHOUSE_RECEIVING: stages.WAREHOUSE_RECEIVING } : { DRAYAGE_CONTACT: stages.DRAYAGE_CONTACT, TERMINAL_APPOINTMENT: stages.TERMINAL_APPOINTMENT } : { FBA_RECEIVING: stages.FBA_RECEIVING })
|
||
const canFollowup = computed(() => props.container?.canFollowup ?? props.source?.canFollowup ?? false)
|
||
const blockReasons = computed(() => props.container?.blockReasons ?? props.source?.blockReasons ?? [])
|
||
const title = computed(() => props.container ? `${props.container.containerNo || '未回传柜号'} · ${props.container.warehouseName || '提柜'}` : props.source?.inboundCode || props.source?.bookingNo || '未关联入仓码')
|
||
const form = reactive({ stage: (props.container ? props.container.warehouseId ? 'WAREHOUSE_RECEIVING' : 'DRAYAGE_CONTACT' : 'FBA_RECEIVING') as FollowupStage, contactedParty: '', result: '', nextAction: '', followupDate: '' })
|
||
const rows = ref<FollowupRecord[]>([])
|
||
const versions = ref<Record<FollowupStage, number>>({ DRAYAGE_CONTACT: 0, TERMINAL_APPOINTMENT: 0, WAREHOUSE_RECEIVING: 0, FBA_RECEIVING: 0 })
|
||
const page = ref(1), size = ref(10), total = ref(0)
|
||
const loading = ref(false), saving = ref(false), ready = ref(false)
|
||
const error = ref<ApiErrorDetails | null>(null), saveError = ref<ApiErrorDetails | null>(null)
|
||
const pending = ref<SaveFollowup | null>(null)
|
||
let generation = 0
|
||
const columns: DataTableColumn[] = [
|
||
{ key: 'stage', label: '事项', slotName: 'stage', width: 120 },
|
||
{ prop: 'contactedParty', label: '联系对象', minWidth: 130 },
|
||
{ prop: 'result', label: '联系结果', minWidth: 200 },
|
||
{ prop: 'nextAction', label: '下一步', minWidth: 150 },
|
||
{ prop: 'followupDate', label: '下次跟进日', width: 120 },
|
||
{ prop: 'operatorName', label: '跟进人', minWidth: 110 },
|
||
]
|
||
function rowKey(row: object) { const value = row as FollowupRecord; return `${value.stage}:${value.version}` }
|
||
async function load() {
|
||
const request = ++generation
|
||
loading.value = true; error.value = null; ready.value = false
|
||
try {
|
||
const result = props.container ? await getContainerFollowups(props.container, page.value, size.value) : await getFollowups(props.source!.sourceKey, props.source!.customerId, page.value, size.value)
|
||
if (request !== generation) return
|
||
rows.value = result.history.records; total.value = result.history.total; versions.value = result.versions; ready.value = true
|
||
} catch (cause) { if (request === generation) error.value = getApiErrorDetails(cause, '跟进记录加载失败') }
|
||
finally { if (request === generation) loading.value = false }
|
||
}
|
||
async function save() {
|
||
if (!props.canWrite || !canFollowup.value || saving.value || !ready.value) return
|
||
if (!pending.value && (!form.result.trim() || (form.followupDate && !form.nextAction.trim()))) {
|
||
ElMessage.warning('请填写联系结果；设置下次跟进日时需填写下一步安排'); return
|
||
}
|
||
pending.value ||= { stage: form.stage, expectedVersion: versions.value[form.stage], idempotencyKey: crypto.randomUUID(),
|
||
contactedParty: form.contactedParty.trim() || undefined, result: form.result.trim(), nextAction: form.nextAction.trim() || undefined, followupDate: form.followupDate || null }
|
||
saving.value = true; saveError.value = null
|
||
try {
|
||
if (props.container) await saveContainerFollowup(props.container, pending.value)
|
||
else await saveFollowup(props.source!.sourceKey, props.source!.customerId, pending.value)
|
||
pending.value = null; form.result = ''; form.nextAction = ''; form.followupDate = ''; page.value = 1
|
||
ElMessage.success('跟进记录已保存'); await load()
|
||
} catch (cause) {
|
||
saveError.value = getApiErrorDetails(cause, '保存结果待确认，请重试本次保存')
|
||
if (['400','403','404','409','A0400','A0403','A0404','A0409'].includes(saveError.value.code || '')) { pending.value = null; await load() }
|
||
} finally { saving.value = false }
|
||
}
|
||
function canLeave() {
|
||
if (saving.value || pending.value) { ElMessage.warning('请先核实本次保存结果，再关闭或切换'); return false }
|
||
return true
|
||
}
|
||
function close() { if (canLeave()) emit('close') }
|
||
function arrange() { if (canLeave()) emit('arrange') }
|
||
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(() => { ++generation })
|
||
</script>
|
||
|
||
<template>
|
||
<AppDialog :model-value="true" class="admin-density-dialog" :title="`预约跟进 · ${title}`" width="min(1080px, calc(100vw - 48px))" :confirm-text="pending ? '重试本次保存' : '保存跟进'" :confirm-loading="saving" :confirm-disabled="!canWrite || !canFollowup || !ready || loading" @confirm="save" @update:model-value="close" :before-close="beforeClose">
|
||
<p v-if="source">{{ source.containerNo || '—' }} · {{ source.originWarehouseName }} → {{ source.destinationWarehouseCode }}</p>
|
||
<el-button v-if="source && canArrange && source.canFollowup && !coverage?.appointments.length" :disabled="saving || !!pending" @click="arrange">加入预约合批</el-button>
|
||
<p v-if="container">同柜多客户共用{{ container?.warehouseId ? '此接仓点' : '提柜' }}跟进记录；保存联系不自动确认预约或推进收货。</p>
|
||
<p v-else>本条记录用于此货源的FBA收货跟进；保存联系不自动确认预约或推进收货。</p>
|
||
<LoadErrorState v-if="error" title="跟进记录加载失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
|
||
<LoadErrorState v-if="saveError" title="跟进保存未完成" :message="saveError.message" :show-retry="false"><template #details><ApiErrorMeta :details="saveError" /></template></LoadErrorState>
|
||
<p v-for="reason in blockReasons" :key="reason">{{ reason }}</p>
|
||
<p v-if="coverage?.changeReviewRequired">来源资料有变化，请核对原预约与运输安排。</p>
|
||
<p v-if="coverage?.appointments.length">已关联预约：{{ coverage.appointments.map(item => item.appointmentNo).join('、') }}</p>
|
||
<p v-else-if="coverage">尚未关联收货预约；联系记录保存后仍需登记对方正式确认。</p>
|
||
<ul v-if="coverage?.missingFields.length" aria-label="预约待核实事项"><li v-for="item in coverage.missingFields" :key="item">{{ coverageNeeds[item] || '存在待核实事项，请返回来源详情核对。' }}</li></ul>
|
||
<el-form v-if="canWrite && canFollowup" label-position="top" class="followup-form density-form" :disabled="saving || !!pending">
|
||
<el-form-item label="跟进事项"><el-select v-model="form.stage"><el-option v-for="(label,value) in allowedStages" :key="value" :value="value" :label="label" /></el-select></el-form-item>
|
||
<el-form-item label="联系对象"><el-input v-model="form.contactedParty" maxlength="200" /></el-form-item>
|
||
<el-form-item label="下次跟进日期"><el-date-picker v-model="form.followupDate" type="date" value-format="YYYY-MM-DD" placeholder="业务地点当地日期" /></el-form-item>
|
||
<el-form-item label="联系结果" required class="wide"><el-input v-model="form.result" type="textarea" maxlength="1000" placeholder="记录对方反馈，不会自动确认预约" /></el-form-item>
|
||
<el-form-item label="下一步安排" class="wide"><el-input v-model="form.nextAction" maxlength="500" /></el-form-item>
|
||
</el-form>
|
||
<DataTable v-model:page="page" v-model:page-size="size" :data="rows" :columns="columns" :total="total" :loading="loading" :results-visible="!error" :row-key="rowKey" @update:page="load" @update:page-size="page = 1; load()">
|
||
<template #stage="{ row }">{{ stages[row.stage as FollowupStage] }}</template>
|
||
</DataTable>
|
||
</AppDialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.followup-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--admin-space-6); }
|
||
.wide { grid-column: 1 / -1; }
|
||
.followup-form :deep(.el-select), .followup-form :deep(.el-date-editor) { width: 100%; }
|
||
</style>
|