Browse Source

1、优化课程权限读后台配置
1、课程无权查看样式优化

liyanbo 6 tháng trước cách đây
mục cha
commit
b92016a275

BIN
src/assets/images/permission/isDisabled.png


+ 2 - 10
src/components/HomePage.vue

@@ -136,6 +136,7 @@ const LogoutClick = async () => {
     localStorage.removeItem('token')
     localStorage.removeItem('isLoggedIn')
     localStorage.removeItem('maxCourseSections')
+    localStorage.removeItem('courseDataScope')
     // 跳转到登录页面
     router.push({ path: '/login' })
   } catch (error) {
@@ -144,6 +145,7 @@ const LogoutClick = async () => {
     localStorage.removeItem('token')
     localStorage.removeItem('isLoggedIn')
     localStorage.removeItem('maxCourseSections')
+    localStorage.removeItem('courseDataScope')
     Message().notifyError('退出登录失败,请重试', true)
     router.push({ path: '/login' })
   }
@@ -234,16 +236,6 @@ const handleGradeSelect = (command) => {
   }
 }
 
-//AI实验室
-const notOpen = () => {
-  Message().notifyWarning(
-    localStorage.getItem('userName') === 'aiTest'
-      ? '您的账号并未开放此功能!'
-      : '演示版未开放此功能!',
-    true
-  )
-}
-
 onMounted(() => {
   fetchCtTypes()
   // 初始化平台标题

+ 91 - 64
src/views/AIDevelop.vue

@@ -105,49 +105,57 @@
           <span>{{ course.courseName }}</span>
         </div>
 
-        <!-- 视频组件 -->
-         <VideoPlayer 
-          v-if="course.courseContentType === 'video'"
-          :contentType="course.courseContentType"
-          :videoPath="course.courseVideoPath"
-          :courseId="course.id || ''"
-          :typeId="typeId"
-          :courseConfigList="course.courseConfigList || []"
-          :allIndices="flattenMenuItems()"
-          :currentIndex="course.key || ''"
-          @timeUpdate="handleVideoTimeUpdate"
-          @videoEnded="handleVideoEnded"
-          @switchVideo="handleSelect"
+        <el-empty v-if="isDisabled"
+                  image-size="500"
+          description="您无权查看该课程!"
+          :image="isDisabledImage"
         />
-        <!-- 图片 -->
-        <ImageView v-if="course.courseContentType === 'image'" :imagePath="course.courseImagePath" altText="课程图片"></ImageView>
 
-        <!-- PPT -->
-        <PptView v-if="course.courseContentType === 'ppt'" :pptPath="course.pptPath" ref="pptRef"></PptView>
-
-        <!--文生文-->
-        <TextToText class="contentClass" v-if="course.courseContentType === 'aiTextToText'" ref="aiTextToText"></TextToText>
-
-        <!--文生图-->
-        <TextToImage class="contentClass" v-if="course.courseContentType === 'aiTextToImage'" ref="aiTextToImage"></TextToImage>
-
-        <!--图生图-->
-        <ImageToImage class="contentClass" v-if="course.courseContentType === 'aiImageToImage'" ref="aiImageToImage"></ImageToImage>
-
-        <!--图生视频-->
-        <ImageToVideo class="contentClass" v-if="course.courseContentType === 'aiImageToVideo'" ref="aiImageToVideo"></ImageToVideo>
+        <div v-else>
+          <!-- 视频组件 -->
+          <VideoPlayer
+              v-if="course.courseContentType === 'video'"
+              :contentType="course.courseContentType"
+              :videoPath="course.courseVideoPath"
+              :courseId="course.id || ''"
+              :typeId="typeId"
+              :courseConfigList="course.courseConfigList || []"
+              :allIndices="flattenMenuItems()"
+              :currentIndex="course.key || ''"
+              @timeUpdate="handleVideoTimeUpdate"
+              @videoEnded="handleVideoEnded"
+              @switchVideo="handleSelect"
+          />
+          <!-- 图片 -->
+          <ImageView v-if="course.courseContentType === 'image'" :imagePath="course.courseImagePath" altText="课程图片"></ImageView>
+
+          <!-- PPT -->
+          <PptView v-if="course.courseContentType === 'ppt'" :pptPath="course.pptPath" ref="pptRef"></PptView>
+
+          <!--文生文-->
+          <TextToText class="contentClass" v-if="course.courseContentType === 'aiTextToText'" ref="aiTextToText"></TextToText>
+
+          <!--文生图-->
+          <TextToImage class="contentClass" v-if="course.courseContentType === 'aiTextToImage'" ref="aiTextToImage"></TextToImage>
+
+          <!--图生图-->
+          <ImageToImage class="contentClass" v-if="course.courseContentType === 'aiImageToImage'" ref="aiImageToImage"></ImageToImage>
+
+          <!--图生视频-->
+          <ImageToVideo class="contentClass" v-if="course.courseContentType === 'aiImageToVideo'" ref="aiImageToVideo"></ImageToVideo>
+        </div>
 
         <!-- 视频切换按钮 - 始终显示 -->
         <div class="video-switch">
-          <div class="caret-left" @click="playPreviousVideo"> 
+          <div class="caret-left" @click="playPreviousVideo">
             <el-button type="warning" round>
               <img :src="leftImg" alt="Left" />上一节</el-button
             >
           </div>
           <div class="caret-right" @click="playNextVideo">
             <el-button type="warning" round
-              >下一节<img :src="rightImg" alt="Right" /> 
-            </el-button> 
+              >下一节<img :src="rightImg" alt="Right" />
+            </el-button>
           </div>
         </div>
 
@@ -174,6 +182,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { Expand, Fold, Memo } from '@element-plus/icons-vue'
 import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox, ElNotification, valueEquals } from 'element-plus'
+import isDisabledImage from '@/assets/images/permission/isDisabled.png'
 
 import classImages from '@/assets/icon/class.png'
 import { ClassType } from '@/api/class.js'
@@ -233,6 +242,11 @@ const courseId = ref('')
 // 课程排序
 const typeSort = ref('')
 
+// 课程权限
+const courseDataScope = ref([])
+// 测试账号禁用视频
+const isDisabled = ref(false)
+
 
 //课程小节字典
 const menuDict = ref({
@@ -259,19 +273,21 @@ const handleClose = () => {}
 
 // 菜单选择的处理函数
 const handleSelect = index => {
-  //测试账号禁用视频
-  if (disableVideo(index)) return
 
   // 根据索引切换视频
   if (videoPathMap.value[index]) {
     course.value = videoPathMap.value[index]
     courseId.value = course.value.id
+    console.log("课程id:",courseId.value)
     // 切换标题后,关闭抽屉
     drawerVisible.value = false
   } else {
     //视频不存在
     Message().notifyWarning('视频不存在!', true)
   }
+
+  //测试账号禁用视频
+  if (disableVideo(index)) return
 }
 
 // 展平所有菜单项索引
@@ -347,27 +363,37 @@ const handleVideoEnded = () => {
 // 禁用视频
 const disableVideo = (index = course.value.key) => {
 
-  if (localStorage.getItem('userName') === 'aiTest' && gradeId.value === "1") {
-      let dis = Number(index.substring(index.indexOf("-") + 1));
-      if (dis > 5) {
-        //提示禁用
-        Message().notifyWarning('您的账号并未开放此课程!', true)
-        return true
-      }
-  }
+  console.log("******:",courseDataScope.value,videoPathMap.value[index].id)
 
-  if (localStorage.getItem('userName') === "zdxyz") {
-    if (localStorage.getItem('selectedGradeId') !== "1" || typeSort.value !== "02") {
-      let dis = Number(index.substring(index.indexOf("-") + 1));
-      if (dis > 2) {
-        //提示禁用
-        Message().notifyWarning('您的账号并未开放此课程!', true)
-        return true
-      }
-    }
+  isDisabled.value = !courseDataScope.value.some(item => Number(item) === videoPathMap.value[index].id)
+  if (isDisabled.value) {
+    Message().notifyWarning('您的账号并未开放此课程!', true)
+    return isDisabled.value;
   }
 
-  return false
+  return isDisabled.value;
+
+  // if (localStorage.getItem('userName') === 'aiTest' && gradeId.value === "1") {
+  //     let dis = Number(index.substring(index.indexOf("-") + 1));
+  //     if (dis > 5) {
+  //       //提示禁用
+  //       Message().notifyWarning('您的账号并未开放此课程!', true)
+  //       return true
+  //     }
+  // }
+  //
+  // if (localStorage.getItem('userName') === "zdxyz") {
+  //   if (localStorage.getItem('selectedGradeId') !== "1" || typeSort.value !== "02") {
+  //     let dis = Number(index.substring(index.indexOf("-") + 1));
+  //     if (dis > 2) {
+  //       //提示禁用
+  //       Message().notifyWarning('您的账号并未开放此课程!', true)
+  //       return true
+  //     }
+  //   }
+  // }
+  //
+  // return false
 }
 
 // 处理视频时间更新事件
@@ -462,13 +488,17 @@ const getAllCourseSections = () => {
 
 // 渲染 课程数据结构 以及 视频
 onMounted(async () => {
+
+  if (localStorage.getItem("courseDataScope")) {
+    courseDataScope.value = localStorage.getItem("courseDataScope").split(",");
+  }
+
    const typeIdParam = router.currentRoute.value.query.typeId
   if (typeIdParam) {
     typeId.value = typeIdParam
     try {
       // 取接口课程数据
       const res = await ClassType(typeIdParam)
-      console.log(res);
       // 对返回的课程数据进行处理,确保ccTime为有效秒数
       const processedData = res.data.map(course => {
         // 检查并处理courseConfigList
@@ -501,16 +531,6 @@ onMounted(async () => {
           title: courseTemp.courseName
         }
 
-        // 手动修改第一个课程为image类型用于测试
-        // if (index === 0) {
-        //   // courseTemp.courseContentType = 'ppt';
-        //   // courseTemp.pptPath = 'http://59.110.91.129:8088/admin-api/infra/file/29/get/20250820/ppt_1755654972861.pptx';
-        //   courseTemp.courseContentType = 'image';
-        //   courseTemp.courseImagePath = 'http://59.110.91.129:8088/admin-api/infra/file/4/get/20250715/one_1752549934393.png,http://59.110.91.129:8088/admin-api/infra/file/29/get/20250722/666_1753151547130.png';
-        //   // 可选:修改课程名称以便识别
-        //   courseTemp.courseName = '测试';
-        // }
-
         if (topName === courseTemp.courseLabel) {
           let topMenu = menuItems.value[menuItems.value.length - 1]
           let topMenuChildren = topMenu.children;
@@ -545,10 +565,16 @@ onMounted(async () => {
 
         //确定默认课程
         if (index === 0) {
-          course.value = courseTemp
           courseId.value = courseTemp.id
+          if(!disableVideo(menuIndex)){
+            course.value = courseTemp
+          }else{
+            course.value.key = courseTemp.key
+            course.value.courseName = courseTemp.courseName
+          }
         }
       })
+
     } catch (error) {
       console.error('获取课程数据失败:', error)
     }
@@ -562,6 +588,7 @@ onMounted(async () => {
   typeSort.value = router.currentRoute.value.query.typeSort
   // 初始化年级ID
   gradeId.value = globalState.initGradeId()
+
 })
 
 onBeforeUnmount(() => {

+ 16 - 16
src/views/AIGeneralCourse.vue

@@ -349,22 +349,22 @@ const goBack = () => {
 }
 
 const goToAIExperience = outlineData => {
-  if (localStorage.getItem('userName') === "aiTest") {
-    if (localStorage.getItem('selectedGradeId') !== "1" || outlineData.ctTypeSort !== "02") {
-      Message().notifyWarning('此版本未开放,敬请期待!', true)
-      return
-    }
-  }
-  // 检查是否是实操课的最后四节课
-  if (showPracticalCourse.value && ClassOutlineScData.value.length > 0) {
-    const totalLessons = ClassOutlineScData.value.length;
-    const currentIndex = parseInt(outlineData.ctTypeSort);
-    // 禁用最后四节课
-    if (currentIndex > totalLessons - 4) {
-      Message().notifyWarning('此课程暂未开放,敬请期待!', true)
-      return
-    }
-  }
+  // if (localStorage.getItem('userName') === "aiTest") {
+  //   if (localStorage.getItem('selectedGradeId') !== "1" || outlineData.ctTypeSort !== "02") {
+  //     Message().notifyWarning('此版本未开放,敬请期待!', true)
+  //     return
+  //   }
+  // }
+  // // 检查是否是实操课的最后四节课
+  // if (showPracticalCourse.value && ClassOutlineScData.value.length > 0) {
+  //   const totalLessons = ClassOutlineScData.value.length;
+  //   const currentIndex = parseInt(outlineData.ctTypeSort);
+  //   // 禁用最后四节课
+  //   if (currentIndex > totalLessons - 4) {
+  //     Message().notifyWarning('此课程暂未开放,敬请期待!', true)
+  //     return
+  //   }
+  // }
   router.push({
     path: '/ai-develop', // 跳转视频页面
     query: { typeId: outlineData.id, typeName: outlineData.ctType, typeSort:outlineData.ctTypeSort }

+ 3 - 6
src/views/Login.vue

@@ -277,18 +277,15 @@ const handleLogin = async params => {
           // 存储登录状态
           localStorage.setItem('isLoggedIn', 'true')
           localStorage.setItem('token', res.data.accessToken)
+          //课程权限
+          localStorage.setItem('courseDataScope', res.data.courseDataScope)
+          debugger
           
           if (loginData.value.loginForm.rememberMe) {
             localStorage.setItem('userName', loginData.value.loginForm.username)
             // 保存租户名称和密码
             localStorage.setItem('tenantName', loginData.value.loginForm.tenantName)
             localStorage.setItem('password', loginData.value.loginForm.password)
-            // 根据账号类型设置可查看的课程小节数
-            if (loginData.value.loginForm.username === 'aiTest') {
-              localStorage.setItem('maxCourseSections', '5')
-            } else if (loginData.value.loginForm.username === 'aiAdmin') {
-              localStorage.setItem('maxCourseSections', 'all')
-            }
           } else {
             // 如果没有勾选记住我,清除之前信息
             localStorage.removeItem('password')