mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 19:36:43 +08:00
835 lines
32 KiB
Vue
835 lines
32 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <Remark> 关于课程 的上传流程需要讨论一下 <br/> 文档类的比如word文档，转化成pdf显示</br>
|
||
批量操作还存在疑问，如果是批量操作可见性，那么保存和批量操作不是功能重复了？
|
||
</Remark> -->
|
||
<el-container>
|
||
<el-header style="height:120px">
|
||
<div style="padding: 12px 0px 10px 0px; position: relative;" >
|
||
<!-- <el-row :gutter="20">
|
||
<el-col :span="3" style="margin-left:88%">
|
||
<div class="grid-content bg-purple" style="line-height: 34px; "><el-checkbox v-model="params.self">只看自己</el-checkbox></div>
|
||
</el-col> -->
|
||
<!-- </el-row> -->
|
||
<el-row :gutter="20">
|
||
<!--
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple">
|
||
<el-cascader style="margin-left: 0px" placeholder="资源归属" :options="resOwnerListMap" :props="defaultProps" v-model="resOwner" clearable></el-cascader>
|
||
</div>
|
||
</el-col>
|
||
-->
|
||
<el-col :span="4">
|
||
<div class="grid-content bg-purple"><el-input v-model="params.name" placeholder="名称" clearable></el-input></div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div class="grid-content bg-purple"><el-input placeholder="创建人" v-model="params.sysCreateBy" clearable></el-input></div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div class="grid-content bg-purple">
|
||
<el-select v-model="params.resType" clearable placeholder="课件类型">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8" >
|
||
<div class="grid-content bg-purple" >
|
||
<el-button type="primary" style="margin-left: 0px" @click="search()" icon="el-icon-search">搜索</el-button>
|
||
<el-button @click="reset()" style="margin-left: 20pxpx" type="primary" icon="el-icon-refresh-right">重置</el-button>
|
||
</div>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20" style="margin-top:15px;margin-bottom:15px">
|
||
<el-col :span="4" style="margin-left:0%;">
|
||
<div class="grid-content bg-purple">
|
||
<el-button @click="addFile()" type="primary" icon="el-icon-plus">上传课件</el-button>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="grid-content bg-purple" style="line-height: 34px;">
|
||
<el-checkbox v-model="params.self" @change="getSearch()">仅显示我上传的</el-checkbox>
|
||
<!-- <el-checkbox v-model="params.self" label="只看自己" border></el-checkbox> -->
|
||
</div>
|
||
</el-col>
|
||
<!-- <el-col :span="6">
|
||
|
||
</el-col> -->
|
||
|
||
</el-row>
|
||
<!-- <div><el-button @click="addFile()" type="primary">上传课件</el-button></div> -->
|
||
<!-- <el-cascader style="margin-left: 10px" placeholder="资源归属" :options="resOwnerList" :props="defaultProps" v-model="resOwner" clearable></el-cascader> -->
|
||
<!-- <div> -->
|
||
<!-- <div style="display: flex; justify-content: flex-end"> -->
|
||
|
||
<!-- <div class="one_search"><el-input v-model="params.name" placeholder="名称关键字" clearable></el-input></div> -->
|
||
<!-- <div class="two_search" style="margin-left: 10px">
|
||
<el-select v-model="params.resType" clearable placeholder="课件类型" style="margin-left: 10px">
|
||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||
</el-select>
|
||
</div> -->
|
||
<!-- <el-button type="primary" style="margin-left: 10px" @click="getSearch()">查询</el-button> -->
|
||
<!-- </div> -->
|
||
<!-- </div> -->
|
||
</div>
|
||
</el-header>
|
||
<el-container style="min-height: 500px; margin:0px 10px; ">
|
||
<el-main>
|
||
<el-table border stripe :data="tableData" style="width: 100%">
|
||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||
<el-table-column prop="name" show-overflow-tooltip label="名称" width="200">
|
||
<template slot-scope="scope">
|
||
<span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 点击名称预览 -->
|
||
<el-table-column prop="resType" label="类型">
|
||
<template slot-scope="scope">
|
||
{{ getType(scope.row.resType) }}
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column prop="type" label="资源归属" width="400" show-overflow-tooltip>
|
||
<template slot-scope="scope">
|
||
<span>{{ resOwnerName(scope.row.resOwner1) }}</span>
|
||
<span v-if="scope.row.resOwner2 != ''">/{{ resOwnerName(scope.row.resOwner2) }}</span>
|
||
<span v-if="scope.row.resOwner3 != ''">/{{ resOwnerName(scope.row.resOwner3) }}</span>
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column prop="resType" label="创建人">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.sysCreateBy }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="resType" label="上传时间" width="200">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.sysCreateTime }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column prop="fileName" label="文件名" width="200" show-overflow-tooltip></el-table-column>
|
||
<el-table-column label="操作" width="160px" fixed="right">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="mini" v-if="scope.row.down" @click="downloadFile(scope.row)">下载</el-button>
|
||
<el-button type="text" size="mini" @click="editFile(scope.row)">编辑</el-button>
|
||
<el-button type="text" size="mini" @click="deleteCourseware(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="tableData.length > 0" style="text-align: center;margin-top:70px">
|
||
<el-pagination background
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="page.pageIndex"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="page.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="page.count"
|
||
></el-pagination>
|
||
</div>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
<el-dialog title="上传课件" :close-on-click-modal="false" :close-on-press-escape="false" top="10vh" width="800px" :visible.sync="upload.show" :before-close="handleCloseCheck" custom-class="g-dialog">
|
||
<div>
|
||
<div style="line-height: 30px;">
|
||
<div>请在当前面板选择需要上传的课件</div>
|
||
<div style="">提示：课件大小超过1G时，无法上传，请先压缩视频，或剪切成多个再上传。如果上传zip文件必须是scorm标准打包文件</div>
|
||
</div>
|
||
<div>
|
||
<div style="display: flex;line-height: 30px;padding: 5px 0px;">
|
||
<el-input :readonly="true" placeholder="请选择资源归属" v-model="upload.orgName" style="width: 300px;">
|
||
<el-button v-if="identity==3 || identity==5" @click="showChooseOrg()" size="small" slot="append" icon="el-icon-search">选择</el-button>
|
||
</el-input>
|
||
<!-- <el-cascader clearable v-model="projectOwnership" :options="resOwnerListMap" :props="defaultProps" @change="handleChange"></el-cascader> -->
|
||
</div>
|
||
<!-- <div style="margin-top: 10px" v-if="isUpload"><el-button type="primary" size="mini" @click="isUploadHandle()">选择文件并上传</el-button></div> -->
|
||
<div style="margin-top: 10px;margin-bottom: 10px;">
|
||
<div style="float: right;">
|
||
<el-checkbox v-model="deviceMobile" @change="isVisible(1)" label="移动端可见" border></el-checkbox>
|
||
<el-checkbox v-model="devicePc" @change="isVisible(2)" label="pc端可见" border></el-checkbox>
|
||
</div>
|
||
<file-upload scorm="zip" dir="files" :beforeMsg="needOrg" :showList="true" :value="imageShowUrl" :limit="5" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></file-upload>
|
||
</div>
|
||
|
||
</div>
|
||
<div style="margin-top: 10px">
|
||
<el-table border stripe :data="fileList" style="width: 100%" @selection-change="handleSelectionChange">
|
||
<!-- <el-table-column type="selection" width="40"></el-table-column> -->
|
||
<el-table-column prop="fileName" label="文件名称"></el-table-column>
|
||
<el-table-column prop="name" label="课件名称">
|
||
<template slot-scope="scope">
|
||
<el-input type="text" v-model="scope.row.name"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="resType" label="类型" width="80">
|
||
<template slot-scope="scope">
|
||
{{ getType(scope.row.resType) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="duration" label="时长(分)" width="100">
|
||
<template slot-scope="scope">
|
||
<el-input type="number" size="small" v-model="scope.row.minute"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="可见性" width="100">
|
||
<template slot-scope="scope">
|
||
<el-checkbox label="移动端" v-model="fileList[scope.$index].device1"></el-checkbox>
|
||
<el-checkbox label="pc端" v-model="fileList[scope.$index].device2"></el-checkbox>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="允许下载" width="80" align="center">
|
||
<template slot-scope="scope">
|
||
<el-checkbox v-model="fileList[scope.$index].down"></el-checkbox>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="60">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" @click="deleteFile(scope.row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<span slot="footer">
|
||
<!-- <el-button type="infor" @click="isVisible(1)">移动端可见</el-button>
|
||
<el-button type="infor" @click="isVisible(2)">pc端可见</el-button> -->
|
||
<el-button type="primary" @click="saveUpload()">保存</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog v-if="coursewareShow" title="预览课件" :close-on-click-modal="false" width="800px" :visible.sync="coursewareShow" custom-class="g-dialog">
|
||
<div>
|
||
<div class="courseware-title">{{ fileInfo.name }}</div>
|
||
<div class="courseware-icon">
|
||
<div v-if="fileInfo.resType == 10" style="position: relative;">
|
||
<videoPlayer
|
||
:src="fileBaseUrl + fileInfo.filePath"
|
||
@onPlayerPlaying="onPlayerPlaying"
|
||
@onPlayerPlay="onPlayerPlay"
|
||
@onPlayerPause="onPlayerPause"
|
||
@onPlayerEnded="onPlayerEnded"
|
||
></videoPlayer>
|
||
<!-- <video :src="fileBaseUrl + fileInfo.filePath" controls controlslist="nodownload" style="width: 100%; height: 100%; object-fit: fill"></video> -->
|
||
</div>
|
||
<div v-if="fileInfo.resType == 20">
|
||
<audioPlayer
|
||
:url="fileBaseUrl + fileInfo.filePath"
|
||
:name="fileInfo.fileName"
|
||
@onPlaying="audioPlaying"
|
||
@onPlay="audioPlay"
|
||
@onPause="audioPause"
|
||
@onPlayEnd="audioEnd">
|
||
</audioPlayer>
|
||
<!-- <audio width="100%" controls :src="fileBaseUrl+fileInfo.filePath">
|
||
您的浏览器不支持 audio 标签。
|
||
</audio> -->
|
||
</div>
|
||
<div v-if="fileInfo.resType == 30"><img style="width:100%;height:100%" :src="fileBaseUrl + fileInfo.filePath" alt="图片" /></div>
|
||
<div v-if="fileInfo.resType == 40"><pdfPreview :filePath="fileBaseUrl + fileInfo.previewFilePath"></pdfPreview></div>
|
||
<div v-if="fileInfo.resType == 50"> <!--scorm课件预览-->
|
||
<iframe v-if="scormUrl" :src="scormUrl" frameborder="0" border="0px" style="width:100%;height:530px;border:0px;"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span slot="footer"><el-button type="primary" @click="coursewareShow = false">关闭</el-button></span>
|
||
</el-dialog>
|
||
<el-dialog v-if="editCoursewareShow" title="编辑课件" :close-on-click-modal="false" :visible.sync="editCoursewareShow" custom-class="g-dialog">
|
||
<div>
|
||
<el-form ref="form" :model="form" label-width="80px">
|
||
<!-- <el-form-item label="资源归属">
|
||
<el-cascader v-model="projectOwnership1" :options="resOwnerListMap" :props="defaultProps" @change="handleChange"></el-cascader>
|
||
</el-form-item> -->
|
||
<!-- <el-form-item label="编号">{{}}</el-form-item> -->
|
||
<el-form-item label="资源归属">{{ form.orgName }}</el-form-item>
|
||
<el-form-item label="文件名称">{{ form.fileName }}</el-form-item>
|
||
<el-form-item label="课件名称"><el-input v-model="form.name" maxlength="50" show-word-limit></el-input></el-form-item>
|
||
<el-form-item label="课件类型">{{ getType(form.resType) }}</el-form-item>
|
||
<el-form-item label="时长(分)">
|
||
<!-- <el-input v-model="form.duration"></el-input> -->
|
||
<el-input type="number" placeholder="请输入数字" :maxlength="32" show-word-limit v-model="form.minute"></el-input>
|
||
<!-- <el-input-number max="" v-model="form.duration" controls-position="right"></el-input-number> -->
|
||
</el-form-item>
|
||
<el-form-item label="可见性">
|
||
<el-checkbox label="移动端" v-model="form.device1"></el-checkbox>
|
||
<el-checkbox label="pc端" v-model="form.device2"></el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="允许下载">
|
||
<el-checkbox label="允许" v-model="form.down"></el-checkbox>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer"><el-button :loading="loading" type="primary" @click="saveUpdate()">保存</el-button></span>
|
||
</el-dialog>
|
||
<chooseOrg ref="refChooseOrg" @confirm="confirmChooseOrg"></chooseOrg>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import coueseFile from '@/api/modules/courseFile';
|
||
import FileUpload from '@/components/FileUpload/index.vue';
|
||
import { getType, deepCopy, toContentType } from '../../utils/tools.js';
|
||
import pdfPreview from '@/components/PdfPreview/index.vue';
|
||
import { mapGetters, mapActions } from 'vuex';
|
||
import videoPlayer from '@/components/VideoPlayer/index.vue';
|
||
import audioPlayer from '@/components/AudioPlayer/index.vue';
|
||
import chooseOrg from '@/components/System/chooseOrg.vue';
|
||
import apiUserBasic from '@/api/boe/userbasic.js';
|
||
export default {
|
||
components: { FileUpload, pdfPreview, videoPlayer, audioPlayer,chooseOrg},
|
||
computed: {
|
||
...mapGetters(['resOwnerMap', 'sysTypeMap','identity','userInfo'])
|
||
},
|
||
data() {
|
||
return {
|
||
resOwnerListMap: [],
|
||
//fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
fileBaseUrl:this.$xpage.constants.fileBaseUrl, //获成动态获取的处理
|
||
getType: getType,
|
||
loading: false,
|
||
defaultProps: {
|
||
value: 'code',
|
||
label: 'name'
|
||
},
|
||
// resOwnerName: resOwnerIndexName,
|
||
isUpload: true,
|
||
fileInfo: {},
|
||
device1: 1,
|
||
device2: 2,
|
||
projectOwnership1: '',
|
||
imageShowUrl: '',
|
||
page: {
|
||
count: 0,
|
||
pageSize: 10,
|
||
pageIndex: 1
|
||
},
|
||
resOwner: [],
|
||
params: {
|
||
name: '', //查,询的名称的关键字
|
||
self: null, //默认是true,是否只查询自己上传的课件
|
||
resOwner1: '', //资源归属一级的id
|
||
resOwner2: '', //资源归属二级的id
|
||
resOwner3: '', // 资源归属三级的id
|
||
resType: '' //文件类型,10视频，20音频，30图片， 40 文档，41表图文，50表scrom包,90表其它
|
||
},
|
||
options: [
|
||
{ value: null, label: '全部' },
|
||
{ value: 10, label: '视频' },
|
||
{ value: 20, label: '音频' },
|
||
{ value: 30, label: '图片' },
|
||
{ value: 40, label: '文档' },
|
||
{ value: 50, label: "scrom" }
|
||
],
|
||
form: {
|
||
id:'',
|
||
device1:false,
|
||
device2:false,
|
||
fileName:'',
|
||
name:'',
|
||
resType:'',
|
||
duration:0,
|
||
minute:0,
|
||
down:false
|
||
},
|
||
editCoursewareShow: false,
|
||
currentPage4: 4,
|
||
projectOwnership: [],
|
||
videoPathUrl: '',
|
||
coursewareShow: false,
|
||
tableData: [], //Array(10).fill(item)
|
||
// params: { code: '', ctype: '' },
|
||
data: [],
|
||
// defaultProps: { children: 'children', label: 'label' },
|
||
upload: {
|
||
show: false,
|
||
orgId:'',
|
||
orgName:''
|
||
},
|
||
needOrg:'',//如果有值，上传前会提示
|
||
fileList: [],
|
||
courseShow: false,
|
||
devicePc:true,
|
||
deviceMobile:true,
|
||
scormUrl:'',//scorm的播放地址
|
||
multipleSelection: []
|
||
};
|
||
},
|
||
watch: {
|
||
projectOwnership(val) {
|
||
if (val.length !== 0) {
|
||
this.isUpload = false;
|
||
} else {
|
||
this.isUpload = true;
|
||
}
|
||
},
|
||
resOwner(val) {
|
||
if (val.length !== 0) {
|
||
this.params.resOwner1 = val[0];
|
||
this.params.resOwner2 = val[1];
|
||
this.params.resOwner3 = val[2];
|
||
} else {
|
||
this.params.resOwner1 = '';
|
||
this.params.resOwner2 = '';
|
||
this.params.resOwner3 = '';
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.upload.orgId=this.userInfo.departId;
|
||
// this.upload.orgName=this.userInfo.departName;
|
||
// this.needOrg='';
|
||
//console.log(this.upload.orgId,'this.upload.orgId')
|
||
if(this.upload.orgId){
|
||
apiUserBasic.getOrgInfo(this.upload.orgId).then(rs=>{
|
||
if(rs.status==200){
|
||
this.upload.orgName=rs.result.name;
|
||
this.needOrg='';
|
||
}
|
||
});
|
||
}
|
||
this.loadResOwners();
|
||
this.getResOwnerTree().then(rs => {
|
||
this.resOwnerListMap = rs;
|
||
});
|
||
this.search();
|
||
},
|
||
methods: {
|
||
beforeCheck(){
|
||
if(!this.upload.orgId ||!this.upload.orgName){
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
showChooseOrg(){
|
||
this.$refs.refChooseOrg.dlgShow = true;
|
||
},
|
||
confirmChooseOrg(orgInfo){
|
||
//console.log(orgInfo,'orgInfo');
|
||
this.upload.orgId=orgInfo.id;
|
||
this.upload.orgName=orgInfo.name;
|
||
this.needOrg='';
|
||
this.$refs.refChooseOrg.dlgShow = false;
|
||
// this.orgName=orgInfo.name;
|
||
// this.courseInfo.orgId=orgInfo.id;
|
||
// this.$refs.refChooseOrg.dlgShow = false;
|
||
},
|
||
search(){
|
||
//this.params.pageIndex = 1;
|
||
this.page.pageIndex=1;
|
||
this.getSearch();
|
||
},
|
||
reset() {
|
||
this.params.self = null;
|
||
this.params.name = '';
|
||
this.params.resType = '';
|
||
this.resOwner = [];
|
||
this.params.sysCreateBy = '';
|
||
this.params.resOwner1 = '';
|
||
this.params.resOwner2 = '';
|
||
this.params.resOwner3 = '';
|
||
//this.params.pageIndex = 1;
|
||
this.page.pageIndex=1;
|
||
this.getSearch();
|
||
},
|
||
...mapActions({
|
||
getResOwnerTree: 'resOwner/getResOwnerTree',
|
||
loadResOwners: 'resOwner/loadResOwners'
|
||
}),
|
||
resOwnerName(code) {
|
||
if (code == '') {
|
||
return '';
|
||
}
|
||
return this.resOwnerMap.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('播放结束');
|
||
},
|
||
addFile() {
|
||
this.upload.show = true;
|
||
this.projectOwnership = [];
|
||
this.fileList = [];
|
||
},
|
||
isUploadHandle() {
|
||
this.$message.warning('请选择资源归属！');
|
||
},
|
||
// 编辑保存
|
||
async saveUpdate() {
|
||
this.form.resOwner1 = this.projectOwnership1[0]; //资源归属一级的id
|
||
this.form.resOwner2 = this.projectOwnership1[1]; //资源归属二级的id
|
||
this.form.resOwner3 = this.projectOwnership1[2]; //资源归属三级的id
|
||
if (this.form.device1 === true && this.form.device2 === true) {
|
||
this.form.device = 3;
|
||
} else if (this.form.device1 === true) {
|
||
this.form.device = 1;
|
||
} else if (this.form.device2 === true) {
|
||
this.form.device = 2;
|
||
}
|
||
// 时长，秒与分钟的转化
|
||
if (this.form.minute) {
|
||
this.form.duration = this.form.minute * 60;
|
||
}
|
||
|
||
try {
|
||
const { status,message} = await coueseFile.batchUpdate([this.form]);
|
||
if (status === 200) {
|
||
this.$message.success('保存成功');
|
||
this.editCoursewareShow = false;
|
||
this.getSearch();
|
||
} else {
|
||
this.$message.error(message);
|
||
}
|
||
} catch (error) {
|
||
this.$message.error(error);
|
||
this.editCoursewareShow = false;
|
||
}
|
||
},
|
||
|
||
isVisible(num) {
|
||
var mflag=this.deviceMobile;
|
||
var pflag=this.devicePc;
|
||
this.fileList.forEach((item, i) => {
|
||
if (num === 1) {
|
||
item.device1 = mflag;
|
||
this.$set(this.fileList, i, item);
|
||
} else {
|
||
item.device2 = pflag;
|
||
this.$set(this.fileList, i, item);
|
||
}
|
||
});
|
||
this.$forceUpdate();
|
||
// let ids = [];
|
||
// this.multipleSelection.forEach(item => {
|
||
// ids.push(item.id);
|
||
// });
|
||
// //待完善
|
||
// for (let index = 0; index < ids.length; index++) {
|
||
// this.fileList.forEach((item, i) => {
|
||
// if (item.id === ids[index]) {
|
||
// if (num === 1) {
|
||
// item.device1 = true;
|
||
// this.$set(this.fileList, i, item);
|
||
// } else {
|
||
// item.device2 = true;
|
||
// this.$set(this.fileList, i, item);
|
||
// }
|
||
// this.$forceUpdate();
|
||
// }
|
||
// });
|
||
// }
|
||
},
|
||
handleUploadSuccess(rs) {
|
||
if (rs.status === 200) {
|
||
let type = toContentType(rs.result.fileType);
|
||
// ["doc", "xls", "ppt","docx", "xlsx", "pptx","png","txt", "pdf","jpg","gif","bmp","mp4","mp3"]
|
||
if(rs.result.displayName.length > 100){
|
||
this.$message.error('文件名称请不要超过100个字符');
|
||
return;
|
||
}
|
||
//console.log('上传文件：'+rs.result.displayName);
|
||
const data = {
|
||
orgId:this.upload.orgId,
|
||
orgName:this.upload.orgName,
|
||
fileName: rs.result.displayName,
|
||
fileType: rs.result.fileType.toLowerCase(), //文件的后缀名，比如：mp4
|
||
filePath: rs.result.filePath, // 文件的保存路径
|
||
resOwner1: this.projectOwnership[0], //资源归属一级的id
|
||
resOwner2: this.projectOwnership[1], //资源归属二级的id
|
||
resOwner3: this.projectOwnership[2], //资源归属三级的id
|
||
resType: type //文件类型,10视频，20音频，30图片， 40 文档，50表图文，60表scrom包,90表其它，
|
||
// remark: 备注说明，可以为空，不填
|
||
};
|
||
//try {
|
||
coueseFile.saveUpload(data).then(res=>{
|
||
if(res.status==200){
|
||
//console.log('上传文件成功：'+rs.result.displayName);
|
||
res.result.device1 = true;
|
||
res.result.device2 = true;
|
||
res.result.minute='';
|
||
if(res.result.duration){
|
||
res.result.minute=Math.round(res.result.duration/60); //四舍五入
|
||
}
|
||
this.fileList.push(res.result);
|
||
}else{
|
||
this.$message.error(res.message);
|
||
}
|
||
}).catch (error=>{
|
||
console.log(error,'error')
|
||
//this.$message.error(error);
|
||
});
|
||
// const { result, status } = coueseFile.saveUpload(data);
|
||
// if (status === 200) {
|
||
// console.log('上传文件成功：'+rs.result.displayName);
|
||
// result.device1 = true;
|
||
// result.device2 = true;
|
||
// result.minute='';
|
||
// if(result.duration){
|
||
// result.minute=Math.round(result.duration/60); //四舍五入
|
||
// }
|
||
|
||
// this.fileList.push(result);
|
||
// } else {
|
||
// this.$message.error(error);
|
||
// }
|
||
//} catch (error) {
|
||
// this.$message.error(error);
|
||
//}
|
||
} else {
|
||
this.$message.error(rs.message);
|
||
}
|
||
},
|
||
handleRemoveSuccess(res) {
|
||
|
||
},
|
||
handleCloseCheck(done){
|
||
//console.log('关闭的处理aaaaa');
|
||
if(this.fileList.length>0){
|
||
this.$message.error('有待保存的上传文件，请执行保存操作');
|
||
return false;
|
||
}else{
|
||
return done(true);
|
||
}
|
||
|
||
},
|
||
// 文件上传保存
|
||
saveUpload() {
|
||
if(!this.upload.orgName){
|
||
this.$message.success('请选择资源归属');
|
||
return;
|
||
}
|
||
this.fileList.forEach(item => {
|
||
if (item.device1 === true && item.device2 === true) {
|
||
item.device = 3;
|
||
} else if (item.device1 === true) {
|
||
item.device = 1;
|
||
} else if (item.device2 === true) {
|
||
item.device = 2;
|
||
}
|
||
//转化为秒
|
||
// if(item.minute){
|
||
// item.duration=parseFloat(item.minute)*60;
|
||
// }
|
||
// 如果没有给一个默认值30分钟
|
||
item.duration = item.minute ? parseFloat(item.minute) * 60 : 1800;
|
||
});
|
||
this.loading = true;
|
||
coueseFile.batchUpdate(this.fileList).then(rs => {
|
||
if (rs.status === 200) {
|
||
this.$message.success('保存成功');
|
||
this.fileList=[];
|
||
this.getSearch();
|
||
this.upload.show = false;
|
||
} else {
|
||
this.$message.error(rs.message);
|
||
}
|
||
this.loading = false;
|
||
});
|
||
},
|
||
// 列表查询
|
||
async getSearch() {
|
||
try {
|
||
// this.params.count = this.page.count;
|
||
this.params.pageSize = this.page.pageSize;
|
||
this.params.pageIndex = this.page.pageIndex;
|
||
const { result, error, status } = await coueseFile.pageList(this.params, this.page);
|
||
if (status === 200) {
|
||
result.list.forEach(item=>{
|
||
item.minute=Math.round(item.duration/60);//转化为分钟
|
||
})
|
||
this.tableData = result.list;
|
||
this.page.count = result.count;
|
||
this.page.pageSize = result.pageSize;
|
||
// this.page.totalPages = result.totalPages;
|
||
}
|
||
} catch (error) {}
|
||
},
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val;
|
||
},
|
||
editFile(row) {
|
||
coueseFile.detail(row.id).then(res=>{
|
||
if(res.status == 200) {
|
||
this.form = res.result;
|
||
if(this.form.duration){
|
||
this.form.minute=Math.round(res.result.duration/60);//转化为分钟
|
||
}else{
|
||
this.form.minute=0;
|
||
}
|
||
if (res.result.resOwner3 == '') {
|
||
this.projectOwnership1 = [res.result.resOwner1, res.result.resOwner2];
|
||
} else {
|
||
this.projectOwnership1 = [res.result.resOwner1, res.result.resOwner2, res.result.resOwner3];
|
||
}
|
||
if (res.result.device === 1) {
|
||
this.form.device1 = true;
|
||
} else if (res.result.device === 2) {
|
||
this.form.device2 = true;
|
||
} else if (res.result.device === 3) {
|
||
this.form.device1 = true;
|
||
this.form.device2 = true;
|
||
}
|
||
if(!res.result.orgName && res.result.orgId){
|
||
apiUserBasic.getOrgInfo(res.result.orgId).then(rs=>{
|
||
if(rs.status==200){
|
||
this.form.orgName=rs.result.name;
|
||
}
|
||
});
|
||
}
|
||
}
|
||
})
|
||
this.editCoursewareShow = true;
|
||
},
|
||
handleSizeChange(val) {
|
||
this.page.pageSize = val;
|
||
this.page.pageIndex = 1;
|
||
this.getSearch();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.page.pageIndex = val;
|
||
this.getSearch();
|
||
},
|
||
handleChange(value) {
|
||
this.projectOwnership = value;
|
||
},
|
||
downloadFile(row) {
|
||
if (!row.filePath) return;
|
||
let link = document.createElement('a'); //创建a标签
|
||
link.style.display = 'none'; //使其隐藏
|
||
link.download = this.fileBaseUrl + row.filePath;
|
||
link.setAttribute('target', '_blank');
|
||
link.href = this.fileBaseUrl + row.filePath; //赋予文件下载地址
|
||
link.setAttribute('download', row.name); //设置下载属性 以及文件名
|
||
document.body.appendChild(link); //a标签插至页面中
|
||
link.click(); //强制触发a标签事件
|
||
document.body.removeChild(link);
|
||
},
|
||
deleteFile(row) {
|
||
this.fileList.forEach((item, index) => {
|
||
if (item.id === row.id) {
|
||
this.fileList.splice(index, 1);
|
||
}
|
||
});
|
||
},
|
||
uploadFile() {
|
||
if (this.projectOwnership.length === 0) return this.$message.warning('请选择项目归属！');
|
||
},
|
||
deleteCourseware(row) {
|
||
this.$confirm('此操作将数据永久删除, 是否继续?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
})
|
||
.then(async () => {
|
||
let params = {
|
||
id: row.id,
|
||
filePath: row.filePath, //文件的路径
|
||
flag: true
|
||
};
|
||
const { status } = await coueseFile.delFile(params);
|
||
if (status === 200) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
});
|
||
this.getSearch();
|
||
}
|
||
})
|
||
.catch(err => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
});
|
||
});
|
||
},
|
||
viewCourseware(row) {
|
||
this.coursewareShow = true;
|
||
this.videoPathUrl = row.pathUrl;
|
||
},
|
||
viewTopic(row) {
|
||
this.fileInfo = row;//这里的fileInfo 相当于内容对象
|
||
if(row.resType==50){
|
||
if(!row.content){
|
||
this.$message({type: 'error',message: '无SCORM内容，SCORM包解析失败'});
|
||
return;
|
||
}
|
||
//scorm课件的内容，取第一个sco
|
||
var scorm=JSON.parse(row.content);
|
||
//console.log(scorm,'scorm')
|
||
if(scorm){
|
||
let urlPre=window.location.protocol;
|
||
let configUrl=process.env.VUE_APP_SCORM_URL;
|
||
configUrl=urlPre+configUrl.substring(configUrl.indexOf(':')+1);
|
||
//这里需要提取的到配置文件中，实际中只需要传 rowId就可以了
|
||
this.scormUrl=configUrl+'?mode=preview&scormId='+row.id;//播放的首页
|
||
}else{
|
||
this.$message({type: 'error',message: 'SCORM包解析失败'});
|
||
}
|
||
|
||
}else if(row.resType==40){
|
||
if(!row.previewFilePath){
|
||
row.previewFilePath=row.filePath;
|
||
}
|
||
}
|
||
//console.log(row, 'row');
|
||
this.coursewareShow = true;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.butpost{
|
||
position: absolute;
|
||
right: 1%;
|
||
}
|
||
.butpost2{
|
||
position: absolute;
|
||
right: 1%;
|
||
}
|
||
.el-col {
|
||
padding: 0 0 0 10px !important;
|
||
}
|
||
.grid-content {
|
||
padding-right: 0px;
|
||
}
|
||
.el-button--text {
|
||
font-size: 14px;
|
||
}
|
||
.el-aside {
|
||
margin: 0px;
|
||
padding: 0px 2px 10px 0px;
|
||
}
|
||
.el-main {
|
||
margin: 0px;
|
||
padding: 0px 10px;
|
||
}
|
||
.courseware-title {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin-left: 50px;
|
||
}
|
||
.courseware-icon {
|
||
text-align: center;
|
||
width: 100%;
|
||
min-height: 400px;
|
||
}
|
||
</style>
|