admin-web/src/modules/inbounds/review/MeasurementReviewPanel.vue

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check, CircleAlert, RotateCcw, ShieldAlert, X } 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 StatusBadge from '@/shared/components/StatusBadge.vue'
import { inboundReviewStatusLabels, inboundStatusLabel } from '../status'
import { downloadWeightImage } from '../weight/api/weightOcr'
import WeightImageThumbnail from '../weight/components/WeightImageThumbnail.vue'
import {
  approveMeasurement,
  getMeasurementReviewDetail,
  listMeasurementReviewHistory,
  rejectMeasurement,
  releaseRejectedMeasurement,
} from './api'
import type { MeasurementReviewDetail, MeasurementReviewRecord } from './types'

const props = defineProps<{
  customerId?: string
  /** @deprecated 仅用于兼容尚未完成 customerId 映射的上层集成。 */
  tenantId?: string
  inboundId: string
}>()

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

const access = useAccessPreviewStore()
const detail = ref<MeasurementReviewDetail | null>(null)
const history = ref<MeasurementReviewRecord[]>([])
const loading = ref(false)
const historyLoading = ref(false)
const actionLoading = ref('')
const loadError = ref<ApiErrorDetails | null>(null)
const historyError = ref<ApiErrorDetails | null>(null)
const reasonDialog = ref<'reject' | 'release' | null>(null)
const reason = ref('')
const requestSerial = ref(0)
const previewOpen = ref(false)
const previewUrl = ref('')
const previewLoading = ref(false)
const previewError = ref<ApiErrorDetails | null>(null)
const previewResult = ref<MeasurementReviewDetail['weightResults'][number] | null>(null)
const previewIndex = ref(0)
let previewRequestSerial = 0
const reasonDialogOpen = computed({
  get: () => reasonDialog.value !== null,
  set: (open: boolean) => { if (!open) reasonDialog.value = null },
})

const canReview = computed(() => access.can('firstleg:inbound:measurement-review'))
const canRelease = computed(() => access.can('firstleg:inbound:exception-release'))
const customerId = computed(() => props.customerId || props.tenantId || '')
const isPending = computed(() => detail.value?.measureReviewStatus === 'PENDING' && detail.value?.processStatus === 'MEASURE_PENDING')
const isRejected = computed(() => detail.value?.measureReviewStatus === 'REJECTED' && detail.value?.processStatus === 'MEASURE_REJECTED')
const reviewStatusLabel = computed(() => inboundStatusLabel(detail.value?.measureReviewStatus, inboundReviewStatusLabels, '未提交'))

function formatNumber(value: number | null | undefined, unit = '') {
  if (value === null || value === undefined || Number.isNaN(value)) return '-'
  return `${value.toLocaleString('zh-CN', { maximumFractionDigits: 3 })}${unit}`
}

function formatDate(value: string | null | undefined) {
  return value ? value.replace('T', ' ') : '-'
}

function resultLabel(value: string | null | undefined) {
  if (value === 'APPROVED') return '审核通过'
  if (value === 'REJECTED') return '审核驳回'
  return '未知结果'
}

function releasePreview() {
  if (previewUrl.value) URL.revokeObjectURL(previewUrl.value)
  previewUrl.value = ''
}

async function openWeightImage(row: unknown, index: number) {
  previewResult.value = row as MeasurementReviewDetail['weightResults'][number]
  previewIndex.value = index
  previewOpen.value = true
  await loadPreviewImage()
}

async function loadPreviewImage() {
  const row = previewResult.value
  if (!row?.fileId) return
  const serial = ++previewRequestSerial
  releasePreview()
  previewError.value = null
  previewLoading.value = true
  try {
    const blob = await downloadWeightImage(customerId.value, props.inboundId, row.fileId)
    if (serial === previewRequestSerial) previewUrl.value = URL.createObjectURL(blob)
  } catch (error) {
    if (serial === previewRequestSerial) previewError.value = getApiErrorDetails(error, '称重原图读取失败，请重新加载')
  } finally {
    if (serial === previewRequestSerial) previewLoading.value = false
  }
}

function isConflict(error: unknown) {
  const details = getApiErrorDetails(error)
  return details.message.includes('版本已变化') || details.message.includes('并发修改')
}

