# 课程安排表组件

## 功能特性

### 📅 完整的课程表视图
- **时间轴显示**：11:00-17:00 每小时时间段
- **周视图**：显示一周7天的课程安排
- **双向滚动**：支持水平（日期）和垂直（时间）滚动
- **响应式布局**：适配微信小程序端

### 🔍 智能筛选功能
- **顶部快捷筛选**：时间、老师、教室、班级
- **详细筛选弹窗**：支持多选条件组合筛选
- **实时统计**：显示总课程数和未点名课程数

### 🎨 主题样式
- **暗黑主题**：#292929 背景色
- **绿色主色调**：#29d3b4 强调色
- **层次化设计**：清晰的视觉层级

### 📱 交互体验
- **日期导航**：支持上一周/下一周切换
- **课程类型**：普通课程、私教课程、活动课程区分显示
- **点击交互**：支持单元格点击添加课程
- **悬浮按钮**：快速添加课程

## 使用方法

### 1. 页面导航
```javascript
// 跳转到课程安排表
this.$navigateTo({
  url: '/pages/coach/schedule/schedule_table'
})
```

### 2. 数据结构

#### 课程数据格式
```javascript
{
  id: 1,                    // 课程ID
  date: '2025-07-02',       // 日期
  time: '11:00',            // 时间
  courseName: '花花-丁颖',   // 课程名称
  students: '小鱼-周子',     // 学员
  teacher: '燕子-符',       // 老师
  status: '燕菜',           // 状态
  type: 'normal',           // 类型：normal/private/activity
  duration: 1               // 持续时间（小时）
}
```

#### 筛选选项格式
```javascript
{
  teacherOptions: [
    { id: 1, name: '张老师' }
  ],
  classroomOptions: [
    { id: 1, name: '教室1' }
  ],
  classOptions: [
    { id: 1, name: '花花-丁颖' }
  ]
}
```

### 3. 自定义配置

#### 修改时间段
```javascript
// 在 data 中修改 timeSlots
timeSlots: [
  { time: '09:00', value: 9 },
  { time: '10:00', value: 10 },
  // ... 更多时间段
]
```

#### 修改表格宽度
```javascript
// 调整表格总宽度（rpx）
tableWidth: 1200
```

### 4. API 接口集成

#### 获取课程数据
```javascript
async loadCourses() {
  try {
    const res = await apiRoute.getCourseSchedule({
      startDate: this.currentWeekStart,
      endDate: this.getWeekEndDate()
    })
    this.courses = res.data
  } catch (error) {
    console.error('加载课程失败:', error)
  }
}
```

#### 添加课程
```javascript
async addCourse(courseData) {
  try {
    const res = await apiRoute.addCourseSchedule(courseData)
    if (res.code === 1) {
      this.loadCourses() // 重新加载数据
    }
  } catch (error) {
    console.error('添加课程失败:', error)
  }
}
```

## 性能优化建议

### 1. 数据懒加载
- 只加载当前周的数据
- 切换周时再加载新数据

### 2. 滚动优化
- 使用 `scroll-view` 组件的惯性滚动
- 避免在滚动事件中进行复杂计算

### 3. 渲染优化
- 使用 `v-show` 替代 `v-if` 进行显示隐藏
- 合理使用 `key` 属性优化列表渲染

## 扩展功能

### 1. 课程详情
```javascript
// 点击课程查看详情
handleCourseClick(course) {
  this.$navigateTo({
    url: `/pages/coach/course/info?id=${course.id}`
  })
}
```

### 2. 拖拽排课
```javascript
// 可以集成拖拽功能实现课程时间调整
// 使用 movable-view 组件或手势事件
```

### 3. 批量操作
```javascript
// 支持批量选择和操作课程
// 添加多选模式
```

## 注意事项

1. **微信小程序兼容性**：使用了 `scroll-view` 组件，确保在微信小程序中正常滚动
2. **数据更新**：切换日期时需要重新加载数据
3. **内存管理**：大量数据时考虑虚拟滚动优化
4. **网络状态**：处理网络异常情况，提供离线缓存

## troubleshooting

### 滚动不流畅
- 检查 `scroll-view` 的高度设置
- 减少滚动事件中的计算量

### 数据不更新
- 确保数据是响应式的
- 检查 Vue 数据绑定是否正确

### 样式错位
- 检查 flex 布局设置
- 确保单元格宽度一致

---

# 添加课程安排页面 API 设计文档

## 页面概述

添加课程安排页面用于创建新的课程安排，包含课程选择、班级选择、教练分配、场地预订、时间安排等功能。

## 数据库表结构映射

### 1. 课程下拉框
- **页面字段**: "请选择课程"
- **数据源**: `school_course` 表
- **需要字段**: `id`, `course_name`, `course_type`, `duration`, `session_count`, `single_session_count`
- **说明**: 显示所有可用课程供选择

