# 排班管理完整功能开发文档

## 已完成功能

### 1. 样例绩效数据
✅ 添加了6个样例员工的绩效数据（张三、李四、王五、赵六、孙七、周八）
✅ 当实际数据为空时，自动使用样例数据展示排行榜和图表

### 2. 日期区间筛选
✅ 添加了开始日期和结束日期两个状态变量
✅ 更新了getPerfDateRange函数使用日期区间
✅ 需要手动修改UI：将单个日期选择器替换为开始+结束日期选择器（见下方说明）

### 3. 完整的排班管理功能

#### 3.1 数据持久化
- 使用localStorage存储排班数据（key: `smart_agriculture_schedules`）
- 自动加载历史排班数据

#### 3.2 创建排班
- 支持按周（7天）或按月（30天）创建排班
- 自动生成初始班次（早班、中班、晚班）
- 自动分配现有员工到各个班次

#### 3.3 编辑排班
- 修改排班名称、类型、日期范围
- 保留原有班次数据

#### 3.4 复制排班
- 一键复制现有排班作为模板
- 自动调整日期范围到当前

#### 3.5 发布排班
- 草稿状态的排班可以发布
- 发布后状态变为"已发布"

#### 3.6 导出班表
- 导出为CSV格式
- 包含员工姓名、班组、日期、班次、工作时间、任务等完整信息
- 自动下载到本地

#### 3.7 删除排班
- 带确认提示的删除功能
- 从存储中移除数据

## 需要手动完成的小修改

### 修改1：更新绩效统计的日期选择器

找到第1451-1459行，将单个日期选择器：

```tsx
<div className=\"flex items-center gap-2\">
  <label className=\"text-xs\">选择日期</label>
  <Input
    type=\"date\"
    value={perfPeriod}
    onChange={(e) => setPerfPeriod(e.target.value)}
    className=\"w-40 h-9\"
  />
</div>
```

替换为两个日期选择器：

```tsx
<div className=\"flex items-center gap-2\">
  <label className=\"text-xs\">开始日期</label>
  <Input
    type=\"date\"
    value={perfStartDate}
    onChange={(e) => setPerfStartDate(e.target.value)}
    className=\"w-40 h-9\"
  />
</div>
<div className=\"flex items-center gap-2\">
  <label className=\"text-xs\">结束日期</label>
  <Input
    type=\"date\"
    value={perfEndDate}
    onChange={(e) => setPerfEndDate(e.target.value)}
    className=\"w-40 h-9\"
  />
</div>
```

### 修改2：更新排班管理的顶部按钮

找到第1757-1766行，将按钮：

```tsx
<div className=\"flex gap-2\">
  <Button variant=\"outline\">
    <Copy className=\"w-4 h-4 mr-2\" />
    复制模板
  </Button>
  <Button variant=\"outline\">
    <Download className=\"w-4 h-4 mr-2\" />
    导出班表
  </Button>
</div>
```

替换为：

```tsx
<div className=\"flex gap-2\">
  {schedules.length > 0 && (
    <>
      <Button variant=\"outline\" onClick={() => schedules[0] && handleCopySchedule(schedules[0])}>
        <Copy className=\"w-4 h-4 mr-2\" />
        复制最新排班
      </Button>
      <Button variant=\"outline\" onClick={() => schedules[0] && handleExportSchedule(schedules[0])}>
        <Download className=\"w-4 h-4 mr-2\" />
        导出最新班表
      </Button>
    </>
  )}
</div>
```

### 修改3：更新排班卡片的操作按钮

找到第1794-1803行，将按钮：

```tsx
<div className=\"flex gap-2\">
  <Button size=\"sm\" variant=\"outline\">
    <Edit className=\"w-4 h-4 mr-2\" />
    编辑
  </Button>
  <Button size=\"sm\" variant=\"outline\">
    <Download className=\"w-4 h-4 mr-2\" />
    导出
  </Button>
</div>
```

替换为：

