课件详情等
This commit is contained in:
parent
646123cbbe
commit
6ed7aadbf7
|
@ -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;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
|
@ -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">
|
||||||
|
课件名称:
|
||||||
<!-- 课件分类 -->
|
<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>
|
课件分类: <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>课件大小:
|
||||||
<div class="ant-upload-text">上传</div>
|
<a-input :disabled="true" :value="videoForm.sizeStr" style="width: 140px" /> MB
|
||||||
</div>
|
</div>
|
||||||
</a-upload>
|
<br />
|
||||||
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
|
<div>
|
||||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
视频上传: <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>
|
||||||
|
</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">
|
||||||
|
视频上传: <a-upload list-type="picture" :beforeUpload="beforeUpload">
|
||||||
|
<a-button>
|
||||||
|
<a-icon type="upload" /> 选择文件
|
||||||
|
</a-button>
|
||||||
|
</a-upload>
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 30px">
|
||||||
|
课件名称:
|
||||||
|
<a-input placeholder="课件名称" v-model="textForm.name" style="width: 40%" />
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 30px; margin-top: 20px">
|
||||||
|
课件分类: <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>课件大小:
|
||||||
</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>
|
|
@ -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)
|
||||||
},
|
},
|
||||||
|
|
||||||
//返回
|
//返回
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue