|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
|
|
|
+ <Dialog :title="dialogTitle" v-model="dialogVisible" width="1000px">
|
|
|
<el-form
|
|
|
ref="formRef"
|
|
|
:model="formData"
|
|
|
@@ -11,61 +11,103 @@
|
|
|
<el-tree-select
|
|
|
v-model="formData.courseType"
|
|
|
:data="courseTypeTree"
|
|
|
- :props="{...defaultProps, label: 'ctType'}"
|
|
|
+ :props="{...defaultProps,
|
|
|
+ label: (node) => `${node.ctType}${node.ctTypeNode === '0' ? '(年级)' : '(大纲课程)'}`,
|
|
|
+ // 根据 ctTypeNode 字段判断是否禁用选项
|
|
|
+ disabled: (node) => node.ctTypeNode === '0'}"
|
|
|
placeholder="请选择课程类型"
|
|
|
+ :default-expand-all="true"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="课程名称" prop="courseName">
|
|
|
<el-input v-model="formData.courseName" placeholder="请输入课程名称" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程视频" prop="coursePath">
|
|
|
- <UploadVideo v-model="formData.coursePath" />
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item label="课程名称" prop="courseName">
|
|
|
+ <el-segmented v-model="formData.courseContentType" :options="getStrDictOptions(DICT_TYPE.COURSE_COUTNET_TYPE)" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程内容" prop="courseContent">
|
|
|
+
|
|
|
+ <el-form-item v-if="formData.courseContentType === 'all'" label="课程内容" prop="courseContent">
|
|
|
<Editor v-model="formData.courseContent" height="150px" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程作者" prop="courseAuthor">
|
|
|
- <el-input v-model="formData.courseAuthor" placeholder="请输入课程作者" />
|
|
|
+
|
|
|
+ <el-form-item v-if="formData.courseContentType === 'text'" label="纯文本" prop="coursePath">
|
|
|
+ <Editor v-model="formData.courseContent" height="150px" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程老师" prop="courseTeacher">
|
|
|
- <el-input v-model="formData.courseTeacher" placeholder="请输入课程老师" />
|
|
|
+
|
|
|
+ <el-form-item v-if="formData.courseContentType === 'image'" label="课程图片集" prop="coursePath">
|
|
|
+ <UploadImgs v-model="formData.courseImagePath" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程大小" prop="courseSize">
|
|
|
- <el-input-number v-model="formData.courseSize" :min="1" :step="1" step-strictly>
|
|
|
- <template #suffix><span>MB</span></template>
|
|
|
- </el-input-number>
|
|
|
+
|
|
|
+ <el-form-item v-if="formData.courseContentType === 'music'" label="课程音频" prop="coursePath">
|
|
|
+ <UploadMusic v-model="formData.courseMusicPath" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程时长" prop="courseTime">
|
|
|
- <el-input-number v-model="formData.courseTime" :min="1" :step="1" step-strictly>
|
|
|
- <template #suffix><span>秒</span></template>
|
|
|
- </el-input-number>
|
|
|
+
|
|
|
+ <el-form-item v-if="formData.courseContentType === 'video'" label="课程视频" prop="coursePath">
|
|
|
+ <UploadVideo v-model="formData.courseVideoPath" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="课程是否有检查" prop="courseIsInspect">
|
|
|
- <el-radio-group v-model="formData.courseIsInspect">
|
|
|
- <el-radio
|
|
|
- v-for="dict in getStrDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.value"
|
|
|
+
|
|
|
+ <!-- <el-form-item label="课程大小" prop="courseSize">-->
|
|
|
+ <!-- <el-input-number v-model="formData.courseSize" :min="1" :step="1" step-strictly>-->
|
|
|
+ <!-- <template #suffix><span>MB</span></template>-->
|
|
|
+ <!-- </el-input-number>-->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+
|
|
|
+
|
|
|
+ <template v-if="formData.courseContentType === 'ailab'">
|
|
|
+ <el-form-item >
|
|
|
+ <br/><h2>AI实验室</h2><br/>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else-if="formData.courseContentType === 'quest'">
|
|
|
+ <el-form-item >
|
|
|
+ <br/><h2>问题</h2><br/>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <el-form-item label="课程是否有检查" prop="courseIsInspect">
|
|
|
+ <el-radio-group v-model="formData.courseIsInspect">
|
|
|
+ <el-radio
|
|
|
+ v-for="dict in getStrDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.value"
|
|
|
+ >
|
|
|
+ {{ dict.label }}
|
|
|
+ </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="课程耗时" prop="courseTime">
|
|
|
+ <el-input-number v-model="formData.courseTime" :min="1" :step="1" step-strictly>
|
|
|
+ <template #suffix><span>分</span></template>
|
|
|
+ </el-input-number>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="课程作者" prop="courseAuthor">
|
|
|
+ <el-input v-model="formData.courseAuthor" placeholder="请输入课程作者" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="课程老师" prop="courseTeacher">
|
|
|
+ <el-input v-model="formData.courseTeacher" placeholder="请输入课程老师" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="课程标签" prop="courseLabel">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.courseLabel"
|
|
|
+ placeholder="请选择课程标签"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
>
|
|
|
- {{ dict.label }}
|
|
|
- </el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="课程标签" prop="courseLabel">
|
|
|
- <el-select
|
|
|
- v-model="formData.courseLabel"
|
|
|
- placeholder="请选择课程标签"
|
|
|
- multiple
|
|
|
- clearable
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="dict in getStrDictOptions(DICT_TYPE.COURSE_LABEL)"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
+ <el-option
|
|
|
+ v-for="dict in getStrDictOptions(DICT_TYPE.COURSE_LABEL)"
|
|
|
+ :key="dict.value"
|
|
|
+ :label="dict.label"
|
|
|
+ :value="dict.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
<el-form-item label="课程状态" prop="courseStatus">
|
|
|
<el-radio-group v-model="formData.courseStatus">
|
|
|
<el-radio
|
|
|
@@ -103,7 +145,10 @@ const formType = ref('') // 表单的类型:create - 新增;update - 修改
|
|
|
const formData = ref({
|
|
|
id: undefined,
|
|
|
courseName: undefined,
|
|
|
- coursePath: undefined,
|
|
|
+ courseContentType: undefined,
|
|
|
+ courseImagePath: undefined,
|
|
|
+ courseVideoPath: undefined,
|
|
|
+ courseMusicPath: undefined,
|
|
|
courseContent: undefined,
|
|
|
courseAuthor: undefined,
|
|
|
courseTeacher: undefined,
|
|
|
@@ -117,8 +162,8 @@ const formData = ref({
|
|
|
const formRules = reactive({
|
|
|
courseName: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
|
|
|
courseContent: [{ required: true, message: '课程内容不能为空', trigger: 'blur' }],
|
|
|
- courseAuthor: [{ required: true, message: '课程作者不能为空', trigger: 'blur' }],
|
|
|
- courseTeacher: [{ required: true, message: '课程老师不能为空', trigger: 'blur' }],
|
|
|
+ // courseAuthor: [{ required: true, message: '课程作者不能为空', trigger: 'blur' }],
|
|
|
+ // courseTeacher: [{ required: true, message: '课程老师不能为空', trigger: 'blur' }],
|
|
|
// courseSize: [{ required: true, message: '课程大小不能为空', trigger: 'blur' }],
|
|
|
// courseTime: [{ required: true, message: '课程时长不能为空', trigger: 'blur' }],
|
|
|
// courseLabel: [{ required: true, message: '课程标签不能为空', trigger: 'blur' }]
|
|
|
@@ -177,7 +222,9 @@ const resetForm = () => {
|
|
|
formData.value = {
|
|
|
id: undefined,
|
|
|
courseName: undefined,
|
|
|
- coursePath: undefined,
|
|
|
+ courseContentType: undefined,
|
|
|
+ courseImagePath: undefined,
|
|
|
+ courseVideoPath: undefined,
|
|
|
courseContent: undefined,
|
|
|
courseAuthor: undefined,
|
|
|
courseTeacher: undefined,
|
|
|
@@ -194,8 +241,24 @@ const resetForm = () => {
|
|
|
const getCourseTypeTree = async () => {
|
|
|
courseTypeTree.value = []
|
|
|
const data = await CourseTypeApi.getCourseTypeList()
|
|
|
- const root: Tree = { id: 0, ctType: '课程类型', children: [] }
|
|
|
+ const root: Tree = { id: 0, ctType: '课程类型', ctTypeNode: '0', children: [] }
|
|
|
root.children = handleTree(data, 'id', 'ctParentId')
|
|
|
courseTypeTree.value.push(root)
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.demo-tabs > .el-tabs__content {
|
|
|
+ padding: 32px;
|
|
|
+ color: #6b778c;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.demo-tabs .custom-tabs-label .el-icon {
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.demo-tabs .custom-tabs-label span {
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 4px;
|
|
|
+}
|
|
|
+</style>
|