admin-web/src/modules/loading-lists/components/ContainerFeesPanel.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { Check, CircleX, Pencil, Plus, Trash2 } from '@lucide/vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import { adjustContainerFee, approveContainerFee, createContainerFee, listApplicableFeeItems, listContainerCostDetails, listContainerFeeSupplierOptions, listContainerFees, rejectContainerFee, voidContainerFee, type ApplicableFeeItem, type ContainerCostDetail, type ContainerFeeSupplierOption, type ContainerFeeResource, type ContainerFeeSaveRequest } from '../api/containerFees'

const props = defineProps<{ planId: string; containerBookingId: string; customers: Array<{ accountId: string; customerName: string | null }> }>()
const access = useAccessPreviewStore()
const accountId = ref('')
const fees = ref<ContainerFeeResource[]>([])
const feeItems = ref<ApplicableFeeItem[]>([])
const suppliers = ref<ContainerFeeSupplierOption[]>([])
const costs = ref<ContainerCostDetail[]>([])
const loading = ref(false)
const error = ref<ApiErrorDetails | null>(null)
const feeItemsError = ref<ApiErrorDetails | null>(null)
const suppliersError = ref<ApiErrorDetails | null>(null)
const feeItemsLoading = ref(false)
const suppliersLoading = ref(false)
const loadedSupplierCategory = ref<string | null | undefined>(undefined)
const editorOpen = ref(false)
const editorError = ref<ApiErrorDetails | null>(null)
const rejectOpen = ref(false)
const saving = ref(false)
const target = ref<ContainerFeeResource | null>(null)
const formRef = ref<FormInstance>()
const form = reactive<ContainerFeeSaveRequest>({ feeItemId: '', direction: 'RECEIVABLE', supplierId: null, businessDate: new Date().toISOString().slice(0, 10), amount: 0, currency: 'CNY', remark: null })
const rejection = ref('')
let loadSequence = 0
let supplierLoadSequence = 0

const canView = computed(() => access.can('firstleg:inbound:fee-detail:view'))
const canEdit = computed(() => access.can('firstleg:inbound:fee-detail:edit'))
const canReview = computed(() => access.can('firstleg:inbound:fee-detail:review'))
const canViewFeeItems = computed(() => access.can('firstleg:fee-item:view'))
const canViewSuppliers = computed(() => access.can('platform:supplier:list'))
const customerOptions = computed(() => {
  const unique = new Map<string, string>()
  for (const item of props.customers) if (item.accountId) unique.set(item.accountId, item.customerName || '客户信息缺失')
  return [...unique].map(([value, label]) => ({ value, label }))
})
const selectedCustomer = computed(() => customerOptions.value.find((item) => item.value === accountId.value))
const applicableItems = computed(() => feeItems.value.filter((item) => form.direction === 'RECEIVABLE'
  ? item.warehouseReceivable || item.pickupReceivable : item.warehousePayable || item.pickupPayable))
const selectedFeeItem = computed(() => feeItems.value.find((item) => item.id === form.feeItemId))
const columns: DataTableColumn[] = [
  { key: 'actions', label: '操作', fixed: 'left', width: 270, slotName: 'actions', hideable: false, movable: false },
  { key: 'feeItemName', prop: 'feeItemName', label: '费用项目', minWidth: 150 },
  { key: 'direction', label: '方向', width: 90, slotName: 'direction' },
  { key: 'supplier', label: '供应商/客户', minWidth: 170, slotName: 'supplier' },
  { key: 'amount', label: '金额(CNY)', width: 120, align: 'right', slotName: 'amount' },
  { key: 'businessDate', prop: 'businessDate', label: '业务日期', width: 120 },
  { key: 'reviewStatus', label: '审核状态', width: 110, slotName: 'reviewStatus' },
  { key: 'sourceStatus', label: '来源状态', width: 100, slotName: 'sourceStatus' },
  { key: 'remark', prop: 'remark', label: '备注', minWidth: 180, showOverflowTooltip: true },
]
const allocationColumns: DataTableColumn[] = [
  { key: 'orderId', prop: 'orderId', label: '订单', fixed: 'left', minWidth: 150 },
  { key: 'inboundId', prop: 'inboundId', label: '入库单', minWidth: 150 },
  { key: 'volumeCbm', label: '订单体积(m³)', width: 125, align: 'right', slotName: 'volume' },
  { key: 'allocationRate', label: '分摊比例', width: 110, align: 'right', slotName: 'rate' },
  { key: 'allocatedAmount', label: '分摊金额(CNY)', width: 135, align: 'right', slotName: 'allocated' },
]
const rules: FormRules = { feeItemId: [{ required: true, message: '请选择费用项目', trigger: 'change' }], businessDate: [{ required: true, message: '请选择业务日期', trigger: 'change' }], amount: [{ type: 'number', min: 0, message: '金额不能小于 0', trigger: 'change' }] }