async function loadReview() {
  const serial = ++requestSerial.value
  loadError.value = null
  loading.value = true
  try {
    const result = await getMeasurementReviewDetail(customerId.value, props.inboundId)
    if (serial === requestSerial.value) detail.value = result
  } catch (error) {
    if (serial === requestSerial.value) {
      detail.value = null
      loadError.value = getApiErrorDetails(error, '测量审核数据加载失败')
    }
  } finally {
    if (serial === requestSerial.value) loading.value = false
  }
}

async function loadHistory() {
  historyError.value = null
  historyLoading.value = true
  try {
    const result = await listMeasurementReviewHistory(customerId.value, props.inboundId)
    history.value = result.records
  } catch (error) {
    history.value = []
    historyError.value = getApiErrorDetails(error, '审核历史加载失败')
  } finally {
    historyLoading.value = false
  }
}

async function reload() {
  await Promise.all([loadReview(), loadHistory()])
}

async function confirmApprove() {
  if (!detail.value || !isPending.value || !canReview.value) return
  try {
    await ElMessageBox.confirm(
      '审核通过后，入库单将进入待分柜。系统会尝试生成初算费用，但初算失败不影响审核通过，后续可由平台人员补充调整。是否继续？',
      '确认测量审核通过',
      { confirmButtonText: '通过并进入待分柜', cancelButtonText: '返回', type: 'warning' },
    )
  } catch {
    return
  }
  actionLoading.value = 'approve'
  try {
    const result = await approveMeasurement(customerId.value, props.inboundId, {
      measurementId: detail.value.measurementId,
      expectedVersion: detail.value.inboundVersion,
    })
    if (result.initialPricingSucceeded) {
      ElMessage.success('审核已通过，入库单已进入待分柜，费用已完成初算')
    } else {
      ElMessage.warning(`审核已通过，入库单已进入待分柜；费用初算未完成${result.initialPricingMessage ? `：${result.initialPricingMessage}` : ''}`)
    }
    await reload()
    emit('changed')
  } catch (error) {
    ElMessage.error(isConflict(error) ? '数据已被更新，请刷新后重新审核' : getApiErrorDetails(error, '审核通过失败').message)
    if (isConflict(error)) await reload()
  } finally {
    actionLoading.value = ''
  }
}

function openReasonDialog(kind: 'reject' | 'release') {
  reason.value = ''
  reasonDialog.value = kind
}

async function submitReason() {
  if (!detail.value || !reasonDialog.value) return
  const value = reason.value.trim()
  if (!value) {
    ElMessage.warning(reasonDialog.value === 'reject' ? '请填写驳回原因' : '请填写异常放行原因')
    return
  }
  const kind = reasonDialog.value
  actionLoading.value = kind
  try {
    if (kind === 'reject') {
      await rejectMeasurement(customerId.value, props.inboundId, {
        measurementId: detail.value.measurementId,
        expectedVersion: detail.value.inboundVersion,
        reason: value,
      })
      ElMessage.success('测量已驳回，已退回测量修正')
    } else {
      await releaseRejectedMeasurement(customerId.value, props.inboundId, {
        measurementId: detail.value.measurementId,
        expectedVersion: detail.value.inboundVersion,
        reason: value,
      })
      ElMessage.success('异常放行已提交，后续计费入库将继续处理')
    }
    reasonDialog.value = null
    await reload()
    emit('changed')
  } catch (error) {
    ElMessage.error(isConflict(error) ? '数据已被更新，请刷新后重试' : getApiErrorDetails(error, kind === 'reject' ? '测量驳回失败' : '异常放行失败').message)
    if (isConflict(error)) await reload()
  } finally {
    actionLoading.value = ''
  }
}

watch(() => [customerId.value, props.inboundId], () => {
  if (customerId.value && props.inboundId) void reload()
}, { immediate: true })

onMounted(() => {
  if (!customerId.value || !props.inboundId) loadError.value = { message: '缺少所属企业或入库单标识，无法加载审核数据' }
})

watch(previewOpen, (open) => {
  if (!open) {
    previewRequestSerial += 1
    previewResult.value = null
    previewError.value = null
    releasePreview()
  }
})
onBeforeUnmount(releasePreview)

defineExpose({ confirmApprove, openReasonDialog, isPending, isRejected, canReview, canRelease, actionLoading })
</script>

