1

src/modules/finance/pages/FinanceCustomerArapView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ArrowLeft, Ban, Download, Eye, FileCheck2, FilePlus2, Pencil, Send } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
@@ -53,6 +53,7 @@ const router = useRouter()
 const customers = ref<PlatformTenantResource[]>([])
 const customersLoading = ref(false)
 const customersError = ref<ApiErrorDetails | null>(null)
+const customerSelectOpen = ref(false)
 const filters = ref<QueryModel>({ customerId: '', direction: '', status: '', reviewStatus: '', statementGenerated: '', businessRange: [], keyword: '' })
 const allRows = ref<ArapRow[]>([])
 const loading = ref(false)
@@ -92,14 +93,40 @@ function isFirstlegSource(source: { sourceSystem?: unknown; sourceType?: unknown
 }
 const stateError = computed(() => customersError.value || loadError.value)
 const activeCustomers = computed(() => customers.value.filter((item) => item.status === 'ACTIVE'))
+function onCustomerSelectVisible(visible: boolean) {
+  customerSelectOpen.value = visible
+}
+function closeCustomerSelectOnScroll() {
+  if (!customerSelectOpen.value || typeof document === 'undefined') return
+  const input = document.querySelector('.finance-customer-select input') as HTMLInputElement | null
+  input?.blur()
+  customerSelectOpen.value = false
+}
 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: 'status', type: 'select', label: '来源状态', width: 150, placeholder: '全部状态', options: [{ label: '可结算', value: 'AVAILABLE' }, { label: '已占用', value: 'LOCKED' }, { label: '已生成对账单', value: 'BILLED' }, { label: '已作废', value: 'VOIDED' }, { label: '已被调整替代', value: 'SUPERSEDED' }] },
-  { key: 'reviewStatus', type: 'select', label: '审核状态', width: 150, placeholder: '全部状态', options: financeArapStatusOptions },
-  { key: 'statementGenerated', type: 'select', label: '已生成对账单', width: 160, placeholder: '全部', options: [{ label: '已生成', value: 'true' }, { label: '未生成', value: 'false' }] },
+  {
+    key: 'customerId',
+    type: 'select',
+    label: '客户名称',
+    width: 260,
+    placeholder: '请选择客户',
+    props: {
+      'aria-label': '客户名称',
+      class: 'finance-customer-select',
+      popperClass: 'finance-customer-arap-popper',
+      teleported: false,
+      onVisibleChange: onCustomerSelectVisible,
+      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: 'status', type: 'select', label: '来源状态', width: 150, placeholder: '请选择来源状态', options: [{ label: '可结算', value: 'AVAILABLE' }, { label: '已占用', value: 'LOCKED' }, { label: '已生成对账单', value: 'BILLED' }, { label: '已作废', value: 'VOIDED' }, { label: '已被调整替代', value: 'SUPERSEDED' }] },
+  { key: 'reviewStatus', type: 'select', label: '审核状态', width: 150, placeholder: '请选择审核状态', options: financeArapStatusOptions },
+  { 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: 240, placeholder: '业务单号/费用/客户/供应商', props: { 'aria-label': '关键词' } },
+  { key: 'keyword', type: 'input', label: '关键词', width: 240, placeholder: '请输入业务单号/费用/客户/供应商', props: { 'aria-label': '关键词' } },
 ])
 const columns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 260, fixed: 'left', slotName: 'actions' }, { key: 'selection', type: 'selection', width: 48, fixed: 'left', selectable: isSelectableReceivable }, { key: 'direction', label: '收付方向', width: 100, slotName: 'direction' },
@@ -315,11 +342,15 @@ async function restoreFeeSourceDetail(feeSourceId: string) {
 }
 
 onMounted(async () => {
+  document.addEventListener('scroll', closeCustomerSelectOnScroll, true)
   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()
 })