function resetForm(item?: ContainerFeeResource) {
  target.value = item || null
  Object.assign(form, item ? { feeItemId: item.feeItemId, direction: item.direction, supplierId: item.supplierId, businessDate: item.businessDate, amount: item.amount, currency: 'CNY', remark: item.remark }
    : { feeItemId: '', direction: 'RECEIVABLE', supplierId: null, businessDate: new Date().toISOString().slice(0, 10), amount: 0, currency: 'CNY', remark: null })
}

async function loadFeeItems() {
  feeItems.value = []; feeItemsError.value = null
  if (!canViewFeeItems.value) return
  feeItemsLoading.value = true
  try { feeItems.value = await listApplicableFeeItems() }
  catch (cause) { feeItemsError.value = getApiErrorDetails(cause, '费用项目加载失败') }
  finally { feeItemsLoading.value = false }
}

async function loadSuppliers() {
  const sequence = ++supplierLoadSequence
  suppliers.value = []; loadedSupplierCategory.value = undefined; suppliersError.value = null
  const item = selectedFeeItem.value
  if (!canViewSuppliers.value || form.direction !== 'PAYABLE' || !item) return
  const category = item.supplierCategory
  suppliersLoading.value = true
  try {
    const result = await listContainerFeeSupplierOptions(category)
    if (sequence === supplierLoadSequence && form.direction === 'PAYABLE' && selectedFeeItem.value?.supplierCategory === category) {
      suppliers.value = result
      loadedSupplierCategory.value = category
    }
  }
  catch (cause) { if (sequence === supplierLoadSequence) suppliersError.value = getApiErrorDetails(cause, '供应商加载失败') }
  finally { if (sequence === supplierLoadSequence) suppliersLoading.value = false }
}

async function load() {
  if (!accountId.value || !canView.value) return
  const sequence = ++loadSequence
  const requestedAccountId = accountId.value
  loading.value = true; error.value = null
  try {
    const feeRows = await listContainerFees(props.planId, requestedAccountId)
    if (sequence !== loadSequence || requestedAccountId !== accountId.value) return
    fees.value = feeRows
    costs.value = []
    const containerIds = [...new Set(feeRows.map((item) => item.containerBookingId).filter((value): value is string => Boolean(value)))]
    if (containerIds.some((value) => value !== props.containerBookingId)) throw new Error('柜次费用与装柜摘要的柜次标识不一致，已停止查询财务分摊')
    const currentContainerId = props.containerBookingId
    if (currentContainerId) {
      const result = await listContainerCostDetails(requestedAccountId, currentContainerId)
      if (sequence !== loadSequence || requestedAccountId !== accountId.value) return
      costs.value = result
    }
  } catch (cause) { if (sequence === loadSequence && requestedAccountId === accountId.value) error.value = getApiErrorDetails(cause, '柜次费用加载失败') }
  finally { if (sequence === loadSequence) loading.value = false }
}

