应收账款模块 - 账款表格、筛选功能、预警展示

[georgelichen]

应收账款模块 - 账款表格、筛选功能、预警展示

Objective

开发应收账款管理模块，实现账款数据的展示、筛选和预警功能，为财务管理提供直观的数据视图。

Background

应收账款模块是一站式门户的重要组成部分，需要展示分销商的账款信息、逾期情况和风险预警。该模块要求具备强大的数据筛选功能和直观的预警展示效果。

Requirements

Functional Requirements

• 应收账款数据表格展示（分销商、金额、账期、状态）
• 多维度筛选功能（按分销商、金额区间、账期、逾期状态）
• 逾期预警功能（颜色标识、图标提示、状态分类）
• 数据排序功能（按金额、账期、逾期天数）
• 分页和表格列宽调整
• 账款详情展开/折叠功能

Technical Requirements

• 基于JSON数据文件模拟应收账款数据
• 实现高性能的表格组件（支持虚拟滚动）
• 设计响应式表格布局
• 集成权限控制（数据过滤）

UI/UX Requirements

• 预警状态的视觉层次设计（正常/逾期/严重逾期）
• 筛选器的展开/折叠交互
• 表格加载状态和空状态设计
• 符合诺和诺德设计规范的配色方案

Acceptance Criteria

Core Functionality

• 应收账款表格能够显示完整的数据字段
• 筛选功能可以精确过滤数据并实时更新表格
• 预警功能能够正确识别和标识逾期账款
• 表格排序功能正常工作且保持筛选状态

Performance Standards

• 表格数据渲染时间 < 1秒（1000条记录）
• 筛选操作响应时间 < 300ms
• 表格滚动流畅（60fps）

Quality Assurance

• 所有筛选组合都能正确工作
• 预警逻辑准确无误
• 移动端和桌面端布局都正常显示
• 权限控制功能正确生效

Technical Approach

Data Structure

interface ReceivableRecord {
  id: string;
  distributorName: string;
  distributorCode: string;
  amount: number;
  currency: string;
  dueDate: string;
  overdueDays: number;
  status: 'normal' | 'overdue' | 'critical';
  accountManager: string;
  region: string;
}

Component Architecture

• ReceivablesTable: 主表格组件
• ReceivablesFilters: 筛选器组件
• WarningIndicator: 预警状态指示器
• ReceivableDetails: 账款详情展开面板

State Management

• 表格数据状态（原始数据、筛选后数据）
• 筛选条件状态（多个筛选器的联合状态）
• 排序状态和分页状态
• 展开/折叠状态管理

Performance Optimization

• 虚拟滚动处理大数据集
• 防抖筛选输入减少重复计算
• 记忆化计算提高筛选性能
• 懒加载表格列数据

Implementation Steps

Step 1: 数据结构和Mock数据

• 设计应收账款数据结构
• 创建receivables.json数据文件
• 实现数据处理工具函数

Step 2: 基础表格组件

• 开发ReceivablesTable组件
• 实现基础数据展示功能
• 添加表格样式和布局

Step 3: 筛选功能开发

• 开发筛选器组件
• 实现多维度筛选逻辑
• 集成筛选状态管理

Step 4: 预警功能实现

• 开发预警逻辑算法
• 实现预警视觉指示器
• 添加预警状态筛选

Step 5: 交互功能完善

• 实现排序功能
• 添加详情展开/折叠
• 完成分页功能

Step 6: 性能优化

• 实施虚拟滚动
• 优化筛选性能
• 添加加载状态

Dependencies

Upstream Dependencies

• [11] 数据层建设：需要JSON数据结构和权限逻辑
• [6] 布局框架：需要页面布局和导航组件

Downstream Dependencies

• 权限控制模块需要集成到此模块的数据过滤中

External Dependencies

• TailwindCSS配置需要包含表格和预警相关的样式类
• 虚拟滚动库（如react-window）

Definition of Done

• 所有功能要求都已实现并通过测试
• 代码通过TypeScript编译且无警告
• 组件有完整的单元测试覆盖
• 性能指标达到要求
• UI设计符合诺和诺德规范
• 功能与权限控制模块正确集成
• 浏览器兼容性测试通过
• 代码审查完成并合并到主分支

Rollback Plan

如果实现过程中遇到重大问题：

• 保留基础表格展示功能
• 简化筛选功能（只保留核心筛选项）
• 使用简单的颜色标识替代复杂预警逻辑
• 暂时取消虚拟滚动，使用分页替代