提交 043e7687 authored 作者: 王鹏飞's avatar 王鹏飞

fix: 修复资源详情查看课程资源不存在的问题#2934,#2936

上级 36b6c466
<!-- 资源课程列表 -->
<script setup lang="ts">
import type { CourseType } from '@/types'
interface Props {
title: string
list: CourseType[]
}
const props = withDefaults(defineProps<Props>(), { list: () => [] })
const listOptions = computed(() => {
return {
columns: [
{ label: '课程图片', slots: 'table-img', align: 'center' },
{ label: '课程名称', prop: 'name', align: 'center' },
{ label: '分类名称', prop: 'classification_name', align: 'center' },
{ label: '所在章', prop: 'big', align: 'center' },
{ label: '所在小节', prop: 'small', align: 'center' },
{ label: '创建日期', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center' }
],
data: props.list
}
})
</script>
<template>
<AppCard :title="title">
<AppList v-bind="listOptions" ref="appList" stripe>
<template #table-img="{ row }: { row: CourseType }">
<img :src="row.cover" style="width: 100px; display: block" />
</template>
<template #table-operate="{ row }: { row: CourseType }">
<router-link :to="`/course/my/view?id=${row.id}`" v-if="row.auth_view">
<el-button style="color: #399ee8" type="primary" link>查看</el-button>
</router-link>
</template>
</AppList>
</AppCard>
</template>
......@@ -3,31 +3,17 @@ import ViewTop from '../components/ViewTop.vue'
import ViewCenter from '../components/ViewCenter.vue'
import ViewBottom from '../components/ViewBottom.vue'
import Operation from '../components/Operation.vue'
import ResourceCourseList from '@/components/ResourceCourseList.vue'
import { getCourseDetails } from '../api'
const route = useRoute()
const id = route.query.id as string
let courseDetails: any = ref({})
const listOptions = computed(() => {
return {
columns: [
{ label: '课程图片', slots: 'table-img', align: 'center' },
{ label: '课程名称', prop: 'name', align: 'center' },
{ label: '分类名称', prop: 'classification_name', align: 'center' },
{ label: '所在章', prop: 'big', align: 'center' },
{ label: '所在小节', prop: 'small', align: 'center' },
{ label: '创建日期', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center' }
],
data: courseDetails.value.course_list
}
})
// 获取详情
getCourseDetails({ id: id }).then(res => {
courseDetails.value = res.data
console.log(courseDetails.value.course_list, 'courseDetails.value.course_list')
})
</script>
......@@ -38,34 +24,5 @@ getCourseDetails({ id: id }).then(res => {
<ViewCenter v-if="Object.keys(courseDetails).length" :data="courseDetails"></ViewCenter>
<ViewBottom></ViewBottom>
</AppCard>
<AppCard title="课件资源关联使用课程">
<AppList v-bind="listOptions" ref="appList" stripe>
<template #table-img="{ row }">
<img :src="row.cover" style="width: 100px; display: block" />
</template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/course/my/view?id=${row.id}`">
<el-button style="color: #399ee8" type="primary" link>查看</el-button>
</router-link>
</el-space>
</template>
</AppList>
</AppCard>
<ResourceCourseList title="课件资源关联使用课程" :list="courseDetails.course_list"></ResourceCourseList>
</template>
<style lang="scss" scoped>
.btn-box {
display: flex;
justify-content: right;
.btn-item {
width: 127px;
line-height: 36px;
background: #aa1941;
border-radius: 20px;
margin-right: 10px;
font-size: 14px;
color: #ffffff;
text-align: center;
}
}
</style>
......@@ -31,30 +31,30 @@ const resourceType = (name: string, isGetPath: number) => {
let path = {}
if (isGetPath === 1) {
path = {
'视频': '/resource/video/view',
'课件': '/resource/courseware/view',
'教案': '/resource/lessonplan/view',
'其他资料': '/resource/other/view'
视频: '/resource/video/view',
课件: '/resource/courseware/view',
教案: '/resource/lessonplan/view',
其他资料: '/resource/other/view'
}
} else if (isGetPath === 2) {
path = {
'视频': 1,
'课件': 2,
'教案': 3,
'其他资料': 4
视频: 1,
课件: 2,
教案: 3,
其他资料: 4
}
} else {
path = {
'视频': 'v1-resource-video-view',
'课件': 'v1-resource-courseware-view',
'教案': 'v1-resource-lesson-plan-view',
'其他资料': 'v1-resource-other-information-view'
视频: 'v1-resource-video-view',
课件: 'v1-resource-courseware-view',
教案: 'v1-resource-lesson-plan-view',
其他资料: 'v1-resource-other-information-view'
}
}
return path[name]
}
const viewDetails = (row: { id: string, resource_type: string }) => {
const viewDetails = (row: { id: string; resource_type: string }) => {
if (checkPermission(resourceType(row.resource_type, 3))) {
router.push({
path: resourceType(row.resource_type, 1),
......@@ -73,92 +73,86 @@ const viewDetails = (row: { id: string, resource_type: string }) => {
<div :class="`table-ranking active${row.index}`">{{ row.index <= 3 ? '' : row.index }}</div>
</template>
<template #table-relation="{ row }">
<div :class="`table-relation active${row.index}`">{{ row.relation }}<span></span></div>
<div :class="`table-relation active${row.index}`">{{ row.nums }}<span></span></div>
</template>
<template #table-type="{ row }">
<div :class="`table-type active${resourceType(row.resource_type, 2)}`">{{ row.resource_type }}</div>
</template>
<template #table-operate="{ row }">
<el-space>
<el-button
@click="viewDetails(row)"
style="color: #399EE8;"
type="primary"
link
>查阅</el-button
>
</el-space>
<el-button @click="viewDetails(row)" style="color: #399ee8" type="primary" link v-if="row.auth_view"
>查阅</el-button
>
</template>
</AppList>
</template>
<style lang="scss">
.table-ranking{
font-size: 14px;
.table-ranking {
font-size: 14px;
color: #666666;
margin: 0 auto;
&.active1 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking1.png);
}
&.active2 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking2.png);
}
&.active3 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking3.png);
}
}
.table-type {
width: 84px;
line-height: 28px;
border-radius: 14px;
text-align: center;
font-size: 14px;
margin: 0 auto;
&.active1 {
background: #faedf1;
color: #aa1941;
}
&.active2 {
background: #f5ebda;
color: #ba8b45;
}
&.active3 {
background: #e9eaf8;
color: #5b61b5;
}
&.active4 {
background: #dfeff2;
color: #47a7b9;
}
&.active5 {
background: #faeee2;
color: #ce893f;
}
}
.table-relation {
font-size: 14px;
span {
color: #666666;
margin: 0 auto;
&.active1{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking1.png);
}
&.active2{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking2.png);
}
&.active3{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking3.png);
}
}
.table-type{
width: 84px;
line-height: 28px;
border-radius: 14px;
text-align: center;
font-size: 14px;
margin: 0 auto;
&.active1{
background: #FAEDF1;
color: #AA1941;
}
&.active2{
background: #F5EBDA;
color: #BA8B45;
}
&.active3{
background:#E9EAF8;
color: #5B61B5;
}
&.active4{
background: #DFEFF2;
color:#47A7B9;
}
&.active5{
background: #FAEEE2;
color: #CE893F;
}
&.active1 {
color: #aa1941;
}
.table-relation{
font-size: 14px;
span{
color: #666666;
}
&.active1{
color: #AA1941;
}
&.active2{
color: #BA8B45;
}
&.active3{
color: #5B61B5;
}
&.active4{
color:#47A7B9;
}
&.active5{
color: #CE893F;
}
&.active2 {
color: #ba8b45;
}
&.active3 {
color: #5b61b5;
}
</style>
\ No newline at end of file
&.active4 {
color: #47a7b9;
}
&.active5 {
color: #ce893f;
}
}
</style>
......@@ -30,30 +30,30 @@ const resourceType = (name: string, isGetPath: number) => {
let path = {}
if (isGetPath === 1) {
path = {
'视频': '/resource/video/view',
'课件': '/resource/courseware/view',
'教案': '/resource/lessonplan/view',
'其他资料': '/resource/other/view'
视频: '/resource/video/view',
课件: '/resource/courseware/view',
教案: '/resource/lessonplan/view',
其他资料: '/resource/other/view'
}
} else if (isGetPath === 2) {
path = {
'视频': 1,
'课件': 2,
'教案': 3,
'其他资料': 4
视频: 1,
课件: 2,
教案: 3,
其他资料: 4
}
} else {
path = {
'视频': 'v1-resource-video-view',
'课件': 'v1-resource-courseware-view',
'教案': 'v1-resource-lesson-plan-view',
'其他资料': 'v1-resource-other-information-view'
视频: 'v1-resource-video-view',
课件: 'v1-resource-courseware-view',
教案: 'v1-resource-lesson-plan-view',
其他资料: 'v1-resource-other-information-view'
}
}
return path[name]
}
const viewDetails = (row: { id: string, auth_view: boolean, resource_type: string }) => {
const viewDetails = (row: { id: string; auth_view: boolean; resource_type: string }) => {
if (row.auth_view) {
router.push({
path: resourceType(row.resource_type, 1),
......@@ -75,67 +75,59 @@ const viewDetails = (row: { id: string, auth_view: boolean, resource_type: strin
<div :class="`table-type active${resourceType(row.resource_type, 2)}`">{{ row.resource_type }}</div>
</template>
<template #table-operate="{ row }">
<el-space>
<!-- <router-link :to="`${resourceType(row.resource_type, true)}?id=${row.id}`"> -->
<el-button
@click="viewDetails(row)"
style="color: #399EE8;"
type="primary"
link
>查阅</el-button
>
<!-- </router-link> -->
</el-space>
<el-button @click="viewDetails(row)" style="color: #399ee8" type="primary" link v-if="row.auth_view"
>查阅</el-button
>
</template>
</AppList>
</template>
<style lang="scss">
.table-ranking{
font-size: 14px;
color: #666666;
margin: 0 auto;
&.active1{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking1.png);
}
&.active2{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking2.png);
}
&.active3{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking3.png);
}
.table-ranking {
font-size: 14px;
color: #666666;
margin: 0 auto;
&.active1 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking1.png);
}
.table-type{
width: 84px;
line-height: 28px;
border-radius: 14px;
text-align: center;
font-size: 14px;
margin: 0 auto;
&.active1{
background: #FAEDF1;
color: #AA1941;
}
&.active2{
background: #F5EBDA;
color: #BA8B45;
}
&.active3{
background:#E9EAF8;
color: #5B61B5;
}
&.active4{
background: #DFEFF2;
color:#47A7B9;
}
&.active5{
background: #FAEEE2;
color: #CE893F;
}
&.active2 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking2.png);
}
</style>
\ No newline at end of file
&.active3 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking3.png);
}
}
.table-type {
width: 84px;
line-height: 28px;
border-radius: 14px;
text-align: center;
font-size: 14px;
margin: 0 auto;
&.active1 {
background: #faedf1;
color: #aa1941;
}
&.active2 {
background: #f5ebda;
color: #ba8b45;
}
&.active3 {
background: #e9eaf8;
color: #5b61b5;
}
&.active4 {
background: #dfeff2;
color: #47a7b9;
}
&.active5 {
background: #faeee2;
color: #ce893f;
}
}
</style>
......@@ -31,30 +31,30 @@ const resourceType = (name: string, isGetPath: number) => {
let path = {}
if (isGetPath === 1) {
path = {
'视频': '/resource/video/view',
'课件': '/resource/courseware/view',
'教案': '/resource/lessonplan/view',
'其他资料': '/resource/other/view'
视频: '/resource/video/view',
课件: '/resource/courseware/view',
教案: '/resource/lessonplan/view',
其他资料: '/resource/other/view'
}
} else if (isGetPath === 2) {
path = {
'视频': 1,
'课件': 2,
'教案': 3,
'其他资料': 4
视频: 1,
课件: 2,
教案: 3,
其他资料: 4
}
} else {
path = {
'视频': 'v1-resource-video-view',
'课件': 'v1-resource-courseware-view',
'教案': 'v1-resource-lesson-plan-view',
'其他资料': 'v1-resource-other-information-view'
视频: 'v1-resource-video-view',
课件: 'v1-resource-courseware-view',
教案: 'v1-resource-lesson-plan-view',
其他资料: 'v1-resource-other-information-view'
}
}
return path[name]
}
const viewDetails = (row: { id: string, resource_type: string }) => {
const viewDetails = (row: { id: string; resource_type: string }) => {
if (checkPermission(resourceType(row.resource_type, 3))) {
router.push({
path: resourceType(row.resource_type, 1),
......@@ -76,65 +76,59 @@ const viewDetails = (row: { id: string, resource_type: string }) => {
<div :class="`table-type active${resourceType(row.resource_type, 2)}`">{{ row.resource_type }}</div>
</template>
<template #table-operate="{ row }">
<el-space>
<el-button
@click="viewDetails(row)"
style="color: #399EE8;"
type="primary"
link
>查阅</el-button
>
</el-space>
<el-button @click="viewDetails(row)" style="color: #399ee8" type="primary" link v-if="row.auth_view"
>查阅</el-button
>
</template>
</AppList>
</template>
<style lang="scss">
.table-ranking{
font-size: 14px;
color: #666666;
margin: 0 auto;
&.active1{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking1.png);
}
&.active2{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking2.png);
}
&.active3{
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking3.png);
}
.table-ranking {
font-size: 14px;
color: #666666;
margin: 0 auto;
&.active1 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking1.png);
}
.table-type{
width: 84px;
line-height: 28px;
border-radius: 14px;
text-align: center;
font-size: 14px;
margin: 0 auto;
&.active1{
background: #FAEDF1;
color: #AA1941;
}
&.active2{
background: #F5EBDA;
color: #BA8B45;
}
&.active3{
background:#E9EAF8;
color: #5B61B5;
}
&.active4{
background: #DFEFF2;
color:#47A7B9;
}
&.active5{
background: #FAEEE2;
color: #CE893F;
}
&.active2 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking2.png);
}
</style>
\ No newline at end of file
&.active3 {
width: 20px;
height: 26px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/center_resource/home-ranking3.png);
}
}
.table-type {
width: 84px;
line-height: 28px;
border-radius: 14px;
text-align: center;
font-size: 14px;
margin: 0 auto;
&.active1 {
background: #faedf1;
color: #aa1941;
}
&.active2 {
background: #f5ebda;
color: #ba8b45;
}
&.active3 {
background: #e9eaf8;
color: #5b61b5;
}
&.active4 {
background: #dfeff2;
color: #47a7b9;
}
&.active5 {
background: #faeee2;
color: #ce893f;
}
}
</style>
......@@ -3,25 +3,13 @@ import ViewTop from '../components/ViewTop.vue'
import ViewCenter from '../components/ViewCenter.vue'
import ViewBottom from '../components/ViewBottom.vue'
import Operation from '../components/Operation.vue'
import ResourceCourseList from '@/components/ResourceCourseList.vue'
import { getLessonDetails } from '../api'
const route = useRoute()
let lessonDetails: any = ref({})
const listOptions = computed(() => {
return {
columns: [
{ label: '课程图片', slots: 'table-img', align: 'center' },
{ label: '课程名称', prop: 'name', align: 'center' },
{ label: '分类名称', prop: 'classification_name', align: 'center' },
{ label: '所在章', prop: 'big', align: 'center' },
{ label: '所在小节', prop: 'small', align: 'center' },
{ label: '创建日期', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center' }
],
data: lessonDetails.value.course_list
}
})
const id = route.query.id as string
// 获取详情
getLessonDetails({ id: id }).then((res: any) => {
......@@ -36,34 +24,5 @@ getLessonDetails({ id: id }).then((res: any) => {
<ViewCenter v-if="Object.keys(lessonDetails).length" :data="lessonDetails"></ViewCenter>
<ViewBottom></ViewBottom>
</AppCard>
<AppCard title="教案资源关联使用课程">
<AppList v-bind="listOptions" ref="appList" stripe>
<template #table-img="{ row }">
<img :src="row.cover" style="width: 100px; display: block" />
</template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/course/my/view?id=${row.id}`">
<el-button style="color: #399ee8" type="primary" link>查看</el-button>
</router-link>
</el-space>
</template>
</AppList>
</AppCard>
<ResourceCourseList title="教案资源关联使用课程" :list="lessonDetails.course_list"></ResourceCourseList>
</template>
<style lang="scss" scoped>
.btn-box {
display: flex;
justify-content: right;
.btn-item {
width: 127px;
line-height: 36px;
background: #aa1941;
border-radius: 20px;
margin-right: 10px;
font-size: 14px;
color: #ffffff;
text-align: center;
}
}
</style>
......@@ -3,27 +3,14 @@ import ViewTop from '../components/ViewTop.vue'
import ViewCenter from '../components/ViewCenter.vue'
import ViewBottom from '../components/ViewBottom.vue'
import Operation from '../components/Operation.vue'
import ResourceCourseList from '@/components/ResourceCourseList.vue'
import { getOtherDetails } from '../api'
const route = useRoute()
const id = route.query.id as string
const listOptions = computed(() => {
return {
columns: [
{ label: '课程图片', slots: 'table-img', align: 'center' },
{ label: '课程名称', prop: 'name', align: 'center' },
{ label: '分类名称', prop: 'classification_name', align: 'center' },
{ label: '所在章', prop: 'big', align: 'center' },
{ label: '所在小节', prop: 'small', align: 'center' },
{ label: '创建日期', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center' }
],
data: otherDetails.value.course_list
}
})
// 获取详情
let otherDetails: any = ref({})
getOtherDetails({ id: id }).then((res: any) => {
......@@ -38,34 +25,5 @@ getOtherDetails({ id: id }).then((res: any) => {
<ViewCenter v-if="Object.keys(otherDetails).length" :data="otherDetails"></ViewCenter>
<ViewBottom></ViewBottom>
</AppCard>
<AppCard title="其他资源关联使用课程">
<AppList v-bind="listOptions" ref="appList" stripe>
<template #table-img="{ row }">
<img :src="row.cover" style="width: 100px; display: block" />
</template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/course/my/view?id=${row.id}`">
<el-button style="color: #399ee8" type="primary" link>查看</el-button>
</router-link>
</el-space>
</template>
</AppList>
</AppCard>
<ResourceCourseList title="其他资源关联使用课程" :list="otherDetails.course_list"></ResourceCourseList>
</template>
<style lang="scss" scoped>
.btn-box {
display: flex;
justify-content: right;
.btn-item {
width: 127px;
line-height: 36px;
background: #aa1941;
border-radius: 20px;
margin-right: 10px;
font-size: 14px;
color: #ffffff;
text-align: center;
}
}
</style>
......@@ -3,6 +3,7 @@ import ViewTop from '../components/ViewTop.vue'
import ViewCenter from '../components/ViewCenter.vue'
import ViewBottom from '../components/ViewBottom.vue'
import Operation from '../components/Operation.vue'
import ResourceCourseList from '@/components/ResourceCourseList.vue'
import { getVideoDetails } from '../api'
// 路由
......@@ -10,21 +11,6 @@ const route = useRoute()
const id = route.query.id as string
let videoDetails: any = ref({})
const listOptions = computed(() => {
return {
columns: [
{ label: '课程图片', slots: 'table-img', align: 'center' },
{ label: '课程名称', prop: 'name', align: 'center' },
{ label: '分类名称', prop: 'classification_name', align: 'center' },
{ label: '所在章', prop: 'big', align: 'center' },
{ label: '所在小节', prop: 'small', align: 'center' },
{ label: '创建日期', prop: 'created_time', align: 'center' },
{ label: '操作', slots: 'table-operate', align: 'center' }
],
data: videoDetails.value.course_list
}
})
// 获取详情
getVideoDetails({ id: id }).then(res => {
videoDetails.value = res.data
......@@ -38,34 +24,5 @@ getVideoDetails({ id: id }).then(res => {
<ViewCenter v-if="Object.keys(videoDetails).length" :data="videoDetails"></ViewCenter>
<ViewBottom></ViewBottom>
</AppCard>
<AppCard title="视频资源关联使用课程">
<AppList v-bind="listOptions" ref="appList" stripe>
<template #table-img="{ row }">
<img :src="row.cover" style="width: 100px; display: block" />
</template>
<template #table-operate="{ row }">
<el-space>
<router-link :to="`/course/my/view?id=${row.id}`">
<el-button style="color: #399ee8" type="primary" link>查看</el-button>
</router-link>
</el-space>
</template>
</AppList>
</AppCard>
<ResourceCourseList title="视频资源关联使用课程" :list="videoDetails.course_list"></ResourceCourseList>
</template>
<style lang="scss" scoped>
.btn-box {
display: flex;
justify-content: right;
.btn-item {
width: 127px;
line-height: 36px;
background: #aa1941;
border-radius: 20px;
margin-right: 10px;
font-size: 14px;
color: #ffffff;
text-align: center;
}
}
</style>
......@@ -41,6 +41,7 @@ export interface RoleType {
name: string
desc: string
}
// 权限信息
export interface PermissionType {
desc: string
......@@ -52,3 +53,36 @@ export interface PermissionType {
type: number
tag: string
}
// 课程信息
export interface CourseType {
auth_view: boolean
belong_operator: string
belong_operator_name: string
big: string
classification: string
classification_name: string
cover: string
created_operator: string
created_operator_name: string
created_time: string
credit: string
department_public: string
elective_type: string
elective_type_name: string
id: string
name: string
online_type: string
online_type_name: string
organ_id: string
organ_id_name: string
platform_public: string
project_id: string
project_id_name: string
small: string
status: string
status_name: string
updated_operator: string
updated_operator_name: string
updated_time: string
}
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论