admin-web/src/modules/finance/pages/FinanceReceivableStatisticsView.vue

<script setup lang="ts">
import '@/styles/adminWorkbench.css'
import '@/styles/adminDensity.css'
import '../financeDensity.css'
import { computed, onMounted, ref } from 'vue'
import { Download, Printer, RotateCcw, Search } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { createPlatformExportTask } from '@/modules/downloads'
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import { showExportTaskCreatedDialog } from '@/shared/components/exportTaskCreatedDialog'
import { getReceivableStatistics } from '../api/finance'
import type { ReceivableStatisticsResult, ReceivableStatisticsRow } from '../types'

const now = new Date()
const defaultMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
const access = useAccessPreviewStore()
const router = useRouter()
const month = ref(defaultMonth)
const customerId = ref('')
const customers = ref<PlatformTenantResource[]>([])
const page = ref(1)
const pageSize = ref(20)
const loading = ref(false)
const exporting = ref(false)
const error = ref<ApiErrorDetails | null>(null)
const result = ref<ReceivableStatisticsResult | null>(null)

const canView = computed(() => access.can('platform:finance:receivable-statistics:list'))
const canExport = computed(() => access.can('platform:finance:receivable-statistics:export') && access.can('platform:download:list'))
const rows = computed<ReceivableStatisticsRow[]>(() => result.value?.records ?? [])
const customerNameById = computed(() => new Map(customers.value.map((item) => [String(item.id), item.tenantName])))
const columns: DataTableColumn[] = [
  { key: 'customerName', label: '应收单位', minWidth: 240, slotName: 'customerName' },
  { key: 'currency', label: '币种', width: 100 },
  { key: 'totalReceivable', label: '应收总额(CNY)', width: 180, slotName: 'totalReceivable' },
  { key: 'totalReceived', label: '已收合计(CNY)', width: 180, slotName: 'totalReceived' },
  { key: 'totalOutstanding', label: '余额未收(CNY)', width: 180, slotName: 'totalOutstanding' },
]

async function load() {
  if (!canView.value || !month.value) return
  loading.value = true
  error.value = null
  try {
    result.value = await getReceivableStatistics({ month: month.value, customerId: customerId.value || undefined, page: page.value, pageSize: pageSize.value })
  } catch (reason) { error.value = getApiErrorDetails(reason, '应收款统计加载失败，请重试') }
  finally { loading.value = false }
}

async function loadCustomers() {
  try {
    const records: PlatformTenantResource[] = []
    let current = 1; let pages = 1
    do { const response = await listPlatformTenants({ page: current, size: 200, status: 'ACTIVE' }); records.push(...response.records); pages = response.pages; current += 1 } while (current <= pages)
    customers.value = records
  } catch { /* 客户筛选失败不阻断统计，仍可查询全部客户。 */ }
}