```tsx
<div className=\"flex gap-2\">
  {schedule.status === '草稿' && (
    <Button size=\"sm\" className=\"bg-green-600 hover:bg-green-700\" onClick={() => handlePublishSchedule(schedule.id)}>
      <CheckCircle2 className=\"w-4 h-4 mr-2\" />
      发布
    </Button>
  )}
  <Button size=\"sm\" variant=\"outline\" onClick={() => handleEditSchedule(schedule)}>
    <Edit className=\"w-4 h-4 mr-2\" />
    编辑
  </Button>
  <Button size=\"sm\" variant=\"outline\" onClick={() => handleCopySchedule(schedule)}>
    <Copy className=\"w-4 h-4 mr-2\" />
    复制
  </Button>
  <Button size=\"sm\" variant=\"outline\" onClick={() => handleExportSchedule(schedule)}>
    <Download className=\"w-4 h-4 mr-2\" />
    导出
  </Button>
  <Button size=\"sm\" variant=\"outline\" onClick={() => handleDeleteSchedule(schedule.id)}>
    <Trash2 className=\"w-4 h-4\" />
  </Button>
</div>
```

### 修改4：更新新建排班按钮

找到第1767行，将：

```tsx
<Button className=\"bg-green-600 hover:bg-green-700\" onClick={() => setShowScheduleDialog(true)}>
```

替换为：

```tsx
<Button className=\"bg-green-600 hover:bg-green-700\" onClick={handleCreateSchedule}>
```

## 功能测试指南

### 1. 测试绩效统计
1. 进入"绩效管理 → 绩效统计"
2. 选择"开始日期"和"结束日期"
3. 切换"个人绩效"和"班组绩效"
4. 查看排行榜应显示6个样例员工数据
5. 查看图表应显示样例数据

### 2. 测试排班管理
1. 进入"绩效管理 → 排班管理"
2. 点击"新建排班"按钮
3. 填写排班信息：
   - 排班名称：2024年3月第1周排班
   - 排班类型：按周排班
   - 开始日期和结束日期
4. 点击"创建排班"
5. 查看自动生成的班次表格

### 3. 测试编辑排班
1. 点击排班卡片的"编辑"按钮
2. 修改排班名称
3. 点击"更新排班"
4. 确认修改已保存

### 4. 测试复制排班
1. 点击排班卡片的"复制"按钮
2. 查看生成的副本（带"副本"后缀）
3. 确认日期已自动调整

### 5. 测试发布排班
1. 对于草稿状态的排班
2. 点击"发布"按钮
3. 确认状态变为"已发布"
4. 已发布的排班不再显示"发布"按钮

### 6. 测试导出班表
1. 点击"导出"按钮
2. 确认下载了CSV文件
3. 用Excel打开查看内容完整性

### 7. 测试删除排班
1. 点击删除按钮（垃圾桶图标）
2. 确认提示对话框
3. 点击确认删除
4. 确认排班已从列表移除

## 数据结构说明

### Schedule接口
```typescript
interface Schedule {
  id: string;                    // 唯一标识
  name: string;                  // 排班名称
  type: 'week' | 'month';        // 排班类型
  startDate: string;             // 开始日期
  endDate: string;               // 结束日期
  shifts: ScheduleShift[];       // 班次列表
  status: '草稿' | '已发布';     // 状态
  createdAt: string;             // 创建时间
}
```

### ScheduleShift接口
```typescript
interface ScheduleShift {
  staffId: string;               // 员工ID
  staffName: string;             // 员工姓名
  team: string;                  // 班组
  date: string;                  // 日期
  shift: '早班' | '中班' | '晚班' | '休息';  // 班次
  workHours: string;             // 工作时间
  task?: string;                 // 任务（可选）
}
```

## 功能亮点

1. **自动生成班次**：根据日期范围和员工列表自动生成初始班次
2. **智能复制**：复制排班时自动调整日期到当前时间
3. **状态管理**：草稿和已发布状态，支持发布流程
4. **数据持久化**：所有数据保存到localStorage，刷新不丢失
5. **完整导出**：CSV格式导出，支持Excel打开
6. **样例数据**：即使没有实际工时记录，也能看到绩效统计演示
7. **日期区间**：支持自定义开始和结束日期，更灵活的查询

## 后续优化建议

1. **冲突检测**：检测同一员工在同一时间的排班冲突
2. **班次编辑**：支持直接在表格中编辑班次
3. **批量操作**：批量分配、批量修改班次
4. **模板管理**：保存常用排班模板
5. **通知功能**：排班发布后自动通知相关员工
6. **统计分析**：排班执行情况统计
7. **打印功能**：支持打印班表
8. **Excel导入**：从Excel导入排班数据
