hookehuyr

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

为CourseGroupCascader组件添加props支持默认值初始化
在myClassPage页面实现筛选状态保存与恢复功能
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-11-07 11:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-07 17:46:23
* @LastEditTime: 2025-12-18 23:11:35
* @FilePath: /mlaj/src/components/ui/CourseGroupCascader.vue
* @Description: 教师页面筛选组件(年级/班级/课程),内部管理v-model与options并对外emit change事件
-->
......@@ -24,6 +24,22 @@ import { getTeacherGradeClassListAPI } from "@/api/teacher";
// 组件对外事件
const emit = defineEmits(['change'])
// 接收外部传入的默认值
const props = defineProps({
defaultCourseId: {
type: [Number, String],
default: null
},
defaultMajorGroupId: {
type: [Number, String],
default: null
},
defaultMinorGroupId: {
type: [Number, String],
default: null
}
})
// 本组件内部管理的选择值(课程 / 年级 / 班级)
const select_course_value = ref(null)
const select_major_group_value = ref(null)
......@@ -118,7 +134,21 @@ const on_minor_group_change = (val) => {
* @returns {void}
*/
onMounted(async () => {
getFilterList()
// 如果有传入默认值,初始化内部状态
if (props.defaultCourseId) {
select_course_value.value = Number(props.defaultCourseId)
}
if (props.defaultMajorGroupId) {
select_major_group_value.value = Number(props.defaultMajorGroupId)
}
if (props.defaultMinorGroupId) {
select_minor_group_value.value = Number(props.defaultMinorGroupId)
}
// 根据当前的选中状态获取列表
// 如果没有默认值,这就等同于 getFilterList()
// 如果有默认值,这将确保下拉选项列表与选中的值匹配(例如只显示选中课程下的年级)
await getFilterList(select_course_value.value, select_major_group_value.value)
})
</script>
......
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-01-20 10:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-04 13:28:55
* @LastEditTime: 2025-12-18 23:12:03
* @FilePath: /mlaj/src/views/teacher/myClassPage.vue
* @Description: 我的班级页面
-->
......@@ -40,7 +40,12 @@
<!-- 课程, 大分组, 小分组 筛选 -->
<div>
<van-sticky>
<CourseGroupCascader @change="on_cascade_change" />
<CourseGroupCascader
:default-course-id="selected_course_id"
:default-major-group-id="selected_major_group_id"
:default-minor-group-id="selected_minor_group_id"
@change="on_cascade_change"
/>
</van-sticky>
</div>
......@@ -289,6 +294,23 @@ const selected_course_id = ref(null)
const selected_major_group_id = ref(null)
const selected_minor_group_id = ref(null)
// 尝试恢复筛选状态 (在组件初始化阶段执行,确保传给子组件的 props 是最新的)
const savedState = sessionStorage.getItem('myClassPage_filter_state')
if (savedState) {
try {
const { course_id, major_group_id, minor_group_id, keyword } = JSON.parse(savedState)
if (course_id) selected_course_id.value = course_id
if (major_group_id) selected_major_group_id.value = major_group_id
if (minor_group_id) selected_minor_group_id.value = minor_group_id
if (keyword) searchKeyword.value = keyword
// 恢复状态后清除,避免影响其他正常的页面进入
sessionStorage.removeItem('myClassPage_filter_state')
} catch (e) {
console.error('恢复筛选状态失败', e)
}
}
/**
* 级联筛选组件变化事件处理
* @param {Object} payload - 事件数据,包含 { type, value }
......@@ -372,6 +394,16 @@ const handleClearSearch = () => {
*/
const handleStudentClick = (student) => {
console.log('点击学生:', student)
// 保存当前的筛选状态到 sessionStorage
const filterState = {
course_id: selected_course_id.value,
major_group_id: selected_major_group_id.value,
minor_group_id: selected_minor_group_id.value,
keyword: searchKeyword.value
}
sessionStorage.setItem('myClassPage_filter_state', JSON.stringify(filterState))
// 这里可以跳转到学生详情页
router.push({
path: '/teacher/student/' + student.id,
......