function search() { page.value = 1; void load() }
function reset() { month.value = defaultMonth; customerId.value = ''; page.value = 1; void load() }
function printCurrent() { window.print() }
function statisticsRowKey(row: ReceivableStatisticsRow) { return `${row.customerId}:${row.customerName}` }
function displayCustomerName(value: unknown) {
  const row = value as ReceivableStatisticsRow
  const masterName = customerNameById.value.get(String(row.customerId))?.trim()
  const snapshot = row.customerName?.trim()
  if (!snapshot || /^客户\s*\d+$/.test(snapshot) || snapshot === String(row.customerId)) return masterName || '—'
  return snapshot
}
async function exportCurrent() {
  exporting.value = true
  try {
    const task = await createPlatformExportTask({ exportType: 'FINANCE_RECEIVABLE_STATISTICS', format: 'XLSX', taskName: `应收款统计表-${month.value}`,
      parameters: { month: month.value, ...(customerId.value ? { customerId: customerId.value } : {}) } })
    const open = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
    if (open) await router.push({ name: 'download-center' })
  } catch (reason) { ElMessage.error(getApiErrorMessage(reason, '应收款统计导出任务创建失败')) }
  finally { exporting.value = false }
}
function money(value?: string) { return Number(value || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }

onMounted(() => { void loadCustomers(); void load() })
</script>

<template>
  <AdminPage class="receivable-statistics-page admin-density admin-workbench" spacing="normal">
    <el-result v-if="!canView" icon="warning" title="无权访问应收款统计表" sub-title="请联系管理员开通应收款统计查看权限" />
    <template v-else>
      <div class="workbench-table is-page-surface"><DataTable class="statistics-table" appearance="integrated" column-settings-mode="show" :results-visible="!error" v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="result?.totalCustomers ?? 0" :row-key="statisticsRowKey" preference-key="finance-receivable-statistics-table" aria-label="应收款统计列表" empty-text="当前月份暂无应收数据" @update:page="load()" @update:page-size="page = 1; load()">
          <template #toolbar-start><h1>应收款统计表</h1></template>
          <template #filters><section class="query-toolbar statistics-query" aria-label="应收款统计筛选">
        <div class="query-field"><span>统计月份</span><el-date-picker v-model="month" type="month" value-format="YYYY-MM" format="YYYY年MM月" :clearable="false" aria-label="统计月份" /></div>
        <div class="query-field"><span>应收单位</span><el-select v-model="customerId" clearable filterable placeholder="全部应收单位" aria-label="应收单位"><el-option v-for="customer in customers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></div>
        <div class="query-actions"><el-button type="primary" :loading="loading" @click="search"><Search :size="16" />查询</el-button><el-button @click="reset"><RotateCcw :size="16" />重置</el-button></div>
      </section></template>
          <template #notices><LoadErrorState v-if="error" title="应收款统计加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template>
          <template #before-results><dl class="density-detail-overview statistics-summary" aria-label="CNY应收汇总">
          <div><dt>应收总额</dt><dd>CNY {{ money(result?.totalReceivable) }}</dd></div>
          <div><dt>已收合计</dt><dd class="is-received">CNY {{ money(result?.totalReceived) }}</dd></div>
          <div><dt>余额未收</dt><dd class="is-outstanding">CNY {{ money(result?.totalOutstanding) }}</dd></div>
        </dl><div class="statistics-report-heading"><h2>应收款明细</h2><span>共 {{ result?.totalCustomers ?? 0 }} 个应收单位 · 仅统计CNY正式应收结算单</span></div></template>

            <template #toolbar-actions><div class="report-actions"><el-button :disabled="loading || !result" @click="printCurrent"><Printer :size="16" />打印</el-button><el-button v-if="canExport" type="primary" :loading="exporting" :disabled="loading || exporting" @click="exportCurrent"><Download :size="16" />导出Excel</el-button></div></template>
            <template #customerName="{ row }">{{ displayCustomerName(row) }}</template><template #totalReceivable="{ row }">{{ money(row.totalReceivable) }}</template><template #totalReceived="{ row }">{{ money(row.totalReceived) }}</template><template #totalOutstanding="{ row }"><span class="outstanding-cell">{{ money(row.totalOutstanding) }}</span></template>
            <template #pagination-left>统计月份：{{ result?.statisticsMonth }} · 币种：CNY</template>
          </DataTable></div>
    </template>
  </AdminPage>
</template>

<style scoped>
.statistics-query { display: flex; align-items: end; gap: var(--admin-space-5); padding: var(--admin-space-6); }
.query-field { display: grid; min-width: 220px; gap: var(--admin-space-2); color: var(--workbench-muted); font-size: var(--admin-font-body); }
.query-field :deep(.el-select), .query-field :deep(.el-date-editor) { width: 100%; }
.query-actions, .report-actions { display: flex; gap: var(--admin-space-3); }
.report-actions { margin-left: auto; }
.query-actions :deep(.el-button), .report-actions :deep(.el-button) { margin-left: 0; }
.outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
.statistics-table { overflow: hidden; }
.statistics-report-heading { display: flex; align-items: center; justify-content: space-between; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--workbench-border); }
.statistics-table h2 { margin: 0; font-size: var(--admin-font-section); }
.statistics-report-heading span { color: var(--workbench-muted); font-size: var(--admin-font-body); }
@media print {
  .statistics-query, :deep(.data-table__toolbar), :deep(.data-table__pagination) { display: none !important; }
  .receivable-statistics-page { gap: 10px; padding: 0; color: #000; }
  .workbench-table > :deep(.data-table) { border-radius: var(--admin-radius); box-shadow: none; }
  .statistics-summary > div, .statistics-table { border-color: #999; box-shadow: none; }
}
</style>