优化

2026-08-17 16:45:46 +08:00
parent 4a9438315c
commit d95c90bd1a
48 changed files with 1217 additions and 374 deletions
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Download, Eye, MoreHorizontal, Plus, RotateCcw, Send, ShieldCheck, XCircle } from '@lucide/vue'
+import { ArrowLeft, Download, Eye, MoreHorizontal, Plus, RotateCcw, Send, ShieldCheck, XCircle } from '@lucide/vue'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
@@ -46,6 +47,8 @@ interface StatementLineSource {
 }

 const access = useAccessPreviewStore()
+const route = useRoute()
+const router = useRouter()
 const customers = ref<PlatformTenantResource[]>([])
 const filters = ref<QueryModel>({
  status: '', billNo: '', customerId: '', containerNo: '', periodStartRange: [], periodEndRange: [],
@@ -66,7 +69,12 @@ const createOpen = ref(false)
 const createBusy = ref(false)
 const exportBusy = ref(false)
 const actionBusy = ref(false)
-const createForm = ref({ periodStart: new Date().toISOString().slice(0, 8) + '01', periodEnd: new Date().toISOString().slice(0, 10), remark: '' })
+const createForm = ref({
+  customerId: '',
+  periodStart: new Date().toISOString().slice(0, 8) + '01',
+  periodEnd: new Date().toISOString().slice(0, 10),
+  remark: '',
+})
 const adjustOpen = ref(false)
 const adjustBusy = ref(false)
 const adjustStatement = ref<FinanceStatementReadModel | null>(null)
@@ -77,11 +85,14 @@ const canView = computed(() => access.can('platform:finance:customer-statement:l
 const canListCustomers = computed(() => access.can('platform:customer:list'))
 const canViewFeeSource = computed(() => access.can('platform:finance:customer-statement:list'))
 const canCreate = computed(() => access.can('platform:finance:reconciliation:create'))
+const activeCustomers = computed(() => customers.value.filter((item) => item.status === 'ACTIVE'))
 const canReview = computed(() => access.can('platform:finance:reconciliation:review'))
 const canIssue = computed(() => access.can('platform:finance:reconciliation:issue'))
 const canAdjust = computed(() => access.can('platform:finance:reconciliation:adjust'))
 const canVoid = computed(() => access.can('platform:finance:reconciliation:void'))
 const canGenerate = computed(() => canCreate.value && canListCustomers.value)
+const detailRouteId = computed(() => route.name === 'finance-customer-statement-detail' ? String(route.params.statementId || '') : '')
+const isDetailRoute = computed(() => Boolean(detailRouteId.value))
 const fields = computed<QueryField[]>(() => [
  { key: 'status', type: 'select', label: '审核状态', width: 180, placeholder: '全部审核状态', options: [
    { label: '草稿', value: 'DRAFT' }, { label: '待审核', value: 'PENDING_REVIEW' }, { label: '审核通过', value: 'APPROVED' },
@@ -111,9 +122,9 @@ const columns: DataTableColumn[] = [
  { key: 'lastPaymentAt', label: '最后收款时间', minWidth: 170, slotName: 'lastPaymentAt' },
  { key: 'settled', label: '是否结清', width: 100, slotName: 'settled' },
  { key: 'remark', label: '备注', minWidth: 180 },
-  { key: 'createdBy', label: '创建人', width: 130, slotName: 'createdBy' },
+  { key: 'createdByName', label: '创建人', width: 130, slotName: 'createdByName' },
  { key: 'createdAt', label: '创建时间', minWidth: 170, slotName: 'createdAt' },
-  { key: 'updatedBy', label: '更新人', width: 130, slotName: 'updatedBy' },
+  { key: 'updatedByName', label: '更新人', width: 130, slotName: 'updatedByName' },
  { key: 'updatedAt', label: '更新时间', minWidth: 170, slotName: 'updatedAt' },
 ]
 const detailLineColumns: DataTableColumn[] = [
@@ -136,7 +147,7 @@ const paymentColumns: DataTableColumn[] = [
  { key: 'amount', label: '支付金额(CNY)', width: 150 },
  { key: 'method', label: '支付方式', width: 130, slotName: 'method' },
  { key: 'referenceNo', label: '支付流水号', minWidth: 180 },
-  { key: 'createdBy', label: '登记人', minWidth: 140, slotName: 'createdBy' },
+  { key: 'createdByName', label: '登记人', minWidth: 140, slotName: 'createdByName' },
  { key: 'occurredAt', label: '登记时间', width: 170, slotName: 'occurredAt' },
  { key: 'remark', label: '备注', minWidth: 200 },
 ]
@@ -157,8 +168,8 @@ function customerDisplayName(customerId: string, value?: string) {

 function operatorDisplayName(value?: string) {
  const candidate = String(value || '').trim()
-  if (!candidate) return '系统'
-  return /^\d+$/.test(candidate) ? '操作人信息缺失' : candidate
+  if (!candidate || /^(?:operator-)?\d+$/i.test(candidate)) return '名称数据缺失'
+  return candidate
 }

 function formatDateTime(value?: string) {
@@ -172,8 +183,8 @@ function detailToRow(row: FinanceStatementReadModel, current?: FinanceReconcilia
    periodStart: current?.periodStart || '', periodEnd: current?.periodEnd || row.billDate,
    creditDays: current ? current.creditDays : null, settled: current ? current.settled : null,
    lastPaymentAt: latestPayment, remark: current?.remark || '',
-    createdBy: current?.createdBy || row.createdBy, createdAt: current?.createdAt || row.createdAt,
-    updatedBy: current?.updatedBy || row.updatedBy, updatedAt: current?.updatedAt || row.updatedAt,
+    createdBy: current?.createdBy || row.createdBy, createdByName: current?.createdByName || row.createdByName, createdAt: current?.createdAt || row.createdAt,
+    updatedBy: current?.updatedBy || row.updatedBy, updatedByName: current?.updatedByName || row.updatedByName, updatedAt: current?.updatedAt || row.updatedAt,
  }
 }

@@ -273,15 +284,13 @@ async function fetchDetail(statementId: string, force = false) {
  return current
 }

-async function openDetail(row: FinanceStatementReadModel) {
-  selectedId.value = row.id
+async function loadDetail(statementId: string) {
+  selectedId.value = statementId
  detail.value = null
  detailError.value = null
  detailLoading.value = true
  try {
-    detail.value = await fetchDetail(row.id, true)
-    const index = rows.value.findIndex((item) => item.id === row.id)
-    if (index >= 0) rows.value[index] = detailToRow(rows.value[index]!, detail.value)
+    detail.value = await fetchDetail(statementId, true)
  } catch (cause) {
    detailError.value = getApiErrorDetails(cause, '对账单明细加载失败，请重试')
  } finally {
@@ -289,19 +298,16 @@ async function openDetail(row: FinanceStatementReadModel) {
  }
 }

-function clearSelection() {
-  selectedId.value = ''
-  detail.value = null
-  detailError.value = null
+async function openDetail(row: FinanceStatementReadModel) {
+  await router.push({ name: 'finance-customer-statement-detail', params: { statementId: row.id } })
 }

 function retrySelectedDetail() {
-  const row = rows.value.find((item) => item.id === selectedId.value)
-  if (row) void openDetail(row)
+  if (selectedId.value) void loadDetail(selectedId.value)
 }

-function selectedRowClass({ row }: { row: StatementRow }) {
-  return row.id === selectedId.value ? 'is-selected-statement' : ''
+async function returnToList() {
+  await router.push({ name: 'finance-customer-statements' })
 }

 function paymentMethodLabel(method: string) {
@@ -327,7 +333,7 @@ async function exportStatements() {
    return
  }
  const header = ['审核状态', '对账单号', '客户', '结算起始日', '结算结束日', '账期(天)', '货币', '总应收金额', '已收金额', '未收金额', '最后收款时间', '是否结清', '备注', '创建人', '创建时间', '更新人', '更新时间']
-  const body = filteredRows.value.map((row) => [financeStatusLabel(row.status), row.billNo, customerDisplayName(row.customerId, row.customerName), row.periodStart, row.periodEnd, row.creditDays ?? '', row.currency, row.totalAmount, row.receivedAmount, row.outstandingAmount, formatDateTime(row.lastPaymentAt), row.settled === null ? '' : (row.settled ? '是' : '否'), row.remark, operatorDisplayName(row.createdBy), formatDateTime(row.createdAt), operatorDisplayName(row.updatedBy), formatDateTime(row.updatedAt)])
+  const body = filteredRows.value.map((row) => [financeStatusLabel(row.status), row.billNo, customerDisplayName(row.customerId, row.customerName), row.periodStart, row.periodEnd, row.creditDays ?? '', row.currency, row.totalAmount, row.receivedAmount, row.outstandingAmount, formatDateTime(row.lastPaymentAt), row.settled === null ? '' : (row.settled ? '是' : '否'), row.remark, operatorDisplayName(row.createdByName), formatDateTime(row.createdAt), operatorDisplayName(row.updatedByName), formatDateTime(row.updatedAt)])
  const blob = new Blob([`\uFEFF${[header, ...body].map((line) => line.map(csvCell).join(',')).join('\r\n')}`], { type: 'text/csv;charset=utf-8' })
  const url = URL.createObjectURL(blob)
  const anchor = document.createElement('a')
@@ -341,16 +347,17 @@ async function exportStatements() {

 function openCreate() {
  if (!canListCustomers.value) return ElMessage.warning('缺少客户列表权限，无法选择客户生成对账单')
+  createForm.value = { ...createForm.value, customerId: '' }
  createOpen.value = true
 }

 async function createStatement() {
-  if (!filters.value.customerId) return ElMessage.warning('请先选择客户')
+  if (!createForm.value.customerId) return ElMessage.warning('请先选择客户')
  if (!createForm.value.periodStart || !createForm.value.periodEnd) return ElMessage.warning('请选择完整账期')
  if (createForm.value.periodStart > createForm.value.periodEnd) return ElMessage.warning('账期开始日期不能晚于结束日期')
  createBusy.value = true
  try {
-    await createReconciliationStatement({ customerId: String(filters.value.customerId), currency: 'CNY', generationMode: 'BY_CUTOFF', periodStart: createForm.value.periodStart, periodEnd: createForm.value.periodEnd, remark: createForm.value.remark || undefined })
+    await createReconciliationStatement({ customerId: String(createForm.value.customerId), currency: 'CNY', generationMode: 'BY_CUTOFF', periodStart: createForm.value.periodStart, periodEnd: createForm.value.periodEnd, remark: createForm.value.remark || undefined })
    createOpen.value = false
    ElMessage.success('对账单已生成')
    await load(filters.value)
@@ -403,18 +410,90 @@ async function submitAdjustment() {
  finally { adjustBusy.value = false }
 }

-onMounted(() => { if (canListCustomers.value) void loadCustomers(); void load() })
+onMounted(() => { if (canListCustomers.value) void loadCustomers() })
+watch(detailRouteId, (statementId) => {
+  if (statementId) void loadDetail(statementId)
+  else {
+    selectedId.value = ''
+    detail.value = null
+    detailError.value = null
+    void load()
+  }
+}, { immediate: true })
 </script>

 <template>
  <AdminPage as="div" class="finance-statements-page" spacing="normal">
    <el-result v-if="!canView" icon="warning" title="无权访问客户对账单" sub-title="请联系管理员开通财务查看权限" />
+    <DetailPageLayout v-else-if="isDetailRoute" class="surface-panel statement-detail-page" aria-label="客户对账单详情">
+      <template #header>
+        <header class="statement-detail-page__header">
+          <div><h2>客户对账单详情</h2><p>{{ detail?.billNo || '正在加载对账单信息' }}</p></div>
+          <el-button @click="returnToList"><ArrowLeft :size="16" />返回客户对账单</el-button>
+        </header>
+      </template>
+      <template v-if="detail" #summary>
+        <div class="statement-detail-head">
+          <div><span>客户对账单</span><h2>{{ detail.billNo }}</h2><p>{{ customerDisplayName(detail.customerId, detail.customerName) }} · {{ detail.periodStart || '—' }} 至 {{ detail.periodEnd || '—' }}</p></div>
+          <el-tag :type="financeStatusTone(detail.status)">{{ financeStatusLabel(detail.status) }}</el-tag>
+        </div>
+        <FormSection class="statement-summary-section" title="对账单概要" aria-label="对账单摘要">
+          <el-descriptions :column="3" border>
+            <el-descriptions-item label="总应收金额">{{ detail.totalAmount.toFixed(2) }} CNY</el-descriptions-item>
+            <el-descriptions-item label="已收金额">{{ detail.paidAmount.toFixed(2) }} CNY</el-descriptions-item>
+            <el-descriptions-item label="未收金额"><strong class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</strong></el-descriptions-item>
+             <el-descriptions-item label="账期">{{ detail.creditDays }} 天</el-descriptions-item>
+             <el-descriptions-item label="货币">{{ detail.currency }}</el-descriptions-item>
+             <el-descriptions-item label="是否结清">{{ detail.settled ? '是' : '否' }}</el-descriptions-item>
+             <el-descriptions-item label="创建人">{{ operatorDisplayName(detail.createdByName) }}</el-descriptions-item>
+             <el-descriptions-item label="创建时间">{{ formatDateTime(detail.createdAt) }}</el-descriptions-item>
+             <el-descriptions-item label="更新人">{{ operatorDisplayName(detail.updatedByName) }}</el-descriptions-item>
+             <el-descriptions-item label="更新时间">{{ formatDateTime(detail.updatedAt) }}</el-descriptions-item>
+             <el-descriptions-item label="备注" :span="2">{{ detail.remark || '—' }}</el-descriptions-item>
+           </el-descriptions>
+        </FormSection>
+      </template>
+      <el-tabs v-model="activeDetailTab" class="statement-detail-tabs">
+        <el-tab-pane label="账单明细表" name="lines">
+          <LoadErrorState v-if="detailError" title="明细加载失败" :message="detailError.message" :loading="detailLoading" @retry="retrySelectedDetail"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
+          <el-skeleton v-else-if="detailLoading" :rows="4" animated />
+          <FormSection v-else-if="detail" title="账单明细" :bordered="false">
+            <div class="detail-table-scroll">
+              <DataTable class="statement-detail-table statement-line-table" :data="detail.lines" size="small" border stripe :columns="detailLineColumns" column-settings-mode="hide" row-key="statementLineId" empty-text="该对账单暂无账单明细" aria-label="客户对账单账单明细">
+                <template #inboundCode="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.inboundCode || row.inboundId || '—' }}</template>
+                <template #containerNo="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.containerNo || (row.containerId ? `柜次ID ${row.containerId}` : '—') }}</template>
+                <template #businessDate="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.businessDate || '—' }}</template>
+                <template #quantity="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.quantity ?? '—' }}</template>
+                <template #unitPrice="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.unitPrice ?? '—' }}</template>
+                <template #billNo>{{ detail.billNo }}</template>
+                <template #periodStart>{{ detail.periodStart || '—' }}</template>
+                <template #periodEnd>{{ detail.periodEnd || '—' }}</template>
+              </DataTable>
+            </div>
+            <el-collapse v-if="detail.revisions.length" class="revision-collapse"><el-collapse-item title="调整记录" name="revisions"><el-table :data="detail.revisions" size="small" border stripe><el-table-column prop="revisionNo" label="修订" width="72" /><el-table-column label="动作" width="130"><template #default="{ row }">{{ revisionActionLabel(row.action) }}</template></el-table-column><el-table-column prop="beforeAmount" label="调整前" /><el-table-column prop="afterAmount" label="调整后" /><el-table-column prop="reason" label="原因" /><el-table-column label="操作人" min-width="140"><template #default="{ row }">{{ operatorDisplayName(row.operatorName) }}</template></el-table-column><el-table-column label="发生时间" min-width="170"><template #default="{ row }">{{ formatDateTime(row.occurredAt) }}</template></el-table-column></el-table></el-collapse-item></el-collapse>
+          </FormSection>
+        </el-tab-pane>
+        <el-tab-pane label="账单支付历史表" name="payments">
+          <FormSection v-if="detail" title="支付历史" :bordered="false">
+            <div class="detail-table-scroll">
+              <DataTable class="statement-detail-table statement-payment-table" :data="detail.paymentHistory" size="small" border stripe :columns="paymentColumns" column-settings-mode="hide" row-key="transactionId" empty-text="该对账单暂无有效收款记录" aria-label="客户对账单支付历史">
+                <template #customerName>{{ customerDisplayName(detail.customerId, detail.customerName) }}</template>
+                <template #transactionDate="{ row }">{{ formatDateTime(row.transactionDate).slice(0, 10) }}</template>
+                <template #method="{ row }">{{ paymentMethodLabel(row.method) }}</template>
+                <template #createdByName="{ row }">{{ operatorDisplayName(row.createdByName) }}</template>
+                <template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template>
+              </DataTable>
+            </div>
+          </FormSection>
+        </el-tab-pane>
+      </el-tabs>
+    </DetailPageLayout>
    <ListPageLayout v-else aria-label="客户对账单">
      <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="客户对账单筛选" :fields="fields" preference-key="finance-statements-query" @search="load" /></template>
      <template v-if="customerError || error" #state><LoadErrorState title="客户对账单加载失败" :message="(customerError || error)?.message || ''" :loading="loading" @retry="customerError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="(customerError || error)!" /></template></LoadErrorState></template>
      <template v-if="!customerError && !error">
        <section class="surface-panel table-panel">
-          <DataTable :data="filteredRows" :columns="columns" :loading="loading" aria-label="客户对账单列表" row-key="id" empty-text="暂无客户对账单" preference-key="finance-customer-statements" :row-class-name="selectedRowClass" @row-click="openDetail">
+          <DataTable :data="filteredRows" :columns="columns" :loading="loading" aria-label="客户对账单列表" row-key="id" empty-text="暂无客户对账单" preference-key="finance-customer-statements" @row-click="openDetail">
            <template #toolbar-actions>
              <el-button :loading="exportBusy" :disabled="loading || exportBusy || !filteredRows.length" @click="exportStatements"><Download :size="15" />导出</el-button>
              <el-button v-if="canCreate" type="primary" :disabled="!canGenerate" :title="canGenerate ? '生成对账单' : '缺少客户列表权限，无法选择客户'" @click="openCreate"><Plus :size="15" />生成对账单</el-button>
@@ -436,81 +515,18 @@ onMounted(() => { if (canListCustomers.value) void loadCustomers(); void load()
            <template #customerName="{ row }">{{ customerDisplayName(row.customerId, row.customerName) }}</template>
            <template #lastPaymentAt="{ row }">{{ formatDateTime(row.lastPaymentAt) }}</template>
            <template #settled="{ row }"><el-tag v-if="row.settled !== null" :type="row.settled ? 'success' : 'warning'">{{ row.settled ? '是' : '否' }}</el-tag><span v-else>—</span></template>
-            <template #createdBy="{ row }">{{ operatorDisplayName(row.createdBy) }}</template>
+            <template #createdByName="{ row }">{{ operatorDisplayName(row.createdByName) }}</template>
            <template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template>
-            <template #updatedBy="{ row }">{{ operatorDisplayName(row.updatedBy) }}</template>
+            <template #updatedByName="{ row }">{{ operatorDisplayName(row.updatedByName) }}</template>
            <template #updatedAt="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
            <template #pagination-left>共 {{ filteredRows.length }} 条 · 币种：CNY</template>
          </DataTable>
        </section>

-        <section class="surface-panel statement-detail-panel" aria-label="所选对账单联动明细">
-          <DetailPageLayout aria-label="客户对账单详情">
-            <template #header>
-              <header class="statement-detail-header">
-                <div class="statement-detail-context"><span>所选对账单</span><strong>{{ selectedId ? '已选择 1 项' : '尚未选择' }}</strong></div>
-                <el-button v-if="selectedId" link @click="clearSelection">清空</el-button>
-              </header>
-            </template>
-            <template v-if="detail" #summary>
-              <div class="statement-detail-head">
-                <div><span>客户对账单</span><h2>{{ detail.billNo }}</h2><p>{{ customerDisplayName(detail.customerId, detail.customerName) }} · {{ detail.periodStart || '—' }} 至 {{ detail.periodEnd || '—' }}</p></div>
-                <el-tag :type="financeStatusTone(detail.status)">{{ financeStatusLabel(detail.status) }}</el-tag>
-              </div>
-              <FormSection class="statement-summary-section" title="对账单概要" aria-label="所选对账单摘要">
-                <el-descriptions :column="3" border>
-                  <el-descriptions-item label="总应收金额">{{ detail.totalAmount.toFixed(2) }} CNY</el-descriptions-item>
-                  <el-descriptions-item label="已收金额">{{ detail.paidAmount.toFixed(2) }} CNY</el-descriptions-item>
-                  <el-descriptions-item label="未收金额"><strong class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</strong></el-descriptions-item>
-                  <el-descriptions-item label="账期">{{ detail.creditDays }} 天</el-descriptions-item>
-                  <el-descriptions-item label="货币">{{ detail.currency }}</el-descriptions-item>
-                  <el-descriptions-item label="是否结清">{{ detail.settled ? '是' : '否' }}</el-descriptions-item>
-                </el-descriptions>
-              </FormSection>
-            </template>
-
-            <el-tabs v-model="activeDetailTab" class="statement-detail-tabs">
-              <el-tab-pane label="账单明细表" name="lines">
-                <LoadErrorState v-if="detailError" title="明细加载失败" :message="detailError.message" :loading="detailLoading" @retry="retrySelectedDetail"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
-                <el-skeleton v-else-if="detailLoading" :rows="4" animated />
-                <FormSection v-else-if="detail" title="账单明细" :bordered="false">
-                  <div class="detail-table-scroll">
-                    <DataTable class="statement-detail-table statement-line-table" :data="detail.lines" size="small" border stripe :columns="detailLineColumns" column-settings-mode="hide" row-key="statementLineId" empty-text="该对账单暂无账单明细" aria-label="客户对账单账单明细">
-                      <template #inboundCode="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.inboundCode || row.inboundId || '—' }}</template>
-                      <template #containerNo="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.containerNo || (row.containerId ? `柜次ID ${row.containerId}` : '—') }}</template>
-                      <template #businessDate="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.businessDate || '—' }}</template>
-                      <template #quantity="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.quantity ?? '—' }}</template>
-                      <template #unitPrice="{ row }">{{ lineSourceCache.get(row.sourceFeeId)?.unitPrice ?? '—' }}</template>
-                      <template #billNo>{{ detail.billNo }}</template>
-                      <template #periodStart>{{ detail.periodStart || '—' }}</template>
-                      <template #periodEnd>{{ detail.periodEnd || '—' }}</template>
-                    </DataTable>
-                  </div>
-                  <el-collapse v-if="detail.revisions.length" class="revision-collapse"><el-collapse-item title="调整记录" name="revisions"><el-table :data="detail.revisions" size="small" border stripe><el-table-column prop="revisionNo" label="修订" width="72" /><el-table-column label="动作" width="130"><template #default="{ row }">{{ revisionActionLabel(row.action) }}</template></el-table-column><el-table-column prop="beforeAmount" label="调整前" /><el-table-column prop="afterAmount" label="调整后" /><el-table-column prop="reason" label="原因" /><el-table-column label="发生时间" min-width="170"><template #default="{ row }">{{ formatDateTime(row.occurredAt) }}</template></el-table-column></el-table></el-collapse-item></el-collapse>
-                </FormSection>
-                <el-empty v-else description="请在主表中选择一张对账单" />
-              </el-tab-pane>
-              <el-tab-pane label="账单支付历史表" name="payments">
-                <FormSection v-if="detail" title="支付历史" :bordered="false">
-                  <div class="detail-table-scroll">
-                    <DataTable class="statement-detail-table statement-payment-table" :data="detail.paymentHistory" size="small" border stripe :columns="paymentColumns" column-settings-mode="hide" row-key="transactionId" empty-text="该对账单暂无有效收款记录" aria-label="客户对账单支付历史">
-                      <template #customerName>{{ customerDisplayName(detail.customerId, detail.customerName) }}</template>
-                      <template #transactionDate="{ row }">{{ formatDateTime(row.transactionDate).slice(0, 10) }}</template>
-                      <template #method="{ row }">{{ paymentMethodLabel(row.method) }}</template>
-                      <template #createdBy="{ row }">{{ operatorDisplayName(row.createdBy) }}</template>
-                      <template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template>
-                    </DataTable>
-                  </div>
-                </FormSection>
-                <el-empty v-else description="请在主表中选择一张对账单" />
-              </el-tab-pane>
-            </el-tabs>
-          </DetailPageLayout>
-        </section>
      </template>
    </ListPageLayout>

-    <AppDialog v-model="createOpen" title="生成客户对账单" width="min(520px, 94vw)" :confirm-loading="createBusy" @confirm="createStatement"><el-form label-position="top"><el-form-item label="账期开始"><el-date-picker v-model="createForm.periodStart" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="账期结束"><el-date-picker v-model="createForm.periodEnd" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="备注"><el-input v-model="createForm.remark" type="textarea" /></el-form-item></el-form></AppDialog>
+    <AppDialog v-model="createOpen" title="生成客户对账单" width="min(560px, 94vw)" :confirm-loading="createBusy" @confirm="createStatement"><el-form label-position="top"><el-form-item label="客户"><el-select v-model="createForm.customerId" filterable placeholder="请选择客户"><el-option v-for="item in activeCustomers" :key="String(item.id)" :label="item.tenantName" :value="String(item.id)" /></el-select></el-form-item><el-form-item label="账期开始"><el-date-picker v-model="createForm.periodStart" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="账期结束"><el-date-picker v-model="createForm.periodEnd" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="备注"><el-input v-model="createForm.remark" type="textarea" /></el-form-item></el-form></AppDialog>

    <AppDialog v-model="adjustOpen" title="调整客户对账单" width="min(900px, 96vw)" :confirm-loading="adjustBusy" @confirm="submitAdjustment">
      <el-form label-position="top"><el-form-item label="整体调整原因"><el-input v-model="adjustReason" type="textarea" maxlength="500" show-word-limit /></el-form-item></el-form>
@@ -522,30 +538,27 @@ onMounted(() => { if (canListCustomers.value) void loadCustomers(); void load()
 <style scoped>
 .finance-statements-page { min-width: 0; }
 :deep(.el-select), :deep(.el-date-editor) { width: 100%; }
-.statement-detail-panel { min-width: 0; overflow: hidden; }
-.statement-detail-panel :deep(.detail-page-layout) { gap: 0; }
-.statement-detail-header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px; border-bottom: 1px solid var(--cc-border-subtle); }
-.statement-detail-context { display: grid; min-width: 0; gap: 3px; }
-.statement-detail-context span { color: var(--cc-text-secondary); font-size: 11px; }
-.statement-detail-context strong { overflow: hidden; color: var(--cc-text-primary); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
-.statement-detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--cc-border-subtle); }
+.statement-detail-page { min-width: 0; width: min(100%, 1920px); margin: 0 auto; overflow: hidden; }
+.statement-detail-page :deep(.detail-page-layout) { gap: 0; }
+.statement-detail-page__header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
+.statement-detail-page__header h2 { margin: 0; color: var(--cc-text-primary); font-size: 20px; }
+.statement-detail-page__header p { margin: 4px 0 0; color: var(--cc-text-secondary); font-size: 13px; }
+.statement-detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
 .statement-detail-head > div > span { color: var(--cc-primary); font-size: 11px; font-weight: 700; }
 .statement-detail-head h2 { margin: 2px 0 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
 .statement-detail-head p { margin: 5px 0 0; color: var(--cc-text-secondary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
-.statement-summary-section { padding: 16px 24px; border-bottom: 1px solid var(--cc-border-subtle); }
+.statement-summary-section { padding: 10px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
 .statement-outstanding { color: var(--el-color-warning-dark-2); }
 .statement-detail-tabs { min-width: 0; }
 .statement-detail-table { min-width: 0; }
 .detail-table-scroll { min-width: 0; overflow-x: auto; }
-.statement-detail-tabs :deep(.el-tabs__header) { margin: 0; padding: 0 24px; }
+.statement-detail-tabs :deep(.el-tabs__header) { margin: 0; padding: 0 16px; }
 .statement-detail-tabs :deep(.el-tabs__content) { min-width: 0; }
-.statement-detail-tabs :deep(.form-section) { padding: 20px 24px 24px; }
+.statement-detail-tabs :deep(.form-section) { padding: 12px 16px 12px; }
 .statement-line-table { min-width: 1840px; }
 .statement-payment-table { min-width: 1300px; }
 .revision-collapse { margin-top: 12px; }
-:deep(.is-selected-statement > td.el-table__cell) { background: var(--el-color-primary-light-9) !important; }
@media (max-width: 640px) {
-  .statement-detail-panel { padding-inline: 12px; }
-  .statement-detail-header div { align-items: flex-start; flex-direction: column; gap: 2px; padding-block: 8px; }
+  .statement-detail-page__header { align-items: stretch; flex-direction: column; }
 }
 </style>