优化

src/modules/finance/pages/FinanceCustomerAccountsView.vue

@@ -4,8 +4,9 @@ import { useRoute, useRouter } from 'vue-router'
 import { ArrowLeft, Download, Eye, Pencil, Save } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
 import { useAccessPreviewStore } from '@/core/access/accessPreview'
+import { createPlatformExportTask } from '@/modules/downloads'
 import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
-import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
+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'
@@ -14,6 +15,7 @@ import FormSection from '@/shared/components/FormSection.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 { showExportTaskCreatedDialog } from '@/shared/components/exportTaskCreatedDialog'
 import { getFinanceCustomerTerms, listFinanceAccountLedger, listFinanceAccounts, updateFinanceCustomerTerms } from '../api/finance'
 import { financeBusinessTypeLabel } from '../status'
 import type { FinanceAccountSummary, FinanceCustomerTerms, FinanceLedgerEntry } from '../types'
@@ -44,11 +46,14 @@ const ledgerFilters = ref<QueryModel>({ businessType: '', occurredRange: [] })
 const ledgerPage = ref(1)
 const ledgerPageSize = ref(20)
 const ledgerTotal = ref(0)
+const accountExportBusy = ref(false)
+const ledgerExportBusy = ref(false)
 
 const canView = computed(() => access.can('platform:finance:customer-account:list'))
 const canListCustomers = computed(() => canView.value || access.can('platform:customer:list'))
 const canViewTerms = computed(() => access.can('platform:finance:customer-terms:view'))
 const canUpdateTerms = computed(() => canViewTerms.value && access.can('platform:finance:customer-terms:update'))
