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>