hookehuyr

feat(筛选组件): 添加默认值支持并实现筛选状态持久化

为CourseGroupCascader组件添加props支持默认值初始化
在myClassPage页面实现筛选状态保存与恢复功能
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2025-11-07 11:00:00 3 * @Date: 2025-11-07 11:00:00
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2025-11-07 17:46:23 5 + * @LastEditTime: 2025-12-18 23:11:35
6 * @FilePath: /mlaj/src/components/ui/CourseGroupCascader.vue 6 * @FilePath: /mlaj/src/components/ui/CourseGroupCascader.vue
7 * @Description: 教师页面筛选组件(年级/班级/课程),内部管理v-model与options并对外emit change事件 7 * @Description: 教师页面筛选组件(年级/班级/课程),内部管理v-model与options并对外emit change事件
8 --> 8 -->
...@@ -24,6 +24,22 @@ import { getTeacherGradeClassListAPI } from "@/api/teacher"; ...@@ -24,6 +24,22 @@ import { getTeacherGradeClassListAPI } from "@/api/teacher";
24 // 组件对外事件 24 // 组件对外事件
25 const emit = defineEmits(['change']) 25 const emit = defineEmits(['change'])
26 26
27 +// 接收外部传入的默认值
28 +const props = defineProps({
29 + defaultCourseId: {
30 + type: [Number, String],
31 + default: null
32 + },
33 + defaultMajorGroupId: {
34 + type: [Number, String],
35 + default: null
36 + },
37 + defaultMinorGroupId: {
38 + type: [Number, String],
39 + default: null
40 + }
41 +})
42 +
27 // 本组件内部管理的选择值(课程 / 年级 / 班级) 43 // 本组件内部管理的选择值(课程 / 年级 / 班级)
28 const select_course_value = ref(null) 44 const select_course_value = ref(null)
29 const select_major_group_value = ref(null) 45 const select_major_group_value = ref(null)
...@@ -118,7 +134,21 @@ const on_minor_group_change = (val) => { ...@@ -118,7 +134,21 @@ const on_minor_group_change = (val) => {
118 * @returns {void} 134 * @returns {void}
119 */ 135 */
120 onMounted(async () => { 136 onMounted(async () => {
121 - getFilterList() 137 + // 如果有传入默认值,初始化内部状态
138 + if (props.defaultCourseId) {
139 + select_course_value.value = Number(props.defaultCourseId)
140 + }
141 + if (props.defaultMajorGroupId) {
142 + select_major_group_value.value = Number(props.defaultMajorGroupId)
143 + }
144 + if (props.defaultMinorGroupId) {
145 + select_minor_group_value.value = Number(props.defaultMinorGroupId)
146 + }
147 +
148 + // 根据当前的选中状态获取列表
149 + // 如果没有默认值,这就等同于 getFilterList()
150 + // 如果有默认值,这将确保下拉选项列表与选中的值匹配(例如只显示选中课程下的年级)
151 + await getFilterList(select_course_value.value, select_major_group_value.value)
122 }) 152 })
123 </script> 153 </script>
124 154
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: hookehuyr hookehuyr@gmail.com 2 * @Author: hookehuyr hookehuyr@gmail.com
3 * @Date: 2025-01-20 10:00:00 3 * @Date: 2025-01-20 10:00:00
4 * @LastEditors: hookehuyr hookehuyr@gmail.com 4 * @LastEditors: hookehuyr hookehuyr@gmail.com
5 - * @LastEditTime: 2025-12-04 13:28:55 5 + * @LastEditTime: 2025-12-18 23:12:03
6 * @FilePath: /mlaj/src/views/teacher/myClassPage.vue 6 * @FilePath: /mlaj/src/views/teacher/myClassPage.vue
7 * @Description: 我的班级页面 7 * @Description: 我的班级页面
8 --> 8 -->
...@@ -40,7 +40,12 @@ ...@@ -40,7 +40,12 @@
40 <!-- 课程, 大分组, 小分组 筛选 --> 40 <!-- 课程, 大分组, 小分组 筛选 -->
41 <div> 41 <div>
42 <van-sticky> 42 <van-sticky>
43 - <CourseGroupCascader @change="on_cascade_change" /> 43 + <CourseGroupCascader
44 + :default-course-id="selected_course_id"
45 + :default-major-group-id="selected_major_group_id"
46 + :default-minor-group-id="selected_minor_group_id"
47 + @change="on_cascade_change"
48 + />
44 </van-sticky> 49 </van-sticky>
45 </div> 50 </div>
46 51
...@@ -289,6 +294,23 @@ const selected_course_id = ref(null) ...@@ -289,6 +294,23 @@ const selected_course_id = ref(null)
289 const selected_major_group_id = ref(null) 294 const selected_major_group_id = ref(null)
290 const selected_minor_group_id = ref(null) 295 const selected_minor_group_id = ref(null)
291 296
297 +// 尝试恢复筛选状态 (在组件初始化阶段执行,确保传给子组件的 props 是最新的)
298 +const savedState = sessionStorage.getItem('myClassPage_filter_state')
299 +if (savedState) {
300 + try {
301 + const { course_id, major_group_id, minor_group_id, keyword } = JSON.parse(savedState)
302 + if (course_id) selected_course_id.value = course_id
303 + if (major_group_id) selected_major_group_id.value = major_group_id
304 + if (minor_group_id) selected_minor_group_id.value = minor_group_id
305 + if (keyword) searchKeyword.value = keyword
306 +
307 + // 恢复状态后清除,避免影响其他正常的页面进入
308 + sessionStorage.removeItem('myClassPage_filter_state')
309 + } catch (e) {
310 + console.error('恢复筛选状态失败', e)
311 + }
312 +}
313 +
292 /** 314 /**
293 * 级联筛选组件变化事件处理 315 * 级联筛选组件变化事件处理
294 * @param {Object} payload - 事件数据,包含 { type, value } 316 * @param {Object} payload - 事件数据,包含 { type, value }
...@@ -372,6 +394,16 @@ const handleClearSearch = () => { ...@@ -372,6 +394,16 @@ const handleClearSearch = () => {
372 */ 394 */
373 const handleStudentClick = (student) => { 395 const handleStudentClick = (student) => {
374 console.log('点击学生:', student) 396 console.log('点击学生:', student)
397 +
398 + // 保存当前的筛选状态到 sessionStorage
399 + const filterState = {
400 + course_id: selected_course_id.value,
401 + major_group_id: selected_major_group_id.value,
402 + minor_group_id: selected_minor_group_id.value,
403 + keyword: searchKeyword.value
404 + }
405 + sessionStorage.setItem('myClassPage_filter_state', JSON.stringify(filterState))
406 +
375 // 这里可以跳转到学生详情页 407 // 这里可以跳转到学生详情页
376 router.push({ 408 router.push({
377 path: '/teacher/student/' + student.id, 409 path: '/teacher/student/' + student.id,
......