React 实现类Google Calendar员工周度排班器的最优数据结构咨询

1. 核心数据结构设计 #

1.1 单条排班记录结构 #

每条排班记录直接存储所有必要基础信息，避免后续关联查询增加复杂度，示例结构如下：

// 单条排班事件对象
{
  id: 'shift_20240520_0900_1000_001', // 唯一标识，可自定义命名规则方便快速查找
  staffId: 'staff_003', // 员工唯一ID
  staffName: '张三', // 员工姓名，直接存储无需每次查询员工列表
  date: '2024-05-20', // 日期，*统一用YYYY-MM-DD格式*，筛选效率更高
  startTime: '09:00', // 开始时间，*HH:mm格式*
  endTime: '10:30', // 结束时间，*HH:mm格式*
  shiftType: '早班', // 排班类型，可自定义：早班/晚班/休息/外勤等
  remark: '前台值守', // 备注信息，可选字段
  isEditable: true // 控制是否允许编辑，可选字段，按需添加
}

1.2 整体存储结构 #

因为是周度排班场景，用对象按日期做key聚合所有排班记录，查询效率极高，点击任意时段可快速匹配对应数据：

// 周度排班总存储结构
const weeklySchedule = {
  "2024-05-20": [/* 当天所有排班事件数组 */],
  "2024-05-21": [/* 当天所有排班事件数组 */],
  "2024-05-22": [],
  "2024-05-23": [],
  "2024-05-24": [],
  "2024-05-25": [],
  "2024-05-26": [],
}

2. 点击弹窗交互适配逻辑 #

点击某个时段单元格时，直接把单元格绑定的日期、时段起始时间、时段结束时间三个参数传给弹窗组件即可：

• 如果该时段已有排班记录，直接从weeklySchedule[对应日期]数组里匹配起止时间对应的记录，把所有字段填充到表单中
• 如果是空时段，直接把传递的三个参数作为默认值填充表单，用户提交后往对应日期的数组里新增记录即可

3. 新手简化开发建议 #

• 先固定时间粒度，比如默认按30分钟/1小时为最小时段，暂时不做自由拖拽调整，大幅降低CSS和交互开发复杂度
• 核心功能阶段不用引入复杂状态管理库，直接用React的useState存储weeklySchedule对象即可跑通全流程
• 样式可以直接用成熟组件库的日历、弹窗、表单组件，不用从零手写CSS，节省大量开发精力

内容的提问来源于stack exchange，提问作者Kahalon