+onBeforeUnmount(() => {
+  document.removeEventListener('scroll', closeCustomerSelectOnScroll, true)
+})
 watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSourceId], previous) => {
   if (!previous) return
   if (name === 'finance-customer-arap-detail' && feeSourceId) void restoreFeeSourceDetail(String(feeSourceId))
@@ -335,7 +366,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
       <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="客户应收应付筛选" :fields="queryFields" preference-key="finance-customer-arap-query" @search="search" /></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="total" preference-key="finance-customer-arap-table" aria-label="客户应收应付列表" row-key="id" empty-text="暂无客户应收应付数据" @selection-change="onSelectionChange" @update:page="load()" @update:page-size="page = 1; load()">
+        <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" max-height="calc(100vh - 300px)" preference-key="finance-customer-arap-table" aria-label="客户应收应付列表" row-key="id" empty-text="暂无客户应收应付数据" @selection-change="onSelectionChange" @update:page="load()" @update:page-size="page = 1; load()">
         <template #toolbar-actions><div class="generation-actions"><el-button v-if="canExport" :loading="exportBusy" :disabled="loading || exportBusy" @click="exportFeeSources"><Download :size="16" />导出Excel</el-button><el-button v-if="canCreateStatement" type="primary" :disabled="!selectedRows.length" @click="continueSelectedGeneration"><FilePlus2 :size="16" />生成所选对账单</el-button></div></template>
         <template #actions="{ row }"><div class="row-actions"><template v-if="row.feeSourceId"><el-button v-if="canViewSource" size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button><el-button v-if="canEditSource && !isFirstlegSource(row) && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" plain @click="openMutation(row, 'EDIT')"><Pencil :size="15" />编辑</el-button><el-button v-if="canEditSource && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" plain type="primary" @click="openMutation(row, 'SUBMIT')"><Send :size="15" />提交审核</el-button><el-button v-if="canReviewSource && row.reviewStatus === 'PENDING' && row.status === 'AVAILABLE'" size="small" plain type="success" @click="openReview(row)"><FileCheck2 :size="15" />审核</el-button><el-button v-if="canEditSource && !isFirstlegSource(row) && row.reviewStatus === 'APPROVED' && row.status === 'AVAILABLE' && !row.statementGenerated" size="small" plain @click="openMutation(row, 'ADJUST')"><Pencil :size="15" />调整</el-button><el-button v-if="canEditSource && row.status === 'AVAILABLE' && !row.statementGenerated" size="small" plain type="danger" @click="openMutation(row, 'VOID')"><Ban :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>
@@ -369,6 +400,25 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
   min-width: 0;
 }
 
