数据层建设 - JSON数据文件、数据处理函数、权限逻辑

[georgelichen]

目标

构建前端演示系统的数据层，使用JSON文件模拟分销商相关数据，实现数据筛选、排序、分页和权限过滤功能，为4个核心功能模块提供数据支持。

详细描述

建立基于JSON文件的模拟数据系统，专注于分销商信息查询、变更指引、新增指引和应收账款管理的数据展示需求。实现数据筛选、排序、权限过滤等前端数据处理功能，为演示系统提供逼真的业务数据。

验收条件

• 设计支持多主体的分销商、证照、应收账款、用户权限JSON数据结构
• 创建演示数据文件(放在src/data/目录下，支持一个分销商在不同主体的不同联系人)
• 实现多维度数据筛选函数(主体、分销商、商务大区、商务负责人)
• 构建跨主体权限过滤机制(商务人员只看负责范围数据)
• 实现分页和展开/折叠数据处理
• 实现数据搜索功能(支持跨主体搜索)
• 模拟异步数据加载延迟(配合loading状态)
• 创建支持多主体的数据处理工具函数库
• 编写完整的TypeScript类型定义(支持DistributorEntity和UserEntity)
• 生成真实的演示数据(至少20个分销商，每个分销商在两个主体下有不同联系人)

实现细节

数据文件结构

src/data/
├── distributors.json    # 分销商基本信息
├── licenses.json        # 证照信息  
├── receivables.json     # 应收账款
├── users.json          # 用户权限数据
└── config.json         # 系统配置

数据处理函数

// 分销商数据服务接口
interface DistributorService {
  getDistributors(filters: DistributorFilter): Promise<Distributor[]>
  getDistributorsByEntity(entity: 'NNSH' | 'NNCP', filters?: DistributorFilter): Promise<Distributor[]>
  getLicenses(distributorId: string): Promise<License[]>
  getReceivables(filters: ReceivableFilter): Promise<Receivable[]>
  filterByUserRole(data: any[], userRole: UserRole, userId: string): any[]
  filterByEntity(data: Distributor[], entity: 'NNSH' | 'NNCP'): Distributor[]
  sortData<T>(data: T[], sortBy: keyof T, order: 'asc' | 'desc'): T[]
  paginateData<T>(data: T[], page: number, pageSize: number): PaginatedResult<T>
  toggleExpand(itemId: string, expanded: boolean): void
  searchData<T>(data: T[], searchTerm: string, searchFields: (keyof T)[]): T[]
}

权限系统

• 角色定义：
  • 商务人员 - 查看和管理自己负责的分销商信息
  • 省经理 - 管理区域内分销商信息
  • 商务大区负责人 - 区域分销商管理和监督
  • 物流组 - 查看全部分销商应收账款信息
  • 供应链人员 - 分销商供应链相关信息管理
• 权限粒度：按主体(NNSH/NNCP)、分销商范围、功能模块
• 数据过滤：商务人员只看负责范围，物流组看全部应收账款
• 权限检查：基于用户角色和数据归属关系

数据验证

// 分销商数据类型定义
interface Distributor {
  id: string
  name: string              // 分销商名称
  entities: DistributorEntity[]  // 在不同主体下的信息
  status: 'active' | 'inactive'
  address: string          // 主要地址
  expanded?: boolean       // 展开/折叠状态
}

interface DistributorEntity {
  entity: 'NNSH' | 'NNCP'  // 主体
  region: string           // 商务大区
  manager: string          // 负责商务
  contact: string          // 该主体下的联系人
  phone: string           // 该主体下的联系电话
  email?: string          // 该主体下的邮箱
  entityStatus: 'active' | 'inactive' | 'pending'  // 在该主体下的状态
}

interface License {
  id: string
  distributorId: string
  type: string           // 证照类型
  name: string          // 证照名称
  number: string        // 证照编号
  issueDate: string     // 发证日期
  expiryDate: string    // 到期日期
  status: 'valid' | 'expiring' | 'expired'
  daysToExpiry?: number // 距离到期天数
}

interface Receivable {
  id: string
  distributorId: string
  distributorName: string
  entity: 'NNSH' | 'NNCP'  // 所属主体
  amount: number         // 应收金额
  dueDate: string       // 应收到期日
  arrivalDate: string   // 订单到货日期
  status: 'pending' | 'overdue' | 'paid'
  businessName: string  // 商业名称
  daysOverdue?: number  // 逾期天数
  region: string        // 商务大区
  manager: string       // 负责商务
}

interface User {
  id: string
  name: string
  role: UserRole
  entities: UserEntity[]   // 用户在不同主体下的权限
}

interface UserEntity {
  entity: 'NNSH' | 'NNCP' | 'ALL'
  region?: string          // 负责区域
  distributorIds?: string[] // 负责分销商ID列表
}

type UserRole = '商务人员' | '省经理' | '商务大区负责人' | '物流组' | '供应链人员'

模拟服务

• 异步加载：模拟真实API调用延迟(500-1500ms)
• 错误处理：模拟网络错误和数据异常场景
• 加载状态：提供loading、success、error状态管理
• 缓存机制：模拟数据缓存，避免重复请求
• 搜索防抖：实现搜索输入防抖处理

定义完成

演示数据层完全可用，JSON数据文件结构完整且符合目录结构规范，数据筛选、搜索、排序和权限过滤功能正常，能够支持4个核心功能模块的数据展示需求，模拟真实业务场景，与设计系统的组件样式完美配合。

注意事项

• JSON数据文件放置在src/data/目录下(符合001项目结构)
• 权限过滤的准确性(商务人员只看负责数据)
• 数据筛选和搜索性能(支持多维度筛选)
• 演示数据的真实性和业务逻辑合理性
• 与TailwindCSS主题的状态色彩保持一致
• 确保数据类型定义完整，支持组件展开/折叠状态

相关资源

• TypeScript数据类型定义
• Next.js数据获取最佳实践
• 诺和诺德业务逻辑参考 (@rfp\RFP.md)
• 前端权限控制模式
• 数据展示组件状态管理