refactor(teacher/myClassPage): 重构班级页面筛选逻辑，使用API动态获取选项

将硬编码的筛选选项改为通过API动态获取
更新变量命名以更清晰表达用途
添加年级、班级和课程的联动筛选功能

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2025-01-20 10:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-20 11:47:35
+ * @LastEditTime: 2025-06-25 16:12:36
  * @FilePath: /mlaj/src/views/teacher/myClassPage.vue
  * @Description: 我的班级页面
 -->
@@ -31,9 +31,9 @@
       <div>
         <van-sticky>
           <van-dropdown-menu active-color="#10b981" swipe-threshold="3">
-            <van-dropdown-item v-model="gradeFilter" :options="gradeOptions" @change="handleGradeChange" />
-            <van-dropdown-item v-model="classFilter" :options="classOptions" @change="handleClassChange" />
-            <van-dropdown-item v-model="courseFilter" :options="courseOptions" @change="handleCourseChange" />
+            <van-dropdown-item v-model="selectGradeValue" :options="gradeOption" @change="handleGradeChange" />
+            <van-dropdown-item v-model="selectClassValue" :options="classOption" @change="handleClassChange" />
+            <van-dropdown-item v-model="selectCourseValue" :options="courseOption" @change="handleCourseChange" />
           </van-dropdown-menu>
         </van-sticky>
       </div>
@@ -157,6 +157,8 @@ import { useRouter } from 'vue-router'
 import AppLayout from '@/layouts/AppLayout.vue'
 import { useTitle } from '@vueuse/core';
 
+import { getTeacherGradeClassListAPI } from "@/api/teacher";
+
 const router = useRouter()
 const route = useRoute()
 useTitle(route.meta.title);
@@ -173,35 +175,18 @@ const userInfo = ref({
 })
 
 // 筛选器数据
-const gradeFilter = ref('全部年级')
-const classFilter = ref('全部班级')
-const courseFilter = ref('全部课程')
+const selectGradeValue = ref(null);
+const selectClassValue = ref(null);
+const selectCourseValue = ref(null);
+const gradeOption = ref([]);
+const classOption = ref([]);
+const courseOption = ref([]);
+
 const sortFilter = ref('按活跃度')
 const searchKeyword = ref('')
 const showSortPopup = ref(false)
 
 // 筛选器选项
-const gradeOptions = ref([
-  { text: '全部年级', value: '全部年级' },
-  { text: '高一年级', value: '高一年级' },
-  { text: '高二年级', value: '高二年级' },
-  { text: '高三年级', value: '高三年级' }
-])
-
-const classOptions = ref([
-  { text: '全部班级', value: '全部班级' },
-  { text: '高一(1)班高一(1)班', value: '高一(1)班高一(1)班' },
-  { text: '高一(2)班', value: '高一(2)班' },
-  { text: '高一(3)班', value: '高一(3)班' }
-])
-
-const courseOptions = ref([
-  { text: '全部课程', value: '全部课程' },
-  { text: '语文', value: '语文' },
-  { text: '数学', value: '数学' },
-  { text: '英语', value: '英语' }
-])
-
 const sortOptions = ref([
   { text: '按活跃度', value: '按活跃度' },
   { text: '按姓名', value: '按姓名' },
@@ -299,11 +284,6 @@ const finished = ref(false)
 const filteredStudentList = computed(() => {
   let filtered = studentList.value
 
-  // 按班级筛选
-  if (classFilter.value !== '全部班级') {
-    filtered = filtered.filter(student => student.className === classFilter.value)
-  }
-
   // 按搜索关键词筛选
   if (searchKeyword.value) {
     filtered = filtered.filter(student =>
@@ -333,25 +313,49 @@ const formatPhone = (phone) => {
  * 处理年级筛选变化
  * @param {string} value - 选中的年级
  */
-const handleGradeChange = (value) => {
-  console.log('年级筛选:', value)
-  // 这里可以根据年级筛选更新班级选项
+const handleGradeChange = async (val) => {
+  console.log('val', val);
+  selectGradeValue.value = val;
+  // 根据年级ID 更新过滤列表
+  getFilterList(val);
+  // 重置分页参数
+  // page.value = 0
+  // checkinDataList.value = []
+  // finished.value = false
+  // // 重新加载数据
+  // onLoad()
 }
 
 /**
  * 处理班级筛选变化
  * @param {string} value - 选中的班级
  */
-const handleClassChange = (value) => {
-  console.log('班级筛选:', value)
+const handleClassChange = (val) => {
+  console.log('val', val);
+  selectClassValue.value = val;
+  // 根据年级ID和班级ID 更新过滤列表
+  getFilterList(selectGradeValue.value, val);
+  // 重置分页参数
+  // page.value = 0
+  // checkinDataList.value = []
+  // finished.value = false
+  // // 重新加载数据
+  // onLoad()
 }
 
 /**
  * 处理课程筛选变化
  * @param {string} value - 选中的课程
  */
-const handleCourseChange = (value) => {
-  console.log('课程筛选:', value)
+const handleCourseChange = (val) => {
+  console.log('val', val);
+  selectCourseValue.value = val;
+  // 重置分页参数
+  // page.value = 0
+  // checkinDataList.value = []
+  // finished.value = false
+  // // 重新加载数据
+  // onLoad()
 }
 
 /**
@@ -402,12 +406,55 @@ const onLoad = () => {
   }, 1000)
 }
 
+const gradeList = ref([]);
+const classList = ref([]);
+const courseList = ref([]);
+
+const getFilterList = async (grade_id=null, class_id=null) => {
+  const { code, data } = await getTeacherGradeClassListAPI({ grade_id, class_id });
+  if (code) {
+    // 处理数据
+    gradeOption.value = data.grade_list?.map(item => {
+      return {
+        text: item.grade_name,
+        value: item.id,
+      }
+    });
+    gradeOption.value.unshift({
+      text: '全部年级',
+      value: null,
+    });
+    classOption.value = data.class_list?.map(item => {
+      return {
+        text: item.class_name,
+        value: item.id,
+      }
+    });
+    classOption.value.unshift({
+      text: '全部班级',
+      value: null,
+    });
+    courseOption.value = data.group_list?.map(item => {
+      return {
+        text: item.title,
+        value: item.id,
+      }
+    });
+    courseOption.value.unshift({
+      text: '全部课程',
+      value: null,
+    });
+  }
+}
+
 /**
  * 组件挂载时初始化数据
  */
-onMounted(() => {
+onMounted(async () => {
   // 这里可以调用API获取实际数据
   console.log('我的班级页面已加载')
+  // 获取老师的年级、班级、课程列表信息
+  getFilterList();
 })
 </script>