课件上传的样式修改

This commit is contained in:
daihh
2022-12-29 18:23:41 +08:00
parent bdc571ec4f
commit 0e25f098f3

View File

@@ -130,34 +130,43 @@
</el-main>
</el-container>
</el-container>
<el-dialog title="上传课件" :close-on-click-modal="false" width="800px" :visible.sync="upload.show" custom-class="g-dialog">
<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时无法上传请先压缩视频或剪切成多个再上传</div>
</div>
<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>
<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">
<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 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>
@@ -183,8 +192,8 @@
</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="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>
@@ -334,9 +343,11 @@ export default {
orgId:'',
orgName:''
},
needOrg:'请先选择资源归属',
needOrg:'',//如果有值,上传前会提示
fileList: [],
courseShow: false,
devicePc:true,
deviceMobile:true,
scormUrl:'',//scorm的播放地址
multipleSelection: []
};
@@ -490,25 +501,37 @@ export default {
},
isVisible(num) {
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();
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) {
@@ -570,9 +593,25 @@ export default {
this.$message.error(rs.message);
}
},
handleRemoveSuccess(res) {},
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;
@@ -591,6 +630,7 @@ export default {
coueseFile.batchUpdate(this.fileList).then(rs => {
if (rs.status === 200) {
this.$message.success('保存成功');
this.fileList=[];
this.getSearch();
this.upload.show = false;
} else {
@@ -719,9 +759,6 @@ export default {
this.coursewareShow = true;
this.videoPathUrl = row.pathUrl;
},
handleNodeClick(data) {
console.log(data);
},
viewTopic(row) {
this.fileInfo = row;//这里的fileInfo 相当于内容对象
if(row.resType==50){