hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-12 04:16:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

2022年5月29日从svn移到git

Browse Source
This commit is contained in:
daihh
2022-05-29 18:56:34 +08:00
commit b050613020
488 changed files with 68444 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

764
src/components/Course/auditCourse2.vue Normal file
View File

@@ -0,0 +1,764 @@
<template>
<div>
<!--在线课录播课审核-->
<el-row :gutter="10">
<el-col :span="18" v-show="type === 0">
<div class="player" style="min-height: 473px;border: 1px solid #d0d0d0;background-color: #FFFFFF;padding-top: 10px;">
<!--课程基本信息-->
<div>
<!-- v-if="contentData.contentType == 0" -->
<div v-if="!contentData.contentType" style="position: relative;">
<el-form label-width="120px" size="mini" v-if="isEdit">
<el-form-item label="名称">{{courseInfo.name}}</el-form-item>
<el-form-item label="封面图片">
<el-col :span="8">
<!-- <imageUpload :value="courseCoverurl" @success="uploadCoverImgSuccess" @remove="removeCoverImgSuccess"></imageUpload> -->
<div style="width: 160px;height: 90px">
<img style="width:100%;height:100%" v-if="courseCoverurl == ''" :src="webBaseUrl + '/images/bgimg/course.png'" alt="" srcset="">
<img style="width:100%;height:100%" v-else :src="courseCoverurl" alt="" srcset="">
</div>
</el-col>
<el-col :span="16">
<el-form-item label="内容分类">
<span>{{sysTypeName(courseInfo.sysType1)}}</span>
<span v-if="courseInfo.sysType2 !=''">/{{sysTypeName(courseInfo.sysType2)}}</span>
<span v-if="courseInfo.sysType3 !=''">/{{sysTypeName(courseInfo.sysType3)}}</span>
</el-form-item>
<!-- <el-form-item label="资源归属">
<span>{{resOwnerName(courseInfo.resOwner1)}}</span>
<span v-if="courseInfo.resOwner2 != ''">/{{resOwnerName(courseInfo.resOwner2)}}</span>
<span v-if="courseInfo.resOwner3 != ''">/{{resOwnerName(courseInfo.resOwner3)}}</span>
</el-form-item> -->
<el-form-item label="场景">
{{sceneFilter(courseInfo.forScene)}}
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="授课教师" ><!--授课老师默认是当前操作人-->
{{teacher && teacher.join(',')}}
</el-form-item>
<!-- <el-form-item label="系统标签">
{{courseInfo.tags}}
</el-form-item> -->
<el-form-item label="目标人群" >
{{courseInfo.forUsers}}
</el-form-item>
<el-form-item label="课程来源">
{{courseInfo.source == 2?'外部':'内部'}}
</el-form-item>
<el-form-item label="观看设置">
{{courseInfo.device == 3? '多端可见': courseInfo.device == 2?'移动端可见':'PC端可见'}}
</el-form-item>
<!-- <el-form-item label="关键字">
{{courseInfo.keywords}}
</el-form-item> -->
<el-form-item label="课程价值" style="word-break:break-all;">
{{courseInfo.value}}
</el-form-item>
<el-form-item label="课程简介" style="word-break:break-all;">
{{courseInfo.summary}}
</el-form-item>
<!-- <el-form-item label="完成规则" v-if="!weike.onlyRequired"><el-input maxlength="50" v-model="params.forScene" placeholder="可基于组织树或受众选择"></el-input></el-form-item> -->
<!-- <el-form-item label="开放权限">{{courseInfo.openObject}}</el-form-item> -->
<!-- <el-form-item label="课程描述">
<div v-html="courseInfo.overview"></div>
</el-form-item> -->
<el-form-item v-if="isShow"><el-button type="primary" @click="isEdit = false">编辑</el-button> </el-form-item>
</el-form>
<el-form label-width="80px" size="mini" v-else>
<el-form-item label="名称" required><el-input maxlength="100" v-model="courseInfo.name" placeholder="课程名称(限100字以内)"></el-input></el-form-item>
<!--不显示，因为标题已经代表了 <el-form-item label="授课方式">{{courseTypeMap(params.type)}}</el-form-item>-->
<el-form-item label="封面图片" required >
<el-col :span="8">
<imageUpload :value="courseCoverurl" width="160px" height="90px" @success="uploadCoverImgSuccess" @remove="removeCoverImgSuccess"></imageUpload>
<div>上传为16:9(如:800*450)的png或jpg图片</div>
</el-col>
<el-col :span="16">
<el-form-item label="内容分类" required>
<el-cascader placeholder="选择内容分类" style="width: 90%;" clearable v-model="sysType" :props="sysProps" :options="sysTypeListMap"></el-cascader>
</el-form-item>
<!-- <el-form-item label="资源归属" required>
<el-cascader placeholder="选择资源归属" style="width: 90%;" clearable v-model="resOwnerArray" :props="defaultProps" :options="resOwnerListMap"></el-cascader>
</el-form-item> -->
<el-form-item label="场景">
<el-select v-model="courseInfo.forScene" style="width: 90%;">
<el-option v-for="item in sceneList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="授课教师" required ><!--授课老师默认是当前操作人-->
<el-select style="width: 90%;"
v-model="teacherName"
multiple
filterable
remote
disabled
value-key="teacherId"
reserve-keyword
placeholder="请输入授课教师姓名"
:remote-method="remoteMethod"
:loading="loading">
<el-option v-for="item in teacherList" :key="item.teacherId" :label="item.teacherName" :value="item"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="目标人群" >
<el-input maxlength="50" show-word-limit v-model="courseInfo.forUsers" placeholder="目标人群(限50字以内)"></el-input>
</el-form-item>
<el-form-item label="课程价值" >
<el-input maxlength="200" show-word-limit v-model="courseInfo.value" placeholder="课程价值(限200字以内)"></el-input></el-form-item>
<!-- <el-form-item label="系统标签" >
<el-col :span="14">
<el-select style="width: 100%;"
v-model="showTags"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteTagMethod"
:loading="loading">
<el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.name"> </el-option>
</el-select>
</el-col> -->
<!-- <el-col :span="10">
<el-form-item label="关键字"><el-input v-model="courseInfo.keywords" maxlength="50" placeholder="请输入关键字(限100字以内)"></el-input></el-form-item>
</el-col> -->
<!-- </el-form-item> -->
<el-form-item label="观看设置">
<el-col :span="14">
<el-radio v-model="courseInfo.device" :label="1">PC端可见</el-radio>
<el-radio v-model="courseInfo.device" :label="2">移动端可见</el-radio>
<el-radio v-model="courseInfo.device" :label="3">多端可见</el-radio>
</el-col>
<el-col :span="10">
<el-form-item label="课程来源">
<el-radio-group v-model="courseInfo.source" >
<el-radio :label="1">内部</el-radio>
<el-radio :label="2">外部</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-form-item>
<!-- <el-form-item label="完成规则" ><el-input maxlength="50" v-model="params.forScene" placeholder="可基于组织树或受众选择"></el-input></el-form-item> -->
<el-form-item label="开放权限" ><el-input maxlength="50" show-word-limit v-model="courseInfo.openObject" placeholder="可基于组织树或受众选择"></el-input></el-form-item>
<el-form-item label="课程简介">
<el-input type="textarea" maxlength="100" show-word-limit :rows="3" v-model="courseInfo.summary" placeholder="课程介绍,要换成富文本编辑器"></el-input>
</el-form-item>
<!-- <el-form-item label="课程描述">
<WxEditor v-model="courseInfo.overview" :minHeight="100"></WxEditor>
</el-form-item> -->
<el-form-item label=""><el-button type="primary" v-loading="btnLoading" @click="saveEdit">保存</el-button> </el-form-item>
</el-form>
</div>
<div v-if="contentData.contentType == 10" style="position: relative;">
<videoPlayer :src="fileBaseUrl+curriculumData.url"
@onPlayerPlaying="onPlayerPlaying"
@onPlayerPlay="onPlayerPlay"
@onPlayerPause="onPlayerPause"
@onPlayerEnded="onPlayerEnded"></videoPlayer>
<!-- <video :src="fileBaseUrl+contentData.content" width="100%" controls controlslist="nodownload" style="width: 100%; height: 100%; object-fit: fill"></video> -->
</div>
<div v-if="contentData.contentType == 20">
<audioPlayer :url="fileBaseUrl+curriculumData.url"
:name="contentData.contentName"
@onPlaying="audioPlaying"
@onPlay="audioPlay"
@onPause="audioPause"
@onPlayEnd="audioEnd"
></audioPlayer>
<!-- <audio width="100%" controls :src="fileBaseUrl+contentData.content">
您的浏览器不支持 audio 标签。
</audio> -->
</div>
<div v-if="contentData.contentType == 40">
<pdfPreview :filePath="fileBaseUrl+contentData.content"></pdfPreview>
</div>
<div v-if="contentData.contentType == 41">
<div class="picture-text" v-html="contentData.content"></div>
</div>
<div v-if="contentData.contentType == 52">
<div v-if="contentData.content!=''">
<hyper-link :content="contentData"></hyper-link>
<!-- <iframe :src="contentData.content" style="width: 100%;border:0px;min-height: 473px;" frameborder="0"></iframe> -->
</div>
</div>
<div v-if="contentData.contentType == 60">
<homework :showTest="showTest" :showRecord="isDetails" :showSubmit="false" :content="contentData" ></homework>
</div>
<div v-if="contentData.contentType == 61">
<exam :showTest="showTest" :showRecord="isDetails" :showSubmit="false" :content="contentData"></exam>
</div>
<div v-if="contentData.contentType == 62" style="padding:5px">
<assess v-if="contentData.id" :showSubmit="false" :showRecord="false" :content="contentData"></assess>
</div>
</div>
</div>
</el-col>
<el-col :span="18" v-show="type === 1">
<div class="grid-info">
<el-table border style="margin-bottom: 20px" height="550" :data="dataList">
<el-table-column type="expand">
<template slot-scope="props">
<el-table border style="margin-bottom: 10px" :data="props.row.logData">
<el-table-column label="内容" prop="title"></el-table-column>
<el-table-column label="修改前" prop="before" show-overflow-tooltip>
<template slot-scope="props">
{{props.row.before == 'null' || props.row.before == ''? '--':props.row.before}}
</template>
</el-table-column>
<el-table-column label="修改后" prop="after" show-overflow-tooltip></el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="修改人" prop="sysCreateBy"></el-table-column>
<el-table-column label="修改时间" prop="sysCreateTime"></el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="6">
<div><el-button size="small" @click="type =0;contentData= {}" type="info">课程基本信息</el-button>
<el-button size="small" v-if="isShow" @click="type =1" type="info">修改记录</el-button>
</div>
<div style="padding: 5px;">课程内容目录</div>
<div style="min-height: 500px;">
<div class="catalog">
<el-collapse class="catalog-row" v-model="activeNames">
<el-collapse-item v-for="(item, index) in catalogTree" :key="index" :name="index">
<template slot="title">
<span style="font-size:12px">{{ item.section.name }}</span>
</template>
<ul>
<li @click="showRes(ele)" v-for="(ele, i) in item.contents" :key="i" class="catalog-cell">
<span style="font-size:12px">{{ getType(ele.contentType) }}</span>
<span style="margin-left: 5px;">{{ ele.contentName}}</span>
</li>
</ul>
</el-collapse-item>
</el-collapse>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import apiCoursePortal from "@/api/modules/coursePortal.js";
import exam from "@/components/Course/exam";
import homework from "@/components/Course/homework";
import pdfPreview from "@/components/PdfPreview/index.vue";
import assess from "@/components/Course/assess";
import apiTag from "../../api/modules/tag.js";
import {
formatDate,
courseType,
getType,
numberToLetter
} from "@/utils/tools.js";
import imageUpload from "@/components/ImageUpload/index.vue";
import weikeContent from "@/components/Course/weikeContent.vue";
import catalogCourseware from "@/components/Course/catalogCourseware.vue";
import apiCourse from "@/api/modules/course.js";
import scene from "../../api/modules/scene.js";
import WxEditor from "@/components/Editor/index.vue";
import videoPlayer from '@/components/VideoPlayer/index.vue';
import audioPlayer from '@/components/AudioPlayer/index.vue';
import { mapGetters,mapActions} from 'vuex';
import hyperLink from '@/components/Course/hyperLink.vue';
export default {
name:"auditCourse2",
components: {
weikeContent,
catalogCourseware,
imageUpload,
exam,
homework,
assess,
WxEditor,
pdfPreview,
videoPlayer,
audioPlayer,
hyperLink
},
props: {
id: {
type: String,
default: ""
},
isShow: {//编辑按钮控制
type: Boolean,
default: true
},
isDetails:{ //作业，显示记录
type: Boolean,
default: true
},
showTest:{//预览显示试题
type: Boolean,
default: false
}
},
computed: {
...mapGetters(['resOwnerMap','sysTypeMap']),
},
data() {
return {
curriculumData:{
url:'',
isDrag:false,
completeSetup:1,
},
contentDataShow:true,//预览页面和课程内容的切换
isEdit: true,
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
contentData: {},
getType: getType,
btnLoading: false,
teacherName: [],
teacher: [],
loading: false,
defaultProps: {
value: "code",
label: "name"
},
sysProps: {
value: "id",
label: "name"
},
catalogTree: [],
resOwnerArray: [],
sceneList: [],
sysType: [],
optionsList: [],
tagList: [], // 标签
typeList: [], // 资源归属
showTags: [], //用于显示标签
teacherList: [],
courseInfo: {},
courseCoverurl: "",
sysTypeListMap:[],
resOwnerListMap: [],
dataList: [{ id: 1 }, { id: 2 }],
activeName: "catalog",
type: 0,
info: {
onlyRequired: false,
dlgShow: false,
fileType: "",
shebei: []
},
rules: {
name: [{ required: true, message: "请输入课程名称", trigger: "blur" }],
kind: [
{ required: true, message: "请选择课程分类", trigger: "change" }
],
location: [
{ required: true, message: "请选择资源归属", trigger: "change" }
],
aim: [{ required: true, message: "请输入目标人群", trigger: "blur" }],
courseValue: [
{ required: true, message: "请输入课程价值", trigger: "blur" }
],
tag: [{ required: true, message: "请输入标签", trigger: "blur" }],
power: [{ required: true, message: "请输入开放权限", trigger: "blur" }]
},
activeNames: [0, 1, 2, 3, 4]
};
},
mounted() {
this.getDetail();
this.getSceneData();
this.updateLogs();
this.getResOwnerTree().then(rs=>{
this.resOwnerListMap=rs;
});
this.getSysTypeTree().then(rs=>{
this.sysTypeListMap=rs;
})
},
methods: {
...mapActions({
getResOwnerTree:'resOwner/getResOwnerTree',
loadResOwners:'resOwner/loadResOwners',
getSysTypeTree:'sysType/getSysTypeTree',
loadSysTypes:'sysType/loadSysTypes'
}),
resOwnerName(code){
if(code==''){return '';}
return this.resOwnerMap.get(code);
},
sysTypeName(code){
if(code==''){return '';}
return this.sysTypeMap.get(code);
},
onPlayerPlay(){
console.log("开始播放");
},
onPlayerPause(){
console.log("暂停");
},
onPlayerEnded(){
console.log("播放结束");
},
onPlayerPlaying(itme){
console.log("当前播放"+itme);
},
audioPlaying(item){
console.log("当前播放"+item);
},
audioPlay(){
console.log("开始播放");
},
audioPause(){
console.log("暂停");
},
audioEnd(){
console.log("播放结束");
},
// 场景过滤
sceneFilter(forScene) {
// sceneList
// this.courseInfo.forScene
let name = "";
this.sceneList.forEach(item => {
if (item.id === forScene) {
name = item.name;
}
});
return name;
},
updateLogs() {
let params = {
courseId: this.id,
name: ""
};
apiCourse.findUpdateLogs(params).then(res => {
if (res.status === 200) {
res.result.forEach(item => {
item.logData = JSON.parse(item.logData);
});
this.dataList = res.result;
} else {
this.$message.error(res.message);
}
});
},
saveEdit() {
this.btnLoading = true;
//标签为什么要深复制？
// let tags = deepClone(this.courseInfo.tags);
// console.log(tags, 'tags222');
// this.courseInfo.tags = tags.join();
this.courseInfo.tags = this.showTags.join();
//处理资源归属
// if (this.resOwnerArray.length > 0) {
// this.courseInfo.resOwner1 = this.resOwnerArray[0]; //资源归属一级的id
// this.courseInfo.resOwner2 = this.resOwnerArray[1]; //资源归属二级的id
// } else {
// this.$message.error("请选择资源归属");
// this.btnLoading = false;
// return;
// }
if (this.resOwnerArray.length > 2) {
this.courseInfo.resOwner3 = this.resOwnerArray[2]; //资源归属三级的id
}
// 分类
if (this.sysType.length > 0) {
this.courseInfo.sysType1 = this.sysType[0]; //资源归属一级的id
this.courseInfo.sysType2 = this.sysType[1]; //资源归属二级的id
} else {
this.$message.error("请选择内容分类");
this.btnLoading = false;
return;
}
if (this.sysType.length > 2) {
this.courseInfo.sysType3 = this.sysType[2]; //资源归属三级的id
}
// let postData = {
// course: this.courseInfo,
// // teachers: this.teacherName
// };
apiCourse
.saveOnlyCourse(this.courseInfo)
.then(res => {
if (res.status === 200) {
this.$message.success("操作成功！");
// let result = res.result;
this.isEdit = true;
this.courseInfo = result.course;
// this.curCourseId = result.course.id; //设置当前课程的id
this.courseTeachers = result.teachers;
let list = [];
// this.courseTeachers.forEach(item => {
// list.push(item.teacherName);
// });
this.btnLoading = false;
} else {
this.$message.error(res.message);
this.btnLoading = false;
}
})
.catch(err => {
this.btnLoading = false;
});
},
// 标签远程查询
async remoteTagMethod(query) {
if (query) {
try {
const { result, status } = await apiTag.findByName(1, query);
if (status === 200) {
this.tagList = result;
}
} catch (error) {
console.log(error);
}
} else {
this.tagList = [];
}
},
//获取场景，保留
async getSceneData() {
try {
const { result, status } = await scene.list(1);
if (status === 200) {
this.sceneList = result;
}
} catch (error) {
console.log(error);
}
},
// 教师列标，远程查询
async remoteMethod(query) {
if (query) {
this.loading = true;
try {
const { result, status } = await apiTeacher.findByName(query);
if (status === 200) {
let list = [];
result.forEach(item => {
list.push({
teacherId: item.id,
teacherName: item.name
});
});
this.teacherList = list;
this.loading = false;
}
} catch (error) {
this.loading = false;
}
} else {
this.teacherList = [];
}
},
uploadCoverImgSuccess(res) {
this.courseInfo.coverImg = res.result.filePath;
this.courseCoverurl = res.result.httpPath;
},
removeCoverImgSuccess() {
this.courseCoverurl = "";
this.courseInfo.coverImg = "";
},
getDetail() {
apiCoursePortal.detail(this.id).then(rs => {
if (rs.status == 200) {
this.courseInfo = rs.result.course;
if(rs.result.course.coverImg !== '') {
this.courseCoverurl = this.fileBaseUrl + rs.result.course.coverImg;
}
this.teacherList = rs.result.teachers;
this.teacherName = rs.result.teachers;
this.teacher = rs.result.teachers.map(item => item.teacherName);
this.showTags = this.courseInfo.tags.split(",");
if (rs.result.course.resOwner3 == "") {
this.resOwnerArray = [
rs.result.course.resOwner1,
rs.result.course.resOwner2
];
} else {
this.resOwnerArray = [
rs.result.course.resOwner1,
rs.result.course.resOwner2,
rs.result.course.resOwner3
];
}
if (
rs.result.course.sysType3 == "" &&
rs.result.course.sysType2 == ""
) {
this.sysType = [rs.result.course.sysType1];
} else if (rs.result.course.sysType3 == "") {
this.sysType = [
rs.result.course.sysType1,
rs.result.course.sysType2
];
} else {
this.sysType = [
rs.result.course.sysType1,
rs.result.course.sysType2,
rs.result.course.sysType3
];
}
this.teachers = rs.result.teachers;
this.contentList = rs.result.contents;
let treeList = [];
rs.result.sections.forEach(sec => {
let treeNode = { section: sec, contents: [] };
rs.result.contents.forEach(c => {
if (c.csectionId == sec.id) {
treeNode.contents.push(c);
}
});
treeList.push(treeNode);
});
this.catalogTree = treeList;
} else {
this.$message.error(rs.message);
}
});
},
ctabChange(tab) {
if (tab.name == "info") {
this.activeName = "catalog";
}
},
showRes(r) {
// this.contentDataShow = true;
this.contentData = r;
if(r.contentType == 10 ||r.contentType == 20){
if(r.content.startsWith('\{')){
this.curriculumData = JSON.parse(r.content)
}else{
this.curriculumData.url = r.content
}
}
this.type = 0;
},
formatChoose(format) {
let text = "";
switch (format) {
case 1: {
text = "视频";
break;
}
case 2: {
text = "音频";
break;
}
case 3: {
text = "文档";
break;
}
case 4: {
text = "图文";
break;
}
case 5: {
text = "外部链接";
break;
}
case 6: {
text = "作业";
break;
}
case 7: {
text = "考试";
break;
}
case 8: {
text = "评估";
break;
}
}
return text;
},
statusToContent(status) {
let data = null;
switch (status) {
case 1: {
data = {
text: "[未开始]",
class: "catalog-cell-state1"
};
break;
}
case 2: {
data = {
text: "[进行中]",
class: "catalog-cell-state2"
};
break;
}
case 3: {
data = {
text: "[已完成]",
class: "catalog-cell-state9"
};
break;
}
default:
{
data = {
text: "[未开始]",
class: "catalog-cell-state1"
};
}
break;
}
return data;
}
}
};
</script>
<style lang="scss" scoped>
.grid-info {
display: flex;
padding: 0 20px;
.grid-item {
flex: 1;
.item-one {
font-size: 18px;
height: 20px;
}
.item-title {
font-size: 16px;
font-weight: 600;
}
}
}
::v-deep .picture-text{
img{
width: 100%;
}
}
.catalog {
::v-deep .el-collapse-item__header{
line-height: 2;
height: 60px;
}
.catalog-row {
margin: 0px;
padding: 0px 10px 10px 10px;
ul {
padding: 0px;
margin: 0px;
}
.catalog-cell {
line-height: 32px;
cursor: pointer;
list-style: none;
margin: 0px;
padding-left: 20px;
color: #5c5c5c;
}
}
}
</style>