mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-10 19:36:46 +08:00
feat(course): 新增音视频与图文组件支持
- 新增 AudioComp.vue 组件,支持音频播放与设置 - 新增 EditorComp.vue 组件,集成富文本编辑器用于图文内容 - 修改 chooseFileList.vue,增加文件上传功能与类型适配 - 更新 createCourse.vue,完善课程章节内容管理逻辑 - 升级 useCourseData.js 和 useCreateCourseMaps.js,增强类型映射与数据结构 - 优化 BasicTable.vue,移除调试日志并调整样式 - 引入 quill 及相关插件依赖以支持富文本编辑功能
This commit is contained in:
106
src/components/CreatedCourse/preview/AudioComp.vue
Normal file
106
src/components/CreatedCourse/preview/AudioComp.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<script setup>
|
||||
import {
|
||||
ElForm,
|
||||
ElFormItem,
|
||||
ElInput,
|
||||
ElInputNumber,
|
||||
ElRadio,
|
||||
ElRadioGroup,
|
||||
} from "element-plus";
|
||||
defineOptions({
|
||||
resType: 20,
|
||||
});
|
||||
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 -->
|
||||
<audio
|
||||
controls
|
||||
style="width: 100%; max-height: 400px"
|
||||
class="mb10"
|
||||
:key="localDialogVideoForm.filePath"
|
||||
:src="'http://home.hzer.xyz:9960/upload/' + localDialogVideoForm.filePath"
|
||||
>
|
||||
您的浏览器不支持video
|
||||
</audio>
|
||||
<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