优化
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
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'
|
||||
@@ -76,7 +78,7 @@ async function exportCurrent() {
|
||||
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 })
|
||||
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 }
|
||||
@@ -87,25 +89,25 @@ onMounted(() => { void loadCustomers(); void load() })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminPage class="receivable-statistics-page" spacing="normal">
|
||||
<AdminPage class="receivable-statistics-page admin-density" spacing="normal">
|
||||
<el-result v-if="!canView" icon="warning" title="无权访问应收款统计表" sub-title="请联系管理员开通应收款统计查看权限" />
|
||||
<template v-else>
|
||||
<section class="surface-panel 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>
|
||||
<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>
|
||||
</section>
|
||||
<LoadErrorState v-if="error" title="应收款统计加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
|
||||
<template v-else>
|
||||
<section class="statistics-summary" aria-label="CNY应收汇总">
|
||||
<div><span>应收总额</span><strong>CNY {{ money(result?.totalReceivable) }}</strong></div>
|
||||
<div><span>已收合计</span><strong class="is-received">CNY {{ money(result?.totalReceived) }}</strong></div>
|
||||
<div><span>余额未收</span><strong class="is-outstanding">CNY {{ money(result?.totalOutstanding) }}</strong></div>
|
||||
</section>
|
||||
<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>
|
||||
<section class="surface-panel statistics-table">
|
||||
<header><h2>应收款明细</h2><span>共 {{ result?.totalCustomers ?? 0 }} 个应收单位 · 仅统计CNY正式应收结算单</span></header>
|
||||
<DataTable 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-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>
|
||||
@@ -116,24 +118,19 @@ onMounted(() => { void loadCustomers(); void load() })
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.statistics-query { display: flex; align-items: end; gap: 12px; padding: 16px; }
|
||||
.query-field { display: grid; min-width: 220px; gap: 6px; color: var(--cc-muted); font-size: 13px; }
|
||||
.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(--cc-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: 8px; }
|
||||
.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; }
|
||||
.statistics-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
|
||||
.statistics-summary > div { padding: 16px; border: 1px solid var(--cc-border, #e3e8ef); border-radius: 8px; background: var(--cc-surface, #fff); }
|
||||
.statistics-summary span { display: block; margin-bottom: 8px; color: var(--cc-muted); font-size: 13px; }
|
||||
.statistics-summary strong { font-size: 22px; font-variant-numeric: tabular-nums; }
|
||||
.statistics-summary .is-received { color: var(--el-color-success); }
|
||||
.statistics-summary .is-outstanding, .outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
|
||||
.outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
|
||||
.statistics-table { overflow: hidden; }
|
||||
.statistics-table > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--cc-border, #e3e8ef); }
|
||||
.statistics-table h2 { margin: 0; font-size: 16px; }
|
||||
.statistics-table header span { color: var(--cc-muted); font-size: 13px; }
|
||||
.statistics-table > header { display: flex; align-items: center; justify-content: space-between; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border, #e3e8ef); }
|
||||
.statistics-table h2 { margin: 0; font-size: var(--admin-font-section); }
|
||||
.statistics-table header span { color: var(--cc-muted); font-size: var(--admin-font-body); }
|
||||
@media print {
|
||||
.statistics-query, :deep(.data-table__pagination) { display: none !important; }
|
||||
.statistics-query, :deep(.data-table__toolbar), :deep(.data-table__pagination) { display: none !important; }
|
||||
.receivable-statistics-page { gap: 10px; color: #000; }
|
||||
.statistics-summary > div, .statistics-table { border-color: #999; box-shadow: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user