### 2. 班级下拉框  
- **页面字段**: "请选择班级（可选）"
- **数据源**: `school_class` 表
- **需要字段**: `id`, `class_name`, `campus_id`, `head_coach`, `assistant_coach`, `status`
- **筛选条件**: `status = 1` (开启状态)
- **说明**: 根据校区筛选可用班级，为可选字段

### 3. 授课教练下拉框
- **页面字段**: "请选择教练"
- **数据源**: `school_personnel` 表 + `school_campus_person_role` 表
- **查询条件**: 
  - `school_campus_person_role.dept_id = 2` (教练部门)
  - 校区筛选逻辑：
    - 如果 `campus_id != 0`: 查询指定校区的教练
    - 如果 `campus_id = 0`: 查询所有校区的教练
- **需要字段**: `school_personnel.id`, `school_personnel.name`, `school_campus_person_role.campus_id`

### 4. 上课场地下拉框
- **页面字段**: "请选择场地"
- **数据源**: `school_venue` 表
- **需要字段**: `id`, `venue_name`, `capacity`, `availability_status`, `time_range_type`, `time_range_start`, `time_range_end`, `fixed_time_ranges`
- **筛选条件**: `availability_status = 1` (可用状态)
- **说明**: 根据校区筛选可用场地

### 5. 上课日期
- **页面字段**: "上课日期"
- **数据库字段**: `school_course_schedule.course_date`
- **格式**: DATE (YYYY-MM-DD)

### 6. 上课时间段
- **页面字段**: "请选择时间段"
- **数据库字段**: `school_course_schedule.time_slot`
- **格式**: VARCHAR "HH:MM-HH:MM" (如: "09:00-10:00")
- **说明**: 根据选中场地的时间限制动态生成可选时间段

### 7. 课程容量
- **页面字段**: "请输入课程容量"
- **数据库字段**: `school_course_schedule.available_capacity`
- **说明**: 不能超过场地的最大容量

### 8. 备注
- **页面字段**: "请输入备注信息（可选）"
- **数据库字段**: `school_course_schedule.remarks`
- **类型**: TEXT
- **说明**: 可选字段，用于记录额外信息

## 校区权限说明

系统根据当前用户所属校区进行数据筛选：
- **教练**: 通过 `school_campus_person_role` 表的 `campus_id` 字段筛选
- **班级**: 通过 `school_class` 表的 `campus_id` 字段筛选  
- **场地**: 通过 `school_venue` 表的 `campus_id` 字段筛选

特殊情况：如果 `campus_id = 0`，则表示该资源对所有校区可用。

## 需要的API接口

### 1. 获取课程列表
**接口**: `GET /course/list`
**参数**: 无
**返回**: 课程列表数据

### 2. 获取班级列表
**接口**: `GET /class/list`
**参数**: 
- `campus_id`: 校区ID（可选）
**返回**: 班级列表数据

### 3. 获取教练列表  
**接口**: `GET /coach/list`
**参数**:
- `campus_id`: 校区ID（可选）
**返回**: 教练列表数据
**查询逻辑**: 
```sql
SELECT p.id, p.name 
FROM school_personnel p
JOIN school_campus_person_role r ON p.id = r.person_id
WHERE r.dept_id = 2 
AND (r.campus_id = :campus_id OR r.campus_id = 0)
```

### 4. 获取场地列表
**接口**: `GET /venue/list`  
**参数**:
- `campus_id`: 校区ID（可选）
**返回**: 场地列表数据

### 5. 获取可用时间段
**接口**: `GET /venue/timeSlots`
**参数**:
- `venue_id`: 场地ID
- `date`: 查询日期
**返回**: 可用时间段列表
**说明**: 根据场地的时间限制和已有安排计算可用时间段

### 6. 创建课程安排
**接口**: `POST /courseSchedule/create`
**参数**:
```json
{
  "campus_id": 1,
  "venue_id": 1,
  "course_date": "2025-06-30",
  "time_slot": "09:00-10:00",
  "course_id": 1,
  "coach_id": 1,
  "available_capacity": 15,
  "class_id": 1,
  "remarks": "备注信息",
  "created_by": "manual"
}
```
**返回**: 创建结果

## 数据验证规则

1. **课程容量验证**: 不能超过场地最大容量
2. **时间冲突检查**: 同一场地同一时间段不能有多个课程安排
3. **教练时间冲突**: 同一教练同一时间段不能安排多个课程
4. **场地可用时间**: 选择的时间段必须在场地可用时间范围内
5. **日期验证**: 不能选择过去的日期

## 业务逻辑

1. **自动计算可用容量**: 默认使用场地容量，用户可手动调整
2. **班级教练关联**: 选择班级后，可自动填充该班级的主教练
3. **场地时间限制**: 根据场地设置动态显示可选时间段
4. **重复课程检查**: 创建前检查是否存在冲突

## 状态管理

新创建的课程安排默认状态为 `pending`（待开始），系统会根据时间自动更新状态：
- `pending`: 待开始
- `upcoming`: 即将开始  
- `ongoing`: 进行中
- `completed`: 已结束