<template>
  <section class="review-panel" aria-labelledby="measurement-review-title">
    <header class="review-header">
      <div>
        <span>入仓码</span>
        <h2 id="measurement-review-title">{{ detail?.inboundCode || '-' }}</h2>
        <p>{{ detail ? `${detail.companyName || '客户未命名'} · ${detail.channelName || detail.channelCode || '渠道未填写'}` : '称重结果' }}</p>
      </div>
      <div class="review-header-status">
        <StatusBadge v-if="detail" :status="reviewStatusLabel" />
        <el-button text :loading="loading || historyLoading" aria-label="刷新审核数据" @click="reload"><RotateCcw :size="16" />刷新</el-button>
      </div>
    </header>

    <el-alert v-if="loadError" type="error" :closable="false" show-icon role="alert">
      <template #title><div class="review-alert-title"><span>{{ loadError.message }}</span><ApiErrorMeta :details="loadError" /></div></template>
      <el-button link type="danger" @click="reload">重新加载</el-button>
    </el-alert>

    <el-skeleton v-if="loading && !detail" :rows="8" animated />

    <template v-else-if="detail">
      <dl class="weight-overview" aria-label="重量审核摘要">
        <div class="weight-overview__primary"><dt>合计货物重量</dt><dd>{{ formatNumber(detail.actualGrossWeightKg, ' kg') }}</dd></div>
        <div><dt>托盘数量</dt><dd>{{ detail.weightResults.length }} 托</dd></div>
      </dl>

      <div v-if="detail.reviewReason" class="review-reason">
        <CircleAlert :size="17" /><span><strong>最近审核说明：</strong>{{ detail.reviewReason }}</span>
      </div>

      <div class="review-section weight-evidence-section">
        <div class="section-heading"><h3>全部称重图片</h3><span class="section-count">{{ detail.weightResults.length }} 张</span></div>
        <div v-if="detail.weightResults.length" class="weight-evidence-grid">
          <article v-for="(row, index) in detail.weightResults" :key="row.id" class="weight-evidence-card">
            <div class="weight-evidence-card__image">
              <WeightImageThumbnail
                v-if="row.fileId"
                :customer-id="customerId"
                :inbound-id="inboundId"
                :file-id="row.fileId"
                :alt="`称重图片 ${index + 1}`"
                @open="openWeightImage(row, index)"
              />
              <span v-else class="missing-evidence">未关联图片</span>
            </div>
            <div class="weight-evidence-card__weight">
              <span>货物重量</span>
              <strong>{{ formatNumber(row.netWeightKg, ' kg') }}</strong>
            </div>
            <div class="weight-evidence-card__record">
              <span>{{ row.palletCode }} · {{ row.palletType }}</span>
              <span>容量 {{ formatNumber(row.palletCapacityCbm, ' m³') }}</span>
            </div>
          </article>
        </div>
        <el-empty v-else description="暂无称重图片" :image-size="56" />
      </div>

      <div class="review-actions" :class="{ 'review-actions--disabled': !isPending && !isRejected }">
        <div><strong>审核结论</strong><span v-if="isPending">通过后进入待分柜</span><span v-else-if="isRejected">已驳回，可修正后重新提交</span><span v-else>当前记录不可审核</span></div>
        <div class="action-buttons">
          <el-button v-if="isPending && canReview" type="danger" plain :loading="actionLoading === 'reject'" @click="openReasonDialog('reject')"><X :size="16" />驳回</el-button>
          <el-button v-if="isPending && canReview" type="primary" :loading="actionLoading === 'approve'" @click="confirmApprove"><Check :size="16" />通过并进入待分柜</el-button>
          <el-button v-if="isRejected && canRelease" type="warning" plain :loading="actionLoading === 'release'" @click="openReasonDialog('release')"><ShieldAlert :size="16" />异常放行</el-button>
        </div>
      </div>

      <el-collapse class="review-history">
        <el-collapse-item name="history" :title="`审核历史（${history.length}）`">
          <el-alert v-if="historyError" type="warning" :closable="false" show-icon><template #title><div class="review-alert-title"><span>{{ historyError.message }}</span><ApiErrorMeta :details="historyError" /></div></template><el-button link type="warning" @click="loadHistory">重试</el-button></el-alert>
          <el-skeleton v-else-if="historyLoading" :rows="3" animated />
          <el-empty v-else-if="!history.length" description="暂无审核历史" :image-size="48" />
          <ol v-else class="history-list">
            <li v-for="item in history" :key="item.id">
              <div class="history-marker" :class="{ 'history-marker--success': item.reviewResult === 'APPROVED', 'history-marker--danger': item.reviewResult === 'REJECTED' }" />
              <div class="history-content"><div><strong>{{ resultLabel(item.reviewResult) }}{{ item.exceptionRelease ? ' · 异常放行' : '' }}</strong><time>{{ formatDate(item.reviewedAt) }}</time></div><p>{{ item.releaseReason || item.reviewReason || '未填写说明' }}</p><span>{{ item.reviewerName || '系统' }}</span></div>
            </li>
          </ol>
        </el-collapse-item>
      </el-collapse>
    </template>

    <el-dialog v-model="previewOpen" :title="`称重原图 ${previewIndex + 1}`" width="min(880px, calc(100vw - 28px))" destroy-on-close append-to-body>
      <div v-if="previewResult" class="weight-preview">
        <div v-loading="previewLoading" class="weight-preview__canvas">
          <img v-if="previewUrl" :src="previewUrl" :alt="`称重原图 ${previewIndex + 1}`" />
          <el-alert v-else-if="previewError" type="error" :closable="false" show-icon>
            <template #title><div class="review-alert-title"><span>{{ previewError.message }}</span><ApiErrorMeta :details="previewError" /></div></template>
            <el-button link type="danger" :loading="previewLoading" @click="loadPreviewImage">重新加载原图</el-button>
          </el-alert>
        </div>
        <dl class="weight-preview__facts">
          <div><dt>托盘</dt><dd>{{ previewResult.palletCode }} · {{ previewResult.palletType }}</dd></div>
          <div><dt>含托盘重量</dt><dd>{{ formatNumber(previewResult.grossWeightKg, ' kg') }}</dd></div>
          <div><dt>托盘皮重</dt><dd>{{ formatNumber(previewResult.palletTareWeightKg, ' kg') }}</dd></div>
          <div><dt>货物重量</dt><dd>{{ formatNumber(previewResult.netWeightKg, ' kg') }}</dd></div>
        </dl>
      </div>
    </el-dialog>

    <el-dialog v-model="reasonDialogOpen" :title="reasonDialog === 'reject' ? '填写驳回原因' : '填写异常放行原因'" width="min(520px, calc(100vw - 28px))" destroy-on-close>
      <el-alert v-if="reasonDialog === 'release'" title="异常放行不会抹去驳回记录；请说明为什么允许该测量继续进入自动计费入库。" type="warning" :closable="false" show-icon />
      <el-input v-model="reason" type="textarea" :rows="5" maxlength="1000" show-word-limit :placeholder="reasonDialog === 'reject' ? '请说明需要修正的测量问题' : '请填写异常放行的业务原因'" />
      <template #footer><el-button :disabled="Boolean(actionLoading)" @click="reasonDialog = null">取消</el-button><el-button :type="reasonDialog === 'reject' ? 'danger' : 'warning'" :loading="Boolean(actionLoading)" @click="submitReason">确认{{ reasonDialog === 'reject' ? '驳回' : '放行' }}</el-button></template>
    </el-dialog>
  </section>