function openCreate() { if (!canEdit.value || !canViewFeeItems.value || !accountId.value) return; resetForm(); editorError.value = null; editorOpen.value = true; void loadFeeItems() }
function openAdjust(item: ContainerFeeResource) { if (!canEdit.value || !accountId.value) return; resetForm(item); editorError.value = null; editorOpen.value = true }
async function save() {
  if (!canEdit.value || !accountId.value || (!target.value && !canViewFeeItems.value)) return
  if (!target.value && form.direction === 'PAYABLE' && !canViewSuppliers.value) { ElMessage.warning('当前账号缺少供应商查看权限，无法保存应付费用'); return }
  if (!await formRef.value?.validate().catch(() => false)) return
  editorError.value = null
  if (target.value) {
    saving.value = true
    try {
      await adjustContainerFee(props.planId, accountId.value, target.value.id, {
        expectedSourceVersion: target.value.sourceVersion,
        businessDate: form.businessDate,
        amount: form.amount,
      })
      editorOpen.value = false; ElMessage.success('费用调整已提交审核'); await load()
    } catch (cause) {
      const details = getApiErrorDetails(cause, '费用调整失败')
      editorError.value = details.code === 'A0409'
        ? { ...details, message: `${details.message}；当前输入已保留，请刷新费用明细后重试。` }
        : details
    } finally { saving.value = false }
    return
  }
  if (form.direction === 'PAYABLE' && suppliersError.value) { ElMessage.warning('供应商列表加载失败，无法校验应付费用供应商'); return }
  if (form.direction === 'PAYABLE' && loadedSupplierCategory.value !== selectedFeeItem.value?.supplierCategory) { ElMessage.warning('供应商候选尚未按费用项目类别加载完成，无法保存'); return }
  if (form.direction === 'PAYABLE' && !form.supplierId) { ElMessage.warning('应付费用必须选择供应商'); return }
  const supplier = suppliers.value.find((item) => item.id === String(form.supplierId))
  if (form.direction === 'PAYABLE' && (!supplier || (selectedFeeItem.value?.supplierCategory && supplier.category !== selectedFeeItem.value.supplierCategory))) { ElMessage.warning('所选供应商与费用项目要求的供应商类别不匹配'); return }
  const payload: ContainerFeeSaveRequest = { ...form, supplierId: form.direction === 'PAYABLE' ? form.supplierId : null }
  saving.value = true
  try {
    await createContainerFee(props.planId, accountId.value, payload)
    editorOpen.value = false; ElMessage.success('费用已新增'); await load()
  } catch (cause) { editorError.value = getApiErrorDetails(cause, '费用保存失败') }
  finally { saving.value = false }
}
async function approve(item: ContainerFeeResource) { if (!canReview.value || !accountId.value) return; await approveContainerFee(props.planId, accountId.value, item.id).then(() => ElMessage.success('费用已审核通过')).then(load).catch((cause) => ElMessage.error(getApiErrorDetails(cause, '审核失败').message)) }
function openReject(item: ContainerFeeResource) { if (!canReview.value || !accountId.value) return; target.value = item; rejection.value = ''; rejectOpen.value = true }
async function reject() {
  if (!canReview.value || !accountId.value || !target.value) return
  if (!rejection.value.trim()) return ElMessage.warning('请输入驳回原因')
  saving.value = true
  try { await rejectContainerFee(props.planId, accountId.value, target.value.id, rejection.value.trim()); rejectOpen.value = false; ElMessage.success('费用已驳回'); await load() }
  catch (cause) { ElMessage.error(getApiErrorDetails(cause, '驳回失败').message) } finally { saving.value = false }
}
async function voidFee(item: ContainerFeeResource) {
  if (!canReview.value || !accountId.value) return
  await ElMessageBox.confirm(`确认作废“${item.feeItemName}”费用？作废后将同步财务来源状态。`, '作废费用', { type: 'warning', confirmButtonText: '确认作废' })
  await voidContainerFee(props.planId, accountId.value, item.id, item.sourceVersion).then(() => ElMessage.success('费用已作废')).then(load).catch((cause) => ElMessage.error(getApiErrorDetails(cause, '作废失败').message))
}
function money(value: number) { return value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }
function initializeCustomer() { accountId.value = customerOptions.value.length === 1 ? customerOptions.value[0].value : '' }
function clearCustomerContext() {
  loadSequence += 1
  supplierLoadSequence += 1
  fees.value = []; costs.value = []; feeItems.value = []; suppliers.value = []; error.value = null; feeItemsError.value = null; suppliersError.value = null; loading.value = false; feeItemsLoading.value = false; suppliersLoading.value = false; loadedSupplierCategory.value = undefined
  editorOpen.value = false; rejectOpen.value = false; target.value = null; rejection.value = ''
  resetForm()
}
watch(customerOptions, initializeCustomer, { immediate: true })
watch(accountId, () => { clearCustomerContext(); void load() })
watch(() => form.direction, (direction) => {
  if (!applicableItems.value.some((item) => item.id === form.feeItemId)) form.feeItemId = ''
  if (direction === 'RECEIVABLE') { supplierLoadSequence += 1; form.supplierId = null; suppliers.value = []; loadedSupplierCategory.value = undefined; suppliersError.value = null; suppliersLoading.value = false }
  else void loadSuppliers()
})
watch(() => form.feeItemId, () => { form.supplierId = null; suppliers.value = []; loadedSupplierCategory.value = undefined; suppliersError.value = null; if (form.direction === 'PAYABLE') void loadSuppliers() })
onMounted(() => void load())
</script>

