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

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', add: '/courseManagement/xmCourseCourseware/addOrUpdate',
get: '/courseManagement/xmCourseCourseware/details', get: '/courseManagement/xmCourseCourseware/details',
del: 'courseManagement/xmCourseCourseware/delete', del: 'courseManagement/xmCourseCourseware/delete',
classList: '/courseManagement/coursewareClassify/listPage' classList: '/courseManagement/coursewareClassify/listPage',
resource:'/courseManagement/xmCourseCourseware/resource'
} }
@ -46,3 +46,13 @@ export function coursewareDeatil(params) {
params: params params: params
}) })
} }
// 资源库
export function resource(params) {
return request({
url: coursewareApi.resource,
method: 'get',
params: params
})
}

View File

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

View File

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

View File

@ -16,17 +16,20 @@
<a-input placeholder="课件名称" v-model="fileUpload.videoForm.name" style="width: 40%" /> <a-input placeholder="课件名称" v-model="fileUpload.videoForm.name" style="width: 40%" />
</div> </div>
<div style="margin-bottom: 30px; margin-top: 20px"> <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"> <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
{{ (i + 9).toString(36) + i }} {{ (i + 9).toString(36) + i }}
</a-select-option> </a-select-option>
</a-select> </a-select> -->
<a-button type="primary" @click="showModal" style="margin-left: 20px"> 添加分类 </a-button> <!-- <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' } }"> <a-modal v-model="fileUpload.visible" title="课程分类管理" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
<div class="table-operator"> <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> </div>
<s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :alert="false" :data="classfiy" :showPagination="false" :expandRowByClick="true"> <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"> <span slot="action" slot-scope="text, record">
@ -41,7 +44,7 @@
</template> </template>
</span> </span>
</s-table> </s-table>
</a-modal> </a-modal> -->
</div> </div>
<div>课件大小&nbsp; <div>课件大小&nbsp;
<a-input :disabled="true" :value="fileUpload.videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB <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%" /> <a-input placeholder="课件名称" v-model="fileUpload.textForm.name" style="width: 40%" />
</div> </div>
<div style="margin-bottom: 30px; margin-top: 20px"> <div style="margin-bottom: 30px; margin-top: 20px">
课件分类&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类"> 课件分类&nbsp;
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i"> <a-tree-select v-model="fileUpload.textForm.classify" style="width: 300px" :tree-data="coursewareClassfiy" placeholder="请选择课程分类"></a-tree-select>
{{ (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> -->
</div> </div>
<div>课件大小&nbsp; <div>课件大小&nbsp;
<a-input-number :disabled="true" v-model="fileUpload.textForm.sizeStr" :min="0" />&nbsp;&nbsp;&nbsp; MB <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 axios from 'axios'
import { ossUpload } from '@/api/sys/oss' import { ossUpload } from '@/api/sys/oss'
import { coursewareAdd, coursewareClassList } from '@/api/course/courseware' 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 { export default {
data() { data() {
return { return {
treeData: [], // treeData: [],
ifResources : this.$route.query.ifResources,
coursewareClassfiy: [],
courseware: {}, // courseware: {}, //
queryParam: { coursewareId: this.$route.query.coursewareId }, // queryParam: { coursewareId: this.$route.query.coursewareId }, //
successOssFile: [], successOssFile: [],
@ -252,7 +229,7 @@ export default {
videoPath: [], // videoPath: [], //
fileUpload: { fileUpload: {
visible: false, visible: false,
tabkey: '1', tabkey: this.$route.query.type ? this.$route.query.type : '1',
videoForm: { videoForm: {
// //
sizeStr: '0', // sizeStr: '0', //
@ -274,24 +251,26 @@ export default {
sizeStr: '', sizeStr: '',
type: '4', type: '4',
}, },
columns: [ // columns: [
{ // {
title: '名称', // title: '',
dataIndex: 'name', // dataIndex: 'name',
key: 'name', // key: 'name',
ellipsis: true, // ellipsis: true,
}, // },
{ // {
title: '操作', // title: '',
dataIndex: 'action', // dataIndex: 'action',
width: '200px', // width: '200px',
scopedSlots: { customRender: 'action' }, // scopedSlots: { customRender: 'action' },
}, // },
], // ],
} }
}, },
components: { STable, listToTree }, components: { STable },
created() { created() {
//
this.dictionaryDropDown()
// //
if (this.queryParam.coursewareId) this.load() if (this.queryParam.coursewareId) this.load()
}, },
@ -302,37 +281,44 @@ export default {
// this.classfiy() // this.classfiy()
}, },
// dictionaryDropDown() {
classfiy() { //
let parameter = {} dictionaryDropDown({ dictionaryCode: '0009' }).then((res) => {
return coursewareClassList(Object.assign(parameter, this.queryParam)).then((res) => { //
const list2tree1 = (list, parentId) => { this.coursewareClassfiy = dictToTree(res.data, [], 0)
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
}) })
}, },
//
// 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() { goback() {
this.$router.push({ if (this.$route.query.courseId) {
path: '/course/CoursewareList', this.$router.push({ path: '/course/CoursewareList', query: { id: this.$route.query.courseId } })
query: { } else {
id: this.$route.query.courseId, this.$router.push({ path: '/course/Resource', query: {} })
}, }
})
}, },
// //
@ -466,6 +452,9 @@ export default {
// //
save() { save() {
console.log("this.ifResources",this.ifResources);
// //
this.successOssFile.forEach((item, index) => { this.successOssFile.forEach((item, index) => {
this.videoPath.push(item.url) this.videoPath.push(item.url)
@ -519,8 +508,10 @@ export default {
//ID //ID
this.fileUpload.videoForm.courseId = this.$route.query.courseId this.fileUpload.videoForm.courseId = this.$route.query.courseId
this.fileUpload.videoForm.videoPath = this.videoPath this.fileUpload.videoForm.videoPath = this.videoPath
this.fileUpload.videoForm.ifResources = this.$route.query.ifResources || 0
let form = {} let form = {}
form = this.fileUpload.videoForm form = this.fileUpload.videoForm
console.log('FORM', form)
return form return form
}, },
@ -536,6 +527,7 @@ export default {
this.fileUpload.textForm.type = this.fileUpload.tabkey this.fileUpload.textForm.type = this.fileUpload.tabkey
this.fileUpload.textForm.videoPath = this.videoPath this.fileUpload.textForm.videoPath = this.videoPath
console.log('aaaaaa', this.fileUpload.textForm) console.log('aaaaaa', this.fileUpload.textForm)
this.fileUpload.textForm.ifResources = this.$route.query.ifResources || 0
let form = {} let form = {}
form = this.fileUpload.textForm form = this.fileUpload.textForm
return form return form
@ -582,6 +574,8 @@ export default {
let parameter = {} let parameter = {}
coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => { coursewareDeatil(Object.assign(parameter, this.queryParam)).then((res) => {
this.courseware = res.data this.courseware = res.data
console.log('加载数据了')
console.log('courseware:', this.courseware)
// //
this.fileUpload.disabled = true this.fileUpload.disabled = true
@ -593,10 +587,8 @@ export default {
// //
if (this.courseware.type == '1' || this.courseware.type == '2') { if (this.courseware.type == '1' || this.courseware.type == '2') {
this.parentTabKey = '1' this.parentTabKey = '1'
if (this.courseware.type == '1') {
this.fileUpload.tabkey = '1' //
this.fileUpload.videoForm = this.courseware
this.fileUpload.videoForm.disabled = false
this.courseware.videoList.forEach((element) => { this.courseware.videoList.forEach((element) => {
let successOssFile_ = {} let successOssFile_ = {}
successOssFile_['id'] = element.id successOssFile_['id'] = element.id
@ -608,10 +600,19 @@ export default {
successOssFile_['size'] = element.size successOssFile_['size'] = element.size
this.successOssFile.push(successOssFile_) this.successOssFile.push(successOssFile_)
}) })
console.log('11------', this.successOssFile)
} else { if (this.courseware.type == '1') {
this.fileUpload.tabkey = '2' this.fileUpload.tabkey = '1'
this.fileUpload.videoForm = this.courseware
this.fileUpload.videoForm.ifResources = this.ifResources || 0;
this.fileUpload.videoForm.disabled = false
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 = this.courseware
this.fileUpload.textForm.ifResources = this.ifResources || 0;
this.fileUpload.textForm.disabled = false this.fileUpload.textForm.disabled = false
} }
} }

View File

@ -64,8 +64,8 @@ export default {
title: '课件分类', title: '课件分类',
width: '300px', width: '300px',
align: 'center', align: 'center',
dataIndex: 'coursewareClassifyId', dataIndex: 'classifyName',
key: 'coursewareClassifyId', key: 'classifyName',
}, },
{ title: '课时/分', width: '160px', align: 'center', dataIndex: 'duration', key: 'duration' }, { title: '课时/分', width: '160px', align: 'center', dataIndex: 'duration', key: 'duration' },
{ title: '课件大小(MB)', width: '160px', align: 'center', dataIndex: 'sizeStr', key: 'sizeStr' }, { title: '课件大小(MB)', width: '160px', align: 'center', dataIndex: 'sizeStr', key: 'sizeStr' },
@ -80,7 +80,7 @@ export default {
}, },
// //
coursewareAdd() { 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> <template>
<a-card :bordered="false" title="课件预览"> <a-card :bordered="false" title="课件预览">
<template slot="extra"> <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> <a-button v-if="!!!coursewareId" size="small" @click="goback">返回</a-button>
</template> </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>