zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

8/7 应收欠费汇总表，应收欠费明细表

Browse Source
This commit is contained in:
Zy
2026-08-07 11:46:15 +08:00
parent 40196737d3
commit ef681e4eb3
13 changed files with 1727 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -54,7 +54,8 @@
"vue-types": "6.0.0",
"vue3-print-nb": "^0.1.4",
"vuedraggable": "^4.1.0",
"vxe-table": "4.18.1"
"vxe-table": "4.18.1",
"xlsx-js-style": "^1.2.0"
},
"devDependencies": {
"@iconify/json": "^2.2.448",
@@ -64,6 +65,7 @@
"@types/js-cookie": "3.0.6",
"@types/node": "^25.4.0",
"@types/nprogress": "0.2.3",
"@types/xlsx": "^0.0.35",
"@unocss/preset-attributify": "66.6.6",
"@unocss/preset-icons": "66.6.6",
"@unocss/preset-uno": "66.6.6",

12
src/api/system/report/aging/index.ts Normal file
View File

@@ -0,0 +1,12 @@
import request from '@/utils/request';
import { AgingListResponse, OwnerArrearsDetailVo } from '@/api/system/report/aging/type';
import { AxiosPromise } from 'axios';
export const getAgingList = (query): Promise<AgingListResponse> => {
return request({
url: '/agingAnalysis/summary',
method: 'get',
params: query
});
};

74
src/api/system/report/aging/type.ts Normal file
View File

@@ -0,0 +1,74 @@
export interface AgingListResponse {
total: number;
rows: AgingSummary[];
summary: AgingSummary;
code: number;
msg: string;
}
export interface AgingSummary {
amountLe6: string;
amountM6To12: string;
amountOver5: string;
amountY1To2: string;
amountY2To3: string;
amountY3To4: string;
amountY4To5: string;
cutoffPeriod: string;
houseTypeName: string;
totalAmount: string;
villageName: string;
}
// 明细 ---------------------------------
/**
* 业主欠费明细视图对象
*
* OwnerArrearsDetailVo
*/
export type OwnerArrearsDetailVo = {
/**
* 区域（小区名称）
*/
area?: string;
/**
* 欠费月数
*/
arrearsMonths?: number;
/**
* 应账账期（如：20170101-20171231）
*/
billPeriod?: string;
/**
* 客户（业主姓名）
*/
customerName?: string;
/**
* 垃圾清运费
*/
garbageFee?: number;
/**
* 房号
*/
houseNo?: string;
/**
* 其他费用合计
*/
otherFee?: number;
/**
* 联系电话
*/
phone?: string;
/**
* 物业费
*/
propertyFee?: number;
/**
* 序号
*/
serialNumber?: number;
/**
* 金额合计
*/
totalAmount?: number;
[property: string]: any;
};

18
src/api/system/report/arrears/arrears.ts Normal file
View File

@@ -0,0 +1,18 @@
import request from '@/utils/request';
import { ArrearsDetailQuery, ArrearsListResponse, ArrearsQuery, OwnerArrearsDetailVo } from '@/api/system/report/arrears/type';
import { AxiosPromise } from 'axios';
export const getArrearsList = (query?: ArrearsQuery): Promise<ArrearsListResponse> => {
return request({
url: '/outstandingFeeSummary/list',
method: 'get',
params: query
});
};
export const getArrearsDetails = (query?: ArrearsDetailQuery): AxiosPromise<OwnerArrearsDetailVo[]> => {
return request({
url: '/outstandingFeeSummary/ownerArrearsDetail',
method: 'get',
params: query
});
};

113
src/api/system/report/arrears/type.ts Normal file
View File

@@ -0,0 +1,113 @@
export interface ArrearsQuery extends PageQuery {
/**
* 视图类型：
* 1 - 维度一（收费类型为行）
* 2 - 维度二（房屋类型为行）
* */
viewType: number;
chargeItemId?: string;
houseUseId?: string;
villageId?: string;
}
export interface ArrearsListResponse {
code: number;
msg: string;
data: ArrearsVO[];
}
export interface ArrearsVO extends ArrearsType1, ArrearsType2 {
'villageName': string;
'totalAmount': string;
}
export interface ArrearsType1 {
'chargeItemName'?: string;
'houseTypeAmounts'?: {
[key: string]: string;
};
}
export interface ArrearsType2 {
'houseTypeName'?: string;
'chargeItemAmounts'?: {
[key: string]: string;
};
}
export interface ArrearsDetailQuery extends PageQuery {
/**
* 客户姓名（模糊查询）
*/
customerName?: string;
/**
* 结束时间
*/
endTime?: string;
/**
* 房号（模糊查询）
*/
houseNo?: string;
/**
* 联系电话（模糊查询）
*/
phone?: string;
/**
* 开始时间
*/
startTime?: string;
}
/**
* 业主欠费明细视图对象
*
* OwnerArrearsDetailVo
*/
export type OwnerArrearsDetailVo = {
/**
* 区域（小区名称）
*/
area?: string;
/**
* 欠费月数
*/
arrearsMonths?: number;
/**
* 应账账期（如：20170101-20171231）
*/
billPeriod?: string;
/**
* 各收费类型金额（key: 收费类型名称, value: 金额）
*/
chargeItemAmounts?: MapBigDecimal;
/**
* 客户（业主姓名）
*/
customerName?: string;
/**
* 房号
*/
houseNo?: string;
/**
* 联系电话
*/
phone?: string;
/**
* 序号
*/
serialNumber?: number | string;
/**
* 金额合计
*/
totalAmount?: number;
};
/**
* 各收费类型金额（key: 收费类型名称, value: 金额）
*
* MapBigDecimal
*/
export type MapBigDecimal = {
[property: string]: number;
};

140
src/api/system/residentReviewProcess/type.ts
View File

@@ -1,140 +0,0 @@
export interface ResidentReviewProcessVO {
/**
* 住户审核表
*/
id: string | number;
/**
* 住户表id
*/
residentId: string | number;
/**
* 提交时间
*/
submitTime: string;
/**
* 提交状态 0未提交 1已提交
*/
submitStatus: number;
/**
* 物业审核时间
*/
propertyTime: string;
/**
* 物业审核状态 0 待审核 1审核通过 2审核未通过
*/
propertyStatus: number;
/**
* 物业审核意见
*/
propertyReviewFeedback: string;
/**
* 认证时间
*/
certificationTime: string;
/**
* 认证状态 0未认证 1已认证
*/
certificationStatus: number;
}
export interface ResidentReviewProcessForm extends BaseEntity {
/**
* 住户审核表
*/
id?: string | number;
/**
* 住户表id
*/
residentId?: string | number;
/**
* 提交时间
*/
submitTime?: string;
/**
* 提交状态 0未提交 1已提交
*/
submitStatus?: number;
/**
* 物业审核时间
*/
propertyTime?: string;
/**
* 物业审核状态 0 待审核 1审核通过 2审核未通过
*/
propertyStatus?: number;
/**
* 物业审核意见
*/
propertyReviewFeedback?: string;
/**
* 认证时间
*/
certificationTime?: string;
/**
* 认证状态 0未认证 1已认证
*/
certificationStatus?: number;
}
export interface ResidentReviewProcessQuery extends PageQuery {
/**
* 住户表id
*/
residentId?: string | number;
/**
* 提交时间
*/
submitTime?: string;
/**
* 提交状态 0未提交 1已提交
*/
submitStatus?: number;
/**
* 物业审核时间
*/
propertyTime?: string;
/**
* 物业审核状态 0 待审核 1审核通过 2审核未通过
*/
propertyStatus?: number;
/**
* 物业审核意见
*/
propertyReviewFeedback?: string;
/**
* 认证时间
*/
certificationTime?: string;
/**
* 认证状态 0未认证 1已认证
*/
certificationStatus?: number;
/**
* 日期范围参数
*/
params?: any;
}

2
src/components/Pagination/index.vue
View File

@@ -25,7 +25,7 @@ const props = defineProps({
pageSizes: { type: Array<number>, default: () => [10, 20, 30, 50, 100] },
// 移动端页码按钮的数量端默认值5
pagerCount: propTypes.number.def(document.body.clientWidth < 992 ? 5 : 7),
layout: propTypes.string.def('total, sizes, prev, pager, next, jumper'),
layout: propTypes.string.def('sizes, prev, pager, next, jumper,total'),
background: propTypes.bool.def(true),
autoScroll: propTypes.bool.def(true),
hidden: propTypes.bool.def(false),

3
src/utils/request.ts
View File

@@ -46,7 +46,8 @@ const whiteVillageId = [
'/cash/billList',
'/houseRental/changeStatus', // 房屋租赁 - 上架/下架
'/points/pointsProducts/list', // 积分商品列表
'/points/*'
'/points/*',
'/outstandingFeeSummary/*'
// '/building/list'
];

312
src/utils/xlsx.ts Normal file
View File

@@ -0,0 +1,312 @@
import * as XLSX from 'xlsx-js-style';
import { saveAs } from 'file-saver';
import { ElMessage } from 'element-plus';
/**
* 列配置类型（支持多级表头）
*/
export type ColumnConfig = {
label: string; // 列名
prop?: string; // 字段名（叶子节点必须有）
children?: ColumnConfig[]; // 子列（用于多级表头）
align?: 'left' | 'center' | 'right'; // 对齐方式
width?: number; // 列宽
};
/**
* 合并单元格回调函数类型（类似 Element Plus 的 span-method）
*/
export type SpanMethodCallback = (params: { row: any; rowIndex: number; columnIndex: number }) => { rowspan: number; colspan: number };
/**
* 前端导出Excel（支持多级表头）
*/
export function exportToExcel(data: any[], columns: ColumnConfig[], filename: string, spanMethod?: SpanMethodCallback) {
if (!data || data.length === 0) {
ElMessage.warning('没有可导出的数据');
return;
}
try {
// 获取叶子列（实际数据列）
const leafColumns = getLeafColumns(columns);
// 获取表头深度
const headerRows = getMaxHeaderDepth(columns);
// 手动创建工作表（不使用 json_to_sheet）
const worksheet: XLSX.WorkSheet = {};
// 1. 填充表头
fillHeaderCells(worksheet, columns, 0, 0, headerRows);
// 2. 填充数据（从 headerRows 行开始）
data.forEach((row, rowIndex) => {
leafColumns.forEach((col, colIndex) => {
if (col.prop) {
const cellAddress = XLSX.utils.encode_cell({ r: rowIndex + headerRows, c: colIndex });
const value = getCellValue(row, col.prop);
worksheet[cellAddress] = { t: 's', v: value !== undefined && value !== null ? String(value) : '' };
}
});
});
// 3. 设置表头合并
const merges = calculateHeaderMerges(columns, leafColumns);
// 4. 处理数据行合并
if (spanMethod) {
const dataMerges = calculateMergesBySpanMethod(data, leafColumns, spanMethod, headerRows);
merges.push(...dataMerges);
}
worksheet['!merges'] = merges;
// 5. 设置列宽
worksheet['!cols'] = leafColumns.map((col) => ({ wch: col.width || 20 }));
// 6. 设置范围
const lastRow = data.length + headerRows - 1;
const lastCol = leafColumns.length - 1;
worksheet['!ref'] = XLSX.utils.encode_range({ s: { r: 0, c: 0 }, e: { r: lastRow, c: lastCol } });
// 7. 设置所有单元格样式（包含黑色边框）
const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
for (let R = range.s.r; R <= range.e.r; ++R) {
for (let C = range.s.c; C <= range.e.c; ++C) {
const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });
if (worksheet[cellAddress]) {
const isHeader = R < headerRows;
worksheet[cellAddress].s = {
fill: isHeader
? {
fgColor: { rgb: 'bec4cb' },
patternType: 'solid'
}
: undefined,
font: isHeader
? {
color: { rgb: 'FFFFFF' },
bold: true,
sz: 11
}
: undefined,
border: {
top: { style: 'thin', color: { rgb: '000000' } },
bottom: { style: 'thin', color: { rgb: '000000' } },
left: { style: 'thin', color: { rgb: '000000' } },
right: { style: 'thin', color: { rgb: '000000' } }
},
alignment: {
horizontal: 'center',
vertical: 'center'
}
};
}
}
}
// 8. 设置合并单元格居中
if (worksheet['!merges']) {
worksheet['!merges'].forEach((merge) => {
for (let R = merge.s.r; R <= merge.e.r; ++R) {
for (let C = merge.s.c; C <= merge.e.c; ++C) {
const cellAddress = XLSX.utils.encode_cell({ r: R, c: C });
if (worksheet[cellAddress]) {
worksheet[cellAddress].s = {
...worksheet[cellAddress].s,
alignment: {
horizontal: 'center',
vertical: 'center'
}
};
}
}
}
});
}
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 导出文件
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, `${filename}.xlsx`);
ElMessage.success('导出成功');
} catch (error) {
console.error('导出失败:', error);
ElMessage.error('导出失败，请重试');
}
}
/**
* 根据 spanMethod 回调计算需要合并的单元格范围
* @param headerRows 表头行数（数据行需要偏移）
*/
function calculateMergesBySpanMethod(data: any[], columns: ColumnConfig[], spanMethod: SpanMethodCallback, headerRows: number = 1): XLSX.Range[] {
const merges: XLSX.Range[] = [];
const coveredCells = new Set<string>();
for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {
const row = data[rowIndex];
for (let colIndex = 0; colIndex < columns.length; colIndex++) {
const cellKey = `${rowIndex}-${colIndex}`;
if (coveredCells.has(cellKey)) continue;
const result = spanMethod({ row, rowIndex, columnIndex: colIndex });
if (result && (result.rowspan > 1 || result.colspan > 1)) {
// 数据行需要加上表头行数的偏移
const startRow = rowIndex + headerRows;
const startCol = colIndex;
const endRow = startRow + result.rowspan - 1;
const endCol = startCol + result.colspan - 1;
merges.push({
s: { r: startRow, c: startCol },
e: { r: endRow, c: endCol }
});
for (let r = startRow; r <= endRow; r++) {
for (let c = startCol; c <= endCol; c++) {
if (r !== startRow || c !== startCol) {
coveredCells.add(`${r - headerRows}-${c}`);
}
}
}
}
}
}
return merges;
}
/**
* 获取所有叶子列（实际数据列）
*/
function getLeafColumns(columns: ColumnConfig[]): ColumnConfig[] {
const leaves: ColumnConfig[] = [];
function traverse(cols: ColumnConfig[]) {
cols.forEach((col) => {
if (col.children && col.children.length > 0) {
traverse(col.children);
} else {
leaves.push(col);
}
});
}
traverse(columns);
return leaves;
}
/**
* 获取最大表头深度
*/
function getMaxHeaderDepth(columns: ColumnConfig[]): number {
function getDepth(cols: ColumnConfig[]): number {
let maxDepth = 0;
cols.forEach((col) => {
if (col.children && col.children.length > 0) {
maxDepth = Math.max(maxDepth, 1 + getDepth(col.children));
} else {
maxDepth = Math.max(maxDepth, 1);
}
});
return maxDepth;
}
return getDepth(columns);
}
/**
* 计算表头合并范围
*/
function calculateHeaderMerges(columns: ColumnConfig[], leafColumns: ColumnConfig[]): XLSX.Range[] {
const merges: XLSX.Range[] = [];
const maxDepth = getMaxHeaderDepth(columns);
function traverse(cols: ColumnConfig[], depth: number, startLeafIndex: number): number {
let currentLeafIndex = startLeafIndex;
cols.forEach((col) => {
if (col.children && col.children.length > 0) {
const endLeafIndex = traverse(col.children, depth + 1, currentLeafIndex);
if (endLeafIndex - currentLeafIndex > 0) {
merges.push({
s: { r: depth, c: currentLeafIndex },
e: { r: depth, c: endLeafIndex }
});
}
if (endLeafIndex > currentLeafIndex) {
merges.push({
s: { r: depth, c: currentLeafIndex },
e: { r: depth, c: endLeafIndex } // 只水平合并
});
}
currentLeafIndex = endLeafIndex + 1;
} else {
if (depth < maxDepth - 1) {
merges.push({
s: { r: depth, c: currentLeafIndex },
e: { r: maxDepth - 1, c: currentLeafIndex }
});
}
currentLeafIndex++;
}
});
return currentLeafIndex - 1;
}
traverse(columns, 0, 0);
return merges;
}
/**
* 获取单元格值（支持嵌套属性）
*/
function getCellValue(row: any, prop: string): any {
if (!prop.includes('.')) {
return row[prop];
}
const keys = prop.split('.');
let value = row;
for (const key of keys) {
if (value === null || value === undefined) {
return undefined;
}
value = value[key];
}
return value;
}
/**
* 填充表头单元格
*/
function fillHeaderCells(worksheet: XLSX.WorkSheet, columns: ColumnConfig[], startCol: number, depth: number, maxDepth: number): number {
let currentCol = startCol;
columns.forEach((col) => {
if (col.children && col.children.length > 0) {
// 有子列，递归处理
const endCol = fillHeaderCells(worksheet, col.children, currentCol, depth + 1, maxDepth);
// 父列表头：在 depth 行，从 currentCol 到 endCol
const cellAddress = XLSX.utils.encode_cell({ r: depth, c: currentCol });
worksheet[cellAddress] = { t: 's', v: col.label };
currentCol = endCol + 1;
} else {
// 叶子节点
const cellAddress = XLSX.utils.encode_cell({ r: depth, c: currentCol });
worksheet[cellAddress] = { t: 's', v: col.label };
currentCol++;
}
});
return currentCol - 1;
}

