admin-web/src/modules/loading-lists/pages/PreloadPlanDetailView.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@lucide/vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import OperationErrorToast from '@/shared/components/OperationErrorToast.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import LoadingListDetailDrawer from '../components/LoadingListDetailDrawer.vue'
import { confirmPreloadPlan, getPreloadPlan, updateLoadingItemWarehouseRemark, updatePreloadTransport, type LoadingDetail, type LoadingItem, type PreloadSummary } from '../api/platformLoadingLists'

const route = useRoute()
const router = useRouter()
const access = useAccessPreviewStore()
const loading = ref(false)
const detail = ref<LoadingDetail<PreloadSummary> | null>(null)
const error = ref<ApiErrorDetails | null>(null)
const editOpen = ref(false)
const editSaving = ref(false)
const editError = ref<ApiErrorDetails | null>(null)
const confirmOpen = ref(false)
const confirmSaving = ref(false)
const confirmError = ref<ApiErrorDetails | null>(null)
const confirmOperationId = ref('')
const editFormRef = ref<FormInstance>()
const editForm = reactive({ containerNo: '', voyageNo: '', operationReason: '' })
const remarkOpen = ref(false)
const remarkSaving = ref(false)
const remarkError = ref<ApiErrorDetails | null>(null)
const remarkTarget = ref<LoadingItem | null>(null)
const warehouseRemark = ref('')
const remarkOperationId = ref('')
const planId = computed(() => String(route.params.planId || ''))
const warehouseId = computed(() => typeof route.query.warehouseId === 'string' ? route.query.warehouseId : '')
const canEdit = computed(() => access.can('platform:firstleg:preload:edit'))
const editDialogTitle = computed(() => detail.value?.summary.containerNo ? '修改集装箱号 / 航次' : '录入集装箱号')
const editRules: FormRules = {
  containerNo: [
    { required: true, message: '请输入集装箱号', trigger: 'blur' },
    { max: 64, message: '集装箱号不能超过 64 个字符', trigger: 'blur' },
  ],
  voyageNo: [{ max: 64, message: '航次不能超过 64 个字符', trigger: 'blur' }],
  operationReason: [{ max: 500, message: '修改原因不能超过 500 个字符', trigger: 'blur' }],
}

