新增 自主课程、资源库、资源库上传、资源库编辑

This commit is contained in:
18571350067 2021-12-28 16:15:15 +08:00
parent 9d2e158543
commit 36c9db5960
7 changed files with 249 additions and 110 deletions

View File

@ -4,8 +4,8 @@ const coursewareApi = {
add: '/courseManagement/xmCourseCourseware/addOrUpdate',
get: '/courseManagement/xmCourseCourseware/details',
del: 'courseManagement/xmCourseCourseware/delete',
classList: '/courseManagement/coursewareClassify/listPage'
classList: '/courseManagement/coursewareClassify/listPage',
resource:'/courseManagement/xmCourseCourseware/resource'
}
@ -45,4 +45,14 @@ export function coursewareDeatil(params) {
method: 'get',
params: params
})
}
// 资源库
export function resource(params) {
return request({
url: coursewareApi.resource,
method: 'get',
params: params
})
}

View File

@ -194,7 +194,7 @@ export default {
//
goback() {
this.$router.push({
path: '/course/CourseList',
path: '/course/CourseList/'+this.$route.query.type,
query: {
courseName: this.$route.query.courseName,
},

View File

@ -28,6 +28,7 @@
</a-card>
</template>
<script>
import { STable, SearchCom } from '@/components'
import { getCourseList, deleteCourse } from '@/api/course/course'
@ -42,10 +43,10 @@ export default {
data() {
return {
dictCourseTag: [],
queryParam: { courseName: this.$route.query.courseName || '', tag: [] },
queryParam: { courseName: this.$route.query.courseName || '', tag: [], type: '' },
queryOptions: [
{ type: 'input', placeholder: '课程名称', key: 'courseName' },
{ type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType' , options: [] },
{ type: 'select-dic-tree', placeholder: '请选择课程类别', key: 'courseType', options: [] },
{ type: 'select-dic', placeholder: '请选择标签', key: 'tag', mode: 'multiple', options: [] },
],
loadData: (parameter) => {
@ -66,6 +67,13 @@ export default {
created() {
this.dictionaryDropDown()
},
watch: {
$route(to, from) {
//to from
this.changeType(to.path)
this.$refs.table.refresh(true)
},
},
methods: {
//
dictionaryDropDown() {
@ -73,15 +81,13 @@ export default {
//
dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
console.log('课程类别----',res)
this.queryOptions[1].options = dictToTree(res.data, [], 0);
console.log('课程类别----', res)
this.queryOptions[1].options = dictToTree(res.data, [], 0)
})
//
dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
this.queryOptions[2].options = res.data
})
},
handleRefresh() {
@ -117,9 +123,27 @@ export default {
path: '/course/CourseAdd',
query: {
courseName: this.queryParam.courseName,
type: this.queryParam.type
},
})
},
//
changeType(path) {
var arr = []
if (path) {
arr = path.split('/')
} else {
arr = this.$route.path.split('/')
}
let str = arr[arr.length - 1]
this.queryParam.type = str
//
// str === 'sys' ? (this.power.add = 'project:sys:add') : (this.power.add = 'project:add')
// str === 'sys' ? (this.power.del = 'project:sys:del') : (this.power.del = 'project:del')
// str === 'sys' ? (this.power.edit = 'project:sys:edit') : (this.power.edit = 'project:edit')
// str === 'sys' ? (this.power.release = 'project:sys:release') : (this.power.release = 'project:release')
},
},
}
</script>

View File

@ -16,17 +16,20 @@
<a-input placeholder="课件名称" v-model="fileUpload.videoForm.name" style="width: 40%" />
</div>
<div style="margin-bottom: 30px; margin-top: 20px">
课件分类&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
课件分类&nbsp;
<a-tree-select v-model="fileUpload.videoForm.classify" style="width: 300px" :tree-data="coursewareClassfiy" placeholder="请选择课程分类"></a-tree-select>
<!-- <a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
{{ (i + 9).toString(36) + i }}
</a-select-option>
</a-select>
<a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
<!-- 课件分类弹框 -->
</a-select> -->
<!-- <a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button> -->
<!-- 课件分类弹框
<a-modal v-model="fileUpload.visible" title="课程分类管理" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
<div class="table-operator">
<a-button type="primary" icon="plus">新增分类</a-button>
<a-button type="primary" icon="plus" @click="$refs.classfiyForm.add">新增分类</a-button>
</div>
<s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :alert="false" :data="classfiy" :showPagination="false" :expandRowByClick="true">
<span slot="action" slot-scope="text, record">
@ -41,7 +44,7 @@
</template>
</span>
</s-table>
</a-modal>
</a-modal> -->
</div>
<div>课件大小&nbsp;
<a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
@ -66,38 +69,8 @@
<a-input placeholder="课件名称" v-model="fileUpload.textForm.name" style="width: 40%" />
</div>
<div style="margin-bottom: 30px; margin-top: 20px">
课件分类&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
{{ (i + 9).toString(36) + i }}
</a-select-option>
</a-select>
<a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button>
<!-- 课件分类弹框 -->
<!-- <a-modal v-model="fileUpload.visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
<s-table ref="table" :rowKey="(record) => record.id" :columns="fileUpload.columns" :alert="false" :data="loadData" :showPagination="false" :expandRowByClick="true">
<span slot="type" slot-scope="text, record">
<a-tag color="cyan" v-if="text === 0">
{{ record.type | typeFilter }}
</a-tag>
<a-tag color="blue" v-if="text === 1">
{{ record.type | typeFilter }}
</a-tag>
<a-tag color="purple" v-if="text === 2">
{{ record.type | typeFilter }}
</a-tag>
</span>
<span slot="action" slot-scope="text, record">
<template>
<a v-if="hasPerm('sys:menu:edit')" @click="$refs.menuForm.edit(record)">编辑</a>
<a-divider type="vertical" v-if="hasPerm('sys:menu:edit')" />
<a-popconfirm v-if="hasPerm('sys:menu:delete')" placement="topRight" title="删除本菜单与下级?" @confirm="() => handleDel(record)">
<a>删除</a>
</a-popconfirm>
</template>
</span>
</s-table>
</a-modal> -->
课件分类&nbsp;
<a-tree-select v-model="fileUpload.textForm.classify" style="width: 300px" :tree-data="coursewareClassfiy" placeholder="请选择课程分类"></a-tree-select>
</div>
<div>课件大小&nbsp;
<a-input-number :disabled="true" v-model="fileUpload.textForm.sizeStr" :min="0" />&nbsp;&nbsp;&nbsp; MB
@ -235,14 +208,18 @@ import storage from 'store'
import axios from 'axios'
import { ossUpload } from '@/api/sys/oss'
import { coursewareAdd, coursewareClassList } from '@/api/course/courseware'
import { listToTree } from '@/utils/util'
// import { listToTree } from '@/utils/util'
import { dictToTree } from '@/utils/util'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
const rootParentId = 0
// const rootParentId = 0
export default {
data() {
return {
treeData: [],
// treeData: [],
ifResources : this.$route.query.ifResources,
coursewareClassfiy: [],
courseware: {}, //
queryParam: { coursewareId: this.$route.query.coursewareId }, //
successOssFile: [],
@ -252,7 +229,7 @@ export default {
videoPath: [], //
fileUpload: {
visible: false,
tabkey: '1',
tabkey: this.$route.query.type ? this.$route.query.type : '1',
videoForm: {
//
sizeStr: '0', //
@ -274,24 +251,26 @@ export default {
sizeStr: '',
type: '4',
},
columns: [
{
title: '名称',
dataIndex: 'name',
key: 'name',
ellipsis: true,
},
{
title: '操作',
dataIndex: 'action',
width: '200px',
scopedSlots: { customRender: 'action' },
},
],
// columns: [
// {
// title: '',
// dataIndex: 'name',
// key: 'name',
// ellipsis: true,
// },
// {
// title: '',
// dataIndex: 'action',
// width: '200px',
// scopedSlots: { customRender: 'action' },
// },
// ],
}
},
components: { STable, listToTree },
components: { STable },
created() {
//
this.dictionaryDropDown()
//
if (this.queryParam.coursewareId) this.load()
},
@ -302,37 +281,44 @@ export default {
// this.classfiy()
},
//
classfiy() {
let parameter = {}
return coursewareClassList(Object.assign(parameter, this.queryParam)).then((res) => {
const list2tree1 = (list, parentId) => {
return list.filter((item) => {
//
// if (this.treeDataOne) this.treeDataOne.push(item.id)
if (item.parentid === parentId) {
item.children = list2tree1(list, item.id)
return true
}
return false
})
}
// const coursewareClassList = listToTree(res.data, [], rootParentId)
let coursewareClassList = list2tree1(res.data, 0)
console.log('coursewareClassList::::', coursewareClassList)
this.treeData = coursewareClassList
return coursewareClassList
dictionaryDropDown() {
//
dictionaryDropDown({ dictionaryCode: '0009' }).then((res) => {
//
this.coursewareClassfiy = dictToTree(res.data, [], 0)
})
},
//
// classfiy() {
// let parameter = {}
// return coursewareClassList(Object.assign(parameter, this.queryParam)).then((res) => {
// const list2tree1 = (list, parentId) => {
// return list.filter((item) => {
// //
// // if (this.treeDataOne) this.treeDataOne.push(item.id)
// if (item.parentid === parentId) {
// item.children = list2tree1(list, item.id)
// return true
// }
// return false
// })
// }
// // const coursewareClassList = listToTree(res.data, [], rootParentId)
// let coursewareClassList = list2tree1(res.data, 0)
// console.log('coursewareClassList::::', coursewareClassList)
// this.treeData = coursewareClassList
// return coursewareClassList
// })
// },
//
goback() {
this.$router.push({
path: '/course/CoursewareList',
query: {
id: this.$route.query.courseId,
},
})
if (this.$route.query.courseId) {
this.$router.push({ path: '/course/CoursewareList', query: { id: this.$route.query.courseId } })
} else {
this.$router.push({ path: '/course/Resource', query: {} })
}
},
//
@ -466,6 +452,9 @@ export default {
//
save() {
console.log("this.ifResources",this.ifResources);
//
this.successOssFile.forEach((item, index) => {
this.videoPath.push(item.url)
@ -519,8 +508,10 @@ export default {
//ID
this.fileUpload.videoForm.courseId = this.$route.query.courseId
this.fileUpload.videoForm.videoPath = this.videoPath
this.fileUpload.videoForm.ifResources = this.$route.query.ifResources || 0
let form = {}
form = this.fileUpload.videoForm
console.log('FORM', form)
return form
},
@ -536,6 +527,7 @@ export default {
this.fileUpload.textForm.type = this.fileUpload.tabkey
this.fileUpload.textForm.videoPath = this.videoPath
console.log('aaaaaa', this.fileUpload.textForm)
this.fileUpload.textForm.ifResources = this.$route.query.ifResources || 0
let form = {}
form = this.fileUpload.textForm
return form
@ -582,6 +574,8 @@ export default {
let parameter = {}
coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
this.courseware = res.data
console.log('加载数据了')
console.log('courseware:', this.courseware)
//
this.fileUpload.disabled = true
@ -593,25 +587,32 @@ export default {
//
if (this.courseware.type == '1' || this.courseware.type == '2') {
this.parentTabKey = '1'
//
this.courseware.videoList.forEach((element) => {
let successOssFile_ = {}
successOssFile_['id'] = element.id
successOssFile_['uid'] = element.id
successOssFile_['uuid'] = element.id
successOssFile_['code'] = 200
successOssFile_['name'] = element.name
successOssFile_['url'] = element.path
successOssFile_['size'] = element.size
this.successOssFile.push(successOssFile_)
})
if (this.courseware.type == '1') {
this.fileUpload.tabkey = '1'
this.fileUpload.videoForm = this.courseware
this.fileUpload.videoForm.ifResources = this.ifResources || 0;
this.fileUpload.videoForm.disabled = false
this.courseware.videoList.forEach((element) => {
let successOssFile_ = {}
successOssFile_['id'] = element.id
successOssFile_['uid'] = element.id
successOssFile_['uuid'] = element.id
successOssFile_['code'] = 200
successOssFile_['name'] = element.name
successOssFile_['url'] = element.path
successOssFile_['size'] = element.size
this.successOssFile.push(successOssFile_)
})
console.log('11------', this.successOssFile)
} else {
this.fileUpload.tabkey = '2'
console.log("1111111",this.fileUpload.videoForm);
}
if (this.courseware.type == '2') {
this.fileUpload.tabkey = this.courseware.type
this.fileUpload.textForm = this.courseware
this.fileUpload.textForm.ifResources = this.ifResources || 0;
this.fileUpload.textForm.disabled = false
}
}

View File

@ -64,8 +64,8 @@ export default {
title: '课件分类',
width: '300px',
align: 'center',
dataIndex: 'coursewareClassifyId',
key: 'coursewareClassifyId',
dataIndex: 'classifyName',
key: 'classifyName',
},
{ title: '课时/分', width: '160px', align: 'center', dataIndex: 'duration', key: 'duration' },
{ title: '课件大小(MB)', width: '160px', align: 'center', dataIndex: 'sizeStr', key: 'sizeStr' },
@ -80,7 +80,7 @@ export default {
},
//
coursewareAdd() {
this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { courseId: this.$route.query.id } })
this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: { courseId: this.$route.query.id, ifResources: 0 } })
},
//

View File

@ -1,7 +1,7 @@
<template>
<a-card :bordered="false" title="课件预览">
<template slot="extra">
<h4 style="margin-right: 15px; display:inline-block">课程类别待填充</h4>
<h4 style="margin-right: 15px; display:inline-block">{{courseware.classifyName}}</h4>
<a-button v-if="!!!coursewareId" size="small" @click="goback">返回</a-button>
</template>

View File

@ -0,0 +1,104 @@
<template>
<a-card :bordered="false" title="资源库">
<div class="table-page-search-wrapper">
<SearchCom :form="queryParam" :list="queryOptions" @search="handleRefresh" @reset="
() => {
;(queryParam = {}), handleRefresh()
}
"></SearchCom>
<div style="width: 100%; height: 32px; margin-bottom: 8px">
<a-button type="primary" @click="coursewareAdd">上传资料</a-button>
</div>
</div>
<s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" :pageNum="Number(this.$route.query.PageNum) || 1">
<template slot="action" slot-scope="text, record">
<a href="javascript:;" @click="dow(record)">下载</a>
<a-divider type="vertical" />
<a href="javascript:;" @click="edit(record)">编辑</a>
<a-divider type="vertical" />
<a-popconfirm title="是否删除?" @confirm="() => del(record)">
<a href="javascript:;">删除</a>
</a-popconfirm>
</template>
</s-table>
</a-card>
</template>
<script>
import { STable, SearchCom } from '@/components'
import { resource, deleteCourseware } from '@/api/course/courseware'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { dictToTree } from '@/utils/util'
export default {
components: {
STable,
SearchCom,
},
data() {
return {
queryParam: { classify: '' },
queryOptions: [
{ type: 'select-dic-tree', placeholder: '课件类别', key: 'classify', options: [] },
],
loadData: (parameter) => {
return resource(Object.assign(parameter, this.queryParam)).then((res) => {
return res
})
},
columns: [
{ title: '资料名称', width: '160px', align: 'center', dataIndex: 'name', key: 'name' },
{ title: '资料分类', width: 'auto', align: 'center', dataIndex: 'classifyName', key: 'classifyName' },
{ title: '资料大小', width: 'auto', align: 'center', dataIndex: 'sizeStr', key: 'sizeStr' },
{ title: '资料类型', width: '160px', align: 'center', dataIndex: 'typeName', key: 'typeName' },
{ title: '操作', key: 'operation', width: '300px', align: 'center', scopedSlots: { customRender: 'action' } },
],
}
},
created() {
this.dictionaryDropDown()
},
methods: {
//
dictionaryDropDown() {
//
dictionaryDropDown({ dictionaryCode: '0009' }).then((res) => {
console.log('课件类别----', res)
this.queryOptions[0].options = dictToTree(res.data, [], 0)
})
},
handleRefresh() {
this.$refs.table.refresh(true)
},
//
coursewareAdd() {
this.$router.push({ path: '/course/CoursewareAddOrUpdate', query: {ifResources: 1} })
},
//
edit(record) {
this.$router.push({
path: '/course/CoursewareAddOrUpdate',
query: { coursewareId: record.id, type: record.type ,ifResources: 1},
})
},
//
dow() {},
//
del(record) {
deleteCourseware({ id: record.id }).then((res) => {
if (res.code == 200) {
this.$refs.table.refresh(true)
this.$message.success('删除成功!')
} else {
this.$message.error('删除失败!')
}
})
},
},
}
</script>