课件详情等

This commit is contained in:
18571350067 2021-11-26 16:01:51 +08:00
parent 646123cbbe
commit 6ed7aadbf7
6 changed files with 353 additions and 198 deletions

View File

@ -1,9 +1,10 @@
<template> <template>
<a-card :bordered="false" title="系統新增"> <a-card :bordered="false" title="系統新增">
<template slot="extra">
<a-button type="primary" @click="goback">返回</a-button>
<a-button type="primary" @click="save">保存</a-button>
</template>
<a-form-model :model="form"> <a-form-model :model="form">
<div style="width: 100%; height: 40px; margin-bottom: 8px; margin-left: 80%">
<a-button type="primary" @click="goback">返回</a-button>
</div>
<a-row> <a-row>
<!-- 课程名称 --> <!-- 课程名称 -->
<a-col :span="18" :offset="3"> <a-col :span="18" :offset="3">
@ -19,7 +20,9 @@
<a-col :span="9" :offset="3"> <a-col :span="9" :offset="3">
<a-form-model-item label="课程类别" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }"> <a-form-model-item label="课程类别" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
<a-select v-model="form.courseType" placeholder="--请选择--"> <a-select v-model="form.courseType" placeholder="--请选择--">
<a-select-option v-for="(item,index) in dictCourseType" :key="index" :value="item.value"> {{item.name}} </a-select-option> <a-select-option v-for="(item, index) in dictCourseType" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
@ -50,7 +53,9 @@
<a-col :span="9" :offset="3"> <a-col :span="9" :offset="3">
<a-form-model-item label="所属行业" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }"> <a-form-model-item label="所属行业" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
<a-select v-model="form.industryInvolved" placeholder="--请选择--"> <a-select v-model="form.industryInvolved" placeholder="--请选择--">
<a-select-option v-for="(item,index) in industry" :key="index" :value="item.value"> {{item.name}} </a-select-option> <a-select-option v-for="(item, index) in industry" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
@ -69,7 +74,9 @@
<a-col :span="9" :offset="3"> <a-col :span="9" :offset="3">
<a-form-model-item label="选择岗位" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }"> <a-form-model-item label="选择岗位" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
<a-select v-model="form.job" placeholder="--请选择--"> <a-select v-model="form.job" placeholder="--请选择--">
<a-select-option v-for="(item,index) in dictPerson" :key="index" :value="item.value"> {{ item.name }} </a-select-option> <a-select-option v-for="(item, index) in dictPerson" :key="index" :value="item.value">
{{ item.name }}
</a-select-option>
</a-select> </a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
@ -100,20 +107,20 @@
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"> <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" /> <img alt="example" style="width: 100%" :src="previewImage" />
</a-modal> </a-modal>
</a-form-model-item>
</a-col>
<!-- <a-upload name="file" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" action="" :headers="getToken()" :change="onSuccess"> <!-- 标签选择器 -->
<img v-if="imageUrl" :src="imageUrl" alt="avatar" /> <a-col :span="18" :offset="3">
<div v-else> <a-form-model-item label="课程标签" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }">
<a-icon :type="loading ? 'loading' : 'plus'" /> <a-select mode="tags" style="width: 100%" placeholder="标签选择或新增" @change="handleTagChange" :value="this.form.tags">
<div class="ant-upload-text">封面图片</div> <a-select-option v-for="(item,index) in dictCourseTag" :key="index" :value="item.value">
</div> {{ item.name }}
</a-upload> --> </a-select-option>
</a-select>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
</a-row> </a-row>
<div style="width: 100%; height: 40px; margin-bottom: 8px; margin-left: 50%">
<a-button type="primary" @click="save">保存</a-button>
</div>
</a-form-model> </a-form-model>
</a-card> </a-card>
</template> </template>
@ -133,14 +140,17 @@ export default {
dataValue: 1, dataValue: 1,
form: { form: {
coverPath: '', coverPath: '',
tags:[],
courseTags:[]
}, },
url: '', url: '',
previewVisible: false, previewVisible: false,
fileList: [], fileList: [],
previewImage: [], previewImage: [],
dictPerson:[], dictPerson: [],
dictCourseType:[], dictCourseType: [],
industry:[] industry: [],
dictCourseTag:[],
} }
}, },
components: { components: {
@ -148,28 +158,21 @@ export default {
getCourseDetails, getCourseDetails,
}, },
created() { created() {
this.dictionaryDropDown()
if (this.$route.query.id) { if (this.$route.query.id) {
getCourseDetails({ id: this.$route.query.id }).then((res) => { getCourseDetails({ id: this.$route.query.id }).then((res) => {
this.form = res.data this.form = res.data;
this.form.isRequired = this.form.isRequired + '';
// this.form.courseType = this.form.courseType + '' this.form.tags = [];
// this.form.industryInvolved = this.form.industryInvolved + '' this.form.courseTags.forEach((item,index) => {
this.form.isRequired = this.form.isRequired + '' this.form.tags.push(item.dictValue.toString());
// this.form.is });
this.dictEcho();
}) })
} }
this.dictionaryDropDown()
}, },
methods: { methods: {
// getPersonType() {
// return dictGet(Object.assign(parameter)).then((res) => {
// return res
// })
// },
// //
onChange(dataValue) { onChange(dataValue) {
console.log('changed', dataValue) console.log('changed', dataValue)
@ -185,31 +188,32 @@ export default {
}) })
}, },
dictionaryDropDown () { dictionaryDropDown() {
this.formLoading = true this.formLoading = false
// //
dictionaryDropDown({ dictionaryCode: '0007' }).then((res) => { dictionaryDropDown({ dictionaryCode: '0007' }).then((res) => {
this.industry = res.data this.industry = res.data
this.formLoading = false })
}) //
// dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => { this.dictCourseType = res.data
this.dictCourseType = res.data })
this.formLoading = false //
}) dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => {
// this.dictPerson = res.data
dictionaryDropDown({ dictionaryCode: '0005' }).then((res) => { })
this.dictPerson = res.data //
this.formLoading = false dictionaryDropDown({dictionaryCode: '0008'}).then((res) => {
}) const tagList = res.data
}, console.log(tagList)
for ( let i = 0; i < tagList.length; i++) {
// console.log(tagList[i]);
dictEcho(){ tagList[i].value = tagList[i].value.toString()
console.log("form___",this.form) }
console.log(tagList)
this.dictCourseTag = tagList
})
}, },
// //
goback() { goback() {
@ -239,11 +243,18 @@ export default {
this.previewImage = file.url || file.preview this.previewImage = file.url || file.preview
this.previewVisible = true this.previewVisible = true
}, },
//
handleChange({ fileList }) { handleChange({ fileList }) {
this.fileList = fileList this.fileList = fileList
this.fileList.file = fileList[0] this.fileList.file = fileList[0]
this.form.coverPath = this.fileList.file.response.url this.form.coverPath = this.fileList.file.response.url
}, },
//
handleTagChange(value) {
console.log('value------' ,value);
this.form.tags = value;
},
}, },
} }

