添加课程模块和章节；
This commit is contained in:
241
src/view/course/addCourse/index.vue
Normal file
241
src/view/course/addCourse/index.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<script setup>
|
||||
// 引入依赖
|
||||
import api from '@/api/course'
|
||||
import com_api from '@/api/common'
|
||||
import custom from '@/utils/custom'
|
||||
// import WarningBar from '@/components/warningBar/warningBar.vue'
|
||||
import {ref,onMounted,provide } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
import { useUserStore } from '@/pinia/modules/user'
|
||||
const userStore = useUserStore()
|
||||
import chapterCom from '../components/chapter.vue'
|
||||
// 变量
|
||||
const path = ref(import.meta.env.VITE_BASE_API)
|
||||
const course_id = ref(0)
|
||||
const active = ref(0)
|
||||
const form = ref({status:1})
|
||||
const subjectParams = ref({
|
||||
pageIndex:1,
|
||||
pageSize:100,
|
||||
})
|
||||
const subjectList = ref([])
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
|
||||
subject: [{ required: true, message: '请选择课程科目', trigger: 'change' }],
|
||||
price: [{ required: true, message: '请输入课程价格', trigger: 'blur' }]
|
||||
})
|
||||
const ruleFormRef = ref(null)
|
||||
const chapter_info = ref([])
|
||||
const current_subject = ref('')
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
course_id.value = route.params.course_id || 0
|
||||
if(course_id.value) {
|
||||
getCourseInfo()
|
||||
}
|
||||
getSubject()
|
||||
})
|
||||
provide('subjectList', subjectList)
|
||||
provide('current_subject', current_subject)
|
||||
async function getCourseInfo() { // 获取课程信息
|
||||
const res = await api.getCourse({id:course_id.value})
|
||||
if(res.code === 0) {
|
||||
chapter_info.value = res.data.course_ware_json
|
||||
form.value = res.data
|
||||
console.log(form.value)
|
||||
}
|
||||
}
|
||||
// 方法
|
||||
function stepChangeFunc(type) {
|
||||
switch (type) {
|
||||
case 1: // 上一步
|
||||
active.value -=1
|
||||
break;
|
||||
case 2: // 下一步
|
||||
if(active.value == 0) { // 保存第一步的信息
|
||||
submitForm(ruleFormRef.value)
|
||||
}
|
||||
else{
|
||||
active.value +=1
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
const submitForm = async (formEl) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log('submit!')
|
||||
saveStep1()
|
||||
} else {
|
||||
// console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
async function saveStep1() {
|
||||
let params = {
|
||||
step1:{
|
||||
...form.value
|
||||
}
|
||||
}
|
||||
params.step1.price = parseInt(params.step1.price)
|
||||
let func_name =''
|
||||
if(course_id.value) { // 编辑
|
||||
params.course_id = parseInt(course_id.value)
|
||||
func_name = 'editCourse'
|
||||
}
|
||||
else{ // 新增
|
||||
func_name = 'addCourse'
|
||||
}
|
||||
const res = await api[func_name](params)
|
||||
if(res.code === 0) {
|
||||
active.value += 1
|
||||
course_id.value = res.data
|
||||
current_subject.value = form.value.subject
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '操作成功!'
|
||||
})
|
||||
}
|
||||
}
|
||||
async function getSubject(){ // 获取课程分类
|
||||
const res = await api.getSubjectList(subjectParams.value)
|
||||
if(res.code === 0) {
|
||||
subjectList.value = custom.getStdSubject(res.data.records)
|
||||
}
|
||||
}
|
||||
async function uploadAction(file){//图片上传 非oss
|
||||
file.status = 'uploading';
|
||||
file.message = '上传中...';
|
||||
//开始上传
|
||||
const content = new FormData();
|
||||
//上传图片需要转换二进制这里要用到FormData
|
||||
content.append("file", file.file);
|
||||
content.append("type", '1');
|
||||
const res=await com_api.upload(content);
|
||||
if(res.code==200){
|
||||
file.status = 'done';
|
||||
file.message = '上传成功';
|
||||
file.url = res.data.full_path;
|
||||
this.courseForm.cover = file.url
|
||||
}
|
||||
else{
|
||||
file.status = 'failed';
|
||||
file.message = '上传失败';
|
||||
}
|
||||
//重新赋值 img/视频
|
||||
|
||||
// var val_arr = []
|
||||
// for(let item of topicInfo.value[topic_index.value].answer_img_arr){
|
||||
// if(item.uid==file.file.uid){
|
||||
// item.url=file.url
|
||||
// }
|
||||
// val_arr.push(item.url)
|
||||
// }
|
||||
// topicInfo.value[topic_index.value].answer_img = val_arr.join(",")
|
||||
// const exercises_info = {
|
||||
// ...topicInfo.value[topic_index.value],
|
||||
// answer_img: topicInfo.value[topic_index.value].answer_img
|
||||
// }
|
||||
// card_submit_data(exercises_info)
|
||||
}
|
||||
function handleAvatarSuccess(res) {
|
||||
form.value.cover = res.data.file.url
|
||||
}
|
||||
function beforeAvatarUpload(file) {
|
||||
const isLt05M = file.size / 1024 / 1024 < 5
|
||||
const isJPG = file.type.indexOf('image/') === -1
|
||||
if (isJPG) {
|
||||
ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
|
||||
}
|
||||
if (!isLt05M) {
|
||||
ElMessage.error('上传头像图片大小不能超过 2M!')
|
||||
}
|
||||
return !isJPG && isLt05M
|
||||
}
|
||||
function onSubmit() {
|
||||
router.push({name:'courseManage'})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<!-- 步骤条-->
|
||||
<div class="gva-search-box">
|
||||
<el-steps :active="active" finish-status="success" simple style="margin-bottom: 20px">
|
||||
<el-step title="课程信息" />
|
||||
<el-step title="添加章节" />
|
||||
</el-steps>
|
||||
</div>
|
||||
<!-- 表单区域-->
|
||||
<div class="gva-table-box">
|
||||
<!-- step1-->
|
||||
<el-form ref="ruleFormRef" v-if="active == 0" :model="form" :rules="rules" label-width="120px" style="width: 50%">
|
||||
<el-form-item label="课程名称" prop="name">
|
||||
<el-input placeholder="请输入课程名称" v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="课程分类" prop="subject">
|
||||
<el-select v-model="form.subject" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in subjectList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="封面">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
:action="`${path}/fileUploadAndDownload/upload`"
|
||||
:headers="{ 'x-token': userStore.token }"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
>
|
||||
<img v-if="form.cover" :src="form.cover" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="价格" prop="price">
|
||||
<el-input placeholder="请输入课程价格" type="number" v-model="form.price" />
|
||||
</el-form-item>
|
||||
<el-form-item label="课程简介">
|
||||
<el-input v-model="form.introduction" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="包含试听">
|
||||
<el-switch v-model="form.is_audition" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设置精品">
|
||||
<el-switch v-model="form.is_boutique" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="课程状态">
|
||||
<el-switch v-model="form.status" active-text="上架" inactive-text="下架" :active-value="1" :inactive-value="-1" />
|
||||
</el-form-item>
|
||||
<el-form-item style="display: none">
|
||||
<el-button type="primary" @click="submitForm(ruleFormRef)">
|
||||
Create
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- step2-->
|
||||
<div class="chapter-part" v-if="active == 1">
|
||||
<chapter-com @reload="getCourseInfo" :chapter_info="chapter_info" :course_id="course_id"/>
|
||||
</div>
|
||||
<div class="btn-box" style="text-align: right">
|
||||
<el-button v-if="active>0" @click="stepChangeFunc(1)">上一步</el-button>
|
||||
<el-button v-if="active<1" type="primary" @click="stepChangeFunc(2)">下一步</el-button>
|
||||
<el-button v-else type="primary" @click="onSubmit">完成</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.avatar-uploader .avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user