|
|
|
@ -165,26 +165,15 @@ |
|
|
|
:close-on-click-modal="false"> |
|
|
|
:close-on-click-modal="false"> |
|
|
|
<el-form label-width="80px"> |
|
|
|
<el-form label-width="80px"> |
|
|
|
<el-form-item label="资源添加"> |
|
|
|
<el-form-item label="资源添加"> |
|
|
|
<el-upload :before-upload="beforeUpload" |
|
|
|
<Upload :max-size="100000" |
|
|
|
:on-remove="handleRemove" |
|
|
|
|
|
|
|
:on-error="uploadError" |
|
|
|
|
|
|
|
:on-success="uploadSuccess" |
|
|
|
|
|
|
|
:before-remove="beforeRemove" |
|
|
|
|
|
|
|
:limit="1" |
|
|
|
|
|
|
|
:on-exceed="handleExceed" |
|
|
|
|
|
|
|
:action="this.api.fileupload" |
|
|
|
|
|
|
|
:file-list="uploadList" |
|
|
|
:file-list="uploadList" |
|
|
|
:headers="headers" |
|
|
|
:on-remove="handleRemove" |
|
|
|
:http-request="handleRequest" |
|
|
|
@beforeUpload="beforeUpload" |
|
|
|
name="file"> |
|
|
|
@onSuccess="uploadSuccess"> |
|
|
|
<el-button size="small"><img src="@/assets/img/upload.png" |
|
|
|
<template slot="tip"> |
|
|
|
alt=""> 上传资源</el-button> |
|
|
|
<p>视频请上传MP4格式，大小不超过30M；office文件大小不要超过10M</p> |
|
|
|
<div slot="tip" |
|
|
|
</template> |
|
|
|
class="el-upload__tip">视频请上传MP4格式，大小不超过30M；office文件大小不要超过10M</div> |
|
|
|
</Upload> |
|
|
|
</el-upload> |
|
|
|
|
|
|
|
<el-progress v-if="showProgress" |
|
|
|
|
|
|
|
:stroke-width="3" |
|
|
|
|
|
|
|
:percentage="progressPercent"></el-progress> |
|
|
|
|
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="小节名称"> |
|
|
|
<el-form-item label="小节名称"> |
|
|
|
<el-input placeholder="请输入小节名称" |
|
|
|
<el-input placeholder="请输入小节名称" |
|
|
|
@ -206,24 +195,12 @@ |
|
|
|
:close-on-click-modal="false" |
|
|
|
:close-on-click-modal="false" |
|
|
|
@close="closeSwitch"> |
|
|
|
@close="closeSwitch"> |
|
|
|
<div style="text-align: center"> |
|
|
|
<div style="text-align: center"> |
|
|
|
<el-upload :before-upload="beforeUpload" |
|
|
|
<Upload :file-list="uploadList" |
|
|
|
:on-remove="handleRemove" |
|
|
|
:on-remove="handleRemove" |
|
|
|
:on-error="uploadError" |
|
|
|
@beforeUpload="beforeUpload" |
|
|
|
:on-success="uploadSuccess" |
|
|
|
@onSuccess="uploadSuccess"> |
|
|
|
:before-remove="beforeRemove" |
|
|
|
<div slot="tip"></div> |
|
|
|
:limit="1" |
|
|
|
</Upload> |
|
|
|
:on-exceed="handleExceed" |
|
|
|
|
|
|
|
:action="this.api.fileupload" |
|
|
|
|
|
|
|
:file-list="uploadList" |
|
|
|
|
|
|
|
:headers="headers" |
|
|
|
|
|
|
|
:http-request="handleRequest" |
|
|
|
|
|
|
|
name="file"> |
|
|
|
|
|
|
|
<el-button size="small"><img src="@/assets/img/upload.png" |
|
|
|
|
|
|
|
alt=""> 上传资源</el-button> |
|
|
|
|
|
|
|
</el-upload> |
|
|
|
|
|
|
|
<el-progress v-if="showProgress" |
|
|
|
|
|
|
|
:stroke-width="3" |
|
|
|
|
|
|
|
:percentage="progressPercent"></el-progress> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<span slot="footer" |
|
|
|
<span slot="footer" |
|
|
|
class="dialog-footer"> |
|
|
|
class="dialog-footer"> |
|
|
|
@ -266,7 +243,7 @@ |
|
|
|
style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;"> |
|
|
|
style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-show="iframeSrc" |
|
|
|
<div v-show="iframeSrc || videoSrc" |
|
|
|
class="el-image-viewer__wrapper" |
|
|
|
class="el-image-viewer__wrapper" |
|
|
|
:class="{active: iframeSrc}" |
|
|
|
:class="{active: iframeSrc}" |
|
|
|
style="z-index: 2000"> |
|
|
|
style="z-index: 2000"> |
|
|
|
@ -282,6 +259,16 @@ |
|
|
|
id="fileIframe" |
|
|
|
id="fileIframe" |
|
|
|
:src="iframeSrc" |
|
|
|
:src="iframeSrc" |
|
|
|
frameborder="0"></iframe> |
|
|
|
frameborder="0"></iframe> |
|
|
|
|
|
|
|
<video v-if="videoSrc" |
|
|
|
|
|
|
|
class="video" |
|
|
|
|
|
|
|
width="1200" |
|
|
|
|
|
|
|
height="600" |
|
|
|
|
|
|
|
autoplay |
|
|
|
|
|
|
|
controls> |
|
|
|
|
|
|
|
<source :src="videoSrc" |
|
|
|
|
|
|
|
type="video/mp4"> |
|
|
|
|
|
|
|
您的浏览器不支持 video 标签。 |
|
|
|
|
|
|
|
</video> |
|
|
|
<template v-if="showMask"> |
|
|
|
<template v-if="showMask"> |
|
|
|
<div class="mask" |
|
|
|
<div class="mask" |
|
|
|
style="width: 200px;height: 30px;top: 53px;right: 320px"></div> |
|
|
|
style="width: 200px;height: 30px;top: 53px;right: 320px"></div> |
|
|
|
@ -360,7 +347,9 @@ import util from "@/libs/util"; |
|
|
|
import Setting from "@/setting"; |
|
|
|
import Setting from "@/setting"; |
|
|
|
import { Loading } from "element-ui"; |
|
|
|
import { Loading } from "element-ui"; |
|
|
|
import pdf from "@/components/pdf"; |
|
|
|
import pdf from "@/components/pdf"; |
|
|
|
import axios from 'axios' |
|
|
|
import Upload from '@/components/upload'; |
|
|
|
|
|
|
|
import Oss from '@/components/upload/upload.js' |
|
|
|
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "contentSettings", |
|
|
|
name: "contentSettings", |
|
|
|
@ -388,6 +377,7 @@ export default { |
|
|
|
fileUrl: "", |
|
|
|
fileUrl: "", |
|
|
|
originalFileName: "", |
|
|
|
originalFileName: "", |
|
|
|
fileType: "", |
|
|
|
fileType: "", |
|
|
|
|
|
|
|
videoSrc: '', |
|
|
|
playAuth: "", |
|
|
|
playAuth: "", |
|
|
|
player: null, |
|
|
|
player: null, |
|
|
|
previewImg: "", |
|
|
|
previewImg: "", |
|
|
|
@ -425,7 +415,7 @@ export default { |
|
|
|
moved: false // 是否移动过 |
|
|
|
moved: false // 是否移动过 |
|
|
|
}; |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
components: { pdf }, |
|
|
|
components: { pdf, Upload }, |
|
|
|
mounted () { |
|
|
|
mounted () { |
|
|
|
this.insertScript(); |
|
|
|
this.insertScript(); |
|
|
|
this.id = this.$route.query.id; |
|
|
|
this.id = this.$route.query.id; |
|
|
|
@ -528,40 +518,12 @@ export default { |
|
|
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
|
|
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
|
|
|
); |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
// 自定义上传 |
|
|
|
uploadSuccess (file) { |
|
|
|
handleRequest (data) { |
|
|
|
|
|
|
|
const param = new FormData() |
|
|
|
|
|
|
|
param.append('file', data.file) |
|
|
|
|
|
|
|
const config = { |
|
|
|
|
|
|
|
timeout: 10000000000, |
|
|
|
|
|
|
|
headers: { |
|
|
|
|
|
|
|
'Accept': '*/*', |
|
|
|
|
|
|
|
'Content-Type': 'multipart/form-data', |
|
|
|
|
|
|
|
token: util.local.get(Setting.tokenKey) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
// 获取上传进度，自带的组件上传进度不准确 |
|
|
|
|
|
|
|
onUploadProgress: progressEvent => { |
|
|
|
|
|
|
|
const per = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2)) |
|
|
|
|
|
|
|
if (this.progressPercent <= 80) this.progressPercent = (per > 80) ? (Math.random() * 10 + 80).toFixed(2) : per |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
axios.post(this.api.fileupload, param, config).then(res => { |
|
|
|
|
|
|
|
this.progressPercent = 100 |
|
|
|
|
|
|
|
this.showProgress = false |
|
|
|
|
|
|
|
const { fileId, fileType, fileUrl, ossFileName } = res.data.data.filesResult |
|
|
|
|
|
|
|
this.uploading = false |
|
|
|
this.uploading = false |
|
|
|
this.fileId = fileId |
|
|
|
this.fileId = '' |
|
|
|
this.fileType = fileType |
|
|
|
this.fileType = file.format |
|
|
|
this.fileUrl = fileUrl |
|
|
|
this.fileUrl = file.url |
|
|
|
this.fileName = ossFileName |
|
|
|
this.fileName = file.name |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
uploadSuccess (res, file, fileList) { |
|
|
|
|
|
|
|
this.uploading = false; |
|
|
|
|
|
|
|
this.fileId = res.data.filesResult.fileId; |
|
|
|
|
|
|
|
this.fileType = res.data.filesResult.fileType; |
|
|
|
|
|
|
|
this.fileUrl = res.data.filesResult.fileUrl; |
|
|
|
|
|
|
|
this.fileName = res.data.filesResult.ossFileName; |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
uploadError (err, file, fileList) { |
|
|
|
uploadError (err, file, fileList) { |
|
|
|
this.$message({ |
|
|
|
this.$message({ |
|
|
|
@ -576,7 +538,8 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
handleRemove (file, fileList) { |
|
|
|
handleRemove (file, fileList) { |
|
|
|
this.uploadList = fileList; |
|
|
|
Oss.del(this.fileUrl) |
|
|
|
|
|
|
|
this.fileUrl = '' |
|
|
|
}, |
|
|
|
}, |
|
|
|
uploadSure () { |
|
|
|
uploadSure () { |
|
|
|
this.importVisible = false; |
|
|
|
this.importVisible = false; |
|
|
|
@ -788,6 +751,8 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
preview (row) { |
|
|
|
preview (row) { |
|
|
|
if (this.transferType(row.fileType) == "视频") { |
|
|
|
if (this.transferType(row.fileType) == "视频") { |
|
|
|
|
|
|
|
// 阿里云视频点播 |
|
|
|
|
|
|
|
if (row.fileId) { |
|
|
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
|
|
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
|
|
|
this.playAuth = res.data.playAuth; |
|
|
|
this.playAuth = res.data.playAuth; |
|
|
|
if (this.player) { |
|
|
|
if (this.player) { |
|
|
|
@ -802,8 +767,10 @@ export default { |
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。 |
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。 |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}).catch(res => { |
|
|
|
}).catch(res => { }); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
|
|
|
|
this.videoSrc = row.fileUrl |
|
|
|
|
|
|
|
} |
|
|
|
} else if (this.transferType(row.fileType) == "图片") { |
|
|
|
} else if (this.transferType(row.fileType) == "图片") { |
|
|
|
this.previewImg = row.fileUrl; |
|
|
|
this.previewImg = row.fileUrl; |
|
|
|
} else if (row.fileType == "pdf") { |
|
|
|
} else if (row.fileType == "pdf") { |
|
|
|
@ -880,23 +847,10 @@ export default { |
|
|
|
.catch(err => { |
|
|
|
.catch(err => { |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
switchSubmit () { |
|
|
|
async switchSubmit () { |
|
|
|
if (this.uploading) return util.warningMsg("资源正在上传中，请稍候"); |
|
|
|
if (this.uploading) return util.warningMsg("资源正在上传中，请稍候"); |
|
|
|
if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源"); |
|
|
|
if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源"); |
|
|
|
if (this.transferType(this.curFile.fileType) == "视频") { |
|
|
|
this.switchSubmitFile() |
|
|
|
let data = { |
|
|
|
|
|
|
|
videoIdList: [this.sectionId] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
this.$del(`${this.api.removeVideo}/${this.curFile.fileId}`).then(res => { |
|
|
|
|
|
|
|
this.switchSubmitFile(); |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
this.$del(`${this.api.fileDeletion}?keys=${this.curFile.fileName}`).then(res => { |
|
|
|
|
|
|
|
this.switchSubmitFile(); |
|
|
|
|
|
|
|
}).catch(res => { |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
delSection (row) { |
|
|
|
delSection (row) { |
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
|
|
|
@ -960,6 +914,7 @@ export default { |
|
|
|
}, |
|
|
|
}, |
|
|
|
closeIframe () { |
|
|
|
closeIframe () { |
|
|
|
this.iframeSrc = ""; |
|
|
|
this.iframeSrc = ""; |
|
|
|
|
|
|
|
this.videoSrc = '' |
|
|
|
this.showMask = false; |
|
|
|
this.showMask = false; |
|
|
|
this.showMask1 = false; |
|
|
|
this.showMask1 = false; |
|
|
|
this.showMask2 = false; |
|
|
|
this.showMask2 = false; |
|
|
|
|
