feat: 进度查看界面添加了按照进度排序功能
This commit is contained in:
huertian
parent
4406934444
commit
e0995a9132
1
components.d.ts
vendored
1
components.d.ts
vendored
@ -27,6 +27,7 @@ declare module 'vue' {
|
||||
WdProgress: typeof import('wot-design-uni/components/wd-progress/wd-progress.vue')['default']
|
||||
WdRadio: typeof import('wot-design-uni/components/wd-radio/wd-radio.vue')['default']
|
||||
WdRadioGroup: typeof import('wot-design-uni/components/wd-radio-group/wd-radio-group.vue')['default']
|
||||
WdSortButton: typeof import('wot-design-uni/components/wd-sort-button/wd-sort-button.vue')['default']
|
||||
WdStatusTip: typeof import('wot-design-uni/components/wd-status-tip/wd-status-tip.vue')['default']
|
||||
WdStep: typeof import('wot-design-uni/components/wd-step/wd-step.vue')['default']
|
||||
WdSteps: typeof import('wot-design-uni/components/wd-steps/wd-steps.vue')['default']
|
||||
|
||||
@ -54,6 +54,7 @@ const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
|
||||
|
||||
const expandedCourse = ref(['lesson'])
|
||||
const groupedLessons = ref<{ [key: string]: LessonTask[] }>({})
|
||||
const refreshKey = ref(0)
|
||||
|
||||
const openLessonDetail = (courseId: number) => {
|
||||
router.push({
|
||||
@ -97,9 +98,11 @@ const loadLessons = async () => {
|
||||
return
|
||||
}
|
||||
|
||||
const groupData = res.data.content
|
||||
.sort((a: LessonTask, b: LessonTask) => a.id - b.id)
|
||||
.reduce((acc: { [key: string]: LessonTask[] }, cur: LessonTask) => {
|
||||
// 先按 id 排序
|
||||
let sortedContent = [...res.data.content].sort((a: LessonTask, b: LessonTask) => a.id - b.id)
|
||||
|
||||
// 分组
|
||||
const groupData = sortedContent.reduce((acc: { [key: string]: LessonTask[] }, cur: LessonTask) => {
|
||||
if (!acc[cur.courseName]) {
|
||||
acc[cur.courseName] = []
|
||||
}
|
||||
@ -107,12 +110,35 @@ const loadLessons = async () => {
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
groupedLessons.value = groupData
|
||||
expandedCourse.value = Object.keys(groupData).filter(courseName => {
|
||||
return groupData[courseName].filter((lesson: LessonTask) =>
|
||||
calcLessonProgress(lesson) !== 0 && calcLessonProgress(lesson) !== 100
|
||||
).length > 0
|
||||
// 如果不是默认排序，对每个组内的课程按进度排序
|
||||
if (value.value !== 0) {
|
||||
Object.keys(groupData).forEach(courseName => {
|
||||
groupData[courseName].sort((a: LessonTask, b: LessonTask) => {
|
||||
const progressA = calcLessonProgress(a)
|
||||
const progressB = calcLessonProgress(b)
|
||||
return value.value === 1
|
||||
? progressB - progressA // 完成度高的优先（降序）
|
||||
: progressA - progressB // 完成度低的优先（升序）
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
console.log('分组后的课程数据:', JSON.stringify(groupData, null, 2))
|
||||
groupedLessons.value = groupData
|
||||
|
||||
const expandedGroups = Object.keys(groupData).filter(courseName => {
|
||||
const courses = groupData[courseName]
|
||||
const hasCompleted = courses.some(lesson => calcLessonProgress(lesson) === 100)
|
||||
const hasNotStarted = courses.some(lesson => calcLessonProgress(lesson) === 0)
|
||||
const hasInProgress = courses.some(lesson => {
|
||||
const progress = calcLessonProgress(lesson)
|
||||
return progress > 0 && progress < 100
|
||||
})
|
||||
return (hasCompleted && hasNotStarted) || hasInProgress
|
||||
})
|
||||
|
||||
// 更新展开的课程组
|
||||
expandedCourse.value = expandedGroups
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
toast.error({ msg: err.message })
|
||||
@ -163,19 +189,35 @@ onLoad(() => {
|
||||
loadLessons()
|
||||
})
|
||||
|
||||
const value = ref<number>(0)
|
||||
|
||||
// 处理排序按钮点击
|
||||
const handleChange = ({ value: newValue }: { value: number }) => {
|
||||
console.log('排序值:', newValue)
|
||||
value.value = newValue
|
||||
loadLessons().then(() => {
|
||||
// 强制重新渲染组件
|
||||
refreshKey.value++
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<page-wrapper>
|
||||
<div>
|
||||
<wd-drop-menu v-if="!user.hasRole('teacher')">
|
||||
<div v-if="!user.hasRole('teacher')" class="flex items-center justify-around gap-4 px-4">
|
||||
<wd-drop-menu>
|
||||
<wd-drop-menu-item v-model="teacherFilterValue" :options="teacherFilterOptions"
|
||||
:before-toggle="handleBeforeToggle" />
|
||||
</wd-drop-menu>
|
||||
<view>
|
||||
<wd-sort-button title="进度" allow-reset v-model="value" @change="handleChange" />
|
||||
</view>
|
||||
</div>
|
||||
<wd-collapse v-model="expandedCourse">
|
||||
<wd-status-tip v-if="Object.keys(groupedLessons).length === 0" image="content" tip="当前账号没有分配微课" />
|
||||
<wd-collapse-item v-else v-for="(courses, courseName) in groupedLessons" :name="`${courseName}`"
|
||||
:key="courseName">
|
||||
:key="`${courseName}-${refreshKey}`">
|
||||
<template #title="{ expanded, disabled, isFirst }">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<div class="flex flex-col gap-1">
|
||||
@ -184,25 +226,31 @@ onLoad(() => {
|
||||
</p>
|
||||
<div class="flex items-center gap-1">
|
||||
<wd-tag v-if="(() => {
|
||||
// 如果有已完成的课程和未开始的课程，就显示进行中
|
||||
const hasCompleted = courses.some(lesson => calcLessonProgress(lesson) === 100)
|
||||
const hasNotStarted = courses.some(lesson => calcLessonProgress(lesson) === 0)
|
||||
if (hasCompleted && hasNotStarted) return true
|
||||
|
||||
// 或者有进度在0-100之间的课程
|
||||
const hasInProgress = courses.some(lesson => {
|
||||
const progress = calcLessonProgress(lesson);
|
||||
return progress > 0 && progress < 100;
|
||||
});
|
||||
return hasInProgress;
|
||||
const progress = calcLessonProgress(lesson)
|
||||
return progress > 0 && progress < 100
|
||||
})
|
||||
return hasInProgress
|
||||
})()" custom-class="w-fit" type="primary">进行中</wd-tag>
|
||||
<wd-tag v-if="(() => {
|
||||
const allCompleted = courses.every(lesson => {
|
||||
const progress = calcLessonProgress(lesson);
|
||||
return progress === 100;
|
||||
});
|
||||
return allCompleted;
|
||||
const progress = calcLessonProgress(lesson)
|
||||
return progress === 100
|
||||
})
|
||||
return allCompleted
|
||||
})()" custom-class="w-fit" type="success">已完成</wd-tag>
|
||||
<wd-tag v-if="(() => {
|
||||
const allNotStarted = courses.every(lesson => {
|
||||
const progress = calcLessonProgress(lesson);
|
||||
return progress === 0;
|
||||
});
|
||||
return allNotStarted;
|
||||
const progress = calcLessonProgress(lesson)
|
||||
return progress === 0
|
||||
})
|
||||
return allNotStarted
|
||||
})()" custom-class="w-fit" type="default">未开始</wd-tag>
|
||||
<wd-tag custom-class="op-60" plain>
|
||||
共{{ courses.length }}节微课
|
||||
@ -238,7 +286,8 @@ onLoad(() => {
|
||||
</template>
|
||||
<div class="w-full">
|
||||
<wd-status-tip v-if="courses.length === 0" image="content" tip="没有课程小节" />
|
||||
<div v-else v-for="(lesson, i) in courses" :key="i" @click="openLessonDetail(lesson.id)"
|
||||
<div v-else v-for="(lesson, i) in courses" :key="`${lesson.id}-${refreshKey}`"
|
||||
@click="openLessonDetail(lesson.id)"
|
||||
class="w-full py-2 gap-12 flex justify-between items-center border-b border-b-solid border-neutral-100 last:border-b-0 first:pt-0 last:pb-0">
|
||||
<div class="flex items-center gap-1 self-center">
|
||||
<wd-badge is-dot hidden>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user