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

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

src/components/CreatedCourse/chooseFileList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, onMounted, ref, h } from "vue";
+import { reactive, onMounted, ref, h, watch } from "vue";
 import {
   ElButton,
   ElInput,
@@ -12,6 +12,9 @@ import {
 } from "element-plus";
 import BasicTable from "@/components/BasicElTable/BasicTable.vue";
 import { getPageListByType } from "@/hooks/useCreateCourseMaps";
+
+const props = defineProps({});
+
 const tableData = ref([]);
 const form = reactive({
   name: "",
@@ -22,8 +25,7 @@ let pagination = reactive({
   current: 1,
   total: 0,
 });
-
-const dialogVideoForm = ref({
+const dialogVideoForm = reactive({
   name: "",
   isDrag: false,
   completeSetup: 0,
@@ -31,7 +33,7 @@ const dialogVideoForm = ref({
 });
 const loading = ref(false);
 const showDialog = ref(false);
-const emit = defineEmits(["saveContent"]);
+const emit = defineEmits(["chooseItem"]);
 const columns = [
   {
     title: "序号",
@@ -67,12 +69,13 @@ const columns = [
             type: "primary",
             size: "small",
             onClick: () => {
-              console.log(params);
-              showDialog.value = true;
-              dialogVideoForm.value = {
-                ...dialogVideoForm.value,
+              emit("chooseItem", {
                 ...params.row,
-              };
+                isDrag: false,
+                completeSetup: 0,
+                setupTage: "",
+                resType: 10,
+              });
             },
           },
           "选择"
@@ -101,9 +104,9 @@ const getVideoList = () => {
   });
 };
 
-const saveContent = (type) => {
+const chooseItem = (type) => {
   showDialog.value = false;
-  emit("saveContent", {
+  emit("chooseItem", {
     ...dialogVideoForm,
     type: 10,
   });
@@ -132,7 +135,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="add-video">
+  <div class="add-video" v-if="!isPreview && !isSetting">
     <div class="add-vide-header">
       <div>
         <el-button>上传新视频</el-button>
@@ -158,57 +161,6 @@ onMounted(() => {
       ></BasicTable>
     </div>
   </div>
-
-  <el-dialog v-model="showDialog" title="视频">
-    <el-form>
-      <el-form-item label="视频名称">
-        <el-input v-model="dialogVideoForm.name"></el-input>
-      </el-form-item>
-      <video
-        controls
-        style="width: 100%; max-height: 400px"
-        class="mb10"
-        v-if="showDialog"
-      >
-        <source
-          :src="'http://home.hzer.xyz:9960/upload/' + dialogVideoForm.filePath"
-          type="video/mp4"
-        />
-        您的浏览器不支持video
-      </video>
-      <el-form-item label="是否允许拖拽">
-        <el-radio-group v-model="dialogVideoForm.isDrag" size="small">
-          <el-radio :label="true" border>是</el-radio>
-          <el-radio :label="false" border>否</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="完成规则设置">
-        <el-radio-group v-model="dialogVideoForm.completeSetup">
-          <el-radio :label="0">默认(系统自动控制)</el-radio>
-          <el-radio :label="1"
-            >按进度
-            <el-input-number
-              :disabled="dialogVideoForm.completeSetup === 0"
-              v-model="dialogVideoForm.setupTage"
-              size="mini"
-              :min="0"
-              :max="100"
-              label="描述文字"
-              controls-position="right"
-            ></el-input-number>
-            %</el-radio
-          >
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="saveContent(1)"> 保存 </el-button>
-      </div>
-    </template>
-  </el-dialog>
 </template>
 
 <style scoped lang="scss">

src/components/CreatedCourse/preview/VideoComp.vue

@@ -0,0 +1,109 @@
+<script setup>
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElRadio,
+  ElRadioGroup,
+} from "element-plus";
+
+const props = defineProps({
+  dialogVideoForm: {
+    type: Object,
+    default: () => ({
+      name: "",
+      filePath: "",
+      isDrag: true,
+      completeSetup: 0,
+      setupTage: 0,
+    }),
+  },
+  isPreview: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+import { ref, watch } from "vue";
+// Create a reactive copy of the prop for local modifications
+const localDialogVideoForm = ref({ ...props.dialogVideoForm });
+
+// Watch for changes in the prop and update the local copy
+watch(
+  () => props.dialogVideoForm,
+  (newVal) => {
+    Object.assign(localDialogVideoForm.value, newVal);
+  },
+  { deep: true }
+);
+
+// Emit updates to parent component
+const emit = defineEmits(["update:dialogVideoForm"]);
+
+// Update form values and emit changes
+const updateFormValue = (field, value) => {
+  localDialogVideoForm.value[field] = value;
+  emit("update:dialogVideoForm", { ...localDialogVideoForm.value });
+};
+</script>
+
+<template>
+  <el-form>
+    <el-form-item label="视频名称" v-if="!isPreview">
+      <el-input
+        v-model="localDialogVideoForm.name"
+        @update:modelValue="(val) => updateFormValue('name', val)"
+      ></el-input>
+    </el-form-item>
+    <!-- Added video type prop -->
+    <video
+      controls
+      style="width: 100%; max-height: 400px"
+      class="mb10"
+      :key="localDialogVideoForm.filePath"
+    >
+      <source
+        :src="
+          'http://home.hzer.xyz:9960/upload/' + localDialogVideoForm.filePath
+        "
+        type="video/mp4"
+      />
+      您的浏览器不支持video
+    </video>
+    <el-form-item label="是否允许拖拽" v-if="!isPreview">
+      <el-radio-group
+        :model-value="localDialogVideoForm.isDrag"
+        @update:modelValue="(val) => updateFormValue('isDrag', val)"
+        size="small"
+      >
+        <el-radio :label="true" border>是</el-radio>
+        <el-radio :label="false" border>否</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="完成规则设置" v-if="!isPreview">
+      <el-radio-group
+        :model-value="localDialogVideoForm.completeSetup"
+        @update:modelValue="(val) => updateFormValue('completeSetup', val)"
+      >
+        <el-radio :label="0">默认(系统自动控制)</el-radio>
+        <el-radio :label="1">
+          按进度
+          <el-input-number
+            :disabled="localDialogVideoForm.completeSetup === 0"
+            :model-value="localDialogVideoForm.setupTage"
+            @update:modelValue="(val) => updateFormValue('setupTage', val)"
+            size="mini"
+            :min="0"
+            :max="100"
+            label="描述文字"
+            controls-position="right"
+          ></el-input-number>
+          %
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped lang="scss"></style>

src/components/NavLeft.vue

@@ -1,142 +1,222 @@
 <template>
-  <div class="navLeft" :style="{
+  <div
+    class="navLeft"
+    :style="{
       width: packup ? '100px' : '208px',
       height: screenHeight - 80 + 'px',
-  }">
+    }"
+  >
     <div style="display: flex; justify-content: flex-end">
-      <img class="packup" src="../assets/images/navleft/packup.png" @click="packUp"
-        :style="{ 'margin-right': packup ? '36px' : '14px' }" />
+      <img
+        class="packup"
+        src="../assets/images/navleft/packup.png"
+        @click="packUp"
+        :style="{ 'margin-right': packup ? '36px' : '14px' }"
+      />
     </div>
-    <div style="width: 100%; margin-top: 26px" :style="{ display: packup ? 'none' : 'block' }">
-      <a-menu id="dddddd" :open-keys="openKeys" :selectedKeys="selectedKeys" style="width: 208px" mode="inline"
-        @openChange="onOpenChange" @select="selectItem">
-        <a-sub-menu v-if="
+    <div
+      style="width: 100%; margin-top: 26px"
+      :style="{ display: packup ? 'none' : 'block' }"
+    >
+      <a-menu
+        id="dddddd"
+        :open-keys="openKeys"
+        :selectedKeys="selectedKeys"
+        style="width: 208px"
+        mode="inline"
+        @openChange="onOpenChange"
+        @select="selectItem"
+      >
+        <a-sub-menu
+          v-if="
             checkMenu(
               'coursereviewedn,coursereviewed,projectreviewedn,projectreviewed'
             )
-        " key="sub10" @titleClick="titleClick">
+          "
+          key="sub10"
+          @titleClick="titleClick"
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 22px; height: 22px" src="../assets/images/navleft/review.png" />
+              <img
+                style="width: 22px; height: 22px"
+                src="../assets/images/navleft/review.png"
+              />
             </div>
           </template>
           <template #title>审核管理</template>
           <a-menu-item key="sub10-1" v-if="checkMenu('coursereviewedn')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub10-1' ? true : false,
                 circle: selectedKeys[0] === 'sub10-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/coursereviewedn">待审核课程</router-link>
           </a-menu-item>
           <a-menu-item key="sub10-2" v-if="checkMenu('coursereviewed')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub10-2' ? true : false,
                 circle: selectedKeys[0] === 'sub10-2' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/coursereviewed">已审核课程</router-link>
           </a-menu-item>
           <a-menu-item key="sub10-3" v-if="checkMenu('projectreviewedn')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub10-3' ? true : false,
                 circle: selectedKeys[0] === 'sub10-3' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/projectreviewedn">待审核项目</router-link>
           </a-menu-item>
           <a-menu-item key="sub10-4" v-if="checkMenu('projectreviewed')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub10-4' ? true : false,
                 circle: selectedKeys[0] === 'sub10-4' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/projectreviewed">已审核项目</router-link>
           </a-menu-item>
         </a-sub-menu>
 
-        <a-menu-item key="sub1" @titleClick="titleClick" v-if="checkMenu('learningpath')">
+        <a-menu-item
+          key="sub1"
+          @titleClick="titleClick"
+          v-if="checkMenu('learningpath')"
+        >
           <div class="imgBox">
-            <img style="width: 20px; height: 18px" src="../assets/images/navleft/studyPath.png" />
+            <img
+              style="width: 20px; height: 18px"
+              src="../assets/images/navleft/studyPath.png"
+            />
           </div>
           <router-link to="/learningpath">学习路径图</router-link>
         </a-menu-item>
         <!-- 专业力必修 -->
-        <a-menu-item key="sub25" @titleClick="titleClick" v-if="checkMenu('growthpath') && !checkMenu('growthpathadd')">
+        <a-menu-item
+          key="sub25"
+          @titleClick="titleClick"
+          v-if="checkMenu('growthpath') && !checkMenu('growthpathadd')"
+        >
           <div class="imgBox">
-            <img style="width: 20px; height: 18px" src="../assets/images/navleft/pathIcon.png" />
+            <img
+              style="width: 20px; height: 18px"
+              src="../assets/images/navleft/pathIcon.png"
+            />
           </div>
           <router-link to="/growthpath">专业力必修</router-link>
         </a-menu-item>
-        <a-menu-item key="sub25" @titleClick="titleClick" v-if="checkMenu('growthpathadd')">
+        <a-menu-item
+          key="sub25"
+          @titleClick="titleClick"
+          v-if="checkMenu('growthpathadd')"
+        >
           <div class="imgBox">
-            <img style="width: 20px; height: 18px" src="../assets/images/navleft/pathIcon.png" />
+            <img
+              style="width: 20px; height: 18px"
+              src="../assets/images/navleft/pathIcon.png"
+            />
           </div>
           <router-link to="/growthaddpath">专业力必修</router-link>
         </a-menu-item>
-        <a-sub-menu key="sub2" @titleClick="titleClick" v-if="checkMenu('projectmanage,templatelibrary')">
+        <a-sub-menu
+          key="sub2"
+          @titleClick="titleClick"
+          v-if="checkMenu('projectmanage,templatelibrary')"
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 15px; height: 15px" src="../assets/images/navleft/project.png" />
+              <img
+                style="width: 15px; height: 15px"
+                src="../assets/images/navleft/project.png"
+              />
             </div>
           </template>
           <template #title>项目中心</template>
           <a-menu-item key="sub2-1" v-if="checkMenu('projectmanage')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub2-1' ? true : false,
                 circle: selectedKeys[0] === 'sub2-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/projectmanage">项目</router-link>
           </a-menu-item>
           <a-menu-item key="sub2-2" v-if="checkMenu('templatelibrary')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub2-2' ? true : false,
                 circle: selectedKeys[0] === 'sub2-2' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/templatelibrary">模板库</router-link>
           </a-menu-item>
         </a-sub-menu>
 
-        <a-sub-menu key="sub3" v-if="
+        <a-sub-menu
+          key="sub3"
+          v-if="
             checkMenu(
               'coursewaremanage,onlinemanage,coursemanage,courserecommende,courseExquisite'
             )
-        ">
+          "
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 18px; height: 15px" src="../assets/images/navleft/course.png" />
+              <img
+                style="width: 18px; height: 15px"
+                src="../assets/images/navleft/course.png"
+              />
             </div>
           </template>
           <template #title>课程库</template>
           <a-menu-item key="sub3-1" v-if="checkMenu('coursewaremanage')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub3-1' ? true : false,
                 circle: selectedKeys[0] === 'sub3-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/coursewaremanage">面授管理</router-link>
           </a-menu-item>
           <a-menu-item key="sub3-2" v-if="checkMenu('onlinemanage')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub3-2' ? true : false,
                 circle: selectedKeys[0] === 'sub3-2' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/onlinemanage">在线管理</router-link>
           </a-menu-item>
           <a-menu-item key="sub3-3" v-if="checkMenu('coursemanage')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub3-3' ? true : false,
                 circle: selectedKeys[0] === 'sub3-3' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/coursemanage">课件管理</router-link>
           </a-menu-item>
           <a-menu-item key="sub3-4">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub3-4' ? true : false,
                 circle: selectedKeys[0] === 'sub3-4' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/courserecommended">课程推荐</router-link>
           </a-menu-item>
           <a-menu-item key="sub3-5" v-if="checkMenu('coursequalitymanage')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub3-5' ? true : false,
                 circle: selectedKeys[0] === 'sub3-5' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/courseExquisite">精品课管理</router-link>
           </a-menu-item>
         </a-sub-menu>
@@ -150,9 +230,16 @@
           </div>
           <span>考试中心</span>
         </a-menu-item> -->
-        <a-menu-item key="sub5" @titleClick="titleClick" v-if="checkMenu('researchmanage')">
+        <a-menu-item
+          key="sub5"
+          @titleClick="titleClick"
+          v-if="checkMenu('researchmanage')"
+        >
           <div class="imgBox">
-            <img style="width: 16px; height: 16px" src="../assets/images/navleft/survey.png" />
+            <img
+              style="width: 16px; height: 16px"
+              src="../assets/images/navleft/survey.png"
+            />
           </div>
           <router-link to="/researchmanage">评估管理</router-link>
         </a-menu-item>
@@ -177,15 +264,25 @@
             <router-link to="/dictmanage">字典管理</router-link>
           </a-menu-item>
         </a-sub-menu> -->
-        <a-menu-item key="sub21" @titleClick="titleClick" v-if="checkMenu('audiencemanage')">
+        <a-menu-item
+          key="sub21"
+          @titleClick="titleClick"
+          v-if="checkMenu('audiencemanage')"
+        >
           <div class="imgBox">
-            <img style="width: 16px; height: 16px" src="../assets/images/navleft/review.png" />
+            <img
+              style="width: 16px; height: 16px"
+              src="../assets/images/navleft/review.png"
+            />
           </div>
           <router-link to="/audiencemanage">受众管理</router-link>
         </a-menu-item>
         <a-menu-item key="sub5" v-if="checkMenu('systemManage')">
           <div class="imgBox">
-            <img style="width: 16px; height: 16px" src="../assets/images/navleft/system.png" />
+            <img
+              style="width: 16px; height: 16px"
+              src="../assets/images/navleft/system.png"
+            />
           </div>
           <router-link to="/researchmanage">评估管理</router-link>
         </a-menu-item>
@@ -230,33 +327,45 @@
         <!-- <router-link to="/systemmanage">系统管理</router-link> -->
         <!-- </a-menu-item> -->
 
-        <a-sub-menu key="sub11" @titleClick="titleClick"
-          v-if="checkMenu('questionmanage,papermanage,examinationcenter')">
+        <a-sub-menu
+          key="sub11"
+          @titleClick="titleClick"
+          v-if="checkMenu('questionmanage,papermanage,examinationcenter')"
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 16px; height: 16px" src="../assets/images/navleft/test.png" />
+              <img
+                style="width: 16px; height: 16px"
+                src="../assets/images/navleft/test.png"
+              />
             </div>
           </template>
           <template #title>考试</template>
           <a-menu-item key="sub11-1" v-if="checkMenu('questionmanage')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub11-1' ? true : false,
                 circle: selectedKeys[0] === 'sub11-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/questionmanage">试题管理</router-link>
           </a-menu-item>
           <a-menu-item key="sub11-2" v-if="checkMenu('papermanage')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub11-2' ? true : false,
                 circle: selectedKeys[0] === 'sub11-2' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/papermanage">试卷管理</router-link>
           </a-menu-item>
           <a-menu-item key="sub11-3" v-if="checkMenu('examinationcenter')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub11-3' ? true : false,
                 circle: selectedKeys[0] === 'sub11-3' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/examinationcenter">考试管理</router-link>
           </a-menu-item>
         </a-sub-menu>
@@ -271,25 +380,36 @@
         </a-menu-item> -->
         <!-- 案例修改 -->
         <!-- <a-sub-menu key="sub12" @titleClick="titleClick" v-if="checkMenu('casemanage')"> -->
-        <a-sub-menu key="sub12" @titleClick="titleClick" v-if="checkMenu('casemanage,caserecommended,aicalllog')">
+        <a-sub-menu
+          key="sub12"
+          @titleClick="titleClick"
+          v-if="checkMenu('casemanage,caserecommended,aicalllog')"
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 16px; height: 16px" src="../assets/images/navleft/case.png" />
+              <img
+                style="width: 16px; height: 16px"
+                src="../assets/images/navleft/case.png"
+              />
             </div>
           </template>
           <template #title>案例</template>
           <a-menu-item key="sub12-1" v-if="checkMenu('casemanage')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub12-1' ? true : false,
                 circle: selectedKeys[0] === 'sub12-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/casemanage">案例管理</router-link>
           </a-menu-item>
           <a-menu-item key="sub12-2" v-if="checkMenu('caserecommended')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub12-2' ? true : false,
                 circle: selectedKeys[0] === 'sub12-2' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/caserecommended">案例推荐</router-link>
           </a-menu-item>
           <a-menu-item key="sub12-3" v-if="checkMenu('aicalllog')">
@@ -303,274 +423,395 @@
           </a-menu-item>
         </a-sub-menu>
         <!-- 教师专区 -->
-        <a-sub-menu key="sub22" @titleClick="titleClick" v-if="
+        <a-sub-menu
+          key="sub22"
+          @titleClick="titleClick"
+          v-if="
             checkMenu(
               'gratefulnotice,gratefulcarousel,teacherempowerment,teachertopic,tooldown,teacheropinion,instructorcertification'
             )
-        ">
+          "
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 16px; height: 16px" src="../assets/images/navleft/grateful.png" />
+              <img
+                style="width: 16px; height: 16px"
+                src="../assets/images/navleft/grateful.png"
+              />
             </div>
           </template>
           <template #title>教师专区</template>
           <a-menu-item key="sub22-1" v-if="checkMenu('gratefulnotice')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub22-1' ? true : false,
                 circle: selectedKeys[0] === 'sub22-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/gratefulnotice">通知</router-link>
           </a-menu-item>
           <a-menu-item key="sub22-2" v-if="checkMenu('gratefulcarousel')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub22-2' ? true : false,
                 circle: selectedKeys[0] === 'sub22-2' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/gratefulcarousel">轮播图</router-link>
           </a-menu-item>
           <a-menu-item key="sub22-3" v-if="checkMenu('teacherempowerment')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub22-3' ? true : false,
                 circle: selectedKeys[0] === 'sub22-3' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/teacherempowerment">教师赋能</router-link>
           </a-menu-item>
 
-          <a-menu-item key="sub22-7" v-if="checkMenu('instructorcertification')">
-            <span :class="{
+          <a-menu-item
+            key="sub22-7"
+            v-if="checkMenu('instructorcertification')"
+          >
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub22-7' ? true : false,
                 circle: selectedKeys[0] === 'sub22-7' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/instructorcertification">讲师认证</router-link>
           </a-menu-item>
 
           <a-menu-item key="sub22-4" v-if="checkMenu('teachertopic')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub22-4' ? true : false,
                 circle: selectedKeys[0] === 'sub22-4' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/teachertopic">认证讲师库</router-link>
           </a-menu-item>
           <a-menu-item key="sub22-5" v-if="checkMenu('tooldown')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub22-5' ? true : false,
                 circle: selectedKeys[0] === 'sub22-5' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/tooldown">工具下载</router-link>
           </a-menu-item>
           <a-menu-item key="sub22-6" v-if="checkMenu('teacheropinion')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub22-6' ? true : false,
                 circle: selectedKeys[0] === 'sub22-6' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/teacheropinion">意见</router-link>
           </a-menu-item>
         </a-sub-menu>
-        <a-sub-menu key="sub24" @titleClick="titleClick" v-if="
+        <a-sub-menu
+          key="sub24"
+          @titleClick="titleClick"
+          v-if="
             checkMenu(
               'lecturer,lecturerRecords,lecturerExpense,lecturerSummary,lecturerTrainOrg,'
             )
-        ">
+          "
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 15px; height: 15px" src="../assets/images/navleft/project.png" />
+              <img
+                style="width: 15px; height: 15px"
+                src="../assets/images/navleft/project.png"
+              />
             </div>
           </template>
           <template #title>讲师管理</template>
           <a-menu-item key="sub24-1" v-if="checkMenu('lecturer')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub24-1' ? true : false,
                 circle: selectedKeys[0] === 'sub24-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/lecturerlist">讲师列表</router-link>
           </a-menu-item>
           <a-menu-item key="sub24-2" v-if="checkMenu('lecturerRecords')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub24-2' ? true : false,
                 circle: selectedKeys[0] === 'sub24-2' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/teachingrecord">授课记录</router-link>
           </a-menu-item>
           <a-menu-item key="sub24-3" v-if="checkMenu('lecturerExpense')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub24-3' ? true : false,
                 circle: selectedKeys[0] === 'sub24-3' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/lecturerfeemanagement">讲师费管理</router-link>
           </a-menu-item>
           <a-menu-item key="sub24-4" v-if="checkMenu('lecturerSummary')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub24-4' ? true : false,
                 circle: selectedKeys[0] === 'sub24-4' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/lecturerfeestatistics">讲师费统计</router-link>
           </a-menu-item>
           <a-menu-item key="sub24-5" v-if="checkMenu('lecturerTrainOrg')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub24-5' ? true : false,
                 circle: selectedKeys[0] === 'sub24-5' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/organization">培训发生组织</router-link>
           </a-menu-item>
         </a-sub-menu>
-        <a-menu-item key="sub13" @titleClick="titleClick" v-if="checkMenu('articlemanage')">
+        <a-menu-item
+          key="sub13"
+          @titleClick="titleClick"
+          v-if="checkMenu('articlemanage')"
+        >
           <div class="imgBox">
-            <img style="width: 20px; height: 20px" src="../assets/images/navleft/article.png" />
+            <img
+              style="width: 20px; height: 20px"
+              src="../assets/images/navleft/article.png"
+            />
           </div>
           <router-link to="/articlemanage">文章管理</router-link>
         </a-menu-item>
-        <a-menu-item key="sub14" @titleClick="titleClick" v-if="checkMenu('qamanage')">
+        <a-menu-item
+          key="sub14"
+          @titleClick="titleClick"
+          v-if="checkMenu('qamanage')"
+        >
           <div class="imgBox">
-            <img style="width: 20px; height: 20px" src="../assets/images/navleft/qa.png" />
+            <img
+              style="width: 20px; height: 20px"
+              src="../assets/images/navleft/qa.png"
+            />
           </div>
           <router-link to="/qamanage">问答管理</router-link>
         </a-menu-item>
-        <a-sub-menu key="sub23" @titleClick="titleClick" v-if="checkMenu('evaluationupload')">
+        <a-sub-menu
+          key="sub23"
+          @titleClick="titleClick"
+          v-if="checkMenu('evaluationupload')"
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 16px; height: 16px" src="../assets/images/navleft/grateful.png" />
+              <img
+                style="width: 16px; height: 16px"
+                src="../assets/images/navleft/grateful.png"
+              />
             </div>
           </template>
           <template #title>测评</template>
           <a-menu-item key="sub23-1" v-if="checkMenu('evaluationupload')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub23-1' ? true : false,
                 circle: selectedKeys[0] === 'sub23-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/evaluationupload">测评上传</router-link>
           </a-menu-item>
           <a-menu-item key="sub23-2">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub22-2' ? true : false,
                 circle: selectedKeys[0] === 'sub22-2' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <a target="_blank" :href="evaluationManagement">测评管理</a>
           </a-menu-item>
         </a-sub-menu>
-        <a-menu-item key="sub15" @titleClick="titleClick" v-if="checkMenu('download')">
+        <a-menu-item
+          key="sub15"
+          @titleClick="titleClick"
+          v-if="checkMenu('download')"
+        >
           <div class="imgBox">
-            <img style="width: 20px; height: 20px" src="../assets/images/navleft/qa.png" />
+            <img
+              style="width: 20px; height: 20px"
+              src="../assets/images/navleft/qa.png"
+            />
           </div>
           <router-link to="/download">下载中心</router-link>
         </a-menu-item>
         <!-- 20230804影藏 20230815放开-->
-        <a-sub-menu key="sub17" v-if="
+        <a-sub-menu
+          key="sub17"
+          v-if="
             checkMenu(
               'operational,learningpathmap,reportproject,curriculum,caseess,reportarticle,questionsandanswers,reportexamination,overvoew,employeelearning,overvoewnew'
             )
-        ">
+          "
+        >
           <template #icon>
             <div class="imgBox">
-              <img style="width: 18px; height: 15px" src="../assets/images/navleft/report.png" />
+              <img
+                style="width: 18px; height: 15px"
+                src="../assets/images/navleft/report.png"
+              />
             </div>
           </template>
           <template #title>报表中心</template>
           <a-menu-item key="sub17-1" v-if="checkMenu('operational')">
-            <span :class="{
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub17-1' ? true : false,
                 circle: selectedKeys[0] === 'sub17-1' ? false : true,
-            }"></span>
+              }"
+            ></span>
             <router-link to="/operational">运营数据概览</router-link>
           </a-menu-item>
-          <a-sub-menu key="sub17-2" class="treeMenu" v-if="
+          <a-sub-menu
+            key="sub17-2"
+            class="treeMenu"
+            v-if="
               checkMenu(
                 'learningpathmap,reportproject,curriculum,caseess,reportarticle,questionsandanswers,reportexamination'
               )
-          ">
+            "
+          >
             <template #icon>
               <div class="img"></div>
             </template>
             <template #title>版块详细数据</template>
             <a-menu-item key="sub17-2-8" v-if="checkMenu('growthpathmap')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-2-8' ? true : false,
                   circle: selectedKeys[0] === 'sub17-2-8' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/growthpathmap">专业力必修</router-link>
             </a-menu-item>
             <a-menu-item key="sub17-2-1" v-if="checkMenu('learningpathmap')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-2-1' ? true : false,
                   circle: selectedKeys[0] === 'sub17-2-1' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/learningpathmap">学习路径图</router-link>
             </a-menu-item>
             <a-menu-item key="sub17-2-2" v-if="checkMenu('reportproject')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-2-2' ? true : false,
                   circle: selectedKeys[0] === 'sub17-2-2' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/reportproject">项目</router-link>
             </a-menu-item>
             <a-menu-item key="sub17-2-3" v-if="checkMenu('curriculum')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-2-3' ? true : false,
                   circle: selectedKeys[0] === 'sub17-2-3' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/curriculum">课程</router-link>
             </a-menu-item>
             <a-menu-item key="sub17-2-4" v-if="checkMenu('caseess')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-2-4' ? true : false,
                   circle: selectedKeys[0] === 'sub17-2-4' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/caseess">案例</router-link>
             </a-menu-item>
             <a-menu-item key="sub17-2-5" v-if="checkMenu('reportarticle')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-2-5' ? true : false,
                   circle: selectedKeys[0] === 'sub17-2-5' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/reportarticle">文章</router-link>
             </a-menu-item>
-            <a-menu-item key="sub17-2-6" v-if="checkMenu('questionsandanswers')">
-              <span :class="{
+            <a-menu-item
+              key="sub17-2-6"
+              v-if="checkMenu('questionsandanswers')"
+            >
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-2-6' ? true : false,
                   circle: selectedKeys[0] === 'sub17-2-6' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/questionsandanswers">问答</router-link>
             </a-menu-item>
             <a-menu-item key="sub17-2-7" v-if="checkMenu('reportexamination')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-2-7' ? true : false,
                   circle: selectedKeys[0] === 'sub17-2-7' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/reportexamination">考试</router-link>
             </a-menu-item>
           </a-sub-menu>
-          <a-sub-menu key="sub17-3" class="treeMenu" v-if="checkMenu('overvoew,employeelearning,overvoewnew')">
+          <a-sub-menu
+            key="sub17-3"
+            class="treeMenu"
+            v-if="checkMenu('overvoew,employeelearning,overvoewnew')"
+          >
             <template #icon>
               <div class="img"></div>
             </template>
             <template #title>组织学习数据</template>
             <a-menu-item key="sub17-3-1" v-if="checkMenu('overvoew')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-3-1' ? true : false,
                   circle: selectedKeys[0] === 'sub17-3-1' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/overvoew">概览</router-link>
             </a-menu-item>
             <a-menu-item key="sub17-3-2" v-if="checkMenu('employeelearning')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-3-2' ? true : false,
                   circle: selectedKeys[0] === 'sub17-3-2' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/employeelearning">员工学习数据</router-link>
             </a-menu-item>
             <a-menu-item key="sub17-3-3" v-if="checkMenu('overvoewnew')">
-              <span :class="{
+              <span
+                :class="{
                   circleActive: selectedKeys[0] === 'sub17-3-3' ? true : false,
                   circle: selectedKeys[0] === 'sub17-3-3' ? false : true,
-              }"></span>
+                }"
+              ></span>
               <router-link to="/overvoewnew">组织机构学习数据报表</router-link>
             </a-menu-item>
           </a-sub-menu>
-          <a-menu-item key="sub17-4" v-if="checkMenu('trainingnewmanager') || checkOrgs()">
-            <span :class="{
+          <a-menu-item
+            key="sub17-4"
+            v-if="checkMenu('trainingnewmanager') || checkOrgs()"
+          >
+            <span
+              :class="{
                 circleActive: selectedKeys[0] === 'sub17-4' ? true : false,
                 circle: selectedKeys[0] === 'sub17-4' ? false : true,
-            }"></span>
-            <router-link to="/trainingnewmanager">新任管理者培训数据</router-link>
+              }"
+            ></span>
+            <router-link to="/trainingnewmanager"
+              >新任管理者培训数据</router-link
+            >
           </a-menu-item>
         </a-sub-menu>
         <!--         标签管理 <a-menu-item key="sub16" v-if="checkMenu('OnlineCourseTagManage')">-->
@@ -586,7 +827,10 @@
 
         <a-menu-item key="sub17" v-if="checkMenu('OldSystemManage')">
           <div class="imgBox">
-            <img style="width: 22px; height: 22px" src="../assets/images/navleft/review.png" />
+            <img
+              style="width: 22px; height: 22px"
+              src="../assets/images/navleft/review.png"
+            />
           </div>
           <a target="_blank" :href="oldManage">旧版管理员界面</a>
         </a-menu-item>
@@ -594,21 +838,37 @@
         <!-- <router-link target="_blank" to="/oldsystemmanage">旧版管理员界面</router-link> -->
         <a-menu-item key="sub18" v-if="checkMenu('ReadingClubManage')">
           <div class="imgBox">
-            <img style="width: 22px; height: 22px" src="../assets/images/navleft/review.png" />
+            <img
+              style="width: 22px; height: 22px"
+              src="../assets/images/navleft/review.png"
+            />
           </div>
           <router-link to="/readingclubmanage">业务支援读书会管理</router-link>
         </a-menu-item>
         <a-menu-item key="sub19" v-if="checkMenu('dictmanage')">
           <div class="imgBox">
-            <img style="width: 22px; height: 22px" src="../assets/images/navleft/review.png" />
+            <img
+              style="width: 22px; height: 22px"
+              src="../assets/images/navleft/review.png"
+            />
           </div>
           <router-link to="/dictmanage">字典管理</router-link>
         </a-menu-item>
       </a-menu>
     </div>
-    <div style="width: 100%; margin-top: 26px" :style="{ display: packup ? 'block' : 'none' }" class="packupMenu">
-      <a-menu id="dddddd" v-model:openKeys="openKeys2" v-model:selectedKeys="selectedKeys2" style="width: 100px"
-        mode="inline" @click="handleClick">
+    <div
+      style="width: 100%; margin-top: 26px"
+      :style="{ display: packup ? 'block' : 'none' }"
+      class="packupMenu"
+    >
+      <a-menu
+        id="dddddd"
+        v-model:openKeys="openKeys2"
+        v-model:selectedKeys="selectedKeys2"
+        style="width: 100px"
+        mode="inline"
+        @click="handleClick"
+      >
         <!--      <a-menu-item key="sub10" @titleClick="titleClick">
           <router-link to="/coursereviewedn">审核</router-link>
         </a-menu-item>
@@ -1158,10 +1418,8 @@ export default {
       );
       if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
         state.openKeys = openKeys;
-        console.log("111", openKeys);
       } else {
         state.openKeys = latestOpenKey ? [latestOpenKey] : [];
-        console.log("222222222222222");
       }
     };
     const selectItem = (e) => {
@@ -1187,7 +1445,6 @@ export default {
     watch(
       () => route.fullPath,
       (n) => {
-        console.log("监听路由", n, store.state.openpages, state.keysList);
         // console.log("new:" + n.toLowerCase() + ",old:" + o);
         let arr = state.keysList;
         if (!arr.some((page) => page.href === n)) {

src/main.js

@@ -111,7 +111,6 @@ const initDictTree = (key) => {
     },
   }).then(
     (res) => {
-      console.log(res.data.result, "课程分类接口");
       store.commit("SET_DICT", { key, data: res.data.result });
       //转化为map放到状态中
       let map = new Map();

src/router/index.js

@@ -6,49 +6,48 @@
  * @FilePath: /fe-manage/src/router/index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { createRouter, createWebHistory } from 'vue-router';
-import routesConfig from './config';
+import { createRouter, createWebHistory } from "vue-router";
+import routesConfig from "./config";
 import store from "@/store";
 
 const routes = [
   {
-		path: '/',
-		name: '首页',
-		redirect: '/learningpath'
+    path: "/",
+    name: "首页",
+    redirect: "/learningpath",
   },
-	...routesConfig
-]
+  ...routesConfig,
+];
 const router = createRouter({
   history: createWebHistory(process.env.VUE_APP_BASE),
   routes,
-
-})
+});
 
 let count = 0;
 const timers = setInterval(() => {
-	count ++ 
-	let pathArr = store.state.menus
-	let currentPath = router.options.history.location
-	console.log(pathArr, currentPath, pathArr.indexOf(currentPath))
-	if(pathArr.length!==0){
+  count++;
+  let pathArr = store.state.menus;
+  let currentPath = router.options.history.location;
+  // console.log(pathArr, currentPath, pathArr.indexOf(currentPath))
+  if (pathArr.length !== 0) {
     // 刷新界面是否重新执行
-		if(pathArr.indexOf(currentPath)==-1){
-			if(localStorage.getItem("refreshPage") == "jumpverify"){
-				clearInterval(timers)
-				return
+    if (pathArr.indexOf(currentPath) == -1) {
+      if (localStorage.getItem("refreshPage") == "jumpverify") {
+        clearInterval(timers);
+        return;
       }
-			clearInterval(timers)
-			router.push({path: pathArr[0]})
-			localStorage.setItem("refreshPage", "jumpverify")
-		}else{
-			localStorage.setItem("refreshPage", "jumpverify")
-			clearInterval(timers)
+      clearInterval(timers);
+      router.push({ path: pathArr[0] });
+      localStorage.setItem("refreshPage", "jumpverify");
+    } else {
+      localStorage.setItem("refreshPage", "jumpverify");
+      clearInterval(timers);
     }
   }
   // 30s超时结束
-	if(count==60&&pathArr.length==0){
-		clearInterval(timers)
+  if (count == 60 && pathArr.length == 0) {
+    clearInterval(timers);
   }
 }, 500);
 
-export default router
+export default router;

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>

src/views/courselibrary/components/dragTable.vue

@@ -101,26 +101,26 @@ const editValue = ref("");
 
 // 开始编辑
 const startEdit = (record) => {
-  record._value.copyName = record._value.name;
-  record._value.isEdit = true;
+  record.copyName = record.name;
+  record.isEdit = true;
 };
 
 // 保存编辑
 const saveEdit = (record) => {
-  record._value.name = record._value.copyName;
-  record._value.copyName = null;
-  record._value.isEdit = false;
+  record.name = record.copyName;
+  record.copyName = null;
+  record.isEdit = false;
 };
 
 // 删除处理函数
-const handleDelete = (index) => {
-  emit("delete", { index: props.index, selectionIndex: index });
+const handleDelete = (index, record) => {
+  emit("delete", { index: props.index, selectionIndex: index, record });
 };
-const handleSetting = (index) => {
-  emit("setting", { index: props.index, selectionIndex: index });
+const handleSetting = (index, record) => {
+  emit("setting", { index: props.index, selectionIndex: index, record });
 };
-const handlePreview = (index) => {
-  emit("preview", { index: props.index, selectionIndex: index });
+const handlePreview = (index, record) => {
+  emit("preview", { index: props.index, selectionIndex: index, record });
 };
 
 // 渲染序号列
@@ -149,16 +149,17 @@ const renderIndexColumn = () => {
 // 渲染名称列
 const renderNameColumn = () => {
   return ({ record }) => {
+    console.log(record);
     // 如果处于编辑状态，显示输入框和确认按钮
-    if (record._value.isEdit) {
+    if (record.isEdit) {
       return h(
         "span",
         { style: { display: "flex", alignItems: "center", gap: "8px" } },
         [
           h("input", {
-            value: record._value.copyName,
+            value: record.copyName,
             onInput: (e) => {
-              record._value.copyName = e.target.value;
+              record.copyName = e.target.value;
             },
             style: {
               border: "1px solid #d9d9d9",
@@ -183,13 +184,13 @@ const renderNameColumn = () => {
     }
 
     // 否则显示正常文本和编辑图标
-    const Icon = getIconComponent(getType(record._value.resType));
+    const Icon = getIconComponent(getType(record.resType));
     return h(
       "span",
       { style: { display: "flex", alignItems: "center", gap: "8px" } },
       [
         createVNode(Icon, { style: { color: "#1890ff" } }),
-        h("span", {}, record._value.name),
+        h("span", {}, record.name),
         h(
           "a",
           {
@@ -217,7 +218,7 @@ const renderResTypeColumn = () => {
           textAlign: "center",
         },
       },
-      getType(record._value.resType)
+      getType(record.resType)
     );
   };
 };
@@ -234,7 +235,10 @@ const renderActionColumn = () => {
         // 设置
         h(
           "a",
-          { href: "javascript:void(0)", onClick: () => handleSetting(index) },
+          {
+            href: "javascript:void(0)",
+            onClick: () => handleSetting(index, record),
+          },
           [
             createVNode(SettingOutlined, {
               style: {
@@ -253,7 +257,10 @@ const renderActionColumn = () => {
         // 预览
         h(
           "a",
-          { href: "javascript:void(0)", onClick: () => handlePreview(index) },
+          {
+            href: "javascript:void(0)",
+            onClick: () => handlePreview(index, record),
+          },
           [
             createVNode(EyeOutlined, {
               style: { fontSize: "14px", color: "#1890ff" },
@@ -270,7 +277,7 @@ const renderActionColumn = () => {
           "a",
           {
             href: "javascript:void(0)",
-            onClick: () => handleDelete(index),
+            onClick: () => handleDelete(index, record),
           },
           [
             createVNode(DeleteOutlined, {
@@ -336,9 +343,10 @@ const processedColumns = computed(() => {
     },
     {
       title: "类型",
-      key: "type",
-      dataIndex: "type",
+      key: "resType",
+      dataIndex: "resType",
       align: "center",
+      customRender: renderResTypeColumn(),
     },
     {
       title: "操作",