+const canExport = computed(() => access.can('platform:finance:customer-account:export') && access.can('platform:download:list'))
 const stateError = computed(() => customersError.value || loadError.value)
 const queryFields = computed<QueryField[]>(() => [
   { key: 'customerId', type: 'select', label: '客户名称', width: 260, placeholder: '全部客户', props: { 'aria-label': '客户名称', filterable: true, clearable: true, loading: customersLoading.value }, options: customers.value.filter((item) => item.status === 'ACTIVE').map((item) => ({ label: item.tenantName, value: String(item.id) })) },
@@ -173,14 +178,45 @@ function formatDateTime(value: unknown) {
 function formatLastChangedAt(value: unknown) { return String(value || '').trim() ? formatDateTime(value) : '暂无变动' }
 function displayDocumentNo(value: unknown) { return String(value || '').trim() || '关联单据缺失' }
 function displayLedgerId(value: unknown) { return String(value || '').trim() || '流水号缺失' }
-function csvCell(value: unknown) { return `"${String(value ?? '').replaceAll('"', '""')}"` }
-function downloadCsv(fileName: string, headers: string[], data: unknown[][]) {
-  const content = `\uFEFF${[headers, ...data].map((line) => line.map(csvCell).join(',')).join('\r\n')}`
-  const url = URL.createObjectURL(new Blob([content], { type: 'text/csv;charset=utf-8' }))
-  const link = document.createElement('a'); link.href = url; link.download = fileName; link.click(); URL.revokeObjectURL(url)
+async function finishExport(task: Awaited<ReturnType<typeof createPlatformExportTask>>) {
+  const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
+  if (openDownloadCenter) await router.push({ name: 'download-center' })
+}
+async function exportAccounts() {
+  const customerId = String(filters.value.customerId || '').trim()
+  const status = String(filters.value.status || '').trim()
+  accountExportBusy.value = true
+  try {
+    const task = await createPlatformExportTask({
+      exportType: 'FINANCE_CUSTOMER_ACCOUNT_LIST', format: 'XLSX', taskName: '客户账户',
+      parameters: {
+        ...(customerId ? { customerId } : {}),
+        ...(status ? { status } : {}),
+      },
+    })
+    await finishExport(task)
+  } catch (error) { ElMessage.error(getApiErrorMessage(error, '客户账户导出任务创建失败')) }
+  finally { accountExportBusy.value = false }
+}
+async function exportLedger() {
+  if (!selected.value) return
+  const range = Array.isArray(ledgerFilters.value.occurredRange) ? ledgerFilters.value.occurredRange.map(String) : []
+  const businessType = String(ledgerFilters.value.businessType || '').trim()
+  ledgerExportBusy.value = true
+  try {
+    const task = await createPlatformExportTask({
+      exportType: 'FINANCE_CUSTOMER_ACCOUNT_LEDGER', format: 'XLSX', taskName: '客户账户流水',
+      parameters: {
+        customerId: selected.value.customerId,
+        ...(businessType ? { businessType } : {}),
+        ...(range[0] ? { startDate: range[0] } : {}),
+        ...(range[1] ? { endDate: range[1] } : {}),
+      },
+    })
+    await finishExport(task)
+  } catch (error) { ElMessage.error(getApiErrorMessage(error, '客户账户流水导出任务创建失败')) }
+  finally { ledgerExportBusy.value = false }
 }
-function exportAccounts() { downloadCsv('客户账户.csv', columns.slice(1).map((item) => String(item.label)), rows.value.map((row) => [customerName(row.customerId, row.customerName), row.outstandingReceivable, row.pendingBilling, row.receivedInPeriod, row.outstandingPayable, row.status, row.lastChangedAt])) }
-function exportLedger() { downloadCsv(`${selected.value ? customerName(selected.value.customerId, selected.value.customerName) : '客户'}-账户流水.csv`, ledgerColumns.map((item) => String(item.label)), ledger.value.map((row) => [row.ledgerId, formatDateTime(row.occurredAt), ledgerBusinessType(row.businessType), row.documentNo, row.receivableChange, row.payableChange, row.outstandingReceivableAfter, displayOperator(row.operatorName), row.remark])) }
 async function closeDetail() {
   detailOpen.value = false; selected.value = null; editing.value = false; ledger.value = []
   if (route.name === 'finance-customer-account-detail') await router.push({ name: 'finance-customer-accounts' })
@@ -218,7 +254,7 @@ watch(() => [route.name, String(route.params.customerId || '')], ([name, custome
       <template v-if="stateError" #state><LoadErrorState title="客户账户加载失败" :message="stateError.message" :loading="loading || customersLoading" @retry="customersError ? loadCustomers() : load()"><template #details><ApiErrorMeta :details="stateError" /></template></LoadErrorState></template>
       <section v-if="!stateError" 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-accounts-table" aria-label="客户账户列表" row-key="customerId" empty-text="暂无客户账户" @update:page="load()" @update:page-size="page = 1; load()">
-          <template #toolbar-actions><el-button :disabled="loading || !rows.length" @click="exportAccounts"><Download :size="16" />导出</el-button></template>
+          <template #toolbar-actions><el-button v-if="canExport" :loading="accountExportBusy" :disabled="loading || accountExportBusy" @click="exportAccounts"><Download :size="16" />导出Excel</el-button></template>
           <template #actions="{ row }"><div class="row-actions"><el-button link type="primary" @click="openAccount(row, false)"><Eye :size="15" />查看</el-button><el-button v-if="canUpdateTerms" link type="primary" @click="openAccount(row, true)"><Pencil :size="15" />账期</el-button></div></template>
           <template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template>
           <template #lastChangedAt="{ row }">{{ formatLastChangedAt(row.lastChangedAt) }}</template>
@@ -236,7 +272,7 @@ watch(() => [route.name, String(route.params.customerId || '')], ([name, custome
         <template v-else-if="selected">
           <FormSection v-if="!editing" class="ledger-section" title="账户流水" :bordered="false">
             <QueryToolbar v-model="ledgerFilters" class="ledger-query" :fields="ledgerQueryFields" ariaLabel="账户流水筛选" preference-key="finance-account-ledger-query" @search="ledgerPage = 1; loadLedger" />
-            <div class="detail-table-scroll"><DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize" class="ledger-table" :data="ledger" :columns="ledgerColumns" :loading="ledgerLoading" :total="ledgerTotal" row-key="ledgerId" empty-text="暂无账户流水" @update:page="loadLedger()" @update:page-size="ledgerPage = 1; loadLedger()"><template #toolbar-actions><el-button :disabled="!ledger.length" @click="exportLedger"><Download :size="16" />导出流水</el-button></template><template #pagination-left>共 {{ ledgerTotal }} 条</template><template #ledgerId="{ row }"><span class="ledger-identifier" :title="displayLedgerId(row.ledgerId)">{{ displayLedgerId(row.ledgerId) }}</span></template><template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template><template #businessType="{ row }">{{ ledgerBusinessType(row.businessType) }}</template><template #documentNo="{ row }"><span class="ledger-document" :title="displayDocumentNo(row.documentNo)">{{ displayDocumentNo(row.documentNo) }}</span></template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template></DataTable></div>
+            <div class="detail-table-scroll"><DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize" class="ledger-table" :data="ledger" :columns="ledgerColumns" :loading="ledgerLoading" :total="ledgerTotal" row-key="ledgerId" empty-text="暂无账户流水" @update:page="loadLedger()" @update:page-size="ledgerPage = 1; loadLedger()"><template #toolbar-actions><el-button v-if="canExport" :loading="ledgerExportBusy" :disabled="ledgerLoading || ledgerExportBusy" @click="exportLedger"><Download :size="16" />导出流水</el-button></template><template #pagination-left>共 {{ ledgerTotal }} 条</template><template #ledgerId="{ row }"><span class="ledger-identifier" :title="displayLedgerId(row.ledgerId)">{{ displayLedgerId(row.ledgerId) }}</span></template><template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template><template #businessType="{ row }">{{ ledgerBusinessType(row.businessType) }}</template><template #documentNo="{ row }"><span class="ledger-document" :title="displayDocumentNo(row.documentNo)">{{ displayDocumentNo(row.documentNo) }}</span></template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template></DataTable></div>
           </FormSection>
           <FormSection v-else class="term-section" title="账期设置" :bordered="false"><div class="term-editor"><span class="term-label">账期天数</span><div class="term-control"><el-input-number v-model="creditDays" :min="0" :max="3650" :step="1" /><span class="term-unit">天</span></div></div></FormSection>
         </template>