380 lines
13 KiB
Vue
380 lines
13 KiB
Vue
<script setup>
|
||
// 引入依赖
|
||
import _ from 'lodash'
|
||
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,is_boutique:-1,is_audition:-1})
|
||
const subjectParams = ref({
|
||
page:1,
|
||
pageSize:100,
|
||
})
|
||
const subjectList = ref([])
|
||
const subjectList_inject =ref([])
|
||
const rules = ref({
|
||
name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
|
||
course_category_id: [{ required: true, message: '请选择课程科目', trigger: 'change' }],
|
||
price: [{ required: true, message: '请输入课程价格', trigger: 'blur' }]
|
||
})
|
||
const ruleFormRef = ref(null)
|
||
const chapter_info = ref([])
|
||
const current_subject = ref('')
|
||
const isChange = ref(false)
|
||
// 生命周期
|
||
onMounted(() => {
|
||
course_id.value = route.params.course_id || 0
|
||
if(course_id.value) {
|
||
getCourseInfo()
|
||
}
|
||
getSubject()
|
||
})
|
||
provide('subjectList', subjectList_inject)
|
||
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
|
||
res.data.course.price /=100
|
||
form.value = res.data.course
|
||
}
|
||
}
|
||
function stepChangeFunc(type) {
|
||
switch (type) {
|
||
case 1: // 上一步
|
||
active.value -=1
|
||
break;
|
||
case 2: // 下一步
|
||
if(active.value == 0) { // 保存第一步的信息
|
||
// console.log(isChange.value)
|
||
if(isChange.value){
|
||
submitForm(ruleFormRef.value)
|
||
}
|
||
else{
|
||
active.value += 1
|
||
}
|
||
}
|
||
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() {
|
||
// form.value.course_category_id = subjectList.value.filter((item,i) => {
|
||
// return item.name === form.value.subject
|
||
// })[0].id
|
||
form.value.subject = custom.get_course_category_name(form.value.course_category_id)
|
||
form.value.price = parseFloat(form.value.price)<0?0:form.value.price
|
||
if(!checkFreeTestFromPrice()) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: '赠送价格不能超过课程价格!'
|
||
})
|
||
}
|
||
let params = {
|
||
step1:{
|
||
...form.value
|
||
}
|
||
}
|
||
params.step1.price = parseInt(parseFloat(params.step1.price)*100)
|
||
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)
|
||
// subjectList.value = custom.addTreeFormatSubject(res.data.records,'id')
|
||
subjectList_inject.value = custom.addTreeFormatSubject(_.cloneDeep(res.data.records),'name')
|
||
subjectList.value = custom.addTreeFormatSubject( _.cloneDeep(res.data.records),'id')
|
||
//
|
||
}
|
||
}
|
||
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
|
||
handlerChange()
|
||
}
|
||
function handleIntroSuccess(res) {
|
||
form.value.intro = res.data.file.url
|
||
handlerChange()
|
||
}
|
||
function beforeAvatarUpload(file) {
|
||
const isLt05M = file.size / 1024 / 1024 < 20
|
||
const isJPG = file.type.indexOf('image/') === -1
|
||
if (isJPG) {
|
||
ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
|
||
}
|
||
if (!isLt05M) {
|
||
ElMessage.error('上传头像图片大小不能超过 2M!')
|
||
}
|
||
return !isJPG && isLt05M
|
||
}
|
||
|
||
function handlerChange(e) {
|
||
// console.log(e)
|
||
isChange.value = true
|
||
}
|
||
function freeTestFunc() { // 免费试卷数量
|
||
if(!checkFreeTestFromPrice()) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: '赠送价格不能超过课程价格!'
|
||
})
|
||
}
|
||
handlerChange()
|
||
}
|
||
const STD_TEST_PRICE = 4.9
|
||
function checkFreeTestFromPrice() { // 检查免费试卷分数是否合理
|
||
let flag = true
|
||
if(form.value.free_test && form.value.price) {
|
||
if(parseInt(form.value.free_test) * STD_TEST_PRICE > parseFloat(form.value.price)) {
|
||
flag = false
|
||
}
|
||
}
|
||
return flag
|
||
}
|
||
// 审核相关
|
||
const verifyVisible = ref(false)
|
||
const verifyForm = ref({})
|
||
function checkCourseFunc() { // 审核
|
||
// console.log(form.value)
|
||
if(form.value.status === 2 || form.value.status === 4 ) { // 未审核 或 未通过
|
||
verifyForm.value.is_pass = -1
|
||
}
|
||
else{
|
||
verifyForm.value.is_pass = 1
|
||
}
|
||
verifyForm.is_pass = form.value.status
|
||
verifyVisible.value = true
|
||
}
|
||
function transferStateFromVerify(v_state) {
|
||
let state = 0
|
||
if(v_state === 1) { // 审核通过
|
||
// state = form.value.status
|
||
state = 3
|
||
}
|
||
else{ // 审核拒绝
|
||
state = 4
|
||
}
|
||
return state
|
||
}
|
||
function closeVerifyVisibleDialog() {
|
||
verifyVisible.value = false
|
||
}
|
||
async function enterVerifyDialog() { // 审核提交
|
||
const status = transferStateFromVerify(verifyForm.value.is_pass)
|
||
// console.log(status)
|
||
const res = await api.verifyCourse({
|
||
course_id:parseInt(course_id.value),
|
||
status
|
||
})
|
||
if(res.code === 0) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '操作成功!'
|
||
})
|
||
// closeVerifyVisibleDialog()
|
||
// getCourseList()
|
||
verifyVisible.value = false
|
||
getCourseInfo()
|
||
}
|
||
else{
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: res.msg
|
||
})
|
||
}
|
||
}
|
||
function goListFunc() {
|
||
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 disabled placeholder="请输入课程名称" v-model="form.name" @change="handlerChange" />
|
||
</el-form-item>
|
||
<el-form-item label="课程分类" prop="course_category_id">
|
||
<!-- <el-select disabled v-model="form.subject" placeholder="请选择" @change="handlerChange">-->
|
||
<!-- <el-option-->
|
||
<!-- v-for="item in subjectList"-->
|
||
<!-- :key="item.id"-->
|
||
<!-- :label="item.name"-->
|
||
<!-- :value="item.name"-->
|
||
<!-- />-->
|
||
<!-- </el-select>-->
|
||
<el-tree-select v-model="form.course_category_id" :data="subjectList" :disabled="true" :render-after-expand="false" />
|
||
</el-form-item>
|
||
<el-form-item label="封面">
|
||
<el-upload
|
||
disabled
|
||
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 disabled @change="handlerChange" placeholder="请输入课程价格" type="number" v-model="form.price" />
|
||
</el-form-item>
|
||
<el-form-item label="课程简介">
|
||
<!-- <el-input @change="handlerChange" v-model="form.intro" type="textarea" />-->
|
||
<el-upload
|
||
disabled
|
||
class="avatar-uploader"
|
||
:action="`${path}/fileUploadAndDownload/upload`"
|
||
:headers="{ 'x-token': userStore.token }"
|
||
:show-file-list="false"
|
||
:on-success="handleIntroSuccess"
|
||
:before-upload="beforeAvatarUpload"
|
||
>
|
||
<img v-if="form.intro" :src="form.intro" class="avatar" />
|
||
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="包含试听">-->
|
||
<!-- <el-switch @change="handlerChange" v-model="form.is_audition" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1" />-->
|
||
<!-- </el-form-item>-->
|
||
<el-form-item label="赠送试卷">
|
||
<el-input disabled @change="freeTestFunc" placeholder="请输入需要赠送的试卷份数，如：1" v-model="form.free_test" />
|
||
<div style="color:gray;font-size: 12px" v-if="form.free_test">总计{{(STD_TEST_PRICE*form.free_test).toFixed(2)}} 元</div>
|
||
</el-form-item>
|
||
<el-form-item label="设置精品">
|
||
<el-switch @change="handlerChange" v-model="form.is_boutique" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1" />
|
||
</el-form-item>
|
||
<el-form-item label="课程状态">
|
||
<el-switch disabled @change="handlerChange" 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" @click="stepChangeFunc(2)">下一步</el-button>
|
||
<el-button v-if="form.status === 2" type="primary" @click="checkCourseFunc">审核</el-button>
|
||
<el-button plain @click="goListFunc">返回课程列表</el-button>
|
||
</div>
|
||
</div>
|
||
<!-- 审核窗口-->
|
||
<el-dialog v-model="verifyVisible" :before-close="closeVerifyVisibleDialog" title="审核课程">
|
||
<el-form :model="verifyForm" label-width="80px">
|
||
<el-form-item label="是否通过" prop="is_free">
|
||
<el-switch v-model="verifyForm.is_pass" active-text="通过" inactive-text="拒绝" :active-value="1" :inactive-value="-1" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button size="small" @click="closeVerifyVisibleDialog">取 消</el-button>
|
||
<el-button size="small" type="primary" @click="enterVerifyDialog">确 定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<style scoped>
|
||
.avatar-uploader .avatar {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
}
|
||
</style>
|