241
src/views/system/report/aging.vue Normal file
View File

@@ -0,0 +1,241 @@
<template>
<div class="p-2 h-full flex flex-col">
<pageHeader></pageHeader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
<div class="flex justify-between">
<div>
<el-form-item label-width="100" label="截至应收账期" prop="villageId">
<el-date-picker
v-model="queryTime"
type="daterange"
@update:model-value="handleQueryTime"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM"
value-format="YYYY-MM"
/>
</el-form-item>
<el-form-item label="小区" prop="villageId">
<el-select v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="房屋类型" prop="houseUseTypeId">
<el-select v-model="queryParams.houseUseTypeId" placeholder="请选择">
<el-option v-for="item in houseUseList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="账龄区间" prop="agingRange">
<el-select :multiple="true" v-model="queryParams.agingRange" placeholder="请选择">
<el-option v-for="item in [...com_report_age_list]" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="handleQuery">搜索</el-button>
<el-button @click="resetQuery">重置</el-button>
</div>
</div>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never" class="flex-1">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="5">
<span>账龄分析汇总表</span>
</el-col>
<el-col :span="18"></el-col>
<el-col :span="1">
<el-button type="primary" @click="handleExport">导出</el-button>
</el-col>
</el-row>
</template>
<el-table :span-method="arraySpanMethod" v-loading="loading" border :data="AgingList">
<el-table-column label="截至应收账期" align="center" prop="cutoffPeriod" />
<el-table-column label="小区项目" align="center" prop="villageName" />
<el-table-column label="房屋类型" align="center" prop="houseTypeName" />
<el-table-column label="≤6个月" align="center" prop="amountLe6" />
<el-table-column label="6个月-12个月" align="center" prop="amountM6To12" />
<el-table-column label="1年-2年" align="center" prop="amountY1To2" />
<el-table-column label="2年-3年" align="center" prop="amountY2To3" />
<el-table-column label="3年-4年" align="center" prop="amountY3To4" />
<el-table-column label="4年-5年" align="center" prop="amountY4To5" />
<el-table-column label="5年以上" align="center" prop="amountOver5" />
<el-table-column label="合计" align="center" prop="totalAmount" />
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</div>
</template>
<script setup name="Arrears" lang="ts">
import pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { listHouseUseType } from '@/api/system/houseUse';
import { getCommunitylistAPI } from '@/api/system/community';
import { getAgingList } from '@/api/system/report/aging';
import { AgingSummary } from '@/api/system/report/aging/type';
import type { TableColumnCtx } from 'element-plus';
import { exportToExcel } from '@/utils/xlsx';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_report_age_list } = toRefs<any>(proxy?.useDict('com_report_age_list'));
const AgingList = ref<AgingSummary[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const queryTime = ref([]);
function handleQueryTime(val: string[]) {
queryParams.value.periodBegin = val[0];
queryParams.value.periodEnd = val[1];
}
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
periodBegin: '',
periodEnd: '',
villageId: '-1',
houseUseTypeId: '-1',
agingRange: []
}
});
interface SpanMethodProps {
row: AgingSummary;
column: TableColumnCtx<AgingSummary>;
rowIndex: number;
columnIndex: number;
}
const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
if (rowIndex === AgingList.value.length - 1) {
if (columnIndex === 0) {
return { rowspan: 1, colspan: 3 };
}
if (columnIndex === 1) {
return { rowspan: 0, colspan: 0 };
}
if (columnIndex === 2) {
return { rowspan: 0, colspan: 0 };
}
}
// 普通行不合并
return { rowspan: 1, colspan: 1 };
};
const { queryParams } = toRefs(data);
const houseUseList = ref([]);
function handleQueryHouseUse() {
listHouseUseType().then((res) => {
houseUseList.value = [
{
id: '-1',
name: '全部类型'
},
...res.rows
];
});
}
// 查询小区
const villageList = ref([]);
function getAllVillage() {
getCommunitylistAPI().then((res) => {
villageList.value = [
{
villageId: '-1',
villageName: '全部小区'
},
...res.rows
];
});
}
const getList = async () => {
loading.value = true;
const search = { ...queryParams.value };
// 移除空字符串字段
Object.keys(search).forEach((key) => {
if (search[key] === '-1') {
search[key] = undefined;
}
});
getAgingList(search)
.then((res) => {
AgingList.value = [...res.rows, res.summary];
total.value = res.total;
})
.finally(() => {
loading.value = false;
});
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 导出Excel */
const handleExport = () => {
if (AgingList.value.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: { label: string; prop: string }[] = [
{ label: '截至应收账期', prop: 'cutoffPeriod' },
{ label: '小区项目', prop: 'villageName' },
{ label: '房屋类型', prop: 'houseTypeName' },
{ label: '≤6个月', prop: 'amountLe6' },
{ label: '6个月-12个月', prop: 'amountM6To12' },
{ label: '1年-2年', prop: 'amountY1To2' },
{ label: '2年-3年', prop: 'amountY2To3' },
{ label: '3年-4年', prop: 'amountY3To4' },
{ label: '4年-5年', prop: 'amountY4To5' },
{ label: '5年以上', prop: 'amountOver5' },
{ label: '合计', prop: 'totalAmount' }
];
const mergeColumns = [0, 1, 2];
exportToExcel(AgingList.value, columns, `账龄分析汇总_${new Date().getTime()}`, mergeColumns);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
};
onMounted(() => {
getList();
handleQueryHouseUse();
getAllVillage();
});
</script>
<style lang="scss" scoped>
.el-table {
height: calc(100% - 80px);
}
</style>

223
src/views/system/report/agingDetailed.vue Normal file
View File

@@ -0,0 +1,223 @@
<template>
<div class="p-2 h-full flex flex-col">
<pageHeader></pageHeader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
<div class="flex justify-between">
<div>
<el-form-item label="小区" prop="villageId">
<el-select v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="楼栋" prop="villageId">
<el-select v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="房号" prop="villageId">
<el-select v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="欠费月数" prop="villageId">
<el-select v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="账龄区间" prop="agingRange">
<el-select :multiple="true" v-model="queryParams.agingRange" placeholder="请选择">
<el-option v-for="item in [...com_report_age_list]" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="handleQuery">搜索</el-button>
<el-button @click="resetQuery">重置</el-button>
</div>
</div>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never" class="flex-1">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="5">
<span>账龄分析汇总表</span>
</el-col>
<el-col :span="18"></el-col>
<el-col :span="1">
<el-button type="primary" @click="handleExport">导出</el-button>
</el-col>
</el-row>
</template>
<el-table :span-method="arraySpanMethod" v-loading="loading" border :data="AgingList">
<el-table-column label="截至应收账期" align="center" prop="cutoffPeriod" />
<el-table-column label="小区项目" align="center" prop="villageName" />
<el-table-column label="楼栋" align="center" prop="villageName" />
<el-table-column label="客户名称" align="center" prop="villageName" />
<el-table-column label="房号编号" align="center" prop="villageName" />
<el-table-column label="欠费月数" align="center" prop="houseTypeName" />
<el-table-column label="≤6个月" align="center" prop="amountLe6" />
<el-table-column label="6个月-12个月" align="center" prop="amountM6To12" />
<el-table-column label="1年-2年" align="center" prop="amountY1To2" />
<el-table-column label="2年-3年" align="center" prop="amountY2To3" />
<el-table-column label="3年-4年" align="center" prop="amountY3To4" />
<el-table-column label="4年-5年" align="center" prop="amountY4To5" />
<el-table-column label="5年以上" align="center" prop="amountOver5" />
<el-table-column label="合计" align="center" prop="totalAmount" />
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</div>
</template>
<script setup name="Arrears" lang="ts">
import pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { listHouseUseType } from '@/api/system/houseUse';
import { getCommunitylistAPI } from '@/api/system/community';
import { getAgingDetail, getAgingList } from '@/api/system/report/aging';
import { AgingSummary } from '@/api/system/report/aging/type';
import type { TableColumnCtx } from 'element-plus';
import { exportToExcel } from '@/utils/xlsx';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_report_age_list } = toRefs<any>(proxy?.useDict('com_report_age_list'));
const AgingList = ref<AgingSummary[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
periodBegin: '',
periodEnd: '',
villageId: '-1',
houseUseTypeId: '-1',
agingRange: []
}
});
interface SpanMethodProps {
row: AgingSummary;
column: TableColumnCtx<AgingSummary>;
rowIndex: number;
columnIndex: number;
}
const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
if (rowIndex === AgingList.value.length - 1) {
const rowspan = 6;
if (columnIndex === 0) {
return { rowspan: 1, colspan: rowspan };
}
if (columnIndex <= rowspan) {
return { rowspan: 0, colspan: 0 };
}
}
// 普通行不合并
return { rowspan: 1, colspan: 1 };
};
const { queryParams } = toRefs(data);
// 查询小区
const villageList = ref([]);
function getAllVillage() {
getCommunitylistAPI().then((res) => {
villageList.value = [
{
villageId: '-1',
villageName: '全部小区'
},
...res.rows
];
});
}
const getList = async () => {
loading.value = true;
const search = { ...queryParams.value };
// 移除空字符串字段
Object.keys(search).forEach((key) => {
if (search[key] === '-1') {
search[key] = undefined;
}
});
getAgingList(search)
.then((res) => {
AgingList.value = [...res.rows, res.summary];
total.value = res.total;
})
.finally(() => {
loading.value = false;
});
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 导出Excel */
const handleExport = () => {
if (AgingList.value.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: { label: string; prop: string }[] = [
{ label: '截至应收账期', prop: 'cutoffPeriod' },
{ label: '小区项目', prop: 'villageName' },
{ label: '房屋类型', prop: 'houseTypeName' },
{ label: '≤6个月', prop: 'amountLe6' },
{ label: '6个月-12个月', prop: 'amountM6To12' },
{ label: '1年-2年', prop: 'amountY1To2' },
{ label: '2年-3年', prop: 'amountY2To3' },
{ label: '3年-4年', prop: 'amountY3To4' },
{ label: '4年-5年', prop: 'amountY4To5' },
{ label: '5年以上', prop: 'amountOver5' },
{ label: '合计', prop: 'totalAmount' }
];
const mergeColumns = [0, 1, 2];
exportToExcel(AgingList.value, columns, `账龄分析汇总_${new Date().getTime()}`, mergeColumns);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
};
onMounted(() => {
getList();
handleQueryHouseUse();
getAllVillage();
});
</script>
<style lang="scss" scoped>
.el-table {
height: calc(100% - 80px);
}
</style>

372
src/views/system/report/arrears.vue Normal file
View File

@@ -0,0 +1,372 @@
<template>
<div class="p-2 h-full flex flex-col">
<pageHeader></pageHeader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
<div class="flex justify-between">
<div>
<el-form-item label="小区" prop="villageId">
<el-select @change="handleVillageChange" v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="收费项目" prop="chargeItemId">
<el-select v-model="queryParams.chargeItemId" placeholder="请选择">
<el-option v-for="item in chargeItemList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="房屋类型" prop="houseUseId">
<el-select v-model="queryParams.houseUseId" placeholder="请选择">
<el-option v-for="item in houseUseList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="handleQuery">搜索</el-button>
<el-button @click="resetQuery">重置</el-button>
</div>
</div>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never" class="flex-1">
<template #header>
<el-row :gutter="10" style="margin-bottom: 30px">
<el-col :span="5">
<div class="flex items-center">
<div style="width: 200px; font-size: 15px; margin-right: 10px">应收欠费汇总列表</div>
<el-select @change="handleViewTypeChange" v-model="queryParams.viewType" placeholder="请选择视图类型">
<el-option label="维度1（按收费类型）" :value="1" />
<el-option label="维度2（按房屋类型）" :value="2" />
</el-select>
</div>
</el-col>
<el-col :span="18"></el-col>
<el-col :span="1">
<el-button type="primary" @click="handleExport">导出</el-button>
</el-col>
</el-row>
</template>
<el-table
:key="queryParams.viewType"
:row-class-name="handleRowClass"
:span-method="mergeSpanMethod"
v-loading="loading"
border
:data="ArrearsList"
>
<el-table-column label="小区" align="center" prop="villageName" />
<template v-if="queryParams.viewType === 1">
<el-table-column label="收费项目" align="center" prop="chargeItemName" />
<el-table-column v-for="(item, index) in houseTypeKeys" :key="index" :label="item" align="center">
<template #default="scope">
<span>{{ scope.row.houseTypeAmounts?.[item] || '---' }}</span>
</template>
</el-table-column>
</template>
<template v-if="queryParams.viewType === 2">
<el-table-column label="房屋类型" align="center" prop="houseTypeName" />
<el-table-column v-for="(item, index) in houseTypeKeys2" :key="index" :label="item" align="center">
<template #default="scope">
<span>{{ scope.row.chargeItemAmounts?.[item] || '---' }}</span>
</template>
</el-table-column>
</template>
<el-table-column label="金额" align="center" prop="totalAmount" />
</el-table>
<!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />-->
</el-card>
</div>
</template>
<script setup name="Arrears" lang="ts">
// import pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { getArrearsList } from '@/api/system/report/arrears/arrears';
// import { ArrearsQuery } from '@/api/system/residentReviewProcess/type';
import { listHouseUseType } from '@/api/system/houseUse';
import { listChargeItem } from '@/api/system/SdbChargeItem';
import { getCommunitylistAPI } from '@/api/system/community';
import { ArrearsVO } from '@/api/system/report/arrears/type';
import { exportToExcel } from '@/utils/xlsx';
import { ref } from 'vue';
import { listChargeType } from '@/api/system/ChargeType';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const ArrearsList = ref<ArrearsVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
viewType: 1,
villageId: '-1',
chargeItemId: '-1',
houseUseId: '-1'
}
});
const { queryParams } = toRefs(data);
// 查询 房屋类型╬╬╬╬╬2╬>
const houseUseList = ref([]);
function handleQueryHouseUse() {
listHouseUseType().then((res) => {
houseUseList.value = [
{
id: '-1',
name: '全部类型'
},
...res.rows
];
});
}
// 收费项目
// 查询小区
const villageList = ref([]);
function getAllVillage() {
getCommunitylistAPI().then((res) => {
villageList.value = [
{
villageId: '-1',
villageName: '全部小区'
},
...res.rows
];
});
}
// 改变小区
function handleVillageChange(val: string) {
queryParams.value.villageId = val;
queryParams.value.chargeItemId = '-1';
}
const chargeItemList = ref([]);
listChargeType().then((res) => {
chargeItemList.value = [
{
id: '-1',
name: '全部项目'
},
...res.rows
];
});
function handleViewTypeChange(val: number) {
queryParams.value.viewType = val;
getList();
}
/** 查询电抄记录列表 */
const getList = async () => {
loading.value = true;
const search = { ...queryParams.value };
// 移除空字符串字段
Object.keys(search).forEach((key) => {
if (search[key] === '-1') {
search[key] = undefined;
}
});
getArrearsList(search)
.then((res) => {
ArrearsList.value = res.data;
})
.finally(() => {
loading.value = false;
});
};
// 提取全表所有房型，统一所有行列（使用缓存优化）
const houseTypeKeys = computed(() => {
const keys = new Set();
const list = ArrearsList.value;
for (let i = 0; i < list.length; i++) {
const amounts = list[i].houseTypeAmounts;
if (amounts) {
Object.keys(amounts).forEach((k) => keys.add(k));
}
}
return [...keys] as string[];
});
const houseTypeKeys2 = computed(() => {
const keys = new Set();
const list = ArrearsList.value;
for (let i = 0; i < list.length; i++) {
const amounts = list[i].chargeItemAmounts;
if (amounts) {
Object.keys(amounts).forEach((k) => keys.add(k));
}
}
return [...keys] as string[];
});
function handleRowClass({ row }) {
if (queryParams.value.viewType === 1) {
if (row.chargeItemName === '合计') {
// 示例1：收费项目等于物业费的行加深色
return 'bg-dark';
}
return '';
} else {
if (row.houseTypeName === '合计') {
// 示例1：收费项目等于物业费的行加深色
return 'bg-dark';
}
return '';
}
}
const mergeSpanMethod = ({ row, columnIndex, rowIndex }) => {
const lastRowIndex = ArrearsList.value.length - 1;
if (rowIndex === lastRowIndex) {
if (columnIndex === 0) {
return { rowspan: 1, colspan: 2 };
}
if (columnIndex === 1) {
return { rowspan: 0, colspan: 0 };
}
}
if (columnIndex === 0) {
if (rowIndex > 0 && row.villageName === ArrearsList.value[rowIndex - 1].villageName) {
return { rowspan: 0, colspan: 0 };
}
let rowspan = 1;
for (let i = rowIndex + 1; i < ArrearsList.value.length; i++) {
if (ArrearsList.value[i].villageName === row.villageName) {
rowspan++;
} else {
break;
}
}
return { rowspan, colspan: 1 };
}
// 普通行不合并
return { rowspan: 1, colspan: 1 };
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 导出Excel */
const handleExport = () => {
if (ArrearsList.value.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: { label: string; prop: string }[] = [{ label: '小区', prop: 'villageName' }];
if (queryParams.value.viewType === 1) {
columns.push({ label: '收费项目', prop: 'chargeItemName' });
houseTypeKeys.value.forEach((type) => {
columns.push({ label: type, prop: `houseTypeAmounts[${type}]` });
});
} else if (queryParams.value.viewType === 2) {
columns.push({ label: '房屋类型', prop: 'houseTypeName' });
houseTypeKeys2.value.forEach((type) => {
columns.push({ label: type, prop: `chargeItemAmounts[${type}]` });
});
}
columns.push({ label: '金额', prop: 'totalAmount' });
const processedData = ArrearsList.value.map((row) => {
const obj: any = {
villageName: row.villageName,
totalAmount: row.totalAmount
};
if (queryParams.value.viewType === 1) {
obj.chargeItemName = row.chargeItemName;
houseTypeKeys.value.forEach((type) => {
obj[`houseTypeAmounts[${type}]`] = row.houseTypeAmounts?.[type] || 0;
});
} else if (queryParams.value.viewType === 2) {
obj.houseTypeName = row.houseTypeName;
houseTypeKeys2.value.forEach((type) => {
obj[`chargeItemAmounts[${type}]`] = row.chargeItemAmounts?.[type] || 0;
});
}
return obj;
});
console.log(processedData, columns);
const mergeSpanMethod = ({ row, columnIndex, rowIndex }) => {
const lastRowIndex = ArrearsList.value.length - 1;
if (rowIndex === lastRowIndex) {
if (columnIndex === 0) {
return { rowspan: 1, colspan: 2 };
}
if (columnIndex === 1) {
return { rowspan: 0, colspan: 0 };
}
}
if (columnIndex === 0) {
if (rowIndex > 0 && row.villageName === ArrearsList.value[rowIndex - 1].villageName) {
return { rowspan: 0, colspan: 0 };
}
let rowspan = 1;
for (let i = rowIndex + 1; i < ArrearsList.value.length; i++) {
if (ArrearsList.value[i].villageName === row.villageName) {
rowspan++;
} else {
break;
}
}
return { rowspan, colspan: 1 };
}
// 普通行不合并
return { rowspan: 1, colspan: 1 };
};
exportToExcel(processedData, columns, `应收欠费汇总_${new Date().getTime()}`, mergeSpanMethod);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
};
onMounted(() => {
getList();
handleQueryHouseUse();
getAllVillage();
});
</script>
<style lang="scss" scoped>
.el-table {
height: calc(100% - 80px);
}
/* 深度穿透修改表格行背景 */
:deep(.bg-dark td) {
background-color: #e8f4ff !important;
}
/* hover 悬浮保留深色 */
:deep(.bg-dark:hover td) {
background-color: #d0e4fb !important;
}
</style>

356
src/views/system/report/detailed.vue Normal file
View File

@@ -0,0 +1,356 @@
<template>
<div class="p-2 h-full flex flex-col">
<pageHeader></pageHeader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" @submit.prevent="handleQuery" :inline="true">
<div class="flex justify-between">
<div>
<el-form-item label="应收账期" prop="villageId">
<el-date-picker
v-model="queryTime"
type="daterange"
@update:model-value="handleQueryTime"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="区域" prop="chargeItemId">
<el-select @change="handleVillageChange" v-model="queryParams.villageId" placeholder="请选择">
<el-option v-for="item in villageList" :key="item.villageId" :label="item.villageName" :value="item.villageId" />
</el-select>
</el-form-item>
<el-form-item label="房号" prop="houseNo">
<el-input v-model.trim="queryParams.houseNo" placeholder="请输入房号" />
</el-form-item>
<el-form-item label="欠费月数" prop="month">
<el-select v-model="queryParams.month" placeholder="请选择">
<el-option v-for="item in MonthList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</div>
<div>
<el-button type="primary" @click="handleQuery">查询</el-button>
<el-button @click="resetQuery">重置</el-button>
</div>
</div>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never" class="flex-1">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="5">
<span>应收欠费明细表</span>
</el-col>
<el-col :span="15"></el-col>
<el-col :span="3">
<el-button type="primary" @click="handleExport">导出本页</el-button>
<el-button type="primary" @click="handleExportAll">导出全部</el-button>
</el-col>
</el-row>
</template>
<el-table :span-method="mergeSpanMethod" v-loading="loading" border :data="ArrearsDetailList">
<el-table-column label="序号" width="80" align="center" prop="serialNumber" />
<el-table-column label="区域" align="center" prop="area" />
<el-table-column label="房号" align="center" prop="houseNo" />
<el-table-column label="客户" align="center" prop="customerName" />
<el-table-column label="联系电话" align="center" prop="phone" />
<el-table-column label="欠费月数" width="80" align="center" prop="arrearsMonths" />
<el-table-column label="应收账期" align="center" prop="billPeriod" />
<el-table-column label="欠费项目" align="center">
<template #default>
<template v-for="(item, index) in dynamicColumns" :key="index">
<el-table-column :label="item" align="center">
<template #default="scope">
{{ scope.row.chargeItemAmounts?.[item] || 0 }}
</template>
</el-table-column>
</template>
<el-table-column label="金额合计" align="center" prop="totalAmount">
<template #default="scope">
<span style="color: red">{{ scope.row.totalAmount }}</span>
</template>
</el-table-column>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</div>
</template>
账龄
<script setup name="Arrears" lang="ts">
import pagination from '@/components/Pagination/index.vue';
import pageHeader from '@/components/Pageheader/index.vue';
import { getArrearsDetails } from '@/api/system/report/arrears/arrears';
import { listChargeItem } from '@/api/system/SdbChargeItem';
import { getCommunitylistAPI } from '@/api/system/community';
import { OwnerArrearsDetailVo } from '@/api/system/report/arrears/type';
import { getVillageTree } from '@/api/system/house';
import { validator } from '@/utils/Reg';
import { ColumnConfig, exportToExcel } from '@/utils/xlsx';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const ArrearsDetailList = ref<OwnerArrearsDetailVo[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const queryTime = ref([]);
function handleQueryTime(val: string[]) {
queryParams.value.startTime = val[0];
queryParams.value.endTime = val[1];
}
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
villageId: '-1',
startTime: '',
endTime: '',
houseNo: '',
month: '-1'
},
rule: [
{
validator: (_: any, value: string, callback: (arg0?: Error) => any) => {
if (value === '' || value === undefined || value === null) {
return callback();
}
if (!validator(value, 'fullFilterReg')) {
return callback(new Error('请输入正确的房号'));
}
}
}
]
});
const { queryParams } = toRefs(data);
// 查询小区
const villageList = ref([]);
function getAllVillage() {
getCommunitylistAPI().then((res) => {
villageList.value = [
{
villageId: '-1',
villageName: '全部区域'
},
...res.rows
];
});
}
// 区域改变时，查询收费项目
function handleVillageChange(val: string) {
queryParams.value.villageId = val;
queryParams.value.houseNo = '-1';
}
// 月份
const MonthList = ref([]);
function getMonthList() {
const arr = Array.from({ length: 12 }).fill((i) => {
return {
id: `${i + 1}`,
name: `${i + 1}月`
};
});
MonthList.value = [];
MonthList.value = [
{
id: '-1',
name: '全部月数'
},
...arr
];
}
// 动态列名列表▐╬ .3╬
const dynamicColumns = ref<string[]>([]);
// 在获取数据后更新动态列
const updateDynamicColumns = (list: any[]) => {
const columns = new Set<string>();
list.forEach((row) => {
if (row.chargeItemAmounts) {
Object.keys(row.chargeItemAmounts).forEach((key) => columns.add(key));
}
});
return Array.from(columns);
};
/** 查询电抄记录列表 */
const getList = async () => {
loading.value = true;
const search = { ...queryParams.value };
// 移除空字符串字段
Object.keys(search).forEach((key) => {
if (search[key] === '-1') {
search[key] = undefined;
}
});
getArrearsDetails(search)
.then((res) => {
ArrearsDetailList.value = res.rows;
total.value = res.total;
dynamicColumns.value = updateDynamicColumns(res.rows);
ArrearsDetailList.value[ArrearsDetailList.value.length - 1].serialNumber = '合计';
})
.finally(() => {
loading.value = false;
});
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 导出Excel */
const handleExport = () => {
if (ArrearsDetailList.value.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: ColumnConfig[] = [
{ label: '序号', prop: 'serialNumber' },
{ label: '区域', prop: 'area' },
{ label: '房号', prop: 'houseNo' },
{ label: '客户', prop: 'customerName' },
{ label: '联系方式', prop: 'phone' },
{ label: '欠费月数', prop: 'arrearsMonths' },
{ label: '应收账期', prop: 'billPeriod' },
{
label: '欠费项目',
children: [
...dynamicColumns.value.map((item) => {
return { label: item, prop: `chargeItemAmounts.${item}` };
})
]
}
];
exportToExcel(ArrearsDetailList.value, columns, `应收欠费明细表_${new Date().getTime()}`, mergeSpanMethod);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
};
const handleExportAll = () => {
loading.value = true;
let reportAllList: OwnerArrearsDetailVo[] = [];
// 移除空字符串字段
getArrearsDetails()
.then((res) => {
reportAllList = res.rows;
total.value = res.total;
reportAllList[reportAllList.length - 1].serialNumber = '合计';
if (reportAllList.length === 0) {
proxy?.$modal.msgWarning('没有可导出的数据');
return;
}
// 显示加载提示
const list = updateDynamicColumns(res.rows);
loading.value = true;
// 使用 setTimeout 让出主线程，避免阻塞UI
setTimeout(() => {
try {
const columns: ColumnConfig[] = [
{ label: '序号', prop: 'serialNumber' },
{ label: '区域', prop: 'area' },
{ label: '房号', prop: 'houseNo' },
{ label: '客户', prop: 'customerName' },
{ label: '联系方式', prop: 'phone' },
{ label: '欠费月数', prop: 'arrearsMonths' },
{ label: '应收账期', prop: 'billPeriod' },
{
label: '欠费项目',
children: [
...list.map((item) => {
return { label: item, prop: `chargeItemAmounts.${item}` };
})
]
}
];
const mergeSpanMethod2 = ({ columnIndex, rowIndex }) => {
if (rowIndex === reportAllList.length - 1) {
const rowspan = 6;
if (columnIndex === 0) {
return { rowspan: 1, colspan: 1 };
}
if (columnIndex === 1) {
return { rowspan: 1, colspan: rowspan };
}
if (columnIndex < rowspan + 1) {
return { rowspan: 0, colspan: 0 };
}
}
// 普通行不合并
return { rowspan: 1, colspan: 1 };
};
exportToExcel(reportAllList, columns, `应收欠费明细表_${new Date().getTime()}`, mergeSpanMethod2);
} catch (error) {
proxy?.$modal.msgError('导出失败，请重试');
console.error('导出错误:', error);
} finally {
loading.value = false;
}
}, 100);
})
.finally(() => {
loading.value = false;
});
};
const mergeSpanMethod = ({ columnIndex, rowIndex }) => {
if (rowIndex === ArrearsDetailList.value.length - 1) {
const rowspan = 6;
if (columnIndex === 0) {
return { rowspan: 1, colspan: 1 };
}
if (columnIndex === 1) {
return { rowspan: 1, colspan: rowspan };
}
if (columnIndex < rowspan + 1) {
return { rowspan: 0, colspan: 0 };
}
}
// 普通行不合并
return { rowspan: 1, colspan: 1 };
};
onMounted(() => {
getList();
getMonthList();
getAllVillage();
});
</script>
<style lang="scss" scoped>
.el-table {
height: calc(100% - 80px);
}
</style>