feat(course): 添加SCORM文件预览功能

- 在chooseFileList组件中增加SCORM文件的预览按钮及逻辑处理
- 新增ScormComp.vue组件用于展示SCORM内容
- 更新createCourse.vue以支持SCORM类型的添加与预览操作
- 调整dragTable.vue中的显示控制逻辑，适配SCORM类型
- 修改useCreateCourseMaps.js中SCORM类型的名称为大写格式
- 扩展上传文件类型判断和相关参数传递逻辑
- 优化代码结构和可读性，确保SCORM资源正确加载和显示

src/components/CreatedCourse/chooseFileList.vue

@@ -2,7 +2,11 @@
 import { reactive, onMounted, ref, h } from "vue";
 import { ElButton, ElInput, ElUpload, ElMessage } from "element-plus";
 import BasicTable from "@/components/BasicElTable/BasicTable.vue";
-import { getPageListByType, getType, getMapsItem } from "@/hooks/useCreateCourseMaps";
+import {
+  getPageListByType,
+  getType,
+  getMapsItem,
+} from "@/hooks/useCreateCourseMaps";
 import apiCourseFile from "@/api/modules/courseFile";
 import { useRoute } from "vue-router";
 import Cookies from "vue-cookies";
@@ -83,6 +87,20 @@ const columns = [
     width: 150,
     render: (params) => {
       return h("div", [
+        h(
+          ElButton,
+          {
+            type: "primary",
+            size: "small",
+            style: {
+              display: [40, 50, 62].includes(props.resType) ? "" : "none",
+            },
+            onClick: () => {
+              handlePreviewItem(params.row);
+            },
+          },
+          "预览"
+        ),
         h(
           ElButton,
           {
@@ -100,7 +118,7 @@ const columns = [
 ];
 
 // 事件发射
-const emit = defineEmits(["chooseItem"]);
+const emit = defineEmits(["chooseItem", "choosePreviewItem"]);
 
 // 处理选择项目
 const handleChooseItem = (row) => {
@@ -110,9 +128,20 @@ const handleChooseItem = (row) => {
     completeSetup: 0,
     setupTage: "",
     resType: props.resType,
+    dir: props.resType === 50 ? "scorm" : "course",
   });
 };
 
+const handlePreviewItem = (row) => {
+  emit("choosePreviewItem", {
+    ...row,
+    isDrag: false,
+    completeSetup: 0,
+    setupTage: "",
+    resType: props.resType,
+    dir: props.resType === 50 ? "scorm" : "course",
+  });
+};
 // 分页改变处理
 const changePagination = (PAGINATION) => {
   Object.assign(pagination, PAGINATION);
@@ -128,7 +157,7 @@ const getVideoList = () => {
     pageIndex: pagination.current,
     self: true,
   };
-  
+
   getPageListByType(paramsData).then((res) => {
     loading.value = false;
     tableData.value = res.result.list;
@@ -136,15 +165,6 @@ const getVideoList = () => {
   });
 };
 
-// 选择项目处理
-const chooseItem = () => {
-  showDialog.value = false;
-  emit("chooseItem", {
-    ...dialogVideoForm,
-    type: props.resType,
-  });
-};
-
 // 上传成功处理
 const handleUploadSuccess = (res, file) => {
   if (res.status === 200) {
@@ -160,7 +180,7 @@ const handleUploadSuccess = (res, file) => {
       duration: routeQuery.duration,
       remark: "课程中直接上传",
     };
-    
+
     apiCourseFile.saveUpload(courseWare).then((rs) => {
       if (rs.status === 200) {
         emit("chooseItem", {
@@ -183,39 +203,46 @@ const handleBeforeUpload = (file) => {
     ElMessage({ message: `文件格式不正确!`, type: "error", offset: 100 });
     return false;
   }
-  
+
   let fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
   fileExtension = fileExtension.toLowerCase();
-  
+
   // 校检文件类型
-  if (getMapsItem(props.resType).fileType.join(",").indexOf(fileExtension) === -1) {
+  if (
+    getMapsItem(props.resType).fileType.join(",").indexOf(fileExtension) === -1
+  ) {
     ElMessage({
-      message: `文件格式不正确, 请上传正确格式的${getMapsItem(props.resType).name}文件!`,
+      message: `文件格式不正确, 请上传正确格式的${
+        getMapsItem(props.resType).name
+      }文件!`,
       type: "error",
       offset: 100,
     });
     return false;
   }
-  
+
   // 校检文件大小
   if (getMapsItem(props.resType).uploadSize) {
-    const isLt = file.size / 1024 / 1024 < getMapsItem(props.resType).uploadSize;
+    const isLt =
+      file.size / 1024 / 1024 < getMapsItem(props.resType).uploadSize;
     if (!isLt) {
       ElMessage({
-        message: `上传文件大小不能超过 ${getMapsItem(props.resType).uploadSize} !`,
+        message: `上传文件大小不能超过 ${
+          getMapsItem(props.resType).uploadSize
+        } !`,
         type: "error",
         offset: 100,
       });
       return false;
     }
   }
-  
+
   if (props.resType === 50) {
     dialogVideoForm.dir = "scorm";
   } else {
     dialogVideoForm.dir = "course";
   }
-  
+
   return true;
 };
 
@@ -237,7 +264,9 @@ onMounted(() => {
           :file-list="fileList"
           :before-upload="handleBeforeUpload"
         >
-          <el-button v-if="[10, 20, 40].includes(props.resType)" type="primary"
+          <el-button
+            v-if="[10, 20, 40, 50].includes(props.resType)"
+            type="primary"
             >上传新{{ getType(props.resType) }}</el-button
           >
         </el-upload>
@@ -282,4 +311,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>