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

- 将 AddVideo.vue 重命名为 chooseFileList.vue 并优化其内部逻辑
- 引入 watch API 并调整组件结构以提升响应性
- 更新事件发射器 saveContent 为 chooseItem 以匹配新流程
- 移除视频对话框相关代码并将其功能迁移至独立组件
- 在 createCourse.vue 中新增设置和预览弹窗逻辑
- 调整 dragTable.vue 的编辑和删除方法以传递完整的记录对象
- 统一使用响应式数据处理代替部分 refs 用法以简化状态管理
- 清理无关注释及调试语句提高代码可读性和维护性
This commit is contained in:
陈昱达
2025-11-21 15:12:59 +08:00
parent 8ebca12470
commit 6528491334
7 changed files with 762 additions and 394 deletions

View File

@@ -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>