huoran
/
FE_middlePlatform_server
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 15 Wiki Activity

阿里云oss

Browse Source
dev_review
yujialong 1 year ago
parent f1c6f571f8
commit 4597a8919e
4 changed files with 956 additions and 871 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/upload/index.vue
  2. 72
      src/views/course/contentSettings.vue
  3. 3
      src/views/match/list/index.vue
  4. 458
      src/views/theoreticalCourse/contentSettings/index.vue

4
src/components/upload/index.vue
Unescape View File

@ -111,7 +111,7 @@ export default {
});
this.uploading = false
const url = 'http://huoran.oss-cn-shenzhen.aliyuncs.com/' + name
const url = 'https://huoran.oss-cn-shenzhen.aliyuncs.com/' + name
this.changeFileList && this.$emit('update:fileList', [
...this.fileList,
{
@ -124,7 +124,7 @@ export default {
this.$emit('onSuccess', {
format: util.getFileExt(file.name),
name: file.name,
url: url,
url,
size: file.size,
})
} catch (error) { }

72
src/views/course/contentSettings.vue
Unescape View File

@ -169,25 +169,6 @@
<p>视频请上传MP4格式，大小不超过150M；office文件大小不要超过10M</p>
</template>
</Upload>
<!-- <el-upload :before-upload="beforeUpload"
:on-remove="handleRemove"
:on-error="uploadError"
:before-remove="beforeRemove"
:limit="1"
: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>
<div slot="tip"
class="el-upload__tip">视频请上传MP4格式，大小不超过150M；office文件大小不要超过10M</div>
</el-upload>
<el-progress v-if="showProgress"
:stroke-width="3"
:percentage="progressPercent"></el-progress> -->
</el-form-item>
<el-form-item label="小节名称">
<el-input placeholder="请输入小节名称"
@ -216,24 +197,6 @@
@onSuccess="uploadSuccess">
<div slot="tip"></div>
</Upload>
<!-- <el-upload :before-upload="beforeUpload"
:on-remove="handleRemove"
:on-error="uploadError"
:before-remove="beforeRemove"
:limit="1"
: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>
<span slot="footer"
class="dialog-footer">
@ -277,7 +240,7 @@
style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
</div>
</div>
<div v-show="iframeSrc"
<div v-show="iframeSrc || videoSrc"
class="el-image-viewer__wrapper"
:class="{active: iframeSrc}"
style="z-index: 2000">
@ -293,6 +256,16 @@
id="fileIframe"
:src="iframeSrc"
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">
<div class="mask"
style="width: 200px;height: 30px;top: 53px;right: 320px"></div>
@ -412,6 +385,7 @@ export default {
fileUrl: "",
originalFileName: "",
fileType: "",
videoSrc: '',
playAuth: "",
player: null,
previewImg: "",
@ -548,6 +522,7 @@ export default {
},
uploadSuccess (file) {
this.uploading = false
this.fileId = ''
this.fileType = file.format
this.fileUrl = file.url
this.fileName = file.name
@ -802,18 +777,18 @@ export default {
},
// 下载资源
download (row) {
const { fileType } = row
const { fileType, fileId } = row
// 下载ppt
if (fileType === 'pptx') {
this.downloadFile(row.name, row.fileUrl)
} else if (fileType === 'mp4') {
// 下载视频，先生成视频，再拿到视频地址去下载
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
const player = new Aliplayer({
} else if (fileId) {
// 阿里云点播视频，先生成视频，再拿到视频地址去下载（现在已经去掉视频点播的方法，但是还需要兼容历史数据）
this.$get(`${this.api.getPlayAuth}/${fileId}`).then(res => {
new Aliplayer({
id: "playerDownload",
width: "100%",
autoplay: false,
vid: row.fileId,
vid: fileId,
playauth: res.data.playAuth,
encryptType: 1 //当播放私有加密流时需要设置。
}, player => {
@ -826,6 +801,8 @@ export default {
},
preview (row) {
if (this.transferType(row.fileType) == "视频") {
// 阿里云视频点播
if (row.fileId) {
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
this.playAuth = res.data.playAuth;
if (this.player) {
@ -840,8 +817,10 @@ export default {
encryptType: 1 //当播放私有加密流时需要设置。
});
}
}).catch(res => {
});
}).catch(res => { });
} else {
this.videoSrc = row.fileUrl
}
} else if (this.transferType(row.fileType) == "图片") {
this.previewImg = row.fileUrl;
} else if (row.fileType == "pdf") {
@ -984,6 +963,7 @@ export default {
},
closeIframe () {
this.iframeSrc = "";
this.videoSrc = ''
this.showMask = false;
this.showMask1 = false;
this.showMask2 = false;

3
src/views/match/list/index.vue
Unescape View File

@ -423,7 +423,8 @@ export default {
})
this.$post(this.api.editCompetitionContent, {
competitionContents: data
}).then(res => {
}).then(async res => {
await this.$post(`${this.api.refreshPageNotification}?content=1`)
util.successMsg('修改成功')
this.modifyVisible = false
this.getData()

458
src/views/theoreticalCourse/contentSettings/index.vue
Unescape View File

@ -1,213 +1,332 @@
<template>
<div>
<el-card shadow="hover" class="m-b-20">
<el-card shadow="hover"
class="m-b-20">
<div class="flex-between">
<el-page-header @back="goBack" :content="'课程内容/' + (sorting ? '更改排序' : '内容设置')"></el-page-header>
<el-page-header @back="goBack"
:content="'课程内容/' + (sorting ? '更改排序' : '内容设置')"></el-page-header>
</div>
</el-card>
<!--内容设置-->
<el-card shadow="hover" class="m-b-20">
<el-card shadow="hover"
class="m-b-20">
<div class="page">
<div class="relative">
<div class="p-title">内容设置</div>
<div class="btns" style="top: -10px">
<div class="btns"
style="top: -10px">
<template v-if="!sorting">
<el-button type="primary" round @click="addChapter">添加章节</el-button>
<el-button type="primary" round @click="sort">编辑顺序</el-button>
<el-button type="primary"
round
@click="addChapter">添加章节</el-button>
<el-button type="primary"
round
@click="sort">编辑顺序</el-button>
</template>
<template v-else>
<el-button type="primary" round @click="move">批量移动</el-button>
<el-button type="primary" round @click="cancelSort">取消</el-button>
<el-button type="primary" round @click="saveSort">保存</el-button>
<el-button type="primary"
round
@click="move">批量移动</el-button>
<el-button type="primary"
round
@click="cancelSort">取消</el-button>
<el-button type="primary"
round
@click="saveSort">保存</el-button>
</template>
</div>
</div>
<el-divider></el-divider>
<div class="page-content">
<div class="m-b-20" v-for="(chapter,index) in chapters" :key="chapter.id">
<div class="m-b-20"
v-for="(chapter,index) in chapters"
:key="chapter.id">
<div class="flex j-between a-center m-b-10">
<div>{{ chapter.name }}</div>
<div>
<template v-if="!sorting">
<el-button class="action-btn" type="primary" round @click="editChapter(chapter)">修改章节名称</el-button>
<el-button class="action-btn" type="primary" round @click="addSection(chapter.id)">添加小节</el-button>
<el-button class="action-btn" type="primary" round @click="delChapter(chapter.id)">删除</el-button>
<el-button class="action-btn"
type="primary"
round
@click="editChapter(chapter)">修改章节名称</el-button>
<el-button class="action-btn"
type="primary"
round
@click="addSection(chapter.id)">添加小节</el-button>
<el-button class="action-btn"
type="primary"
round
@click="delChapter(chapter.id)">删除</el-button>
</template>
<template v-else>
<i class="el-icon-top sort-icon" :class="{disabled: index == 0}" style="margin-right: 5px" @click="sortChapter(chapter,'up',index == 0,index)"></i>
<i class="el-icon-bottom sort-icon" :class="{disabled: index == chapters.length-1}" @click="sortChapter(chapter,'down',index == chapter.length-1,index)"></i>
<i class="el-icon-top sort-icon"
:class="{disabled: index == 0}"
style="margin-right: 5px"
@click="sortChapter(chapter,'up',index == 0,index)"></i>
<i class="el-icon-bottom sort-icon"
:class="{disabled: index == chapters.length-1}"
@click="sortChapter(chapter,'down',index == chapter.length-1,index)"></i>
</template>
</div>
</div>
<el-table :data="chapter.subsectionList" class="table" stripe header-align="center">
<el-table-column v-if="sorting" width="55" align="center">
<el-table :data="chapter.subsectionList"
class="table"
stripe
header-align="center">
<el-table-column v-if="sorting"
width="55"
align="center">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.check"></el-checkbox>
</template>
</el-table-column>
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
<el-table-column prop="name" label="资源名称" min-width="200">
<el-table-column type="index"
width="100"
label="序号"
align="center"></el-table-column>
<el-table-column prop="name"
label="资源名称"
min-width="200">
</el-table-column>
<el-table-column prop="fileType" label="资源类型" min-width="120" align="center">
<el-table-column prop="fileType"
label="资源类型"
min-width="120"
align="center">
<template slot-scope="scope">
{{ transferType(scope.row.fileType) }}
</template>
</el-table-column>
<el-table-column prop="fileType" label="格式" min-width="120" align="center">
<el-table-column prop="fileType"
label="格式"
min-width="120"
align="center">
</el-table-column>
<el-table-column label="操作" align="center" width="300">
<el-table-column label="操作"
align="center"
width="300">
<template slot-scope="scope">
<template v-if="!sorting">
<el-button type="text" @click="preview(scope.row)">查看</el-button>
<el-button type="text" @click="delSection(scope.row)">删除</el-button>
<el-button type="text" @click="editSectionName(scope.row,chapter.id)">修改小节名称</el-button>
<el-button type="text" @click="switchFile(scope.row,chapter.id)">更换文件</el-button>
<el-button type="text"
@click="preview(scope.row)">查看</el-button>
<el-button type="text"
@click="delSection(scope.row)">删除</el-button>
<el-button type="text"
@click="editSectionName(scope.row,chapter.id)">修改小节名称</el-button>
<el-button type="text"
@click="switchFile(scope.row,chapter.id)">更换文件</el-button>
</template>
<template v-else>
<i class="el-icon-top sort-icon" :class="{disabled: scope.$index == 0}" style="margin-right: 5px" @click="sortSection(index,'up',scope.$index == 0,scope.$index)"></i>
<i class="el-icon-bottom sort-icon" :class="{disabled: scope.$index == chapter.subsectionList.length-1}" @click="sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)"></i>
<i class="el-icon-top sort-icon"
:class="{disabled: scope.$index == 0}"
style="margin-right: 5px"
@click="sortSection(index,'up',scope.$index == 0,scope.$index)"></i>
<i class="el-icon-bottom sort-icon"
:class="{disabled: scope.$index == chapter.subsectionList.length-1}"
@click="sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)"></i>
</template>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog :title="chapterId ? '编辑章节' : '新增章节'" :visible.sync="chapterVisible" width="540px" :close-on-click-modal="false">
<el-dialog :title="chapterId ? '编辑章节' : '新增章节'"
:visible.sync="chapterVisible"
width="540px"
:close-on-click-modal="false">
<el-form>
<el-form-item>
<el-input placeholder="请输入章节名称，便于对小节归类" v-model="chapterName" maxlength="50"></el-input>
<el-input placeholder="请输入章节名称，便于对小节归类"
v-model="chapterName"
maxlength="50"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button @click="chapterVisible = false">取消</el-button>
<el-button type="primary" @click="chapterSubmit">确定</el-button>
<el-button type="primary"
@click="chapterSubmit">确定</el-button>
</span>
</el-dialog>
<el-dialog title="添加小节" :visible.sync="sectionVisible" width="540px" @close="closeSection" :close-on-click-modal="false">
<el-dialog title="添加小节"
:visible.sync="sectionVisible"
width="540px"
@close="closeSection"
:close-on-click-modal="false">
<el-form label-width="80px">
<el-form-item label="资源添加">
<el-upload
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:limit="1"
: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>
<div slot="tip" class="el-upload__tip">视频请上传MP4格式</div>
</el-upload>
<el-progress v-if="showProgress" :stroke-width="3" :percentage="progressPercent"></el-progress>
<Upload :max-size="100000"
@beforeUpload="beforeUpload"
@onSuccess="uploadSuccess">
<template slot="tip">
<p>视频请上传MP4格式</p>
</template>
</Upload>
</el-form-item>
<el-form-item label="小节名称">
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input>
<el-input placeholder="请输入小节名称"
v-model="sectionName"
maxlength="50"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button @click="sectionVisible = false">取消</el-button>
<el-button type="primary" @click="sectionSubmit">确定</el-button>
<el-button type="primary"
@click="sectionSubmit">确定</el-button>
</span>
</el-dialog>
<el-dialog title="更换文件" :visible.sync="switchVisible" width="540px" :close-on-click-modal="false" @close="closeSwitch">
<el-dialog title="更换文件"
:visible.sync="switchVisible"
width="540px"
:close-on-click-modal="false"
@close="closeSwitch">
<div style="text-align: center">
<el-upload
:before-upload="beforeUpload"
:on-remove="handleRemove"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-remove="beforeRemove"
:limit="1"
: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>
<Upload :max-size="100000"
@beforeUpload="beforeUpload"
@onSuccess="uploadSuccess">
<template slot="tip">
<p>视频请上传MP4格式</p>
</template>
</Upload>
</div>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button @click="switchVisible = false">取消</el-button>
<el-button type="primary" @click="switchSubmit">确定</el-button>
<el-button type="primary"
@click="switchSubmit">确定</el-button>
</span>
</el-dialog>
<el-dialog title="修改小节名称" :visible.sync="sectionNameVisible" width="540px" :close-on-click-modal="false">
<el-dialog title="修改小节名称"
:visible.sync="sectionNameVisible"
width="540px"
:close-on-click-modal="false">
<el-form>
<el-form-item>
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input>
<el-input placeholder="请输入小节名称"
v-model="sectionName"
maxlength="50"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button @click="sectionNameVisible = false">取消</el-button>
<el-button type="primary" @click="sectionNameSubmit">确定</el-button>
<el-button type="primary"
@click="sectionNameSubmit">确定</el-button>
</span>
</el-dialog>
<div v-show="previewImg" class="el-image-viewer__wrapper" :class="{active: previewImg}" style="z-index: 2000">
<div v-show="previewImg"
class="el-image-viewer__wrapper"
:class="{active: previewImg}"
style="z-index: 2000">
<div class="el-image-viewer__mask"></div>
<span class="el-image-viewer__btn el-image-viewer__close" @click="previewImg = ''"><i class="el-icon-circle-close" style="color: #fff"></i></span>
<span class="el-image-viewer__btn el-image-viewer__close"
@click="previewImg = ''"><i class="el-icon-circle-close"
style="color: #fff"></i></span>
<div class="el-image-viewer__canvas">
<img :src="previewImg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
<img :src="previewImg"
class="el-image-viewer__img"
style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
</div>
</div>
<div v-show="iframeSrc" class="el-image-viewer__wrapper" :class="{active: iframeSrc}" style="z-index: 2000">
<div v-show="iframeSrc || videoSrc"
class="el-image-viewer__wrapper"
:class="{active: iframeSrc}"
style="z-index: 2000">
<div class="el-image-viewer__mask"></div>
<span class="el-image-viewer__btn el-image-viewer__close" :class="{'doc-close': isWord}" :style="{top: isWord ? '50px' : '5px'}" @click="closeIframe"><i class="el-icon-circle-close" style="color: #fff"></i></span>
<span class="el-image-viewer__btn el-image-viewer__close"
:class="{'doc-close': isWord}"
:style="{top: isWord ? '50px' : '5px'}"
@click="closeIframe"><i class="el-icon-circle-close"
style="color: #fff"></i></span>
<div class="el-image-viewer__canvas">
<iframe v-if="iframeSrc" class="fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
<iframe v-if="iframeSrc"
class="fileIframe"
id="fileIframe"
:src="iframeSrc"
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">
<div class="mask" style="width: 200px;height: 30px;top: 53px;right: 320px"></div>
<div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
<div class="mask"
style="width: 200px;height: 30px;top: 53px;right: 320px"></div>
<div class="mask"
style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
</template>
<template v-if="showMask1">
<div class="word-mask1" style="width: 200px;height: 50px;"></div>
<div class="word-mask" style="height: 40px;top: 48px;"></div>
<div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
<div class="word-mask1"
style="width: 200px;height: 50px;"></div>
<div class="word-mask"
style="height: 40px;top: 48px;"></div>
<div class="word-mask2"
style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
</template>
<template v-if="showMask2 && iframeSrc">
<div class="excel-mask1" style="height: 48px;"></div>
<div class="excel-mask1"
style="height: 48px;"></div>
</template>
</div>
</div>
<div v-show="playAuth" class="el-image-viewer__wrapper" :class="{active: playAuth}" style="z-index: 2000">
<div v-show="playAuth"
class="el-image-viewer__wrapper"
:class="{active: playAuth}"
style="z-index: 2000">
<div class="el-image-viewer__mask"></div>
<span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close" style="color: #fff"></i></span>
<div class="player" id="player"></div>
<span class="el-image-viewer__btn el-image-viewer__close"
@click="closePlayer"><i class="el-icon-circle-close"
style="color: #fff"></i></span>
<div class="player"
id="player"></div>
</div>
<pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
<pdf :visible.sync="pdfVisible"
:src.sync="pdfSrc"></pdf>
</div>
</div>
</el-card>
<el-dialog title="资源移动" :visible.sync="moveVisible" :close-on-click-modal="false" width="330px">
<el-dialog title="资源移动"
:visible.sync="moveVisible"
:close-on-click-modal="false"
width="330px">
<el-form>
<el-form-item label="目标章节">
<el-select v-model="moveForm.id" placeholder="请选择目标章节" @change="chapterChange">
<el-option v-for="(item, i) in chapters" :key="i" :label="item.name" :value="item.id"></el-option>
<el-select v-model="moveForm.id"
placeholder="请选择目标章节"
@change="chapterChange">
<el-option v-for="(item, i) in chapters"
:key="i"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目标排序">
<el-select v-model="moveForm.sort" placeholder="请选择目标排序">
<el-option v-for="(item, i) in sortList" :key="i" :label="item.name" :value="item.id"></el-option>
<el-select v-model="moveForm.sort"
placeholder="请选择目标排序">
<el-option v-for="(item, i) in sortList"
:key="i"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<span slot="footer"
class="dialog-footer">
<el-button @click="moveVisible = false">取消</el-button>
<el-button type="primary" @click="moveConfirm">确定</el-button>
<el-button type="primary"
@click="moveConfirm">确定</el-button>
</span>
</el-dialog>
</div>
@ -218,11 +337,12 @@ import util from "@/libs/util";
import Setting from "@/setting";
import { Loading } from "element-ui";
import pdf from "@/components/pdf";
import Upload from '@/components/upload';
import axios from 'axios'
export default {
name: "contentSettings",
data() {
data () {
return {
headers: {
token: sessionStorage.getItem("token")
@ -246,6 +366,7 @@ export default {
fileUrl: "",
originalFileName: "",
fileType: "",
videoSrc: '',
playAuth: "",
player: null,
previewImg: "",
@ -283,8 +404,8 @@ export default {
moved: false // 是否移动过
};
},
components: { pdf },
mounted() {
components: { pdf, Upload },
mounted () {
this.insertScript();
this.id = this.$route.query.id;
this.id && this.getData();
@ -294,11 +415,11 @@ export default {
window.addEventListener("popstate", this.goBack, false);
}
},
destroyed() {
destroyed () {
window.removeEventListener("popstate", this.goBack, false);
},
methods: {
getData() {
getData () {
this.$get(`${this.api.queryChaptersTheoretical}?courseId=${this.id}`)
.then(res => {
this.chapters = res.chapterList;
@ -307,7 +428,7 @@ export default {
});
},
goBack() {
goBack () {
// 如果是预览则关闭预览
if (this.previewing) {
this.closeIframe();
@ -333,7 +454,7 @@ export default {
}
}
},
iframeOnload() {
iframeOnload () {
document.querySelector("#fileIframe").onload = e => {
if (this.isPPT) {
this.showMask = true;
@ -353,7 +474,7 @@ export default {
this.loadIns.close();
};
},
insertScript() {
insertScript () {
const linkTag = document.createElement("link");
linkTag.rel = "stylesheet";
linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css";
@ -365,29 +486,20 @@ export default {
document.body.appendChild(scriptTag);
},
// 上传文件
beforeUpload(file) {
// let type = this.transferType(file.name.substring(file.name.lastIndexOf(".") + 1));
// if (type != "视频" && type != "图片" && type != "pdf" && (file.size / 1024 / 1024) > 10) {
// util.errorMsg("请上传10M以内的文件");
// return false;
// }
// if (type == "视频" && (file.size / 1024 / 1024) > 30) {
// util.errorMsg("请上传30M以内的视频");
// return false;
// }
beforeUpload (file) {
this.uploading = true;
this.originalFileName = file.name;
if (this.isAddSection) this.sectionName = file.name.substring(0, file.name.lastIndexOf("."));
this.fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
this.showProgress = true
},
handleExceed(files, fileList) {
handleExceed (files, fileList) {
util.warningMsg(
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
);
},
// 自定义上传
handleRequest(data) {
handleRequest (data) {
const param = new FormData()
param.append('file', data.file)
const config = {
@ -415,55 +527,55 @@ export default {
this.fileName = ossFileName
})
},
uploadSuccess(res, file, fileList) {
uploadSuccess (file) {
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;
this.fileId = ''
this.fileType = file.format;
this.fileUrl = file.url;
this.fileName = file.name;
},
uploadError(err, file, fileList) {
uploadError (err, file, fileList) {
this.$message({
message: "上传出错，请重试！",
type: "error",
center: true
});
},
beforeRemove(file, fileList) {
beforeRemove (file, fileList) {
if ((file.size / 1024 / 1024) < 10) {
return this.$confirm(`确定移除 ${file.name}？`);
}
},
handleRemove(file, fileList) {
handleRemove (file, fileList) {
this.uploadList = fileList;
},
uploadSure() {
uploadSure () {
this.importVisible = false;
this.pageNo = 1;
this.staffGradeId = "";
this.keyword = "";
this.getTeacher();
},
goback() {
goback () {
this.$router.push("course");
},
transferType(ext) {
transferType (ext) {
const suf = ext.toLowerCase()
if ("jpg,jpeg,png,gif,svg,psd".includes(suf)) return "图片";
if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(suf)) return "视频";
return suf;
},
addChapter() {
addChapter () {
this.chapterName = "";
this.chapterId = "";
this.chapterVisible = true;
},
sort() {
sort () {
this.originChapters = JSON.parse(JSON.stringify(this.chapters))
this.sorting = true;
},
// 批量移动
move() {
move () {
const list = this.chapters
const checkList = []
list.map(e => {
@ -493,13 +605,13 @@ export default {
}
},
// 目标章节选择回调
chapterChange(id) {
chapterChange (id) {
const list = []
// 获取多少个小节
this.chapters.find(e => e.id === id).subsectionList.map((e, i) => {
list.push({
id: i,
name: i+1
name: i + 1
})
})
// 置末和置顶写死
@ -516,7 +628,7 @@ export default {
]
},
// 资源移动校验
moveConfirm() {
moveConfirm () {
let { id, sort } = this.moveForm
if (!id) return this.$message.warning('请选择目标章节')
if (sort === '') return this.$message.warning('请选择目标排序')
@ -539,11 +651,11 @@ export default {
})
this.moved = true
},
cancelSort() {
cancelSort () {
this.chapters = JSON.parse(JSON.stringify(this.originChapters))
this.sorting = false;
},
saveSort() {
saveSort () {
this.chapters.forEach((n, k) => {
n.sort = k + 1;
n.subsectionList.forEach((j, i) => {
@ -559,12 +671,12 @@ export default {
}).catch(res => {
});
},
editChapter(item) {
editChapter (item) {
this.chapterId = item.id;
this.chapterName = item.name;
this.chapterVisible = true;
},
delChapter(id) {
delChapter (id) {
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
type: "warning"
})
@ -578,10 +690,10 @@ export default {
.catch(() => {
});
},
closeSection() {
closeSection () {
this.isAddSection = false;
},
addSection(id) {
addSection (id) {
this.chapterId = id;
this.sectionName = "";
this.fileUrl = "";
@ -590,7 +702,7 @@ export default {
this.isAddSection = true;
this.sectionVisible = true;
},
chapterSubmit() {
chapterSubmit () {
if (!this.chapterName) return util.warningMsg("请填写章节名称");
let data = {
courseId: this.id,
@ -615,7 +727,7 @@ export default {
});
}
},
sectionSubmit() {
sectionSubmit () {
if (!this.sectionName) return util.warningMsg("请填写小节名称");
if (this.uploading) return util.warningMsg("资源正在上传中，请稍候");
if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源");
@ -638,15 +750,17 @@ export default {
.catch(err => {
});
},
closeSwitch() {
closeSwitch () {
this.fileId = "";
this.fileName = "";
this.fileType = "";
this.fileUrl = "";
this.sectionId = "";
},
preview(row) {
preview (row) {
if (this.transferType(row.fileType) == "视频") {
// 阿里云视频点播
if (row.fileId) {
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
this.playAuth = res.data.playAuth;
if (this.player) {
@ -661,8 +775,10 @@ export default {
encryptType: 1 //当播放私有加密流时需要设置。
});
}
}).catch(res => {
});
}).catch(res => { });
} else {
this.videoSrc = row.fileUrl
}
} else if (this.transferType(row.fileType) == "图片") {
this.previewImg = row.fileUrl;
} else if (row.fileType == "pdf") {
@ -699,13 +815,13 @@ export default {
});
}
},
editSectionName(row, chapterId) {
editSectionName (row, chapterId) {
this.chapterId = chapterId;
this.sectionId = row.id;
this.sectionName = row.name;
this.sectionNameVisible = true;
},
switchFile(row, chapterId, sectionId) {
switchFile (row, chapterId, sectionId) {
this.uploadList = [];
this.curFile = {
fileId: row.fileId,
@ -719,7 +835,7 @@ export default {
this.switchVisible = true;
},
switchSubmitFile() {
switchSubmitFile () {
let data = {
id: this.sectionId,
courseId: this.id,
@ -739,25 +855,12 @@ export default {
.catch(err => {
});
},
switchSubmit() {
switchSubmit () {
if (this.uploading) return util.warningMsg("资源正在上传中，请稍候");
if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源");
if (this.transferType(this.curFile.fileType) == "视频") {
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("此删除操作不可逆，是否确认删除选中项？", "提示", {
type: "warning"
})
@ -771,7 +874,7 @@ export default {
.catch(() => {
});
},
sortChapter(row, type, disabled, index) {
sortChapter (row, type, disabled, index) {
if (!disabled) {
if (type == "up") {
let tempItem = this.chapters.splice(index - 1, 1)[0];
@ -782,7 +885,7 @@ export default {
}
}
},
sortSection(chapterIndex, type, disabled, index) {
sortSection (chapterIndex, type, disabled, index) {
if (!disabled) {
this.moved = true
let list = this.chapters[chapterIndex].subsectionList;
@ -797,7 +900,7 @@ export default {
}
},
sectionNameSubmit() {
sectionNameSubmit () {
if (!this.sectionName) return util.warningMsg("请填写小节名称");
let data = {
id: this.sectionId,
@ -813,12 +916,13 @@ export default {
.catch(err => {
});
},
closePlayer() {
closePlayer () {
this.playAuth = "";
this.player.pause();
},
closeIframe() {
closeIframe () {
this.iframeSrc = "";
this.videoSrc = ''
this.showMask = false;
this.showMask1 = false;
this.showMask2 = false;
@ -858,15 +962,15 @@ export default {
&.disabled {
color: #ccc;
cursor: not-allowed
cursor: not-allowed;
}
}
.el-image-viewer__wrapper {
transform: translateY(-10px);
transition: transform .5s;
transition: transform 0.5s;
&.active {
transform: translateY(0)
transform: translateY(0);
}
}
@ -939,7 +1043,7 @@ export default {
background-color: #107c41;
}
.el-button--primary.action-btn {
color: #9076FF !important;
color: #9076ff !important;
font-size: 14px !important;
background-color: #fff !important;
border-radius: 4px !important;

Write Preview
Loading…
Cancel
Save