View File

@ -54,6 +54,7 @@ export default {
// //
dictionaryDropDown() { dictionaryDropDown() {
this.formLoading = true
// //
dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => { dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
this.dictCourseType = res.data this.dictCourseType = res.data

View File

@ -43,6 +43,7 @@
<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'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
export default { export default {
components: { components: {
@ -51,8 +52,12 @@ export default {
}, },
data() { data() {
return { return {
queryParam: { courseName: this.$route.query.courseName || '' }, //, orgId: this.$route.query.courseUserOrgId || '' dictCourseTag: [],
queryOptions: [{ type: 'input', placeholder: '课程名称', key: 'courseName' }], queryParam: { courseName: this.$route.query.courseName || '' },
queryOptions: [
{ type: 'input', placeholder: '课程名称', key: 'courseName' },
{ type: 'select', placeholder: '请选择标签', key: 'tag', options: [] },
],
loadData: (parameter) => { loadData: (parameter) => {
return getCourseList(Object.assign(parameter, this.queryParam)).then((res) => { return getCourseList(Object.assign(parameter, this.queryParam)).then((res) => {
return res return res
@ -67,8 +72,27 @@ export default {
], ],
} }
}, },
created() {}, created() {
this.dictionaryDropDown()
console.log('aaa', this.dictCourseTag)
},
methods: { methods: {
//
dictionaryDropDown() {
this.formLoading = false
//
dictionaryDropDown({ dictionaryCode: '0008' }).then((res) => {
const tagList = res.data
console.log(tagList)
for (let i = 0; i < tagList.length; i++) {
console.log(tagList[i])
tagList[i].id = tagList[i].value.toString()
}
console.log(tagList)
this.queryOptions[1].options = tagList
})
},
handleRefresh() { handleRefresh() {
this.$refs.table.refresh(true) this.$refs.table.refresh(true)
}, },
@ -89,22 +113,22 @@ export default {
this.$router.push({ this.$router.push({
path: '/course/CourseAdd', path: '/course/CourseAdd',
query: { query: {
courseName: this.queryParam.courseName
},
})
},
//
courseQuestion(record) {
this.$router.push({
path: '/course/question/QuestionList',
query: {
id: record.id,
courseName: this.queryParam.courseName, courseName: this.queryParam.courseName,
pageNum: this.$refs.table.localPagination.current
}, },
}) })
}, },
}, },
//
courseQuestion(record) {
this.$router.push({
path: '/course/question/QuestionList',
query: {
id: record.id,
courseName: this.queryParam.courseName,
pageNum: this.$refs.table.localPagination.current,
},
})
},
} }
</script> </script>

View File

@ -1,154 +1,273 @@
<template> <template>
<a-card :bordered="false" title="添加课件"> <a-card :bordered="false" title="添加课件">
<a-form-model :model="form"> <template slot="extra">
<div style="width: 100%; height: 40px; margin-bottom: 8px; margin-left: 80%"> <a-button @click="goback">返回</a-button>
<a-button type="primary" @click="goback">返回</a-button> <a-button type="primary" @click="save">保存</a-button>
</div> </template>
<a-row> <a-tabs type="card" :default-active-key="parentTabKey" @change="parentcallback">
<!-- 课程名称 --> <a-tab-pane key="1" tab="文件上传">
<a-col :span="18" :offset="3"> <a-tabs :default-active-key="tabkey" @change="callback">
<a-form-model-item label="课件名称" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }"> <a-tab-pane key="1" tab="视频上传">
<a-input v-model="form.courseName" v-decorator="['courseName', { rules: [{ required: true, message: '请填写课程名称' }] }]" /> <div style="background: #ececec; padding: 30px">
</a-form-model-item> <a-card title="视频上传" :bordered="false" style="width: 100%">
</a-col> <div style="margin-bottom: 30px">
课件名称&nbsp;
<!-- 课件分类 --> <a-input placeholder="课件名称" v-model="videoForm.name" style="width: 40%" />
<a-col :span="9" :offset="3">
<a-form-model-item label="课件分类" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
<a-button type="primary" @click="classify">添加分类</a-button>
</a-form-model-item>
</a-col>
<!-- 课件大小 -->
<a-col :span="9">
<a-form-item label="课件大小" :label-col="{ span: 9 }" :wrapper-col="{ span: 14 }">
<div>
<a-input-number :disabled="false"/>
<div style="marginTop:15px">
<a-button type="primary" @click="toggle">
Toggle disabled
</a-button>
</div> </div>
</div> <div style="margin-bottom: 30px; margin-top: 20px">
</a-form-item> 课件分类&nbsp;<a-select mode="multiple" style="width: 30%" placeholder="请选择分类">
</a-col> <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-col :span="18" :offset="3"> <a-modal v-model="visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
<a-form-model-item label="上传课件" :label-col="{ span: 4 }" :wrapper-col="{ span: 15 }"> <h1>hello world</h1>
<a-upload action="/dawa/sys/oss/upload?sourceId=course" list-type="picture-card" :file-list="fileList" :headers="getToken()" @change="handleChange" @preview="handlePreview"> </a-modal>
<div v-if="fileList.length < 1"> </div>
<a-icon type="plus" /> <div>课件大小&nbsp;
<div class="ant-upload-text">上传</div> <a-input :disabled="true" :value="videoForm.sizeStr" style="width: 140px" />&nbsp;&nbsp;&nbsp; MB
</div> </div>
</a-upload> <br />
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"> <div>
<img alt="example" style="width: 100%" :src="previewImage" /> 视频上传&nbsp; <a-upload list-type="picture" :default-file-list="successOssFile" :beforeUpload="beforeUpload" :remove="deleteVideo" :disabled="uploadLoading">
</a-modal> <a-button>
<a-icon type="upload" /> {{uploadButtonText}}
</a-button>&nbsp;&nbsp;&nbsp;
</a-upload>
</div>
</a-card>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="文本上传">
<div style="background: #ececec; padding: 30px">
<a-card title="视频上传" :bordered="false" style="width: 100%">
<div style="margin-bottom: 30px">
视频上传&nbsp; <a-upload list-type="picture" :beforeUpload="beforeUpload">
<a-button>
<a-icon type="upload" /> 选择文件
</a-button>&nbsp;&nbsp;&nbsp;
</a-upload>
</div>
<div style="margin-bottom: 30px">
课件名称&nbsp;
<a-input placeholder="课件名称" v-model="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-upload name="file" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" action="" :headers="getToken()" :change="onSuccess"> <!-- 课件分类弹框 -->
<img v-if="imageUrl" :src="imageUrl" alt="avatar" /> <a-modal v-model="visible" title="模板下载" cancelText="关闭" :ok-button-props="{ style: { display: 'none' } }">
<div v-else> <h1>hello world</h1>
<a-icon :type="loading ? 'loading' : 'plus'" /> </a-modal>
<div class="ant-upload-text">封面图片</div> </div>
</div> <div>课件大小&nbsp;
</a-upload> --> <a-input :disabled="true" :value="textForm.size" style="width: 140px" />
</a-form-model-item> </div>
</a-col> </a-card>
</a-row> </div>
<div style="width: 100%; height: 40px; margin-bottom: 8px; margin-left: 50%"> </a-tab-pane>
<a-button type="primary" @click="save">保存</a-button> </a-tabs>
</div> </a-tab-pane>
</a-form-model>
<a-tab-pane key="2" tab="视频服务器链接"> </a-tab-pane>
<a-tab-pane key="3" tab="第三方连接"> Content of Tab Pane 3 </a-tab-pane>
</a-tabs>
</a-card> </a-card>
</template> </template>
<script> <script>
import { courseAdd, getCourseDetails } from '@/api/course/course' import { STable } from '@/components'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types' import { ACCESS_TOKEN } from '@/store/mutation-types'
import storage from 'store'
import axios from 'axios'
import { ossUpload } from '@/api/sys/oss'
import { coursewareAdd } from '@/api/course/courseware'
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
import { forEach } from 'store/storages/all'
export default { export default {
name: 'step1',
data() { data() {
return { return {
dataValue: 1, visible: false,
form: {}, textForm: {},
personType: [ videoForm: {
{ id: '1', name: '人员类别1' }, sizeStr: '0',
{ id: '2', name: '人员类别2' }, videoPath: [], //
{ id: '3', name: '人员类别3' }, },
], parentTabKey: '1',
tabkey: '1',
previewVisible: false, uploadButtonText: '选择文件',
fileList: [], successOssFile: [],
previewImage :[ uploadLoading: false, //
]
}
},
components: {
courseAdd,
getCourseDetails
},
created() {
if (this.$route.query.id) {
getCourseDetails({ id: this.$route.query.id }).then(res => {
this.form = res.data;
this.form.courseType = this.form.courseType + '';
this.form.industryInvolved = this.form.industryInvolved + '';
this.form.isRequired = this.form.isRequired + '';
});
} }
}, },
components: {},
created() {},
methods: { methods: {
// //
goback(){ goback() {
this.$router.push({path:"/course/CourseList",query:{} }) this.$router.push({
path: '/course/CoursewareList',
query: {
id: this.$route.query.courseId,
},
})
}, },
//
parentcallback(key) {},
//
callback(key) {
console.log(key)
},
//Tonken
getToken() { getToken() {
let hreader = {}; let hreader = {}
hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN); hreader[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
return hreader; return hreader
}, },
onSuccess(file) {
console.log('1---', file);
beforeUpload(file) {
this.uploadLoading = true
this.uploadButtonText = '上传中...'
// ()
var suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
if (suffix != 'mp4') return this.$message.error('文件类型必须是mp4')
//
const data = new FormData()
data.append('file', file)
data.append('fileType', 'mp4')
//token
const header = {}
header['Content-Type'] = 'multipart/form-data'
header[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)
axios
.post(ossUpload(), data, { headers: header })
.then((res) => {
this.uploadLoading = false
this.uploadButtonText = '选择文件'
if (res.data.code === 200) {
this.$message.success('视频上传成功!')
res.data.uuid = file.uid
res.data.size = file.size
this.successOssFile.push(res.data)
//
this.refreshFileSize()
} else {
this.$message.error(res.data.msg)
this.$refs.inputFile.value = ''
}
})
.catch((err) => {
this.$message.error(err)
})
return false
}, },
handleCancel() {
this.previewVisible = false; //
}, refreshFileSize() {
async handlePreview(file) { this.videoForm.size = 0
if (!file.url && !file.preview) { for (let i = 0; i < this.successOssFile.length; i++) {
file.preview = await getBase64(file.originFileObj); //
let fileSize = this.successOssFile[i].size
//MB
var videoSize = parseFloat(fileSize) / 1024 / 1024
//
this.videoForm.size = this.videoForm.size + parseFloat(videoSize)
} }
this.previewImage = file.url || file.preview; this.videoForm.sizeStr = this.videoForm.size.toFixed(2)
this.previewVisible = true;
},
handleChange({ fileList }) {
this.fileList = fileList;
}, },
//
deleteVideo(file) {
//
for (let i = 0; i < this.successOssFile.length; i++) {
if (this.successOssFile[i].uuid == file.uid) {
this.successOssFile.splice(i, 1)
break
}
}
this.refreshFileSize()
},
//
showModal() {
this.visible = true
},
//
save() {
//
this.successOssFile.forEach((item, index) => {
this.videoForm.videoPath.push(item.url)
})
console.log(this.videoForm.videoPath.toString())
//JSON
this.videoForm.videoPath = this.videoForm.videoPath.toString();
//ID
this.videoForm.courseId = this.$route.query.courseId;
console.log(this.videoForm)
let from;
if (this.parentTabKey == '1' && this.tabkey == '1') {
//
from = this.videoFormV()
if (typeof form == 'boolean' && !form) return
}
//
coursewareAdd(from).then((res) =>{
console.log(res);
if (res.code == 200) {
this.$message.success('课件保存成功!');
this.goback();
}else{
this.$message.error('保存失败!');
}
})
},
//
videoFormV() {
//
if (!this.videoForm.name || this.videoForm.name === '') {
this.$message.error('课件名称不能为空!')
return false
} else if (this.videoForm.videoPath.length == 0) {
this.$message.error('请上传课件文件!')
return false
}
let form = {};
form = this.videoForm;
console.log('111111',form);
return form;
},
}, },
} }
// Base64
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
</script> </script>
<style scoped>
</style>

View File

@ -44,8 +44,8 @@ export default {
columns: [ columns: [
{ title: '课件名称', width: '160px', align: 'center', dataIndex: 'name', key: 'name' }, { title: '课件名称', width: '160px', align: 'center', dataIndex: 'name', key: 'name' },
{ title: '课件分类',width: '300px',align: 'center', dataIndex: 'coursewareClassifyId', key: 'coursewareClassifyId',}, { title: '课件分类',width: '300px',align: 'center', dataIndex: 'coursewareClassifyId', key: 'coursewareClassifyId',},
{ title: '课时/分', width: '160px', align: 'center', dataIndex: 'hour', key: 'hour' }, { title: '课时/分', width: '160px', align: 'center', dataIndex: 'duration', key: 'duration' },
{ title: '课件大小', width: '160px', align: 'center', dataIndex: 'coursewareSize', key: 'coursewareSize' }, { title: '课件大小(MB)', width: '160px', align: 'center', dataIndex: 'sizeStr', key: 'sizeStr'},
{ title: '操作', key: 'operation', width: '200px', align: 'center', scopedSlots: { customRender: 'action' } }, { title: '操作', key: 'operation', width: '200px', align: 'center', scopedSlots: { customRender: 'action' } },
], ],
} }
@ -53,7 +53,8 @@ export default {
methods: { methods: {
// //
coursewareAdd(){ coursewareAdd(){
this.$router.push({path:"/course/CoursewareAddOrUpdate",query:{}}) this.$router.push({path:"/course/CoursewareAddOrUpdate",query:{courseId: this.$route.query.id}})
console.log('IDIDIDID',this.$route.query.id)
}, },
// //

View File

@ -249,7 +249,6 @@ export default {
} else if (this.tabKey === '5') { } else if (this.tabKey === '5') {
from = this.CompletionV() from = this.CompletionV()
if (typeof from == 'boolean' && !from) return if (typeof from == 'boolean' && !from) return
console.log('5---', this.Completion)
} }
from.courseId = this.$route.query.courseId from.courseId = this.$route.query.courseId