<template>
  <section class="fees-panel" aria-label="柜次费用维护">
    <header class="fees-header">
      <div><h2>柜次费用</h2><p>费用与财务分摊均来自服务端真实记录</p></div>
      <div class="fees-header__actions">
        <label v-if="customerOptions.length > 1" class="customer-context"><span>客户</span><el-select v-model="accountId" placeholder="请选择费用归属客户"><el-option v-for="item in customerOptions" :key="item.value" :label="item.label" :value="item.value" /></el-select></label>
        <el-button v-if="canEdit && canViewFeeItems && accountId" type="primary" @click="openCreate"><Plus :size="16" />新增费用</el-button>
      </div>
    </header>
    <el-alert v-if="!canView" type="warning" :closable="false" show-icon title="当前账号没有查看柜次费用的权限" />
    <template v-else>
      <el-alert v-if="customerOptions.length === 0" type="warning" :closable="false" show-icon title="装柜明细缺少客户归属，无法安全维护费用" />
      <el-alert v-else-if="!accountId" type="info" :closable="false" show-icon title="该柜次包含多个客户，请先选择费用归属客户" />
      <el-alert v-else-if="!canViewFeeItems" type="warning" :closable="false" show-icon title="当前账号缺少费用项目查看权限，无法新增费用；已审核费用仍可调整日期与金额" />
      <LoadErrorState v-else-if="error" compact title="柜次费用加载失败" :message="error.message" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
      <DataTable v-else :data="fees" :columns="columns" :loading="loading" preference-key="container-fees" row-key="id" empty-text="当前客户暂无柜次费用">
        <template #toolbar-start><div class="fees-table-title"><strong>费用明细</strong><span>{{ fees.length }} 条</span></div></template>
        <template #actions="{ row }"><div class="row-actions"><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="success" @click="approve(row as ContainerFeeResource)"><Check :size="15" />通过</el-button><el-button v-if="canReview && row.reviewStatus === 'PENDING'" link type="danger" @click="openReject(row as ContainerFeeResource)"><CircleX :size="15" />驳回</el-button><el-button v-if="canEdit && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE'" link type="primary" @click="openAdjust(row as ContainerFeeResource)"><Pencil :size="15" />调整</el-button><el-button v-if="canReview && row.reviewStatus === 'APPROVED' && row.sourceStatus === 'ACTIVE'" link type="danger" @click="voidFee(row as ContainerFeeResource)"><Trash2 :size="15" />作废</el-button></div></template>
        <template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : 'warning'" effect="plain">{{ row.direction === 'RECEIVABLE' ? '应收' : '应付' }}</el-tag></template>
        <template #supplier="{ row }">{{ row.direction === 'PAYABLE' ? row.supplierName || '服务端未返回' : selectedCustomer?.label || '客户信息缺失' }}</template>
        <template #amount="{ row }">{{ money(row.amount) }}</template><template #reviewStatus="{ row }"><StatusBadge :status="row.reviewStatus === 'PENDING' ? '待审核' : row.reviewStatus === 'APPROVED' ? '已通过' : '已驳回'" /></template><template #sourceStatus="{ row }"><StatusBadge :status="row.sourceStatus === 'ACTIVE' ? '有效' : '已作废'" /></template>
      </DataTable>

      <div v-if="accountId" class="allocation-section"><header><div><h3>财务体积分摊</h3><p>{{ selectedCustomer?.label }} · 仅展示 Finance 已持久化结果</p></div></header><el-empty v-if="!loading && costs.length === 0" description="尚无与该柜次关联的财务分摊结果" :image-size="64" /><article v-for="cost in costs" :key="cost.id" class="cost-block"><div class="cost-summary"><strong>{{ cost.feeItemName || '柜次成本' }}</strong><span>供应商：{{ cost.supplierName || '服务端未返回' }}</span><span>金额：¥{{ money(cost.amount) }}</span></div><DataTable :data="cost.allocations" :columns="allocationColumns" :preference-key="`container-cost-${cost.id}`" row-key="id" empty-text="服务端未返回分摊明细"><template #volume="{ row }">{{ row.volumeCbm.toFixed(3) }}</template><template #rate="{ row }">{{ (row.allocationRate * 100).toFixed(2) }}%</template><template #allocated="{ row }">{{ money(row.allocatedAmount) }}</template></DataTable></article></div>
    </template>

    <AppDialog v-model="editorOpen" :title="target ? '调整已审核费用' : '新增柜次费用'" confirm-text="保存" :confirm-loading="saving" @confirm="save">
      <div v-if="target" class="adjust-snapshot">
        <p>调整仅允许修改业务日期和金额；如需变更方向、费用项目、供应商或其他信息，请先作废后新增。</p>
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="方向">{{ target.direction === 'RECEIVABLE' ? '应收' : '应付' }}</el-descriptions-item>
          <el-descriptions-item label="费用项目">{{ target.feeItemName }}</el-descriptions-item>
          <el-descriptions-item label="供应商">{{ target.supplierName || '—' }}</el-descriptions-item>
          <el-descriptions-item label="币种">{{ target.currency }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ target.remark || '—' }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <template v-else>
        <el-alert v-if="!canViewSuppliers" type="warning" :closable="false" show-icon title="当前账号缺少供应商查看权限，仅可维护应收费用" />
        <el-alert v-else-if="suppliersError" type="warning" :closable="false" show-icon :title="suppliersError.message" />
        <el-alert v-if="feeItemsError" type="warning" :closable="false" show-icon :title="feeItemsError.message" />
      </template>
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="fee-form">
        <template v-if="!target">
          <el-form-item label="方向" prop="direction"><el-segmented v-model="form.direction" :options="[{ label: '应收', value: 'RECEIVABLE' }, { label: '应付', value: 'PAYABLE', disabled: !canViewSuppliers }]" /></el-form-item>
          <el-form-item label="费用项目" prop="feeItemId"><el-select v-model="form.feeItemId" filterable :loading="feeItemsLoading" :disabled="!canViewFeeItems" placeholder="请选择启用且适用的费用项目"><el-option v-for="item in applicableItems" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
          <el-form-item v-if="form.direction === 'PAYABLE'" label="供应商" required><el-select v-model="form.supplierId" filterable :loading="suppliersLoading" :disabled="!canViewSuppliers || !selectedFeeItem || !!suppliersError" placeholder="请先选择费用项目"><el-option v-for="supplier in suppliers" :key="supplier.id" :label="supplier.supplierName" :value="supplier.id" /></el-select></el-form-item>
        </template>
        <el-form-item label="业务日期" prop="businessDate"><el-date-picker v-model="form.businessDate" type="date" value-format="YYYY-MM-DD" /></el-form-item>
        <el-form-item label="金额(CNY)" prop="amount"><el-input-number v-model="form.amount" :min="0" :precision="2" controls-position="right" /></el-form-item>
        <template v-if="!target">
          <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></el-form-item>
        </template>
      </el-form>
      <LoadErrorState v-if="editorError" compact title="费用保存失败" :message="editorError.message" :show-retry="false"><template #details><ApiErrorMeta :details="editorError" /></template></LoadErrorState>
    </AppDialog>
    <AppDialog v-model="rejectOpen" title="驳回柜次费用" confirm-text="确认驳回" :confirm-loading="saving" @confirm="reject"><el-input v-model="rejection" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入驳回原因" /></AppDialog>
  </section>