+/* Customer names can contain an order suffix; keep the selector readable without changing the query value. */
+:deep(.finance-customer-select .el-select__selected-item) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:deep(.finance-customer-arap-popper) {
+  width: max(260px, min(360px, calc(100vw - 32px))) !important;
+  max-width: calc(100vw - 32px);
+}
+
+:deep(.finance-customer-arap-popper .el-select-dropdown__item) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .finance-arap-detail {
   width: 100%;
   min-width: 0;

src/modules/finance/pages/FinanceCustomerStatementsView.test.ts

@@ -7,6 +7,7 @@ import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
 import { useAuthStore } from '@/core/auth/auth'
+import { ApiResponseError } from '@/shared/api/http'
 import { createPlatformExportTask } from '@/modules/downloads'
 import { listPlatformTenants } from '@/modules/iam'
 import { showExportTaskCreatedDialog } from '@/shared/components/exportTaskCreatedDialog'
@@ -292,6 +293,30 @@ describe('FinanceCustomerStatementsView', () => {
     expect(router.currentRoute.value).toMatchObject({ name: 'finance-customer-statement-detail', params: { statementId: '502' } })
   })
 
+  it('keeps the generation dialog open with a customer-friendly message when no billable fees exist', async () => {
+    const permissions = ['platform:finance:customer-statement:list', 'platform:finance:reconciliation:create', 'platform:customer:list']
+    const { wrapper } = await mountPage(permissions)
+    const vm = wrapper.vm as unknown as {
+      createOpen: boolean
+      createError: { message: string } | null
+      createForm: { customerId: string; periodStart: string; periodEnd: string; generationMode: string; feeSourceIds: string[] }
+      openCreate(): void
+      createStatement(): Promise<void>
+    }
+    vm.openCreate()
+    vm.createForm.customerId = '10001'
+    vm.createForm.generationMode = 'BY_CUTOFF'
+    vm.createForm.periodStart = '2026-08-01'
+    vm.createForm.periodEnd = '2026-08-25'
+    vi.mocked(createReconciliationStatement).mockRejectedValueOnce(new ApiResponseError('没有符合结算条件的CNY应收费用来源', 'FIN_409'))
+
+    await vm.createStatement()
+    await flushPromises()
+    expect(vm.createOpen).toBe(true)
+    expect(vm.createError?.message).toContain('没有可生成的应收费用')
+    expect(document.body.textContent).toContain('请调整账期或选择其他客户后重试')
+  })
+
   it('uses statement detail snapshots without a second fee-source request or technical trace fields', async () => {
     const { wrapper } = await mountPage(['platform:finance:customer-statement:list'])
     await (wrapper.vm as unknown as { openDetail(row: FinanceStatementReadModel): Promise<void> }).openDetail(statement)

src/modules/finance/pages/FinanceCustomerStatementsView.vue

@@ -63,6 +63,7 @@ const createOpen = ref(false)
 const createBusy = ref(false)
 const createSourcesLoading = ref(false)
 const createSourcesError = ref<ApiErrorDetails | null>(null)
+const createError = ref<ApiErrorDetails | null>(null)
 const createSourceOptions = ref<FinanceFeeSourceSummary[]>([])
 const exportBusy = ref(false)
 const actionBusy = ref(false)
@@ -391,6 +392,7 @@ function openCreate() {
   createForm.value = defaultCreateForm()
   createSourceOptions.value = []
   createSourcesError.value = null
+  createError.value = null
   createOpen.value = true
 }
 
@@ -489,7 +491,13 @@ async function createStatement() {
     createOpen.value = false
     ElMessage.success('对账单已生成')
     await router.push({ name: 'finance-customer-statement-detail', params: { statementId: created.id } })
-  } catch (cause) { error.value = getApiErrorDetails(cause, '创建对账单失败') }
+  } catch (cause) {
+    const details = getApiErrorDetails(cause, '创建对账单失败')
+    const noEligibleSources = details.code === 'FIN_409' && /没有符合结算条件|没有可生成/.test(details.message)
+    createError.value = noEligibleSources
+      ? { ...details, message: '当前客户在所选账期内没有可生成的应收费用，请调整账期或选择其他客户后重试' }
+      : details
+  }
   finally { createBusy.value = false }
 }
 
@@ -686,6 +694,7 @@ watch(detailRouteId, (statementId) => {
     </ListPageLayout>
 
     <AppDialog v-model="createOpen" title="生成客户对账单" width="min(680px, 94vw)" :confirm-loading="createBusy" @confirm="createStatement">
+      <el-alert v-if="createError" type="warning" :closable="true" show-icon title="暂时无法生成对账单" @close="createError = null"><p>{{ createError.message }}</p></el-alert>
       <el-form label-position="top">
         <el-form-item label="生成方式">
           <el-radio-group v-model="createForm.generationMode">

src/modules/finance/pages/FinancePresentation.test.ts

@@ -67,11 +67,13 @@ describe('finance presentation governance', () => {
   })
 
   it('uses optional all-customer filters without a customer-selection blocker', () => {
-    for (const source of [settlement, statements, arap]) {
+    for (const source of [settlement, statements]) {
       expect(source).toContain("placeholder: '全部客户'")
       expect(source).not.toContain('全客户查询暂不可用')
       expect(source).not.toContain('empty-text="请选择客户查询')
     }
+    expect(arap).toContain("placeholder: '请选择客户'")
+    expect(arap).not.toContain("placeholder: '全部客户'")
   })
 
   it('uses active-customer name selectors across all formal finance pages', () => {
@@ -84,6 +86,20 @@ describe('finance presentation governance', () => {
     expect(accounts).not.toContain("key: 'keyword', type: 'input'")
   })
 
+  it('keeps customer arap selector text within a stable dropdown layout', () => {
+    expect(arap).toContain("class: 'finance-customer-select'")
+    expect(arap).toContain("popperClass: 'finance-customer-arap-popper'")
+    expect(arap).toContain('teleported: false')
+    expect(arap).toContain('onVisibleChange: onCustomerSelectVisible')
+    expect(arap).toContain("document.addEventListener('scroll', closeCustomerSelectOnScroll, true)")
+    expect(arap).toContain('.finance-customer-arap-popper .el-select-dropdown__item')
+    expect(arap).toContain('text-overflow: ellipsis;')
+  })
+
+  it('keeps the customer arap table body independently scrollable', () => {
+    expect(arap).toContain('max-height="calc(100vh - 300px)"')
+  })
+
   it('translates source codes and provides reason placeholders', () => {
     expect(arap).toContain('sourceTypeDisplay(detail.sourceType)')
     expect(arap).toContain('financeOperationActionLabel(log.action)')