301 lines
28 KiB
Vue
301 lines
28 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, reactive, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ArrowLeft, Eye, FileCheck2, FilePlus2, Link2 } from '@lucide/vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useAccessPreviewStore } from '@/core/access/accessPreview'
|
|
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
|
|
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
|
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
|
|
import AppDialog from '@/shared/components/AppDialog.vue'
|
|
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
|
import ListPageLayout from '@/shared/components/ListPageLayout.vue'
|
|
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
|
|
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
|
|
import { createReconciliationStatement, getFinanceFeeSource, listFinanceFeePool, reviewFinanceFeeSource, updateFinanceFeeSourceSettlementInclusion } from '../api/finance'
|
|
import { financeArapStatusOptions, financeDirectionLabel, financeOperationActionLabel, financeOperationResultLabel, financeSourceTypeLabel, financeStatusLabel } from '../status'
|
|
import type { FinanceFeeSourceDetail } from '../types'
|
|
|
|
interface ArapRow {
|
|
id: string
|
|
feeSourceId: string | null
|
|
customerId: string
|
|
customerName: string
|
|
direction: 'RECEIVABLE' | 'PAYABLE'
|
|
documentNo: string
|
|
sourceType: string
|
|
sourceId: string
|
|
orderId: string
|
|
inboundId: string
|
|
containerId: string
|
|
feeName: string
|
|
amount: number
|
|
status: string
|
|
occurredAt: string
|
|
businessDate: string
|
|
reviewStatus: string
|
|
settlementIncluded: boolean | null
|
|
statementGenerated: boolean | null
|
|
}
|
|
|
|
const access = useAccessPreviewStore()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const customers = ref<PlatformTenantResource[]>([])
|
|
const customersLoading = ref(false)
|
|
const customersError = ref<ApiErrorDetails | null>(null)
|
|
const filters = ref<QueryModel>({ customerId: '', direction: '', reviewStatus: '', settlementIncluded: '', statementGenerated: '', businessRange: [], keyword: '' })
|
|
const allRows = ref<ArapRow[]>([])
|
|
const loading = ref(false)
|
|
const loadError = ref<ApiErrorDetails | null>(null)
|
|
const detailOpen = ref(false)
|
|
const selected = ref<ArapRow | null>(null)
|
|
const detail = ref<FinanceFeeSourceDetail | null>(null)
|
|
const detailLoading = ref(false)
|
|
const detailError = ref<ApiErrorDetails | null>(null)
|
|
const reviewOpen = ref(false)
|
|
const reviewSaving = ref(false)
|
|
const reviewError = ref<ApiErrorDetails | null>(null)
|
|
const reviewForm = reactive<{ action: 'APPROVE' | 'REJECT'; reason: string }>({ action: 'APPROVE', reason: '' })
|
|
const inclusionOpen = ref(false)
|
|
const inclusionSaving = ref(false)
|
|
const inclusionError = ref<ApiErrorDetails | null>(null)
|
|
const inclusionForm = reactive({ included: true, reason: '' })
|
|
const generationOpen = ref(false)
|
|
const generationSaving = ref(false)
|
|
const generationError = ref<ApiErrorDetails | null>(null)
|
|
const generationForm = reactive<{ mode: 'BY_CUTOFF' | 'SELECTED'; customerId: string; period: string[]; cutoffDate: string; remark: string }>({ mode: 'SELECTED', customerId: '', period: [], cutoffDate: '', remark: '' })
|
|
const selectedRows = ref<ArapRow[]>([])
|
|
const page = ref(1)
|
|
const pageSize = ref(20)
|
|
|
|
const canView = computed(() => access.can('platform:finance:customer-arap:list'))
|
|
const canListCustomers = computed(() => canView.value || access.can('platform:customer:list'))
|
|
const canViewSource = computed(() => access.can('platform:finance:customer-arap:list'))
|
|
const canReviewSource = computed(() => access.can('platform:finance:fee-source:review'))
|
|
const canSettleSource = computed(() => access.can('platform:finance:fee-source:settlement'))
|
|
const canCreateStatement = computed(() => access.can('platform:finance:reconciliation:create'))
|
|
const stateError = computed(() => customersError.value || loadError.value)
|
|
const activeCustomers = computed(() => customers.value.filter((item) => item.status === 'ACTIVE'))
|
|
const queryFields = computed<QueryField[]>(() => [
|
|
{ key: 'customerId', type: 'select', label: '客户名称', width: 260, placeholder: '全部客户', props: { 'aria-label': '客户名称', filterable: true, clearable: true, loading: customersLoading.value }, options: activeCustomers.value.map((item) => ({ label: item.tenantName, value: String(item.id) })) },
|
|
{ key: 'direction', type: 'select', label: '收付方向', width: 140, placeholder: '全部', options: [{ label: '应收', value: 'RECEIVABLE' }, { label: '应付', value: 'PAYABLE' }] },
|
|
{ key: 'reviewStatus', type: 'select', label: '审核状态', width: 150, placeholder: '全部状态', options: financeArapStatusOptions },
|
|
{ key: 'settlementIncluded', type: 'select', label: '参与结算', width: 140, placeholder: '全部', options: [{ label: '参与', value: 'true' }, { label: '不参与', value: 'false' }] },
|
|
{ key: 'statementGenerated', type: 'select', label: '已生成对账单', width: 160, placeholder: '全部', options: [{ label: '已生成', value: 'true' }, { label: '未生成', value: 'false' }] },
|
|
{ key: 'businessRange', type: 'daterange', label: '业务日期', width: 280 },
|
|
{ key: 'keyword', type: 'input', label: '关键词', width: 220, placeholder: '单号/费用/来源ID', props: { 'aria-label': '关键词' } },
|
|
])
|
|
const columns: DataTableColumn[] = [
|
|
{ key: 'actions', label: '操作', width: 260, fixed: 'left', slotName: 'actions' }, { key: 'selection', type: 'selection', width: 48, fixed: 'left', selectable: (row: ArapRow) => row.direction === 'RECEIVABLE' && Boolean(row.feeSourceId) }, { key: 'direction', label: '收付方向', width: 100, slotName: 'direction' },
|
|
{ key: 'customerName', label: '客户', minWidth: 180, slotName: 'customerName' }, { key: 'documentNo', label: '费用单据', minWidth: 170 }, { key: 'sourceType', label: '来源类型', width: 120, slotName: 'sourceType' },
|
|
{ key: 'sourceId', label: '来源追溯', minWidth: 200 }, { key: 'feeName', label: '费用项目', minWidth: 150 }, { key: 'amount', label: '金额(CNY)', width: 130 },
|
|
{ key: 'reviewStatus', label: '审核状态', width: 120, slotName: 'status' }, { key: 'settlementIncluded', label: '参与结算', width: 110, slotName: 'included' }, { key: 'statementGenerated', label: '已生成对账单', width: 140, slotName: 'generated' }, { key: 'businessDate', label: '业务发生日', width: 170, slotName: 'businessDate' },
|
|
]
|
|
function customerName(customerId: string, snapshot?: string) {
|
|
const masterName = customers.value.find((item) => String(item.id) === String(customerId))?.tenantName?.trim()
|
|
const candidate = String(snapshot || '').trim()
|
|
const placeholder = [String(customerId), `客户 ${customerId}`, `客户${customerId}`].includes(candidate)
|
|
return masterName || (candidate && !placeholder ? candidate : '客户名称暂不可用')
|
|
}
|
|
function sourceTypeDisplay(value: unknown) {
|
|
const code = String(value || '').trim().toUpperCase()
|
|
const labels: Record<string, string> = {
|
|
INBOUND_FEE: '入库费用', ORDER_FEE: '订单费用', CONTAINER_COST: '整柜成本', CONTAINER_FEE: '柜次费用',
|
|
MANUAL_COST: '人工成本', STORAGE_FEE: '仓储费用',
|
|
}
|
|
return labels[code] || (code ? '其他费用来源' : '来源类型暂不可用')
|
|
}
|
|
function feeDocumentLabel(direction: ArapRow['direction'], feeName: unknown) {
|
|
const prefix = direction === 'RECEIVABLE' ? '应收费用' : '应付费用'
|
|
const name = displayFeeName(feeName)
|
|
return name ? `${prefix} · ${name}` : prefix
|
|
}
|
|
function displayFeeName(value: unknown) {
|
|
const name = String(value || '').trim()
|
|
if (!name) return ''
|
|
if (/^ADMIN-API-\d+-整柜成本$/i.test(name)) return '整柜成本'
|
|
return name
|
|
}
|
|
function sourceSummary(sourceType: unknown, orderId: unknown, inboundId: unknown, containerId: unknown) {
|
|
const relations = [inboundId ? '关联入库单' : '', orderId ? '关联订单' : '', containerId ? '关联柜次' : ''].filter(Boolean)
|
|
const type = sourceTypeDisplay(sourceType)
|
|
return relations.length ? `${type} · ${relations.join('、')}` : type
|
|
}
|
|
function formatDateTime(value: unknown) {
|
|
const raw = String(value || '').trim()
|
|
if (!raw) return '时间暂不可用'
|
|
const date = new Date(raw)
|
|
return Number.isNaN(date.getTime()) ? '时间暂不可用' : date.toLocaleString('zh-CN', { hour12: false })
|
|
}
|
|
function displayOperator(value: unknown) {
|
|
const operator = String(value || '').trim()
|
|
if (!operator) return '系统'
|
|
return /^(?:operator-)?\d+$/i.test(operator) ? '操作人信息缺失' : operator
|
|
}
|
|
const filteredRows = computed(() => {
|
|
const keyword = String(filters.value.keyword || '').trim().toLowerCase(); const direction = String(filters.value.direction || ''); const reviewStatus = String(filters.value.reviewStatus || '')
|
|
const included = String(filters.value.settlementIncluded || ''); const generated = String(filters.value.statementGenerated || ''); const range = Array.isArray(filters.value.businessRange) ? filters.value.businessRange.map(String) : []
|
|
return allRows.value.filter((row) => (!direction || row.direction === direction) && (!reviewStatus || row.reviewStatus === reviewStatus) && (!included || String(row.settlementIncluded) === included) && (!generated || String(row.statementGenerated) === generated) && (!range[0] || row.businessDate >= range[0]) && (!range[1] || row.businessDate <= range[1]) && (!keyword || [row.documentNo, row.sourceId, row.feeName].some((value) => value.toLowerCase().includes(keyword))))
|
|
})
|
|
const rows = computed(() => filteredRows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
|
|
const selectedAmount = computed(() => selectedRows.value.reduce((sum, row) => sum + row.amount, 0))
|
|
|
|
async function loadCustomers() {
|
|
if (!canListCustomers.value) return
|
|
customersLoading.value = true; customersError.value = null
|
|
try { const records: PlatformTenantResource[] = []; let currentPage = 1; let pages = 1; do { const result = await listPlatformTenants({ page: currentPage, size: 200, status: 'ACTIVE' }); records.push(...result.records); pages = Math.max(1, result.pages); currentPage += 1 } while (currentPage <= pages); customers.value = records }
|
|
catch (error) { customersError.value = getApiErrorDetails(error, '客户列表加载失败') }
|
|
finally { customersLoading.value = false }
|
|
}
|
|
async function load(model: QueryModel = filters.value) {
|
|
Object.assign(filters.value, model); page.value = 1; allRows.value = []; loadError.value = null
|
|
const customerId = String(filters.value.customerId || '').trim()
|
|
loading.value = true
|
|
try {
|
|
const direction = String(filters.value.direction || '') as 'RECEIVABLE' | 'PAYABLE' | ''
|
|
const items = await listFinanceFeePool(customerId || undefined, direction || undefined)
|
|
allRows.value = items.map((item): ArapRow => ({ id: item.poolItemId, feeSourceId: item.feeSourceId, customerId: item.customerId, customerName: customerName(item.customerId, item.customerName), direction: item.direction, documentNo: feeDocumentLabel(item.direction, item.feeItemName), sourceType: item.sourceType, sourceId: sourceSummary(item.sourceType, item.orderId, item.inboundId, item.containerId), orderId: item.orderId || '', inboundId: item.inboundId || '', containerId: item.containerId || '', feeName: displayFeeName(item.feeItemName), amount: item.amount, status: item.status, occurredAt: item.createdAt, businessDate: item.createdAt, reviewStatus: item.status, settlementIncluded: null, statementGenerated: null }))
|
|
} catch (error) { loadError.value = getApiErrorDetails(error, '客户应收应付加载失败，请重试') }
|
|
finally { loading.value = false }
|
|
}
|
|
async function loadDetail(row: ArapRow) {
|
|
detailLoading.value = true; detailError.value = null; detail.value = null
|
|
if (!row.feeSourceId) { detailError.value = { message: '该手工成本没有可审核的费用来源详情' }; detailLoading.value = false; return null }
|
|
try { detail.value = await getFinanceFeeSource(row.feeSourceId); return detail.value }
|
|
catch (error) { detailError.value = getApiErrorDetails(error, '费用来源详情加载失败，请重试'); return null }
|
|
finally { detailLoading.value = false }
|
|
}
|
|
async function openDetail(row: Record<string, unknown>) {
|
|
const target = row as unknown as ArapRow
|
|
if (!target.feeSourceId) return
|
|
await router.push({ name: 'finance-customer-arap-detail', params: { feeSourceId: target.feeSourceId } })
|
|
}
|
|
async function openReview(row: Record<string, unknown>) {
|
|
const target = row as unknown as ArapRow; selected.value = target
|
|
const loaded = await loadDetail(target)
|
|
if (!loaded) { detailOpen.value = true; return }
|
|
Object.assign(reviewForm, { action: 'APPROVE', reason: '' }); reviewError.value = null; reviewOpen.value = true
|
|
}
|
|
async function submitReview() {
|
|
if (!detail.value) return
|
|
if (reviewForm.action === 'REJECT' && !reviewForm.reason.trim()) { ElMessage.warning('请填写驳回原因'); return }
|
|
reviewSaving.value = true; reviewError.value = null
|
|
try {
|
|
detail.value = await reviewFinanceFeeSource(detail.value.feeSourceId, { action: reviewForm.action, reason: reviewForm.reason.trim() || undefined, expectedVersion: detail.value.operationVersion })
|
|
reviewOpen.value = false; ElMessage.success(reviewForm.action === 'APPROVE' ? '费用来源已审核通过' : '费用来源已驳回'); await load()
|
|
} catch (error) { reviewError.value = getApiErrorDetails(error, '费用来源审核失败，请重试') }
|
|
finally { reviewSaving.value = false }
|
|
}
|
|
async function openInclusion(row: Record<string, unknown>) {
|
|
const target = row as unknown as ArapRow; selected.value = target
|
|
const loaded = await loadDetail(target)
|
|
if (!loaded) { detailOpen.value = true; return }
|
|
Object.assign(inclusionForm, { included: !loaded.settlementIncluded, reason: '' }); inclusionError.value = null; inclusionOpen.value = true
|
|
}
|
|
async function submitInclusion() {
|
|
if (!detail.value) return
|
|
if (!inclusionForm.reason.trim()) { ElMessage.warning('请填写调整原因'); return }
|
|
inclusionSaving.value = true; inclusionError.value = null
|
|
try {
|
|
detail.value = await updateFinanceFeeSourceSettlementInclusion(detail.value.feeSourceId, { included: inclusionForm.included, reason: inclusionForm.reason.trim(), expectedVersion: detail.value.operationVersion })
|
|
inclusionOpen.value = false; ElMessage.success(inclusionForm.included ? '已纳入结算' : '已排除结算'); await load()
|
|
} catch (error) { inclusionError.value = getApiErrorDetails(error, '参与结算状态更新失败，请重试') }
|
|
finally { inclusionSaving.value = false }
|
|
}
|
|
function statusLabel(status: string) { return financeStatusLabel(status) }
|
|
function money(value: unknown) { return Number(value || 0).toFixed(2) }
|
|
function onSelectionChange(rows: ArapRow[]) { selectedRows.value = rows }
|
|
function openGeneration(mode: 'BY_CUTOFF' | 'SELECTED') {
|
|
generationForm.mode = mode; generationForm.customerId = String(filters.value.customerId || ''); generationForm.period = Array.isArray(filters.value.businessRange) ? filters.value.businessRange.map(String) : []; generationForm.cutoffDate = generationForm.period[1] || ''; generationForm.remark = ''; generationError.value = null; generationOpen.value = true
|
|
}
|
|
async function submitGeneration() {
|
|
const eligible = selectedRows.value.filter((row) => row.feeSourceId && row.direction === 'RECEIVABLE' && row.reviewStatus === 'APPROVED' && row.settlementIncluded === true && row.statementGenerated === false)
|
|
const period = generationForm.period
|
|
if (!generationForm.customerId || !period[0] || !period[1]) { ElMessage.warning('请选择客户和业务期间'); return }
|
|
if (generationForm.mode === 'SELECTED' && !eligible.length) { ElMessage.warning('请选择审核通过、参与结算且未出账的应收费用'); return }
|
|
generationSaving.value = true; generationError.value = null
|
|
try { await createReconciliationStatement({ customerId: generationForm.customerId, currency: 'CNY', generationMode: generationForm.mode, feeSourceIds: generationForm.mode === 'SELECTED' ? eligible.map((row) => row.feeSourceId as string) : undefined, periodStart: period[0], periodEnd: period[1], remark: generationForm.remark.trim() }); generationOpen.value = false; selectedRows.value = []; ElMessage.success('对账单草稿已生成'); await load() } catch (error) { generationError.value = getApiErrorDetails(error, '对账单生成失败，请重试') } finally { generationSaving.value = false }
|
|
}
|
|
async function closeDetail() { detailOpen.value = false; selected.value = null; detail.value = null; await router.push({ name: 'finance-customer-arap' }) }
|
|
async function restoreFeeSourceDetail(feeSourceId: string) {
|
|
detailOpen.value = true; detailLoading.value = true; detailError.value = null; detail.value = null
|
|
try {
|
|
detail.value = await getFinanceFeeSource(feeSourceId)
|
|
selected.value = { id: detail.value.poolItemId, feeSourceId, customerId: detail.value.customerId, customerName: customerName(detail.value.customerId, detail.value.customerName), direction: detail.value.direction, documentNo: feeDocumentLabel(detail.value.direction, detail.value.feeItemName), sourceType: detail.value.sourceType, sourceId: detail.value.sourceId, orderId: detail.value.orderId || '', inboundId: detail.value.inboundId || '', containerId: detail.value.containerId || '', feeName: displayFeeName(detail.value.feeItemName), amount: detail.value.amount, status: detail.value.status, occurredAt: detail.value.createdAt, businessDate: detail.value.businessDate, reviewStatus: detail.value.reviewStatus, settlementIncluded: detail.value.settlementIncluded, statementGenerated: detail.value.statementGenerated }
|
|
} catch (error) { detailError.value = getApiErrorDetails(error, '费用来源详情加载失败，请重试') }
|
|
finally { detailLoading.value = false }
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const feeSourceId = String(route.params.feeSourceId || '')
|
|
if (route.name === 'finance-customer-arap-detail' && feeSourceId) { if (canListCustomers.value) await loadCustomers(); await restoreFeeSourceDetail(feeSourceId); return }
|
|
if (canListCustomers.value) await loadCustomers()
|
|
await load()
|
|
})
|
|
watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSourceId], previous) => {
|
|
if (!previous) return
|
|
if (name === 'finance-customer-arap-detail' && feeSourceId) void restoreFeeSourceDetail(String(feeSourceId))
|
|
else { detailOpen.value = false; selected.value = null; detail.value = null; void load() }
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AdminPage as="div" class="finance-arap-page" spacing="normal">
|
|
<el-result v-if="!canView" icon="warning" title="无权访问客户应收应付" sub-title="请联系管理员开通账单查看权限" />
|
|
<ListPageLayout v-else-if="!detailOpen" aria-label="客户应收应付">
|
|
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="客户应收应付筛选" :fields="queryFields" preference-key="finance-customer-arap-query" @search="load" /></template>
|
|
<template v-if="stateError" #state><LoadErrorState title="客户应收应付加载失败" :message="stateError.message" :loading="customersLoading || loading" @retry="customersError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="stateError" /></template></LoadErrorState></template>
|
|
<section v-if="!customersError && !loadError" class="surface-panel table-panel">
|
|
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="filteredRows.length" preference-key="finance-customer-arap-table" aria-label="客户应收应付列表" row-key="id" empty-text="暂无客户应收应付数据" @selection-change="onSelectionChange">
|
|
<template #toolbar-actions><div v-if="canCreateStatement" class="generation-actions"><el-button :disabled="!filters.customerId" @click="openGeneration('BY_CUTOFF')"><FilePlus2 :size="16" />按截止日期生成</el-button><el-button type="primary" :disabled="!selectedRows.length" @click="openGeneration('SELECTED')"><FilePlus2 :size="16" />按勾选生成</el-button></div></template>
|
|
<template #actions="{ row }"><div class="row-actions"><template v-if="row.feeSourceId"><el-button v-if="canViewSource" link type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button><el-button v-if="canReviewSource" link type="primary" @click="openReview(row)"><FileCheck2 :size="15" />审核</el-button><el-button v-if="canSettleSource" link type="primary" @click="openInclusion(row)"><Link2 :size="15" />结算</el-button></template><span v-else class="muted-action">手工成本</span></div></template>
|
|
<template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template><template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : row.direction === 'PAYABLE' ? 'warning' : 'info'">{{ financeDirectionLabel(row.direction) }}</el-tag></template>
|
|
<template #documentNo="{ row }">{{ feeDocumentLabel(row.direction, row.feeName) }}</template><template #sourceType="{ row }">{{ sourceTypeDisplay(row.sourceType) }}</template><template #sourceId="{ row }">{{ row.sourceId }}</template>
|
|
<template #status="{ row }"><el-tag :type="row.reviewStatus === 'APPROVED' ? 'success' : row.reviewStatus === 'REJECTED' ? 'danger' : 'warning'">{{ statusLabel(row.reviewStatus) }}</el-tag></template>
|
|
<template #included="{ row }">{{ row.settlementIncluded == null ? '待加载' : row.settlementIncluded ? '参与' : '不参与' }}</template>
|
|
<template #generated="{ row }">{{ row.statementGenerated == null ? '待加载' : row.statementGenerated ? '已生成' : '未生成' }}</template>
|
|
<template #businessDate="{ row }">{{ formatDateTime(row.businessDate) }}</template><template #pagination-left>已选 {{ selectedRows.length }} 笔 · 应收金额 {{ money(selectedAmount) }} CNY</template>
|
|
</DataTable></section>
|
|
</ListPageLayout>
|
|
<AdminPage v-else as="div" class="finance-arap-detail" spacing="normal">
|
|
<div class="detail-heading"><el-button @click="closeDetail"><ArrowLeft :size="16" />返回客户应收应付</el-button><div><h2>费用来源详情</h2><p>{{ selected?.documentNo || '费用来源' }} · {{ selected ? customerName(selected.customerId, selected.customerName) : '客户名称暂不可用' }}</p></div><div class="detail-actions"><el-button v-if="canReviewSource && selected" @click="openReview(selected as unknown as Record<string, unknown>)"><FileCheck2 :size="16" />审核</el-button><el-button v-if="canSettleSource && selected" @click="openInclusion(selected as unknown as Record<string, unknown>)"><Link2 :size="16" />参与结算</el-button></div></div>
|
|
<LoadErrorState v-if="detailError" title="费用来源详情加载失败" :message="detailError.message" :loading="detailLoading" @retry="selected && loadDetail(selected)"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
|
|
<template v-else-if="detail">
|
|
<el-descriptions :column="2" class="arap-detail"><el-descriptions-item label="收付方向">{{ financeDirectionLabel(detail.direction) }}</el-descriptions-item><el-descriptions-item label="审核状态">{{ statusLabel(detail.reviewStatus) }}</el-descriptions-item><el-descriptions-item label="客户">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</el-descriptions-item><el-descriptions-item label="费用状态">{{ statusLabel(detail.sourceStatus) }}</el-descriptions-item><el-descriptions-item label="来源类型">{{ sourceTypeDisplay(detail.sourceType) }}</el-descriptions-item><el-descriptions-item label="关联单据">{{ detail.inboundCode || detail.containerNo || '—' }}</el-descriptions-item><el-descriptions-item label="费用项目">{{ displayFeeName(detail.feeItemName) }}</el-descriptions-item><el-descriptions-item label="金额">{{ money(detail.amount) }} CNY</el-descriptions-item><el-descriptions-item label="参与结算">{{ detail.settlementIncluded ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="已生成对账单">{{ detail.statementGenerated ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="审核原因" :span="2">{{ detail.reviewReason || '-' }}</el-descriptions-item><el-descriptions-item label="结算调整原因" :span="2">{{ detail.settlementReason || '-' }}</el-descriptions-item></el-descriptions>
|
|
<section class="operation-log"><h3>操作记录</h3><el-timeline v-if="detail.operationLogs?.length"><el-timeline-item v-for="(log, index) in detail.operationLogs" :key="`${log.occurredAt}-${index}`" :timestamp="formatDateTime(log.occurredAt)">{{ financeOperationActionLabel(log.action) }} · {{ displayOperator(log.operatorName) }}<small>{{ log.remark || financeOperationResultLabel(log.result) }}</small></el-timeline-item></el-timeline><el-empty v-else description="暂无操作记录" /></section>
|
|
</template>
|
|
</AdminPage>
|
|
<AppDialog v-model="reviewOpen" title="费用来源审核" confirm-text="提交审核" :confirm-loading="reviewSaving" @confirm="submitReview">
|
|
<el-alert v-if="reviewError" type="error" :closable="false"><ApiErrorMeta :details="reviewError" /></el-alert>
|
|
<el-form label-position="top"><el-form-item label="审核结论"><el-segmented v-model="reviewForm.action" :options="[{ label: '通过', value: 'APPROVE' }, { label: '驳回', value: 'REJECT' }]" /></el-form-item><el-form-item :label="reviewForm.action === 'REJECT' ? '驳回原因' : '审核说明（可选）'"><el-input v-model="reviewForm.reason" type="textarea" :rows="3" maxlength="500" :placeholder="reviewForm.action === 'REJECT' ? '请填写驳回原因' : '请输入审核说明（可选）'" show-word-limit /></el-form-item></el-form>
|
|
</AppDialog>
|
|
<AppDialog v-model="inclusionOpen" title="参与结算设置" confirm-text="保存设置" :confirm-loading="inclusionSaving" @confirm="submitInclusion">
|
|
<el-alert v-if="inclusionError" type="error" :closable="false"><ApiErrorMeta :details="inclusionError" /></el-alert>
|
|
<el-form label-position="top"><el-form-item label="结算状态"><el-switch v-model="inclusionForm.included" active-text="参与结算" inactive-text="排除结算" /></el-form-item><el-form-item label="调整原因"><el-input v-model="inclusionForm.reason" type="textarea" :rows="3" maxlength="500" placeholder="请说明参与或排除结算的原因" show-word-limit /></el-form-item></el-form>
|
|
</AppDialog>
|
|
<AppDialog v-model="generationOpen" :title="generationForm.mode === 'BY_CUTOFF' ? '按截止日期生成对账单' : '按勾选生成对账单'" confirm-text="生成草稿" :confirm-loading="generationSaving" @confirm="submitGeneration">
|
|
<el-alert v-if="generationError" type="error" :closable="false"><ApiErrorMeta :details="generationError" /></el-alert>
|
|
<el-form label-position="top"><el-form-item label="客户"><el-select v-model="generationForm.customerId" filterable placeholder="请选择客户" style="width:100%"><el-option v-for="customer in activeCustomers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></el-form-item><el-form-item label="业务期间"><el-date-picker v-model="generationForm.period" type="daterange" value-format="YYYY-MM-DD" start-placeholder="开始日期" end-placeholder="截止日期" style="width:100%" /></el-form-item><el-form-item v-if="generationForm.mode === 'SELECTED'" label="已选费用"><span>{{ selectedRows.length }} 笔，合计 {{ money(selectedAmount) }} CNY</span></el-form-item><el-form-item label="备注"><el-input v-model="generationForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit /></el-form-item></el-form>
|
|
</AppDialog>
|
|
</AdminPage>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.finance-arap-page,.finance-arap-detail { min-width: 0; }
|
|
.row-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
|
|
.row-actions .el-button { margin-left: 0; }
|
|
.generation-actions,.detail-heading,.detail-actions { display: flex; align-items: center; gap: 8px; }
|
|
.detail-heading { align-items: flex-start; margin-bottom: 16px; }
|
|
.detail-heading h2 { margin: 0; font-size: 18px; }
|
|
.detail-heading p { margin: 4px 0 0; color: var(--cc-muted); }
|
|
.detail-actions { margin-left: auto; }
|
|
.muted-action { color: var(--cc-muted); }
|
|
.arap-detail { margin-bottom: 16px; }
|
|
.operation-log h3 { margin: 0 0 14px; font-size: 15px; }
|
|
.operation-log small { display: block; margin-top: 4px; color: var(--cc-muted); }
|
|
@media (max-width: 720px) { .detail-heading { align-items: stretch; flex-direction: column; } .detail-actions { margin-left: 0; } :deep(.arap-detail .el-descriptions__body .el-descriptions__table) { table-layout: fixed; } }
|
|
@media (max-width: 480px) { :deep(.arap-detail .el-descriptions__cell) { display: block; width: 100%; } }
|
|
</style>
|