refactor(course): 重构课程创建组件以支持文件选择和预览功能

- 将 AddVideo.vue 重命名为 chooseFileList.vue 并优化其内部逻辑
- 引入 watch API 并调整组件结构以提升响应性
- 更新事件发射器 saveContent 为 chooseItem 以匹配新流程
- 移除视频对话框相关代码并将其功能迁移至独立组件
- 在 createCourse.vue 中新增设置和预览弹窗逻辑
- 调整 dragTable.vue 的编辑和删除方法以传递完整的记录对象
- 统一使用响应式数据处理代替部分 refs 用法以简化状态管理
- 清理无关注释及调试语句提高代码可读性和维护性

src/views/courselibrary/components/createCourse.vue

@@ -2,16 +2,24 @@
 import dragCollapse from "./dragCollapse.vue";
 import { ElButton, ElCheckbox, ElDialog } from "element-plus";
 import dragTable from "./dragTable.vue";
-import { ref } from "vue";
+import { ref, reactive } from "vue";
 defineOptions({
   name: "CreateCourse",
 });
 import { useCourseData } from "@/hooks/useCourseData";
-import AddVideoComp from "@/components/CreatedCourse/AddVideo.vue";
+import chooseFileList from "@/components/CreatedCourse/chooseFileList.vue";
+import VideoComp from "@/components/CreatedCourse/preview/VideoComp.vue";
+
+const mapComponents = {
+  VideoComp,
+};
 
 // 使用课程数据hook
 const { courseMetadata, courseList, courseActionButtons } = useCourseData();
-
+const isSetting = ref(false);
+const isPreview = ref(false);
+const chooseItemData = ref({});
+const showSettingDialog = ref(false);
 // 定义表格列
 
 // 添加章
@@ -59,6 +67,7 @@ const courseOperations = {
 const executeCourseOperation = (operationName, data) => {
   courseMetadata.chooseIndex = data;
   courseMetadata.selectionIndex = null;
+  isPreview.value = false;
   if (courseOperations[operationName]) {
     courseOperations[operationName](data);
   } else {
@@ -66,28 +75,45 @@ const executeCourseOperation = (operationName, data) => {
   }
 };
 
-const isSetting = ref(false);
+const chooseItem = (data) => {
+  console.log(data);
+  chooseItemData.value = data;
 
-const saveVideo = (data) => {
-  showDialog.value = false;
-  if (isSetting.value) {
-  } else {
-    courseList.value[courseMetadata.chooseIndex].data.push(data);
-  }
+  console.log(chooseItemData.value);
+  showSettingDialog.value = true;
 };
 
+const saveContent = () => {
+  console.log(chooseItemData.value);
+  if (courseMetadata.selectionIndex !== null) {
+  } else {
+    console.log(courseList.value, courseMetadata);
+
+    courseList.value[courseMetadata.chooseIndex].data.push(
+      chooseItemData.value
+    );
+  }
+  showDialog.value = false;
+  showSettingDialog.value = false;
+};
 const deleteRow = (data) => {
-  console.log(data);
   courseMetadata.chooseIndex = data.index;
   courseMetadata.selectionIndex = data.selectionIndex;
+  chooseItemData.value = data.record;
 };
 const settingRow = (data) => {
   courseMetadata.chooseIndex = data.index;
   courseMetadata.selectionIndex = data.selectionIndex;
+  chooseItemData.value = data.record;
+  isPreview.value = false;
+  showSettingDialog.value = true;
 };
 const previewRow = (data) => {
   courseMetadata.chooseIndex = data.index;
   courseMetadata.selectionIndex = data.selectionIndex;
+  chooseItemData.value = data.record;
+  isPreview.value = true;
+  showSettingDialog.value = true;
 };
 </script>
 
@@ -137,9 +163,27 @@ const previewRow = (data) => {
       </div>
     </div>
 
-    <!--    课程按钮弹窗-->
+    <!--    选择文件列表-->
     <el-dialog v-model="showDialog" title="请选择操作">
-      <AddVideoComp @saveContent="saveVideo"></AddVideoComp>
+      <chooseFileList @chooseItem="chooseItem"></chooseFileList>
+    </el-dialog>
+
+    <!--    设置预览弹窗 -->
+    <el-dialog v-model="showSettingDialog" title="请选择操作">
+      <component
+        v-for="item in mapComponents"
+        :is="item"
+        v-model:dialogVideoForm="chooseItemData"
+        :isPreview="isPreview"
+      ></component>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="showSettingDialog = false">取消</el-button>
+          <el-button type="primary" @click="saveContent()" v-if="!isPreview">
+            保存
+          </el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>