filter by class
Some checks failed
Deploy / deploy (push) Has been cancelled

This commit is contained in:
2025-11-30 18:41:58 +08:00
parent 91e2f8bf05
commit eb0122ffc2
3 changed files with 26 additions and 8 deletions

View File

@@ -363,7 +363,7 @@ export function getProblemSetBadges(problemSetId: number) {
// 获取题单用户进度列表
export function getProblemSetUserProgress(
problemSetId: number,
params?: { limit?: number; offset?: number },
params?: { limit?: number; offset?: number; class_name?: string },
) {
return http.get(`problemset/${problemSetId}/users_progress`, { params })
}

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { h, computed, ref, onMounted, watch } from "vue"
import { watchDebounced } from "@vueuse/core"
import { parseTime } from "utils/functions"
import { ProblemSetProgress } from "utils/types"
import { getProblemSetUserProgress } from "../../api"
@@ -17,6 +18,7 @@ const statistics = ref<{
completed: number
avg_progress: number
} | null>(null)
const classFilter = ref<string>("")
// 使用分页 composable
const { query } = usePagination({}, { defaultLimit: 10 })
@@ -25,10 +27,14 @@ const { query } = usePagination({}, { defaultLimit: 10 })
async function loadUserProgress() {
loading.value = true
const offset = (query.page - 1) * query.limit
const res = await getProblemSetUserProgress(problemSetId.value, {
const params: { limit?: number; offset?: number; class_name?: string } = {
limit: query.limit,
offset,
})
}
if (classFilter.value.trim()) {
params.class_name = classFilter.value.trim()
}
const res = await getProblemSetUserProgress(problemSetId.value, params)
progress.value = res.data.results
total.value = res.data.total
@@ -41,6 +47,11 @@ async function loadUserProgress() {
// 监听分页参数变化
watch([() => query.page, () => query.limit], loadUserProgress)
// 监听班级过滤变化(防抖)
watchDebounced(classFilter, () => {
query.page = 1 // 重置到第一页
loadUserProgress()
}, { debounce: 500 })
// 使用后端返回的统计数据
const stats = computed(() => {
@@ -140,6 +151,17 @@ const progressColumns = [
<template>
<div>
<!-- 过滤条件 -->
<n-space style="margin-bottom: 16px" align="center">
<n-text>班级筛选</n-text>
<n-input
v-model:value="classFilter"
placeholder="输入班级名称"
style="width: 200px"
clearable
/>
</n-space>
<!-- 统计信息卡片 -->
<n-grid :cols="3" :x-gap="16" style="margin-bottom: 16px">
<n-grid-item>

View File

@@ -204,11 +204,7 @@ watch(
</n-flex>
<!-- 奖章显示 -->
<n-flex
v-if="problemSet.badges && problemSet.badges.length > 0"
align="center"
justify="space-between"
>
<n-flex align="center" justify="space-between">
<n-text depth="3">
创建于
{{ parseTime(problemSet.create_time, "YYYY-MM-DD") }}