智慧教务系统

History

王泽彦 9e1297c8ce 分包迁移		8 months ago
..
README.md	添加 docker 开发环境。修改客户端排课	9 months ago
add_schedule.vue	修改 bug	9 months ago
adjust_course.vue	临时提交	8 months ago
schedule_table.vue	分包迁移	8 months ago
sign_in.vue	临时提交	8 months ago

README.md

课程安排表组件

功能特性

📅 完整的课程表视图

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

🔍 智能筛选功能

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

🎨 主题样式

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

📱 交互体验

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

使用方法

1. 页面导航

// 跳转到课程安排表
this.$navigateTo({
  url: '/pages/coach/schedule/schedule_table'
})

2. 数据结构

课程数据格式

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

筛选选项格式

{
  teacherOptions: [
    { id: 1, name: '张老师' }
  ],
  classroomOptions: [
    { id: 1, name: '教室1' }
  ],
  classOptions: [
    { id: 1, name: '花花-丁颖' }
  ]
}

3. 自定义配置

修改时间段

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

修改表格宽度

// 调整表格总宽度（rpx）
tableWidth: 1200

4. API 接口集成

获取课程数据

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

添加课程

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. 课程详情

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

2. 拖拽排课

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

3. 批量操作

// 支持批量选择和操作课程
// 添加多选模式

注意事项

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

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（可选）返回: 教练列表数据 查询逻辑:

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 参数:

{
  "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"
}

返回: 创建结果

数据验证规则

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

业务逻辑

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

状态管理

新创建的课程安排默认状态为 pending（待开始），系统会根据时间自动更新状态：

pending: 待开始
upcoming: 即将开始
ongoing: 进行中
completed: 已结束