mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-21 00:36:46 +08:00
refactor(course): 重构课程创建组件以支持文件选择和预览功能
- 将 AddVideo.vue 重命名为 chooseFileList.vue 并优化其内部逻辑 - 引入 watch API 并调整组件结构以提升响应性 - 更新事件发射器 saveContent 为 chooseItem 以匹配新流程 - 移除视频对话框相关代码并将其功能迁移至独立组件 - 在 createCourse.vue 中新增设置和预览弹窗逻辑 - 调整 dragTable.vue 的编辑和删除方法以传递完整的记录对象 - 统一使用响应式数据处理代替部分 refs 用法以简化状态管理 - 清理无关注释及调试语句提高代码可读性和维护性
This commit is contained in:
109
src/components/CreatedCourse/preview/VideoComp.vue
Normal file
109
src/components/CreatedCourse/preview/VideoComp.vue
Normal 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>
|
||||
Reference in New Issue
Block a user