|
|
|
@ -10,9 +10,6 @@ export default {
|
|
|
|
|
// 引入依赖
|
|
|
|
|
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,watch } from 'vue'
|
|
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
|
@ -23,31 +20,13 @@ const userStore = useUserStore()
|
|
|
|
|
import mediaCom from '../components/mediaPool.vue'
|
|
|
|
|
import exercisesCom from '../components/exercisesPool.vue'
|
|
|
|
|
import examCom from '../components/examinationPool.vue'
|
|
|
|
|
import viewExamCom from '../components/viewExamination.vue'
|
|
|
|
|
|
|
|
|
|
const props = defineProps(['course_id','chapter_info'])
|
|
|
|
|
const emit = defineEmits(['reload'])
|
|
|
|
|
import UploadCommon from '@/components/upload/common.vue'
|
|
|
|
|
// 变量
|
|
|
|
|
const is_sub = ref(-1)
|
|
|
|
|
const dialogChapterVisible = ref(false)
|
|
|
|
|
// const dialogChapterTitle = ref('')
|
|
|
|
|
const chapterForm = ref({pid:0,sort:0})
|
|
|
|
|
const chapterRules = ref({
|
|
|
|
|
name: [{ required: true, message: '请输入章节名称', trigger: 'blur' }]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const chapter_data = ref([])
|
|
|
|
|
const dialogChapterChildVisible = ref(false)
|
|
|
|
|
const chapterChildForm = ref({sort:0})
|
|
|
|
|
const chapterChildRules = ref({
|
|
|
|
|
name: [{ required: true, message: '请输入章节名称', trigger: 'blur' }],
|
|
|
|
|
price: [{ required: true, message: '请输入章节价格', trigger: 'blur' }]
|
|
|
|
|
})
|
|
|
|
|
const dialogChapterTitle = ref('')
|
|
|
|
|
const dialogChapterChildTitle = ref('')
|
|
|
|
|
// const path = ref(import.meta.env.VITE_BASE_API)
|
|
|
|
|
const imageCommon = ref('')
|
|
|
|
|
// const current_chapter = ref({}) // 当前操作的大章节
|
|
|
|
|
// const current_chapter_child = ref({}) // 当前操作的子章节
|
|
|
|
|
// const chapter_index = ref(0)
|
|
|
|
|
// 生命周期
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
chapter_data.value = props.chapter_info
|
|
|
|
@ -55,130 +34,31 @@ onMounted(() => {
|
|
|
|
|
watch(props,(old, newProps) => {
|
|
|
|
|
chapter_data.value = props.chapter_info
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 方法
|
|
|
|
|
function addChapterFunc() { // 添加大章节
|
|
|
|
|
chapterForm.value = {pid:0,sort:0}
|
|
|
|
|
dialogChapterVisible.value = true
|
|
|
|
|
dialogChapterTitle.value = '添加大章节'
|
|
|
|
|
function indexMethod(index) {
|
|
|
|
|
return index +=1
|
|
|
|
|
}
|
|
|
|
|
async function deleteChapterFunc(item) { //删除大章节
|
|
|
|
|
is_sub.value = -1
|
|
|
|
|
delFunc(item.course_chapter_id)
|
|
|
|
|
// 视频预览相关
|
|
|
|
|
const videoDialogTitle = ref('')
|
|
|
|
|
const dialogVideoVisible = ref(false)
|
|
|
|
|
const video_url = ref(null)
|
|
|
|
|
function viewFunc(row,type) { // 查看课件/试卷
|
|
|
|
|
if(type ===1) { // 课件
|
|
|
|
|
videoDialogTitle.value = '章节:'+row.name
|
|
|
|
|
// console.log(row)
|
|
|
|
|
dialogVideoVisible.value = true
|
|
|
|
|
video_url.value = row.url
|
|
|
|
|
}
|
|
|
|
|
function delFunc(id) {
|
|
|
|
|
ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
|
|
|
|
confirmButtonText: '确定',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
})
|
|
|
|
|
.then(async() => {
|
|
|
|
|
const res = await api.delChapter({
|
|
|
|
|
ids:[id],
|
|
|
|
|
course_id:parseInt(props.course_id),
|
|
|
|
|
sub:parseInt(is_sub.value)
|
|
|
|
|
})
|
|
|
|
|
if (res.code === 0) {
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '删除成功!'
|
|
|
|
|
})
|
|
|
|
|
emit('reload')
|
|
|
|
|
else{ // 试卷
|
|
|
|
|
// dialogFormVisible.value = true
|
|
|
|
|
}
|
|
|
|
|
},() => {
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
function editChapterFunc(item) { //编辑大章节
|
|
|
|
|
chapterForm.value = item
|
|
|
|
|
dialogChapterVisible.value = true
|
|
|
|
|
dialogChapterTitle.value = '编辑大章节'
|
|
|
|
|
function closeVideoDialog() {
|
|
|
|
|
dialogVideoVisible.value = false
|
|
|
|
|
}
|
|
|
|
|
function closeChapterDialog() {
|
|
|
|
|
dialogChapterVisible.value = false
|
|
|
|
|
}
|
|
|
|
|
function closeChapterChildDialog() {
|
|
|
|
|
dialogChapterChildVisible.value = false
|
|
|
|
|
chapterChildForm.value = {sort:0}
|
|
|
|
|
}
|
|
|
|
|
async function enterChapterDialog() { // 提交大章节
|
|
|
|
|
// return
|
|
|
|
|
chapterForm.value.sort = parseInt(chapterForm.value.sort)
|
|
|
|
|
|
|
|
|
|
const params = {
|
|
|
|
|
...chapterForm.value
|
|
|
|
|
}
|
|
|
|
|
let func_name = ''
|
|
|
|
|
if(chapterForm.value.course_chapter_id) { // 编辑
|
|
|
|
|
func_name = 'editChapter'
|
|
|
|
|
params.course_id = parseInt(props.course_id)
|
|
|
|
|
}
|
|
|
|
|
else{ // 新增
|
|
|
|
|
func_name = 'addChapter'
|
|
|
|
|
params.course_id = parseInt(props.course_id)
|
|
|
|
|
}
|
|
|
|
|
const res = await api[func_name](params)
|
|
|
|
|
if(res.code === 0) {
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '操作成功!'
|
|
|
|
|
})
|
|
|
|
|
closeChapterDialog()
|
|
|
|
|
emit('reload')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function addChapterchildFunc(item) { // 打开新增子章节窗口
|
|
|
|
|
dialogChapterChildTitle.value = '新增子章节'
|
|
|
|
|
// current_chapter.value = item
|
|
|
|
|
chapterChildForm.value = {pid:item.course_chapter_id,sort:0}
|
|
|
|
|
dialogChapterChildVisible.value = true
|
|
|
|
|
}
|
|
|
|
|
function editChapterChildFunc(item,main_index) { // 打开编辑子章节窗口
|
|
|
|
|
dialogChapterChildTitle.value = '编辑子章节'
|
|
|
|
|
// current_chapter.value = chapter_data.value[main_index]
|
|
|
|
|
// item.exam_ids =item.exam_id?[item.exam_id]: []
|
|
|
|
|
item.examination_id = item.exam_id
|
|
|
|
|
chapterChildForm.value = _.cloneDeep(item)
|
|
|
|
|
chapterChildForm.value.price /= 100
|
|
|
|
|
dialogChapterChildVisible.value = true
|
|
|
|
|
}
|
|
|
|
|
function deleteChapterChildFunc(item) { // 删除子章节
|
|
|
|
|
is_sub.value = 1
|
|
|
|
|
delFunc(item.course_subsection_id)
|
|
|
|
|
}
|
|
|
|
|
async function enterChapterChildDialog() { // 提交小章节
|
|
|
|
|
chapterChildForm.value.sort = parseInt(chapterChildForm.value.sort)
|
|
|
|
|
// chapterChildForm.value.price = parseInt(chapterChildForm.value.price*100)
|
|
|
|
|
chapterChildForm.value.price = chapterChildForm.value.price*100
|
|
|
|
|
const params = {
|
|
|
|
|
...chapterChildForm.value
|
|
|
|
|
}
|
|
|
|
|
let func_name = ''
|
|
|
|
|
// return
|
|
|
|
|
if(chapterChildForm.value.course_subsection_id){ // 编辑
|
|
|
|
|
func_name = 'editChapter'
|
|
|
|
|
params.course_id = parseInt(props.course_id)
|
|
|
|
|
}
|
|
|
|
|
else{ // 新增
|
|
|
|
|
func_name = 'addChapter'
|
|
|
|
|
params.course_id = parseInt(props.course_id)
|
|
|
|
|
}
|
|
|
|
|
const res = await api[func_name](params)
|
|
|
|
|
if(res.code === 0) {
|
|
|
|
|
ElMessage({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: '操作成功!'
|
|
|
|
|
})
|
|
|
|
|
closeChapterChildDialog()
|
|
|
|
|
emit('reload')
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function getFilePath(file) { // 获取上传文件之后的地址
|
|
|
|
|
chapterChildForm.value.url = file.url
|
|
|
|
|
chapterChildForm.value.url_name = file.url_name
|
|
|
|
|
}
|
|
|
|
|
function addExamFunc(data) {
|
|
|
|
|
chapterChildForm.value.examination_id = data
|
|
|
|
|
chapterChildForm.value.exam_id = data
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
@ -189,146 +69,46 @@ function addExamFunc(data) {
|
|
|
|
|
<div class="lb-card" v-for="(item,i) in chapter_data">
|
|
|
|
|
<!--大章节标题-->
|
|
|
|
|
<div class="lb-title-part">
|
|
|
|
|
<div class="lbt-title">{{item.name}}</div>
|
|
|
|
|
<!-- <div class="lbt-btn-box">-->
|
|
|
|
|
<!-- <el-button-->
|
|
|
|
|
<!-- icon="edit"-->
|
|
|
|
|
<!-- size="small"-->
|
|
|
|
|
<!-- type="primary"-->
|
|
|
|
|
<!-- link-->
|
|
|
|
|
<!-- @click="editChapterFunc(item)"-->
|
|
|
|
|
<!-- />-->
|
|
|
|
|
<!-- <el-button-->
|
|
|
|
|
<!-- icon="plus"-->
|
|
|
|
|
<!-- size="small"-->
|
|
|
|
|
<!-- type="primary"-->
|
|
|
|
|
<!-- link-->
|
|
|
|
|
<!-- @click="addChapterchildFunc(item)"-->
|
|
|
|
|
<!-- />-->
|
|
|
|
|
<!-- <el-button-->
|
|
|
|
|
<!-- icon="delete"-->
|
|
|
|
|
<!-- size="small"-->
|
|
|
|
|
<!-- type="primary"-->
|
|
|
|
|
<!-- link-->
|
|
|
|
|
<!-- @click="deleteChapterFunc(item)"-->
|
|
|
|
|
<!-- />-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<div class="lbt-title" style="margin-bottom: 10px">{{item.name}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!--表格数据-->
|
|
|
|
|
<div class="lb-table-part" style="margin-bottom: 20px">
|
|
|
|
|
<el-table :data="item.course_sub" >
|
|
|
|
|
<el-table border :data="item.course_sub" >
|
|
|
|
|
<el-table-column align="left" type="index" :index="indexMethod" label="序号" width="60" />
|
|
|
|
|
<el-table-column align="left" label="ID" width="60" prop="course_subsection_id" />
|
|
|
|
|
<el-table-column align="left" label="子章节名称" min-width="60" prop="name" />
|
|
|
|
|
<el-table-column align="left" label="课件名称" min-width="60" prop="url">
|
|
|
|
|
<template #default="scope">{{scope.row.url?scope.row.url:'未上传课件'}}</template>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<div class="view-css" v-if="scope.row.url" @click="viewFunc(scope.row,1)">点击查看</div>
|
|
|
|
|
<div v-else>未上传课件</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
|
|
<el-table-column align="left" label="章节试卷" min-width="60" prop="exam_id">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
{{scope.row.exam_id === 0?'未添加习题':scope.row.exam_id}}
|
|
|
|
|
<viewExamCom v-if="scope.row.exam_id" :exam_id = 'scope.row.exam_id' :chaper_name="scope.row.name" ></viewExamCom>
|
|
|
|
|
<div v-else>未绑定试卷</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column align="left" label="章节价格" min-width="60" prop="price">
|
|
|
|
|
<template #default="scope">{{scope.row.price/100}}</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column align="left" label="是否免费" min-width="60">-->
|
|
|
|
|
<!-- <template #default="scope">-->
|
|
|
|
|
<!-- {{scope.row.is_free === 1? '是':'否'}}-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- </el-table-column>-->
|
|
|
|
|
<el-table-column align="left" label="是否展示" min-width="60">
|
|
|
|
|
<el-table-column align="left" label="是否免费" min-width="60">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
{{scope.row.is_show === 1? '是':'否'}}
|
|
|
|
|
{{scope.row.is_free === 1? '是':'否'}}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<!-- <el-table-column align="left" label="操作" min-width="60">-->
|
|
|
|
|
<!-- <template #default="scope">-->
|
|
|
|
|
<!-- <el-button-->
|
|
|
|
|
<!-- icon="edit"-->
|
|
|
|
|
<!-- size="small"-->
|
|
|
|
|
<!-- type="primary"-->
|
|
|
|
|
<!-- link-->
|
|
|
|
|
<!-- @click="editChapterChildFunc(scope.row)"-->
|
|
|
|
|
<!-- >编辑</el-button>-->
|
|
|
|
|
<!-- <el-button-->
|
|
|
|
|
<!-- icon="delete"-->
|
|
|
|
|
<!-- size="small"-->
|
|
|
|
|
<!-- type="primary"-->
|
|
|
|
|
<!-- link-->
|
|
|
|
|
<!-- @click="deleteChapterChildFunc(scope.row)"-->
|
|
|
|
|
<!-- >删除</el-button>-->
|
|
|
|
|
<!-- </template>-->
|
|
|
|
|
<!-- </el-table-column>-->
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 添加/编辑 大章节窗口-->
|
|
|
|
|
<el-dialog v-model="dialogChapterVisible" :before-close="closeChapterDialog" :title="dialogChapterTitle">
|
|
|
|
|
<el-form ref="apiForm" :model="chapterForm" :rules="chapterRules" label-width="80px">
|
|
|
|
|
<el-form-item label="章节名称" prop="name">
|
|
|
|
|
<el-input v-model="chapterForm.name" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="章节排序" prop="sort">
|
|
|
|
|
<el-input v-model="chapterForm.sort" placeholder="输入整数,排序越小越靠前展示" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="是否免费" prop="is_free">
|
|
|
|
|
<el-switch v-model="chapterForm.is_free" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- <el-form-item label="是否展示" prop="is_show">-->
|
|
|
|
|
<!-- <el-switch v-model="chapterForm.is_show" 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="closeChapterDialog">取 消</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="enterChapterDialog">确 定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- 添加小章节窗口-->
|
|
|
|
|
<el-dialog v-model="dialogChapterChildVisible" :before-close="closeChapterChildDialog" :title="dialogChapterChildTitle">
|
|
|
|
|
<el-form ref="apiForm" :model="chapterChildForm" :rules="chapterChildRules" label-width="80px">
|
|
|
|
|
<el-form-item label="章节名称" prop="name">
|
|
|
|
|
<el-input v-model="chapterChildForm.name" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="上传课件">
|
|
|
|
|
<!-- <upload-common-->
|
|
|
|
|
<!-- v-model:imageCommon="imageCommon"-->
|
|
|
|
|
<!-- class="upload-btn"-->
|
|
|
|
|
<!-- @on-success="getFilePath"-->
|
|
|
|
|
<!-- />-->
|
|
|
|
|
<media-com @on-success="getFilePath" :url_name="chapterChildForm.url_name" />
|
|
|
|
|
<!-- <el-button size="small" type="primary" @click="openExercisesWinFunc">点击上传</el-button>-->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="试卷管理">
|
|
|
|
|
<!-- <el-button size="small" @click="chooseChapterChildExercises">添加习题</el-button>-->
|
|
|
|
|
<exam-com @addFunc="addExamFunc" :seleted_id="chapterChildForm.exam_id" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="章节价格" prop="price">
|
|
|
|
|
<el-input type="number" v-model="chapterChildForm.price" placeholder="输入章节价格" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="章节排序" prop="sort">
|
|
|
|
|
<el-input v-model="chapterChildForm.sort" placeholder="输入整数,排序越小越靠前展示" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="是否免费" prop="is_free">
|
|
|
|
|
<el-switch v-model="chapterChildForm.is_free" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- <el-form-item label="是否展示" prop="is_show">-->
|
|
|
|
|
<!-- <el-switch v-model="chapterChildForm.is_show" 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="closeChapterChildDialog">取 消</el-button>
|
|
|
|
|
<el-button size="small" type="primary" @click="enterChapterChildDialog">确 定</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<el-dialog v-model="dialogVideoVisible" :before-close="closeVideoDialog" :title="videoDialogTitle">
|
|
|
|
|
<video style="width: 100%" :src="video_url" controls></video>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<style scoped>
|
|
|
|
|
.view-css{
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.lbt-title{
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|