SCORM课件的上传

This commit is contained in:
daihh
2022-12-12 17:22:05 +08:00
parent 6f32244ab4
commit 1baef6b998
2 changed files with 69 additions and 24 deletions

View File

@@ -12,12 +12,13 @@
</el-col> -->
<!-- </el-row> -->
<el-row :gutter="20">
<!-- <el-col :span="6">
<!--
<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>
-->
<el-col :span="4">
<div class="grid-content bg-purple"><el-input v-model="params.name" placeholder="名称" clearable></el-input></div>
</el-col>
@@ -129,48 +130,51 @@
</el-main>
</el-container>
</el-container>
<el-dialog title="上传课件" :close-on-click-modal="false" width="700px" :visible.sync="upload.show" custom-class="g-dialog">
<el-dialog title="上传课件" :close-on-click-modal="false" width="800px" :visible.sync="upload.show" custom-class="g-dialog">
<div>
<div style="line-height: 30px;">
<div>请在当前面板选择需要上传的课件</div>
<div>提示课件大小超过1G时无法上传请先压缩视频或剪切成多个再上传</div>
<div style="">提示课件大小超过1G时无法上传请先压缩视频或剪切成多个再上传</div>
</div>
<div>
<!-- <div>
资源归属
<el-cascader clearable v-model="projectOwnership" :options="resOwnerListMap" :props="defaultProps" @change="handleChange"></el-cascader>
</div> -->
<div style="display: flex;line-height: 30px;">
<span style="font-weight: 600;">资源归属</span>
<el-input 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">
<file-upload dir="files" :showList="true" :value="imageShowUrl" :limit="5" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></file-upload>
<file-upload 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="55"></el-table-column>
<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="duration" label="时长(秒)">
<el-table-column prop="duration" label="时长(分)" width="100">
<template slot-scope="scope">
<el-input type="number" v-model="scope.row.duration"></el-input>
<el-input type="number" size="small" v-model="scope.row.duration"></el-input>
</template>
</el-table-column>
<el-table-column label="可见性">
<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="200">
<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="80">
<el-table-column label="操作" width="60">
<template slot-scope="scope">
<el-button type="text" @click="deleteFile(scope.row)">删除</el-button>
</template>
@@ -247,6 +251,7 @@
</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>
@@ -258,11 +263,11 @@ 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';
export default {
components: { FileUpload, pdfPreview, videoPlayer, audioPlayer },
components: { FileUpload, pdfPreview, videoPlayer, audioPlayer,chooseOrg},
computed: {
...mapGetters(['resOwnerMap', 'sysTypeMap'])
...mapGetters(['resOwnerMap', 'sysTypeMap','identity','userInfo'])
},
data() {
return {
@@ -320,8 +325,11 @@ export default {
data: [],
// defaultProps: { children: 'children', label: 'label' },
upload: {
show: false
show: false,
orgId:'',
orgName:''
},
needOrg:'请先选择资源归属',
fileList: [],
courseShow: false,
multipleSelection: []
@@ -348,6 +356,14 @@ export default {
}
},
mounted() {
this.upload.orgId==this.userInfo.departId;
if(this.upload.orgId){
apiUserBasic.getOrgInfo(this.upload.orgId).then(rs=>{
if(rs.status==200){
this.upload.orgName=rs.result.name;
}
});
}
this.loadResOwners();
this.getResOwnerTree().then(rs => {
this.resOwnerListMap = rs;
@@ -355,6 +371,25 @@ export default {
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;
@@ -472,6 +507,8 @@ export default {
return;
}
const data = {
orgId:this.upload.orgId,
orgName:this.upload.orgName,
fileName: rs.result.displayName,
fileType: rs.result.fileType.toLowerCase(), //文件的后缀名比如mp4
filePath: rs.result.filePath, // 文件的保存路径