admin-web/src/modules/inbounds/components/InboundWorkflowWorkspace.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, ref, watch } from 'vue'
import { ClipboardCheck, Pencil, RefreshCw } from '@lucide/vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import { getPlatformInbound } from '../core/api'
import InboundHistoryPanel from '../core/InboundHistoryPanel.vue'
import InboundSummaryPanel from '../core/InboundSummaryPanel.vue'
import type { InboundOrderDetail } from '../core/types'
import { InboundMeasurementDialog } from '../measurement'
import { MeasurementReviewPanel } from '../review'
import { InboundFeePanel } from '../fee'
import { inboundProcessStatusLabels, inboundStatusLabel } from '../status'

const props = defineProps<{
  customerId: string
  inboundId: string
}>()

const emit = defineEmits<{
  changed: []
}>()

const access = useAccessPreviewStore()
const activeTab = ref('overview')
const measurementDialogOpen = ref(false)
const reviewDialogOpen = ref(false)
const loading = ref(false)
const loadError = ref<ApiErrorDetails | null>(null)
const detail = ref<InboundOrderDetail | null>(null)
const revision = ref(0)
let requestSerial = 0
let disposed = false

const title = computed(() => detail.value?.summary.inboundCode || '入仓码待补充')
const canViewMeasurement = computed(() => access.can('platform:firstleg:inbound:measure:view'))
const statusLabel = computed(() => inboundStatusLabel(detail.value?.summary.processStatus, inboundProcessStatusLabels, '未知状态'))

async function loadDetail() {
  const serial = ++requestSerial
  if (!props.customerId || !props.inboundId) {
    detail.value = null
    loadError.value = null
    loading.value = false
    return
  }
  loading.value = true
  loadError.value = null
  try {
    const response = await getPlatformInbound(props.customerId, props.inboundId)
    if (disposed || serial !== requestSerial) return
    detail.value = response
  } catch (error) {
    if (disposed || serial !== requestSerial) return
    detail.value = null
    loadError.value = getApiErrorDetails(error, '入库单详情加载失败')
  } finally {
    if (!disposed && serial === requestSerial) loading.value = false
  }
}

async function refreshWorkspace() {
  revision.value += 1
  await loadDetail()
}

function handleDomainChanged() {
  void refreshWorkspace()
  emit('changed')
}

function handleReviewChanged() {
  reviewDialogOpen.value = false
  handleDomainChanged()
}

watch(
  () => [props.customerId, props.inboundId],
  () => {
    activeTab.value = 'overview'
    detail.value = null
    loadError.value = null
    revision.value += 1
    void loadDetail()
  },
  { immediate: true },
)

onBeforeUnmount(() => {
  disposed = true
  requestSerial += 1
})
</script>

<template>
  <section class="inbound-workspace" :aria-busy="loading">
    <header class="workspace-header">
      <div>
        <div class="workspace-title-row">
          <h2>入库码：{{ title }}</h2>
          <StatusBadge v-if="detail" :status="statusLabel" />
        </div>
        <p>按基本信息、货物测量、审核、费用和托盘库位顺序处理，所有结果以服务端最新状态为准。</p>
      </div>
      <el-button :loading="loading" :disabled="!customerId || !inboundId" @click="refreshWorkspace">
        <RefreshCw :size="16" />刷新
      </el-button>
    </header>

    <LoadErrorState
      v-if="loadError"
      class="workspace-state"
      title="入库作业详情暂时无法加载"
      :message="loadError.message"
      @retry="loadDetail"
    >
      <template #details><ApiErrorMeta :details="loadError" /></template>
    </LoadErrorState>

    <div v-else-if="loading && !detail" class="workspace-state workspace-skeleton" aria-label="正在加载入库作业详情">
      <el-skeleton :rows="8" animated />
    </div>

    <el-empty v-else-if="!detail" class="workspace-state" description="缺少所属企业信息，无法查看入库作业详情" />

    <el-tabs v-else v-model="activeTab" class="workflow-tabs">
      <el-tab-pane label="基本信息" name="overview">
        <InboundSummaryPanel :summary="detail.summary" :public-remark="detail.publicRemark" />
      </el-tab-pane>
      <el-tab-pane label="货品与测量" name="measurement" lazy>
        <div class="workflow-action-row">
          <span>核对原单数据、确认扫描箱数，并查看服务端计算的重量和体积结果。</span>
          <el-button v-if="canViewMeasurement" type="primary" @click="measurementDialogOpen = true"><Pencil :size="16" />编辑测量数据</el-button>
        </div>
        <el-alert
          :title="canViewMeasurement ? '称重图片、OCR、托盘与箱规统一在测量弹框中维护。' : '当前账号缺少测量查看权限。'"
          :type="canViewMeasurement ? 'info' : 'warning'"
          :closable="false"
          show-icon
        />
      </el-tab-pane>
      <el-tab-pane label="测量审核" name="review" lazy>
          <div v-if="canViewMeasurement" class="workflow-action-row">
          <span>对照原单、设备实测和称重 OCR 结果后作出审核决定。</span>
          <el-button type="primary" @click="reviewDialogOpen = true"><ClipboardCheck :size="16" />审核测量数据</el-button>
        </div>
        <el-alert
          v-else
          title="无测量审核查看权限"
          description="当前账号缺少测量查看权限，无法读取审核所需的原单、箱规和称重数据。"
          type="warning"
          :closable="false"
          show-icon
        />
      </el-tab-pane>
      <el-tab-pane label="费用信息" name="fee" lazy>
        <InboundFeePanel
          :key="`fee-${revision}`"
          :tenant-id="customerId"
          :inbound-id="inboundId"
          @changed="handleDomainChanged"
        />
      </el-tab-pane>
      <el-tab-pane label="状态历史" name="history" lazy>
        <InboundHistoryPanel
          :pallet-locations="[]"
          :files="[]"
          :internal-notes="[]"
          :status-history="detail.statusHistory"
          :public-remark="null"
          :sections="['history']"
        />
      </el-tab-pane>
      <el-tab-pane label="其他记录" name="records" lazy>
        <InboundHistoryPanel
          :pallet-locations="detail.palletLocations"
          :dropship-pallets="detail.dropshipPallets"
          :customer-id="customerId"
          :inbound-id="inboundId"
          :files="detail.files"
          :internal-notes="detail.internalNotes"
          :status-history="[]"
          :public-remark="detail.publicRemark"
          :sections="['dropship', 'allocations', 'files', 'notes', 'remark']"
        />
      </el-tab-pane>
    </el-tabs>

    <InboundMeasurementDialog
      v-model="measurementDialogOpen"
      :customer-id="customerId"
      :inbound-id="inboundId"
      :inbound-code="title"
      @updated="handleDomainChanged"
      @submitted="handleDomainChanged"
    />

    <el-dialog
      v-model="reviewDialogOpen"
      class="inbound-operation-dialog inbound-review-dialog"
      :title="`测量审核 · ${title}`"
      width="min(1240px, calc(100vw - 32px))"
      top="4vh"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <div class="inbound-operation-dialog__body">
        <MeasurementReviewPanel
          v-if="canViewMeasurement"
          :key="`review-dialog-${revision}`"
          :tenant-id="customerId"
          :inbound-id="inboundId"
          :customer-name="detail?.summary.customerName || detail?.summary.companyName"
          :channel-name="detail?.summary.channelName"
          :channel-code="detail?.summary.channelCode"
          @changed="handleReviewChanged"
        />
      </div>
    </el-dialog>
  </section>