</template>

<style scoped>
.fees-panel { min-width: 0; overflow: hidden; padding-top: 16px; border-top: 1px solid var(--cc-border); }
.fees-header, .allocation-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 12px; }
.fees-header h2, .allocation-section h3 { margin: 0; font-size: 16px; }.fees-header p, .allocation-section p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; }
.fees-header__actions, .customer-context { display: flex; align-items: center; gap: 10px; }
.customer-context > span { color: var(--cc-muted); font-size: 13px; white-space: nowrap; }.customer-context :deep(.el-select) { width: 260px; }
.fees-table-title { display: flex; align-items: baseline; gap: 8px; }.fees-table-title strong { font-size: 14px; }.fees-table-title span { color: var(--cc-muted); font-size: 12px; }
.fees-panel :deep(.data-table__toolbar) { min-height: 48px; padding: 6px 12px; }
.fees-panel :deep(.el-table th.el-table__cell) { padding: 7px 0; }.fees-panel :deep(.el-table td.el-table__cell) { padding: 6px 0; }
.row-actions { display: flex; flex-wrap: wrap; }.allocation-section { padding-top: 16px; border-top: 1px solid var(--cc-border); }.cost-block { border-top: 1px solid var(--cc-border); }.cost-summary { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 10px 14px; background: #f8fafc; font-size: 13px; }.cost-summary span { color: var(--cc-muted); }.fee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 14px; }.fee-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
.adjust-snapshot p { margin: 0 0 12px; color: var(--cc-muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) { .fees-header { align-items: stretch; flex-direction: column; }.fees-header .el-button { width: 100%; }.fee-form { grid-template-columns: 1fr; }.fee-form :deep(.el-form-item:last-child) { grid-column: auto; }.customer-context { align-items: stretch; flex-direction: column; } }
</style>