</template>

<style scoped>
.review-panel { display: grid; gap: 16px; color: var(--cc-text); }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 4px; }
.review-header > div:first-child { display: grid; min-width: 0; gap: 3px; }
.review-header > div:first-child > span { color: var(--cc-muted); font-size: 11px; }
.review-header h2 { margin: 0; overflow-wrap: anywhere; font-size: 20px; line-height: 1.25; }
.review-header p, .section-heading p { margin: 0; color: var(--cc-muted); font-size: 13px; line-height: 1.55; }
.review-header-status { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.review-alert-title { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.weight-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; background: var(--cc-surface); }
.weight-overview > div { display: grid; align-content: center; min-width: 0; min-height: 82px; gap: 7px; padding: 14px 18px; border-right: 1px solid var(--cc-border); }
.weight-overview > div:last-child { border-right: 0; }.weight-overview dt { color: var(--cc-muted); font-size: 12px; }.weight-overview dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }.weight-overview__primary { background: #f0f7ff; }.weight-overview__primary dd { color: var(--cc-primary); font-size: 24px; }
.review-reason { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border: 1px solid #f3d19e; border-radius: 8px; background: #fdf6ec; color: #8a5a00; font-size: 13px; line-height: 1.55; }
.review-section { display: grid; gap: 13px; padding-top: 2px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }.section-heading h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 16px; }.section-count { color: var(--cc-muted); font-size: 12px; white-space: nowrap; }
.weight-evidence-section { min-width: 0; }
.weight-evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.weight-evidence-card { min-width: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; }
.weight-evidence-card__image { display: grid; aspect-ratio: 4 / 3; overflow: hidden; place-items: center; background: #f2f4f7; }
.weight-evidence-card__image :deep(.weight-thumb) { height: 100%; border-radius: 0; }
.weight-evidence-card__weight { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.weight-evidence-card__weight span { color: var(--cc-muted); font-size: 12px; }
.weight-evidence-card__weight strong { color: #067647; font-size: 20px; overflow-wrap: anywhere; text-align: right; }
.weight-evidence-card__record { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 0 14px 12px; color: var(--cc-muted); font-size: 12px; }
.missing-evidence { color: var(--cc-muted); font-size: 12px; }
.weight-preview { display: grid; gap: 14px; }.weight-preview__canvas { display: grid; min-height: 320px; max-height: 62vh; overflow: hidden; place-items: center; border: 1px solid var(--cc-border); border-radius: 6px; background: #f2f4f7; }.weight-preview__canvas img { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }.weight-preview__canvas .el-alert { width: min(520px, calc(100% - 24px)); }.weight-preview__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 6px; }.weight-preview__facts > div { display: grid; min-width: 0; gap: 5px; padding: 12px 14px; border-right: 1px solid var(--cc-border); }.weight-preview__facts > div:last-child { border-right: 0; }.weight-preview__facts dt { color: var(--cc-muted); font-size: 12px; }.weight-preview__facts dd { min-width: 0; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.review-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 16px; border: 1px solid #b3d8ff; border-radius: 10px; background: #ecf5ff; }.review-actions > div:first-child { display: grid; gap: 4px; min-width: 0; }.review-actions span { color: #606266; font-size: 12px; line-height: 1.5; }.review-actions--disabled { border-color: var(--cc-border); background: var(--cc-surface-muted); }.action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.history-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }.history-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 16px; }.history-list li:not(:last-child)::after { content: ''; position: absolute; top: 16px; bottom: 0; left: 7px; width: 1px; background: var(--cc-border); }.history-marker { z-index: 1; width: 14px; height: 14px; margin-top: 2px; border: 3px solid #909399; border-radius: 50%; background: var(--cc-surface); }.history-marker--success { border-color: #67c23a; }.history-marker--danger { border-color: #f56c6c; }.history-content { min-width: 0; }.history-content > div { display: flex; justify-content: space-between; gap: 12px; }.history-content time, .history-content > span { color: var(--cc-muted); font-size: 11px; }.history-content p { margin: 5px 0 4px; color: var(--cc-text); font-size: 13px; overflow-wrap: anywhere; }
.review-history { border-top: 1px solid var(--cc-border); border-bottom: 0; }
.review-history :deep(.el-collapse-item__header) { height: 42px; color: var(--cc-muted); font-size: 12px; }
.review-history :deep(.el-collapse-item__wrap) { border-bottom: 0; }
.el-button { min-height: 36px; }.el-button :deep(svg) { flex: 0 0 auto; }.review-panel :deep(.el-dialog__body) { display: grid; gap: 14px; }
@media (max-width: 720px) { .review-header, .section-heading, .review-actions { align-items: flex-start; flex-direction: column; }.review-header-status, .action-buttons { width: 100%; justify-content: space-between; }.weight-overview { grid-template-columns: 1fr; }.weight-overview > div { min-height: 68px; border-right: 0; border-bottom: 1px solid var(--cc-border); }.weight-overview > div:last-child { border-bottom: 0; }.weight-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.weight-preview__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }.weight-preview__facts > div:nth-child(2) { border-right: 0; }.weight-preview__facts > div:nth-child(-n + 2) { border-bottom: 1px solid var(--cc-border); }.review-actions .action-buttons .el-button { flex: 1 1 140px; }.review-actions .action-buttons { justify-content: stretch; }.review-actions .action-buttons :deep(.el-button) { width: 100%; } }
@media (max-width: 380px) { .review-header h2 { font-size: 19px; }.review-header p { font-size: 12px; }.weight-overview { grid-template-columns: 1fr; }.weight-overview > div { min-height: 68px; border-right: 0; border-bottom: 1px solid var(--cc-border); }.weight-overview > div:last-child { border-bottom: 0; }.weight-overview__primary dd { font-size: 21px; }.weight-evidence-grid { grid-template-columns: 1fr; }.review-actions { padding: 13px; } }
</style>