</template>

<style scoped>
.inbound-workspace { min-width: 0; }
.workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 24px 16px; border-bottom: 1px solid var(--cc-border); }
.workspace-title-row { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 10px; }
.workspace-title-row h2 { margin: 0; overflow-wrap: anywhere; color: #172033; font-size: 16px; line-height: 1.35; }
.workspace-header p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
.workspace-state { margin: 24px; }
.workspace-skeleton { padding: 0; }
.workflow-tabs { min-width: 0; padding: 0 24px 24px; }
.workflow-tabs :deep(.el-tabs__header) { margin-bottom: 20px; }
.workflow-tabs :deep(.el-tabs__nav-wrap::after) { height: 1px; background: var(--cc-border); }
.workflow-tabs :deep(.el-tabs__active-bar) { height: 2px; background: var(--cc-primary); }
.workflow-tabs :deep(.el-tabs__item) { min-height: 44px; padding: 0 18px; color: #475467; font-size: 13px; font-weight: 500; }
.workflow-tabs :deep(.el-tabs__item.is-active) { color: var(--cc-primary); font-weight: 650; }
.workflow-action-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 14px; border-bottom: 1px solid var(--cc-border); color: var(--cc-muted); font-size: 12px; line-height: 1.5; }
.inbound-operation-dialog__body { min-width: 0; }
:global(.inbound-operation-dialog.el-dialog) { display: flex; max-width: calc(100vw - 32px); height: 92vh; max-height: 92vh; margin-bottom: 0; flex-direction: column; overflow: hidden; }
:global(.inbound-operation-dialog .el-dialog__header) { flex: 0 0 auto; margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--cc-border); }
:global(.inbound-operation-dialog .el-dialog__body) { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; }
@media (max-width: 720px) {
  .workspace-header { align-items: stretch; flex-direction: column; padding: 16px; }
  .workspace-header :deep(.el-button) { width: 100%; min-height: 44px; }
  .workspace-state { margin: 16px; }
  .workflow-tabs { padding: 0 16px 16px; }
  .workflow-tabs :deep(.el-tabs__nav-wrap) { overflow-x: auto; }
  .workflow-tabs :deep(.el-tabs__item) { min-height: 44px; padding-inline: 14px; }
  .workflow-action-row { align-items: stretch; flex-direction: column; }
  .workflow-action-row :deep(.el-button) { width: 100%; min-height: 44px; }
  :global(.inbound-operation-dialog.el-dialog) { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px); height: 92vh; }
  :global(.inbound-operation-dialog .el-dialog__header) { padding: 16px; }
  :global(.inbound-operation-dialog .el-dialog__body) { padding: 14px; }
}
@media (max-width: 360px) {
  :global(.inbound-operation-dialog.el-dialog) { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px); }
  :global(.inbound-operation-dialog .el-dialog__header) { padding: 14px 12px; }
  :global(.inbound-operation-dialog .el-dialog__body) { padding: 10px; }
}
</style>