async function loadDetail() {
  if (!planId.value || !warehouseId.value) {
    error.value = { code: 'MISSING_WAREHOUSE_CONTEXT', message: '该清单缺少所属仓库信息，无法安全查询详情，请返回列表重新进入。' }
    return
  }
  loading.value = true
  error.value = null
  try {
    const result = await getPreloadPlan(planId.value, warehouseId.value)
    if (!['EDITING', 'LOADING'].includes(result.summary.status)) {
      detail.value = null
      error.value = { code: 'MODE_STATUS_MISMATCH', message: '该计划不属于预装清单状态，请从对应清单入口查看。' }
      return
    }
    detail.value = result
  } catch (cause) {
    error.value = getApiErrorDetails(cause, '预装清单详情加载失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

function goBack() {
  if (window.history.length > 1) router.back()
  else void router.push({ name: 'loading-plans' })
}

function openEdit() {
  if (!detail.value || !['EDITING', 'LOADING'].includes(detail.value.summary.status)) return
  editForm.containerNo = detail.value.summary.containerNo || ''
  editForm.voyageNo = detail.value.summary.voyageNo || ''
  editForm.operationReason = ''
  editError.value = null
  editOpen.value = true
}

async function saveTransport() {
  if (!detail.value || !(await editFormRef.value?.validate().catch(() => false))) return
  editSaving.value = true
  editError.value = null
  try {
    detail.value = await updatePreloadTransport(planId.value, warehouseId.value, {
      containerNo: editForm.containerNo.trim(),
      voyageNo: editForm.voyageNo.trim() || null,
      operationReason: editForm.operationReason.trim() || null,
      expectedVersion: detail.value.summary.version,
    })
    editOpen.value = false
    ElMessage.success('运输信息已更新')
  } catch (cause) {
    const details = getApiErrorDetails(cause, '运输信息保存失败，请刷新详情后重试')
    if (details.code === 'A0409' || /版本|并发|已被其他人修改/.test(details.message)) {
      await loadDetail()
      editError.value = { ...details, message: '运输信息已被其他人修改，系统已刷新最新版本；当前输入已保留，请核对后重新保存。' }
    } else editError.value = details
  } finally {
    editSaving.value = false
  }
}

function openWarehouseRemark(item: LoadingItem) {
  if (!canEdit.value || !detail.value || !['EDITING', 'LOADING'].includes(detail.value.summary.status)) return
  remarkTarget.value = item
  warehouseRemark.value = item.warehouseRemark || ''
  remarkError.value = null
  remarkOperationId.value = `admin-preload-warehouse-remark-${detail.value.summary.planId}-${item.itemId}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
  remarkOpen.value = true
}

async function saveWarehouseRemark() {
  const target = remarkTarget.value
  const current = detail.value
  if (!target || !current || !canEdit.value || remarkSaving.value) return
  if (warehouseRemark.value.length > 1000) {
    remarkError.value = { code: 'WAREHOUSE_REMARK_TOO_LONG', message: '仓库备注不能超过 1000 个字符' }
    return
  }
  remarkSaving.value = true
  remarkError.value = null
  try {
    const result = await updateLoadingItemWarehouseRemark(current.summary.planId, target.itemId, {
      warehouseRemark: warehouseRemark.value.trim() || null,
      expectedPlanVersion: current.summary.version,
      expectedItemVersion: target.itemVersion,
      operationId: remarkOperationId.value,
    })
    const updatedItem = result.items.find((item) => item.id === target.itemId)
    detail.value = {
      ...current,
      summary: { ...current.summary, version: result.version },
      items: current.items.map((item) => item.itemId === target.itemId
        ? { ...item, itemVersion: updatedItem?.version ?? item.itemVersion, warehouseRemark: updatedItem?.warehouseRemark ?? null }
        : item),
    }
    remarkOpen.value = false
    remarkTarget.value = null
    remarkOperationId.value = ''
    ElMessage.success('仓库备注已更新')
  } catch (cause) {
    const details = getApiErrorDetails(cause, '仓库备注保存失败，请稍后重试')
    if (details.code === 'A0409' || /版本|并发|状态.*变化/.test(details.message)) {
      await loadDetail()
      remarkTarget.value = detail.value?.items.find((item) => item.itemId === target.itemId) || target
      remarkError.value = { ...details, message: '计划状态或明细版本已变化，系统已刷新最新数据；当前输入已保留，请核对后重新保存。' }
    } else remarkError.value = details
  } finally {
    remarkSaving.value = false
  }
}

function openConfirmPreload() {
  const summary = detail.value?.summary
  if (!canEdit.value || !summary?.readiness.canConfirm) return
  confirmError.value = null
  confirmOperationId.value = `admin-preload-confirm-${summary.planId}-${summary.version}-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
  confirmOpen.value = true
}

async function submitConfirmPreload() {
  const summary = detail.value?.summary
  if (!summary?.readiness.canConfirm || confirmSaving.value) return
  confirmSaving.value = true
  confirmError.value = null
  try {
    const result = await confirmPreloadPlan(summary.planId, summary.version, confirmOperationId.value)
    await loadDetail()
    confirmOpen.value = false
    confirmOperationId.value = ''
    ElMessage.success(result.readiness.readyForPda ? '预装已确认，PDA 任务已具备下发条件' : '预装已确认')
  } catch (cause) {
    confirmError.value = getApiErrorDetails(cause, '确认预装失败，请稍后重试')
  } finally {
    confirmSaving.value = false
  }
}

onMounted(() => void loadDetail())
</script>

<template>
  <AdminPage>
    <div class="preload-detail-page">
      <OperationErrorToast :details="remarkError || editError || confirmError" />
      <el-button link type="primary" class="back-button" @click="goBack"><ArrowLeft :size="16" />返回列表</el-button>
      <el-alert
        v-if="detail"
        type="info"
        :closable="false"
        show-icon
        :title="detail.summary.containerNo ? '集装箱号已录入，继续完成订舱放舱与预装确认' : '下一步：录入集装箱号'"
        description="预装清单不会直接开放 PDA；需完成集装箱号、订舱关联与放舱、预装确认后，才由服务端生成 PDA 任务。"
      />
      <LoadErrorState v-if="error && !detail" title="预装清单详情加载失败" :message="error.message" :loading="loading" @retry="loadDetail">
        <template #details><ApiErrorMeta :details="error" /></template>
      </LoadErrorState>
      <LoadingListDetailDrawer v-else :mode="'preload'" :loading="loading" :detail="detail" :error="error" :can-edit="canEdit" :confirm-saving="confirmSaving" @retry="loadDetail" @edit="openEdit" @edit-warehouse-remark="openWarehouseRemark" @confirm-preload="openConfirmPreload" />
    </div>

    <AppDialog v-model="editOpen" class="loading-transport-dialog" :title="editDialogTitle" width="min(620px, calc(100vw - 28px))" confirm-text="保存" :confirm-loading="editSaving" :confirm-disabled="!canEdit" @confirm="saveTransport">
      <el-form ref="editFormRef" class="transport-form" :model="editForm" :rules="editRules" label-position="top">
        <el-form-item label="集装箱号" prop="containerNo"><el-input v-model="editForm.containerNo" maxlength="64" placeholder="请输入集装箱号" /></el-form-item>
        <el-form-item label="航次" prop="voyageNo"><el-input v-model="editForm.voyageNo" maxlength="64" placeholder="请输入航次" /></el-form-item>
        <el-form-item label="修改原因" prop="operationReason"><el-input v-model="editForm.operationReason" type="textarea" :rows="3" maxlength="500" placeholder="选填，填写后将记录在操作历史中" /></el-form-item>
      </el-form>
    </AppDialog>

    <AppDialog v-model="remarkOpen" class="warehouse-remark-dialog" title="编辑仓库备注" width="min(560px, calc(100vw - 28px))" confirm-text="保存备注" cancel-text="取消" :confirm-loading="remarkSaving" :confirm-disabled="!canEdit" @confirm="saveWarehouseRemark">
      <el-alert type="info" :closable="false" show-icon title="仓库备注将随装柜完成资料下发海外仓" />
      <el-form label-position="top" class="warehouse-remark-form">
        <el-form-item label="客户备注（只读）"><el-input :model-value="remarkTarget?.customerRemark || '—'" disabled /><small>来源：客户下单</small></el-form-item>
        <el-form-item label="内部备注（只读）"><el-input :model-value="remarkTarget?.internalRemark || '—'" disabled /><small>来源：订单内部备注</small></el-form-item>
        <el-form-item label="仓库备注"><el-input v-model="warehouseRemark" type="textarea" :rows="5" maxlength="1000" show-word-limit placeholder="可填写、修改或清空仓库备注" /></el-form-item>
      </el-form>
      <LoadErrorState v-if="remarkError" compact title="仓库备注保存失败" :message="remarkError.message" :show-retry="false"><template #details><ApiErrorMeta :details="remarkError" /></template></LoadErrorState>
    </AppDialog>

    <AppDialog v-model="confirmOpen" class="preload-confirm-dialog" title="确认整份预装计划" width="min(520px, calc(100vw - 28px))" confirm-text="确认预装" :confirm-loading="confirmSaving" :confirm-disabled="!detail?.summary.readiness.canConfirm" @confirm="submitConfirmPreload">
      <div class="confirm-content">
        <el-alert type="warning" :closable="false" show-icon title="本操作将确认整份预装计划" description="系统会原子确认本计划包含的全部入库预装票据；成功后由服务端按真实条件创建唯一 PDA 任务，当前页面不会伪造 PDA 成功。" />
        <el-descriptions v-if="detail" :column="1" border>
          <el-descriptions-item label="预装单号">{{ detail.summary.preloadNo }}</el-descriptions-item>
          <el-descriptions-item label="柜次号">{{ detail.summary.cabinetNo || '—' }}</el-descriptions-item>
          <el-descriptions-item label="集装箱号">{{ detail.summary.containerNo || '待录入' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </AppDialog>
  </AdminPage>
</template>

<style scoped>
.preload-detail-page { display: grid; min-width: 0; max-width: 1180px; gap: 16px; }
.back-button { width: fit-content; }
.transport-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.transport-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
.confirm-content { display: grid; gap: 16px; }
.warehouse-remark-form { margin-top: 14px; }
.warehouse-remark-form small { display: block; margin-top: 4px; color: var(--cc-muted); }
:global(.loading-transport-dialog.el-dialog) { max-height: 90vh; overflow: hidden; }
@media (min-width: 1920px) { .preload-detail-page { width: 100%; max-width: none; gap: 12px; } }
@media (max-width: 720px) { .transport-form { grid-template-columns: 1fr; } .transport-form :deep(.el-form-item:last-child) { grid-column: auto; } }
</style>