feat(admin): 课程包列表增加课程配置列,参考学校端排课展示课程类型标签

Made-with: Cursor
This commit is contained in:
zhonghua 2026-03-23 10:36:06 +08:00
parent dc0ce2bf78
commit fceef0fa12

View File

@ -57,6 +57,20 @@
{{ record.pictureBookName }} {{ record.pictureBookName }}
</template> </template>
<template v-else-if="column.key === 'lessonConfig'">
<div class="lesson-config-tags">
<a-tag
v-for="lt in getLessonTypesFromRecord(record)"
:key="lt"
size="small"
:style="getLessonTagStyle(lt)"
>
{{ getLessonTypeName(lt) }}
</a-tag>
<span v-if="!getLessonTypesFromRecord(record).length" class="empty-text">-</span>
</div>
</template>
<template v-else-if="column.key === 'status'"> <template v-else-if="column.key === 'status'">
<a-tag :style="getCourseStatusStyle(record.status)"> <a-tag :style="getCourseStatusStyle(record.status)">
{{ translateCourseStatus(record.status) }} {{ translateCourseStatus(record.status) }}
@ -195,8 +209,21 @@ import {
getGradeTagStyle, getGradeTagStyle,
translateCourseStatus, translateCourseStatus,
getCourseStatusStyle, getCourseStatusStyle,
getLessonTypeName,
getLessonTagStyle,
} from '@/utils/tagMaps'; } from '@/utils/tagMaps';
//
const getLessonTypesFromRecord = (record: any): string[] => {
const lessons = record.courseLessons || record.lessons || [];
const types = new Set<string>();
for (const l of lessons) {
const t = l.lessonType;
if (t) types.add(t);
}
return Array.from(types);
};
const router = useRouter(); const router = useRouter();
const loading = ref(false); const loading = ref(false);
@ -218,6 +245,7 @@ const pagination = reactive({
const columns = [ const columns = [
{ title: '课程包名称', key: 'name', width: 250 }, { title: '课程包名称', key: 'name', width: 250 },
{ title: '关联绘本', key: 'pictureBook', width: 120 }, { title: '关联绘本', key: 'pictureBook', width: 120 },
{ title: '课程配置', key: 'lessonConfig', width: 200 },
{ title: '状态', key: 'status', width: 90 }, { title: '状态', key: 'status', width: 90 },
{ title: '版本', key: 'version', width: 70 }, { title: '版本', key: 'version', width: 70 },
{ title: '数据统计', key: 'stats', width: 130 }, { title: '数据统计', key: 'stats', width: 130 },
@ -521,5 +549,17 @@ const formatDate = (dateStr: string) => {
margin-top: 4px; margin-top: 4px;
} }
} }
.lesson-config-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
.empty-text {
color: #999;
font-size: 12px;
}
}
} }
</style> </style>