You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
819 lines
32 KiB
819 lines
32 KiB
4 years ago
|
<template>
|
||
|
|
<div>
|
||
4 years ago
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div class="flex-between">
|
||
|
|
<el-page-header @back="goBack" :content="'内容设置'"></el-page-header>
|
||
|
4 years ago
|
</div>
|
||
|
4 years ago
|
</el-card>
|
||
|
|
<!--内容设置-->
|
||
|
|
<el-card shadow="hover" class="mgb20">
|
||
|
|
<div class="page">
|
||
|
|
<div class="relative">
|
||
|
|
<div class="p-title">内容设置</div>
|
||
|
|
<div class="btns">
|
||
|
|
<template v-if="!sorting">
|
||
|
3 years ago
|
<el-button type="primary" round @click="addChapter">添加章节</el-button>
|
||
|
|
<el-button type="primary" round @click="sort">编辑顺序</el-button>
|
||
|
4 years ago
|
</template>
|
||
|
|
<template v-else>
|
||
|
3 years ago
|
<el-button type="primary" round @click="cancelSort">取消</el-button>
|
||
|
|
<el-button type="primary" round @click="saveSort">保存</el-button>
|
||
|
4 years ago
|
</template>
|
||
|
4 years ago
|
</div>
|
||
|
4 years ago
|
</div>
|
||
|
|
<el-divider></el-divider>
|
||
|
|
<div class="page-content">
|
||
|
|
<div class="mgb20" v-for="(chapter,index) in chapters" :key="chapter.id">
|
||
|
|
<div class="flex-between mgb10">
|
||
|
|
<div>{{ chapter.name }}</div>
|
||
|
|
<div>
|
||
|
4 years ago
|
<template v-if="!sorting">
|
||
|
3 years ago
|
<el-button class="action-btn" plain @click="editChapter(chapter)">修改章节名称</el-button>
|
||
|
|
<el-button class="action-btn" plain @click="addSection(chapter.id)">添加小节</el-button>
|
||
|
|
<el-button class="action-btn" plain @click="delChapter(chapter.id)">删除</el-button>
|
||
|
4 years ago
|
</template>
|
||
|
|
<template v-else>
|
||
|
4 years ago
|
<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>
|
||
|
4 years ago
|
</template>
|
||
|
4 years ago
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-table :data="chapter.subsectionList" class="table" stripe header-align="center">
|
||
|
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
|
||
|
|
<el-table-column prop="name" label="资源名称">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="fileType" label="资源类型" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
{{ transferType(scope.row.fileType) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" align="center" width="300">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<template v-if="!sorting">
|
||
|
3 years ago
|
<el-button type="text" @click="download(scope.row)">下载</el-button>
|
||
|
4 years ago
|
<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>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
4 years ago
|
|
||
|
4 years ago
|
<el-dialog :title="chapterId ? '编辑章节' : '新增章节'" :visible.sync="chapterVisible" width="24%" :close-on-click-modal="false">
|
||
|
|
<el-form>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input placeholder="请输入章节名称，便于对小节归类" v-model="chapterName" maxlength="50"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
3 years ago
|
<el-button @click="chapterVisible = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="chapterSubmit">确定</el-button>
|
||
|
4 years ago
|
</span>
|
||
|
4 years ago
|
</el-dialog>
|
||
|
|
|
||
|
|
<el-dialog title="添加小节" :visible.sync="sectionVisible" width="24%" @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"
|
||
|
|
name="file"
|
||
|
|
>
|
||
|
|
<el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button>
|
||
|
|
</el-upload>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="小节名称">
|
||
|
|
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
3 years ago
|
<el-button @click="sectionVisible = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="sectionSubmit">确定</el-button>
|
||
|
4 years ago
|
</span>
|
||
|
|
</el-dialog>
|
||
|
4 years ago
|
|
||
|
4 years ago
|
<el-dialog title="更换文件" :visible.sync="switchVisible" width="28%" :close-on-click-modal="false" @close="closeSwitch">
|
||
|
|
<div style="text-align: center">
|
||
|
4 years ago
|
<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"
|
||
|
4 years ago
|
:headers="headers"
|
||
|
4 years ago
|
name="file"
|
||
|
4 years ago
|
>
|
||
|
|
<el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button>
|
||
|
4 years ago
|
</el-upload>
|
||
|
4 years ago
|
</div>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
3 years ago
|
<el-button @click="switchVisible = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="switchSubmit">确定</el-button>
|
||
|
4 years ago
|
</span>
|
||
|
4 years ago
|
</el-dialog>
|
||
|
|
|
||
|
|
<el-dialog title="修改小节名称" :visible.sync="sectionNameVisible" width="24%" :close-on-click-modal="false">
|
||
|
|
<el-form>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
3 years ago
|
<el-button @click="sectionNameVisible = false">取消</el-button>
|
||
|
|
<el-button type="primary" @click="sectionNameSubmit">确定</el-button>
|
||
|
4 years ago
|
</span>
|
||
|
4 years ago
|
</el-dialog>
|
||
|
4 years ago
|
|
||
|
4 years ago
|
<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>
|
||
|
|
<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%;">
|
||
|
|
</div>
|
||
|
4 years ago
|
</div>
|
||
|
4 years ago
|
<div v-show="iframeSrc" 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>
|
||
|
|
<div class="el-image-viewer__canvas">
|
||
|
|
<iframe v-if="iframeSrc" class="fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
|
||
|
|
<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>
|
||
|
|
</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>
|
||
|
|
</template>
|
||
|
|
<template v-if="showMask2 && iframeSrc">
|
||
|
|
<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 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>
|
||
|
4 years ago
|
</div>
|
||
|
|
|
||
|
4 years ago
|
<pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
|
||
|
|
</div>
|
||
|
4 years ago
|
</div>
|
||
|
4 years ago
|
</el-card>
|
||
|
3 years ago
|
<div class="player-download" id="playerDownload"></div>
|
||
|
4 years ago
|
</div>
|
||
|
|
</template>
|
||
|
4 years ago
|
|
||
|
4 years ago
|
<script>
|
||
|
4 years ago
|
import { Loading } from "element-ui";
|
||
|
|
import pdf from "@/components/pdf";
|
||
|
|
|
||
|
4 years ago
|
export default {
|
||
|
4 years ago
|
name: "contentSettings",
|
||
|
4 years ago
|
data() {
|
||
|
|
return {
|
||
|
4 years ago
|
headers: {
|
||
|
|
token: sessionStorage.getItem('token')
|
||
|
|
},
|
||
|
|
id: this.$route.query.cid,
|
||
|
|
chapters: [],
|
||
|
4 years ago
|
sorting: false,
|
||
|
|
uploading: false,
|
||
|
|
uploadList: [],
|
||
|
|
chapterVisible: false,
|
||
|
4 years ago
|
chapterId: "",
|
||
|
|
chapterName: "",
|
||
|
4 years ago
|
sectionVisible: false,
|
||
|
4 years ago
|
sectionName: "",
|
||
|
|
sectionId: "",
|
||
|
4 years ago
|
switchVisible: false,
|
||
|
|
sectionNameVisible: false,
|
||
|
4 years ago
|
fileId: "",
|
||
|
|
fileName: "",
|
||
|
|
fileUrl: "",
|
||
|
|
originalFileName: "",
|
||
|
|
fileType: "",
|
||
|
|
playAuth: "",
|
||
|
4 years ago
|
player: null,
|
||
|
4 years ago
|
previewImg: "",
|
||
|
|
iframeSrc: "",
|
||
|
4 years ago
|
curFile: {},
|
||
|
|
isAddSection: false,
|
||
|
|
isWord: false,
|
||
|
|
isPPT: false,
|
||
|
|
isExcel: false,
|
||
|
|
showMask: false,
|
||
|
|
showMask1: false,
|
||
|
|
showMask2: false,
|
||
|
|
loadIns: null,
|
||
|
|
pdfVisible: false,
|
||
|
4 years ago
|
pdfSrc: "",
|
||
|
4 years ago
|
previewing: false
|
||
|
|
};
|
||
|
|
},
|
||
|
4 years ago
|
components: { pdf },
|
||
|
4 years ago
|
mounted() {
|
||
|
4 years ago
|
this.insertScript();
|
||
|
|
this.id && this.getData();
|
||
|
|
// 处理预览资源后返回弹框不会消失的问题
|
||
|
4 years ago
|
if (window.history && window.history.pushState) {
|
||
|
|
history.pushState(null, null, document.URL);
|
||
|
|
window.addEventListener("popstate", this.goBack, false);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
destroyed() {
|
||
|
|
window.removeEventListener("popstate", this.goBack, false);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getData() {
|
||
|
|
this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`)
|
||
|
4 years ago
|
.then(res => {
|
||
|
|
this.chapters = res.chapterList;
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
4 years ago
|
|
||
|
4 years ago
|
});
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
goBack() {
|
||
|
|
if (this.previewing) {
|
||
|
|
this.closeIframe();
|
||
|
|
} else {
|
||
|
3 years ago
|
this.$router.push("/curriculum");
|
||
|
4 years ago
|
}
|
||
|
|
},
|
||
|
4 years ago
|
iframeOnload() {
|
||
|
|
document.querySelector("#fileIframe").onload = e => {
|
||
|
|
if (this.isPPT) {
|
||
|
|
this.showMask = true;
|
||
|
|
} else {
|
||
|
|
this.showMask = false;
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
if (this.isWord) {
|
||
|
|
this.showMask1 = true;
|
||
|
|
} else {
|
||
|
|
this.showMask1 = false;
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
if (this.isExcel) {
|
||
|
|
this.showMask2 = true;
|
||
|
|
} else {
|
||
|
|
this.showMask2 = false;
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
this.loadIns.close();
|
||
|
|
};
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
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";
|
||
|
4 years ago
|
document.body.appendChild(linkTag);
|
||
|
|
|
||
|
4 years ago
|
const scriptTag = document.createElement("script");
|
||
|
|
scriptTag.type = "text/javascript";
|
||
|
|
scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js";
|
||
|
4 years ago
|
document.body.appendChild(scriptTag);
|
||
|
|
},
|
||
|
|
// 上传文件
|
||
|
4 years ago
|
beforeUpload(file) {
|
||
|
|
let type = this.transferType(file.name.substring(file.name.lastIndexOf(".") + 1));
|
||
|
|
if (type != "视频" && type != "图片" && type != "pdf" && (file.size / 1024 / 1024) > 10) {
|
||
|
|
this.$message.error("请上传10M以内的文件");
|
||
|
|
return false;
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
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);
|
||
|
4 years ago
|
},
|
||
|
|
handleExceed(files, fileList) {
|
||
|
4 years ago
|
this.$message.warning(
|
||
|
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
|
||
|
4 years ago
|
);
|
||
|
|
},
|
||
|
|
uploadSuccess(res, file, fileList) {
|
||
|
3 years ago
|
let { fileId, fileType, fileUrl, ossFileName } = res.data.filesResult;
|
||
|
4 years ago
|
this.uploading = false;
|
||
|
3 years ago
|
this.fileId = fileId;
|
||
|
|
this.fileType = fileType;
|
||
|
|
this.fileUrl = fileUrl;
|
||
|
|
this.fileName = ossFileName;
|
||
|
4 years ago
|
},
|
||
|
|
uploadError(err, file, fileList) {
|
||
|
|
this.$message({
|
||
|
|
message: "上传出错，请重试！",
|
||
|
|
type: "error",
|
||
|
|
center: true
|
||
|
|
});
|
||
|
|
},
|
||
|
|
beforeRemove(file, fileList) {
|
||
|
4 years ago
|
if ((file.size / 1024 / 1024) < 10) {
|
||
|
4 years ago
|
return this.$confirm(`确定移除 ${file.name}？`);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleRemove(file, fileList) {
|
||
|
4 years ago
|
this.uploadList = fileList;
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
uploadSure() {
|
||
|
|
this.importVisible = false;
|
||
|
|
this.pageNo = 1;
|
||
|
|
this.staffGradeId = "";
|
||
|
|
this.keyword = "";
|
||
|
|
this.getTeacher();
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
transferType(ext) {
|
||
|
|
if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片";
|
||
|
|
if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频";
|
||
|
|
return ext;
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
addChapter() {
|
||
|
|
this.chapterName = "";
|
||
|
|
this.chapterId = "";
|
||
|
|
this.chapterVisible = true;
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
sort() {
|
||
|
|
this.sorting = true;
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
cancelSort() {
|
||
|
|
this.sorting = false;
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
saveSort() {
|
||
|
|
this.chapters.forEach((n, k) => {
|
||
|
|
n.sort = k + 1;
|
||
|
|
n.subsectionList.forEach((j, i) => {
|
||
|
|
j.sort = i + 1;
|
||
|
|
});
|
||
|
|
});
|
||
|
4 years ago
|
let data = {
|
||
|
|
chapterVOList: this.chapters
|
||
|
4 years ago
|
};
|
||
|
|
this.$post(this.api.reorder, data).then(res => {
|
||
|
|
this.sorting = false;
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
},
|
||
|
|
editChapter(item) {
|
||
|
|
this.chapterId = item.id;
|
||
|
|
this.chapterName = item.name;
|
||
|
|
this.chapterVisible = true;
|
||
|
|
},
|
||
|
|
delChapter(id) {
|
||
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
|
||
|
|
type: "warning"
|
||
|
4 years ago
|
})
|
||
|
4 years ago
|
.then(() => {
|
||
|
|
this.$del(`${this.api.deleteChapter}/${id}`).then(res => {
|
||
|
|
this.$message.success("删除成功");
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
});
|
||
|
|
},
|
||
|
|
closeSection() {
|
||
|
|
this.isAddSection = false;
|
||
|
|
},
|
||
|
|
addSection(id) {
|
||
|
|
this.chapterId = id;
|
||
|
|
this.sectionName = "";
|
||
|
|
this.fileUrl = "";
|
||
|
|
this.uploadList = [];
|
||
|
|
this.sectionId = "";
|
||
|
|
this.isAddSection = true;
|
||
|
|
this.sectionVisible = true;
|
||
|
|
},
|
||
|
|
chapterSubmit() {
|
||
|
|
if (!this.chapterName) return this.$message.warning("请填写章节名称");
|
||
|
4 years ago
|
let data = {
|
||
|
4 years ago
|
cid: this.id,
|
||
|
4 years ago
|
name: this.chapterName
|
||
|
4 years ago
|
};
|
||
|
|
if (this.chapterId) {
|
||
|
|
data.id = this.chapterId;
|
||
|
|
this.$put(this.api.editChapter, data).then(res => {
|
||
|
|
this.$message.success("修改成功");
|
||
|
|
this.chapterVisible = false;
|
||
|
|
this.getData();
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$post(this.api.addChapter, data).then(res => {
|
||
|
|
this.$message.success("添加成功");
|
||
|
|
this.chapterVisible = false;
|
||
|
|
this.getData();
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
});
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
},
|
||
|
|
sectionSubmit() {
|
||
|
|
if (!this.sectionName) return this.$message.warning("请填写小节名称");
|
||
|
|
if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
|
||
|
|
if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
|
||
|
4 years ago
|
let data = {
|
||
|
|
id: this.sectionId,
|
||
|
4 years ago
|
cid: this.id,
|
||
|
4 years ago
|
chapterId: this.chapterId,
|
||
|
|
name: this.sectionName,
|
||
|
|
fileId: this.fileId,
|
||
|
|
fileUrl: this.fileUrl,
|
||
|
|
fileName: this.fileName,
|
||
|
|
fileType: this.fileType,
|
||
|
|
originalFileName: this.originalFileName
|
||
|
4 years ago
|
};
|
||
|
4 years ago
|
this.$post(this.api.addSubsection, data).then(res => {
|
||
|
4 years ago
|
this.$message.success("添加成功");
|
||
|
|
this.sectionVisible = false;
|
||
|
|
this.getData();
|
||
|
4 years ago
|
})
|
||
|
4 years ago
|
.catch(err => {
|
||
|
|
});
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
closeSwitch() {
|
||
|
|
this.fileId = "";
|
||
|
|
this.fileName = "";
|
||
|
|
this.fileType = "";
|
||
|
|
this.fileUrl = "";
|
||
|
|
this.sectionId = "";
|
||
|
4 years ago
|
},
|
||
|
3 years ago
|
// 下载资源
|
||
|
|
download(row) {
|
||
|
|
const { fileType } = 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({
|
||
|
|
id: "playerDownload",
|
||
|
|
width: "100%",
|
||
|
|
autoplay: false,
|
||
|
|
vid: row.fileId,
|
||
|
|
playauth: res.data.playAuth,
|
||
|
|
encryptType: 1 //当播放私有加密流时需要设置。
|
||
|
|
}, player => {
|
||
|
|
this.downloadFile(row.name, player._urls[0].Url)
|
||
|
|
})
|
||
|
|
}).catch(res => {})
|
||
|
|
}
|
||
|
|
},
|
||
|
4 years ago
|
preview(row) {
|
||
|
|
if (this.transferType(row.fileType) == "视频") {
|
||
|
4 years ago
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
|
||
|
3 years ago
|
this.playAuth = res.data.playAuth;
|
||
|
4 years ago
|
if (this.player) {
|
||
|
|
this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
|
||
|
|
} else {
|
||
|
4 years ago
|
this.player = new Aliplayer({
|
||
|
4 years ago
|
id: "player",
|
||
|
|
width: "100%",
|
||
|
4 years ago
|
autoplay: false,
|
||
|
4 years ago
|
vid: row.fileId,
|
||
|
|
playauth: this.playAuth,
|
||
|
|
encryptType: 1 //当播放私有加密流时需要设置。
|
||
|
|
});
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
} else if (this.transferType(row.fileType) == "图片") {
|
||
|
|
this.previewImg = row.fileUrl;
|
||
|
|
} else if (row.fileType == "pdf") {
|
||
|
|
this.pdfSrc = row.fileUrl;
|
||
|
|
this.pdfVisible = true;
|
||
|
|
} else {
|
||
|
4 years ago
|
this.$get(`${this.api.getSubsection}/${row.id}`).then(res => {
|
||
|
4 years ago
|
this.previewing = true;
|
||
|
|
this.loadIns = Loading.service();
|
||
|
|
this.$route.fullPath.includes("#file") || history.pushState({ file: true }, "文件预览", "#" + this.$route.fullPath + "#file");
|
||
|
|
if (row.fileType == "pptx") {
|
||
|
|
this.isPPT = true;
|
||
|
|
this.isWord = false;
|
||
|
|
this.isExcel = false;
|
||
|
|
} else if (row.fileType == "doc" || row.fileType == "docx") {
|
||
|
|
this.isPPT = false;
|
||
|
|
this.isWord = true;
|
||
|
|
this.isExcel = false;
|
||
|
|
} else if (row.fileType == "xls" || row.fileType == "xlsx") {
|
||
|
|
this.isExcel = true;
|
||
|
|
this.isPPT = false;
|
||
|
|
this.isWord = false;
|
||
|
|
} else {
|
||
|
|
this.isPPT = false;
|
||
|
|
this.isWord = false;
|
||
|
|
this.isExcel = false;
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
this.iframeSrc = res.previewUrl;
|
||
|
4 years ago
|
this.$nextTick(() => {
|
||
|
4 years ago
|
this.iframeOnload();
|
||
|
|
});
|
||
|
4 years ago
|
})
|
||
|
4 years ago
|
.catch(err => {
|
||
|
|
});
|
||
|
4 years ago
|
}
|
||
|
|
},
|
||
|
4 years ago
|
editSectionName(row, chapterId) {
|
||
|
|
this.chapterId = chapterId;
|
||
|
|
this.sectionId = row.id;
|
||
|
|
this.sectionName = row.name;
|
||
|
|
this.sectionNameVisible = true;
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
switchFile(row, chapterId, sectionId) {
|
||
|
|
this.uploadList = [];
|
||
|
4 years ago
|
this.curFile = {
|
||
|
|
fileId: row.fileId,
|
||
|
|
fileName: row.fileName,
|
||
|
|
fileType: row.fileType,
|
||
|
4 years ago
|
fileUrl: row.fileUrl
|
||
|
|
};
|
||
|
|
this.chapterId = chapterId;
|
||
|
|
this.sectionId = row.id;
|
||
|
|
this.sectionName = row.sectionName;
|
||
|
|
|
||
|
|
this.switchVisible = true;
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
switchSubmitFile() {
|
||
|
4 years ago
|
let data = {
|
||
|
|
id: this.sectionId,
|
||
|
4 years ago
|
cid: this.id,
|
||
|
4 years ago
|
chapterId: this.chapterId,
|
||
|
|
name: this.sectionName,
|
||
|
|
fileId: this.fileId,
|
||
|
|
fileName: this.fileName,
|
||
|
|
fileType: this.fileType,
|
||
|
|
fileUrl: this.fileUrl,
|
||
|
|
originalFileName: this.originalFileName
|
||
|
4 years ago
|
};
|
||
|
4 years ago
|
this.$put(this.api.editSubsection, data).then(res => {
|
||
|
4 years ago
|
this.$message.success("更换成功");
|
||
|
|
this.switchVisible = false;
|
||
|
|
this.getData();
|
||
|
4 years ago
|
})
|
||
|
4 years ago
|
.catch(err => {
|
||
|
|
});
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
switchSubmit() {
|
||
|
|
if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
|
||
|
|
if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
|
||
|
|
if (this.transferType(this.curFile.fileType) == "视频") {
|
||
|
4 years ago
|
let data = {
|
||
|
|
videoIdList: [this.sectionId]
|
||
|
4 years ago
|
};
|
||
|
4 years ago
|
this.$del(`${this.api.removeVideo}/${this.curFile.fileId}`).then(res => {
|
||
|
4 years ago
|
this.switchSubmitFile();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
} else {
|
||
|
4 years ago
|
this.$del(`${this.api.fileDeletion}?keys=${this.curFile.fileName}`).then(res => {
|
||
|
4 years ago
|
this.switchSubmitFile();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
4 years ago
|
}
|
||
|
|
},
|
||
|
|
delSection(row) {
|
||
|
4 years ago
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
|
||
|
|
type: "warning"
|
||
|
4 years ago
|
})
|
||
|
4 years ago
|
.then(() => {
|
||
|
|
this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => {
|
||
|
|
this.$message.success("删除成功");
|
||
|
|
this.getData();
|
||
|
|
}).catch(res => {
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
});
|
||
|
|
},
|
||
|
|
sortChapter(row, type, disabled, index) {
|
||
|
|
if (!disabled) {
|
||
|
|
if (type == "up") {
|
||
|
|
let tempItem = this.chapters.splice(index - 1, 1)[0];
|
||
|
|
this.chapters.splice(index, 0, tempItem);
|
||
|
|
} else {
|
||
|
|
let tempItem = this.chapters.splice(index + 1, 1)[0];
|
||
|
|
this.chapters.splice(index, 0, tempItem);
|
||
|
4 years ago
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
4 years ago
|
sortSection(chapterIndex, type, disabled, index) {
|
||
|
|
if (!disabled) {
|
||
|
|
let list = this.chapters[chapterIndex].subsectionList;
|
||
|
|
if (type == "up") {
|
||
|
|
let tempItem = list.splice(index - 1, 1)[0];
|
||
|
|
list.splice(index, 0, tempItem);
|
||
|
|
} else {
|
||
|
|
let tempItem = list.splice(index + 1, 1)[0];
|
||
|
|
list.splice(index, 0, tempItem);
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
this.chapters[chapterIndex].subsectionList = list;
|
||
|
|
|
||
|
4 years ago
|
}
|
||
|
|
},
|
||
|
4 years ago
|
sectionNameSubmit() {
|
||
|
|
if (!this.sectionName) return this.$message.warning("请填写小节名称");
|
||
|
4 years ago
|
let data = {
|
||
|
|
id: this.sectionId,
|
||
|
4 years ago
|
cid: this.id,
|
||
|
4 years ago
|
chapterId: this.chapterId,
|
||
|
|
name: this.sectionName
|
||
|
4 years ago
|
};
|
||
|
4 years ago
|
this.$put(this.api.editSubsection, data).then(res => {
|
||
|
4 years ago
|
this.$message.success("修改成功");
|
||
|
|
this.sectionNameVisible = false;
|
||
|
|
this.getData();
|
||
|
4 years ago
|
})
|
||
|
4 years ago
|
.catch(err => {
|
||
|
|
});
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
closePlayer() {
|
||
|
|
this.playAuth = "";
|
||
|
|
this.player.pause();
|
||
|
4 years ago
|
},
|
||
|
4 years ago
|
closeIframe() {
|
||
|
|
this.iframeSrc = "";
|
||
|
|
this.showMask = false;
|
||
|
|
this.showMask1 = false;
|
||
|
|
this.showMask2 = false;
|
||
|
|
this.previewing = false;
|
||
|
|
}
|
||
|
4 years ago
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
3 years ago
|
.action-btn{
|
||
|
|
color: #9076FF;
|
||
|
|
font-size: 14px;
|
||
|
|
border: #9076FF 1px solid;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
4 years ago
|
.btns {
|
||
|
|
position: absolute;
|
||
|
|
top: 12px;
|
||
|
|
right: 24px;
|
||
|
|
|
||
|
|
.el-button {
|
||
|
|
font-size: 14px;
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
}
|
||
|
|
|
||
|
|
.sort-icon {
|
||
|
|
font-size: 24px;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
&.disabled {
|
||
|
|
color: #ccc;
|
||
|
|
cursor: not-allowed
|
||
|
4 years ago
|
}
|
||
|
|
}
|
||
|
4 years ago
|
|
||
|
|
.el-image-viewer__wrapper {
|
||
|
|
transform: translateY(-10px);
|
||
|
|
transition: transform .5s;
|
||
|
|
|
||
|
|
&.active {
|
||
|
|
transform: translateY(0)
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
}
|
||
|
|
|
||
|
|
.el-image-viewer__close {
|
||
|
|
z-index: 10000;
|
||
|
|
top: 15px;
|
||
|
|
right: 15px;
|
||
|
|
|
||
|
|
&.doc-close {
|
||
|
|
i {
|
||
|
|
color: #000 !important;
|
||
|
4 years ago
|
}
|
||
|
|
}
|
||
|
4 years ago
|
}
|
||
|
|
|
||
|
|
.player {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
width: 1200px !important;
|
||
|
|
height: 600px !important;
|
||
|
|
}
|
||
|
3 years ago
|
.player-download {
|
||
|
|
position: absolute;
|
||
|
|
top: -9999px;
|
||
|
|
}
|
||
|
4 years ago
|
|
||
|
|
.fileIframe {
|
||
|
|
z-index: 1;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask {
|
||
|
|
z-index: 1000;
|
||
|
|
position: fixed;
|
||
|
|
background-color: rgb(57, 58, 61);
|
||
|
|
}
|
||
|
|
|
||
|
|
.word-mask {
|
||
|
|
z-index: 1000;
|
||
|
|
position: fixed;
|
||
|
|
right: 0;
|
||
|
|
width: 100%;
|
||
|
|
background-color: rgb(243, 242, 241);
|
||
|
|
}
|
||
|
|
|
||
|
|
.word-mask1 {
|
||
|
|
z-index: 1000;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
background-color: #2b579a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.word-mask2 {
|
||
|
|
z-index: 1000;
|
||
|
|
position: fixed;
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.excel-mask1 {
|
||
|
|
z-index: 9;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 20%;
|
||
|
|
width: 80%;
|
||
|
|
background-color: #107c41;
|
||
|
|
}
|
||
|
|
|
||
|
|
.page {
|
||
|
|
position: relative;
|
||
|
|
padding: 24px;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
|
||
|
|
.tool {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 24px;
|
||
|
4 years ago
|
|
||
|
4 years ago
|
.filter {
|
||
|
|
display: inline-flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: center;
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
li {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-right: 30px;
|
||
|
|
|
||
|
|
label {
|
||
|
|
margin-right: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 14px;
|
||
|
|
color: rgba(0, 0, 0, .65);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
|
||
|
|
&.mul {
|
||
|
|
margin-bottom: 0;
|
||
|
|
|
||
|
|
.filter {
|
||
|
|
width: 1200px;
|
||
|
|
|
||
|
|
li {
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
4 years ago
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
4 years ago
|
}
|
||
|
4 years ago
|
</style>
|