mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-11 11:56:44 +08:00
365 lines
14 KiB
Vue
365 lines
14 KiB
Vue
<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>
|
||
<div v-if="resType == 0" style="position: relative;">
|
||
<el-form label-width="80px" size="mini" :rules="rules">
|
||
<el-form-item label="名称" prop="name"><template> 历史111与文化 </template></el-form-item>
|
||
<el-form-item label="分类" prop="kind"><template> 集团级、B1 </template></el-form-item>
|
||
<el-form-item label="资源归属" prop="location"><template> 集团级、B1 </template></el-form-item>
|
||
<el-form-item label="封面" prop="face"><template>3333.jpg</template></el-form-item>
|
||
<el-form-item label="目标人群" prop="aim"><template> 管理员</template></el-form-item>
|
||
<el-form-item label="课程价值" prop="courseValue"><template> 有效沟通</template></el-form-item>
|
||
<el-form-item label="课程介绍" prop="description"><template> 有效沟通 </template></el-form-item>
|
||
<el-form-item label="标签" prop="tag"><template> 集团级、B1 </template></el-form-item>
|
||
<el-form-item label="关键字" prop="keyword"><template> 集团级、B1 </template></el-form-item>
|
||
<el-form-item label="观看设置" prop="setting">
|
||
<template>pc端观看</template>
|
||
</el-form-item>
|
||
<el-form-item label="授课教师" prop="teacher"><template>王明宇 </template></el-form-item>
|
||
<el-form-item label="开放权限" prop="power"><template> 集团级</template></el-form-item>
|
||
<el-form-item label="课程来源" prop="fromSource">
|
||
<template> 外部 </template>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div v-if="resType == 1" style="position: relative;">
|
||
<video :src="`${webBaseUrl}/temp/video.mp4`" width="100%" controls controlslist="nodownload"
|
||
style="width: 100%; height: 100%; object-fit: fill"></video>
|
||
</div>
|
||
<div v-if="resType == 2"><img :src="`${webBaseUrl}/temp/index/image_02.png`" width="100%" /></div>
|
||
<div v-if="resType == 3"><img :src="`${webBaseUrl}/temp/doc.png`" width="100%" /></div>
|
||
<div v-if="resType == 4"><img :src="`${webBaseUrl}/temp/index/image_02.png`" width="100%" /></div>
|
||
<div v-if="resType == 5"><img :src="`${webBaseUrl}/temp/index/image_02.png`" width="100%" /></div>
|
||
<div v-if="resType == 6">
|
||
<el-form label-width="80px" size="mini" >
|
||
<el-form-item label="名称">京东方质量奖导读-课程作业</el-form-item>
|
||
<el-form-item label="内容">作业内容包含图文</el-form-item>
|
||
<el-form-item label="附件">课程附件.doc</el-form-item>
|
||
<el-form-item label="截止时间">2020-04-10 10:00</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div v-if="resType == 7">
|
||
<el-form label-width="80px" size="mini" >
|
||
<el-form-item label="名称">京东方质量奖导读-考试</el-form-item>
|
||
<el-form-item label="考试时长">60分钟</el-form-item>
|
||
<el-form-item label="尝试次数">不限制</el-form-item>
|
||
<el-form-item label="评分方式">最高一次</el-form-item>
|
||
<el-form-item label="及格线">60%</el-form-item>
|
||
<el-form-item label=""> <el-link>查看试题</el-link> </el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div v-if="resType == 8" style="padding:5px">
|
||
<p style="margin: 0;text-align: center;">问卷名称</p>
|
||
<el-table border :data="tableData">
|
||
<el-table-column width="500px" prop="content" label="问题">
|
||
<template slot-scope="scope">
|
||
<p>{{ scope.row.content }}</p>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="high" center label="高">
|
||
<template slot-scope="scope">
|
||
<el-radio v-model="scope.row.high"></el-radio>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="middle" center label="中">
|
||
<template slot-scope="scope">
|
||
<el-radio v-model="scope.row.middle"></el-radio>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="low" center label="低">
|
||
<template slot-scope="scope">
|
||
<el-radio v-model="scope.row.low"></el-radio>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="18" v-show="type === 1">
|
||
<div class="grid-info">
|
||
<div class="grid-item">
|
||
<p class="item-title">目录</p>
|
||
<p>名称：历史与文化</p>
|
||
<p>分类：通用力</p>
|
||
<p>资源归属：集团级、B1</p>
|
||
<p>封面：333.jpg</p>
|
||
<p>目标人群: 领导层</p>
|
||
<p>课程价值：实现高效沟通</p>
|
||
<p>课程介绍：实现高效沟通</p>
|
||
<p>标签：实现高效沟通</p>
|
||
<p>关键字：实现高效沟通</p>
|
||
<p>观看设置：pc端可见</p>
|
||
<p>授课教师：王明宇</p>
|
||
<p>开放权限：组织部</p>
|
||
<p>课程来源：微课</p>
|
||
</div>
|
||
<div class="grid-item">
|
||
<p class="item-title">修改后</p>
|
||
<p>历史与文化</p>
|
||
<p>通用力</p>
|
||
<p>集团级、B1</p>
|
||
<p>333.jpg</p>
|
||
<p>领导层</p>
|
||
<p>实现高效沟通</p>
|
||
<p>实现高效沟通</p>
|
||
<p>实现高效沟通</p>
|
||
<p>实现高效沟通</p>
|
||
<p>pc端可见</p>
|
||
<p>王明宇</p>
|
||
<p>组织部</p>
|
||
<p>微课</p>
|
||
</div>
|
||
<div class="grid-item">
|
||
<p class="item-title">修改前</p>
|
||
<p>历史与前行</p>
|
||
<p>专用力</p>
|
||
<p>集团级、B2</p>
|
||
<p>3444.jpg</p>
|
||
<p>领导层</p>
|
||
<p>实现高效沟通</p>
|
||
<p>实现高效沟通</p>
|
||
<p>实现高效沟通</p>
|
||
<p>实现高效沟通</p>
|
||
<p>pc端可见</p>
|
||
<p>王明宇</p>
|
||
<p>组织部</p>
|
||
<p>微课</p>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div><el-button @click="resType = 0;type =0" type="info">课程基本信息</el-button>
|
||
<el-button @click="type =1" type="info">修改记录</el-button>
|
||
</div>
|
||
<div style="padding: 5px;">课程内容目录</div>
|
||
<div style="height: 650px;overflow: auto;">
|
||
<div class="catalog">
|
||
<el-collapse class="catalog-row" size="mini" v-model="activeNames" @change="handleChange">
|
||
<el-collapse-item v-for="(item, index) in collapseList.children" :key="index" :name="index">
|
||
<template slot="title">
|
||
<!-- <i class="el-icon-video-camera"></i> -->
|
||
<span style="font-size:12px">{{ item.title }}</span>
|
||
</template>
|
||
<ul>
|
||
<li @click="showRes(ele.format)" v-for="(ele, i) in item.children" :key="i" class="catalog-cell">
|
||
<span style="font-size:12px">{{formatChoose(ele.format) }}</span>{{ ele.title }}
|
||
</li>
|
||
</ul>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
</div>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data(){
|
||
return {
|
||
activeName:'catalog',
|
||
resType:0,
|
||
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],
|
||
collapseList: {
|
||
id: 1,
|
||
title: '资金系统操作培训',
|
||
children: [
|
||
{
|
||
title: '集团账户管理',
|
||
status: 3,
|
||
children: [
|
||
{
|
||
title: '集团账户管理',
|
||
status: 3, //1代表未开始 2代表进行中 3代表已完成
|
||
format: 1, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
|
||
resource: '/temp/video.mp4',
|
||
timeLength: '1:30:00'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '接口管理',
|
||
status: 2,
|
||
children: [
|
||
{
|
||
title: '接口管理',
|
||
status: 2, //1代表未开始 2代表进行中 3代表已完成
|
||
format: 2, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
|
||
resource: '',
|
||
timeLength: '00:30:00'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '付款管理',
|
||
status: 1,
|
||
children: [
|
||
{
|
||
title: '付款管理',
|
||
status: 1, //1代表未开始 2代表进行中 3代表已完成
|
||
format: 3, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
|
||
resource: ''
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '收款管理',
|
||
status: 1,
|
||
children: [
|
||
{
|
||
title: '收款管理',
|
||
status: 1, //1代表未开始 2代表进行中 3代表已完成
|
||
format: 4, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
|
||
resource: ''
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '投资管理',
|
||
status: 1,
|
||
children: [
|
||
{
|
||
title: '可行性分析原则',
|
||
status: 1, //1代表未开始 2代表进行中 3代表已完成
|
||
format: 5, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接
|
||
resource: ''
|
||
},
|
||
{
|
||
title: '结构平衡',
|
||
status: 1, //1代表未开始 2代表进行中 3代表已完成
|
||
format: 6, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接 6代表作业
|
||
resource: ''
|
||
},
|
||
{
|
||
title: '投资价值的波动',
|
||
status: 1, //1代表未开始 2代表进行中 3代表已完成
|
||
format: 7, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接 7代表考试
|
||
resource: ''
|
||
},
|
||
{
|
||
title: '资金系统操作评估',
|
||
status: 1, //1代表未开始 2代表进行中 3代表已完成
|
||
format: 8, //1代表是视频 2代表音频 3代表文档 4代表图文 5代表外部链接 8代表评估
|
||
resource: ''
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
ctabChange(tab) {
|
||
if(tab.name=='info'){
|
||
this.activeName='catalog';
|
||
}
|
||
},
|
||
showRes(r) {
|
||
this.resType = r;
|
||
this.type = 0;
|
||
},
|
||
handleChange(val) {
|
||
console.log(val);
|
||
},
|
||
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;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.grid-info{
|
||
display: flex;
|
||
padding: 0 20px;
|
||
.grid-item{
|
||
flex: 1;
|
||
.item-one{
|
||
font-size: 18px;
|
||
}
|
||
.item-title{
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
.catalog {
|
||
.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>
|