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

package.json

@@ -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",

src/api/system/report/aging/index.ts

@@ -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
+  });
+};
+

src/api/system/report/aging/type.ts

@@ -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;
+};

src/api/system/report/arrears/arrears.ts

@@ -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
+  });
+};

src/api/system/report/arrears/type.ts

@@ -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;
+};

src/api/system/residentReviewProcess/type.ts

@@ -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;
-}

src/components/Pagination/index.vue

@@ -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),

src/utils/request.ts

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

src/utils/xlsx.ts

@@ -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;
+}

src/views/system/report/aging.vue

@@ -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>

src/views/system/report/agingDetailed.vue

@@ -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>

src/views/system/report/arrears.vue

@@ -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>

src/views/system/report/detailed.vue

@@ -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>