|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-card shadow="hover"
|
|
|
|
|
class="mgb20">
|
|
|
|
|
<div class="flex-between">
|
|
|
|
|
<el-page-header @back="goBack"
|
|
|
|
|
:content="name + '/' + (sorting? '编辑排序' : '内容设置')"></el-page-header>
|
|
|
|
|
</div>
|
|
|
|
|
</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">
|
|
|
|
|
<el-button type="primary"
|
|
|
|
|
round
|
|
|
|
|
@click="addChapter"
|
|
|
|
|
v-auth="'/curriculum:内容设置:添加章节'">添加章节</el-button>
|
|
|
|
|
<el-button type="primary"
|
|
|
|
|
round
|
|
|
|
|
@click="sort"
|
|
|
|
|
v-auth="'/curriculum:内容设置:编辑排序'">编辑顺序</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>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</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>
|
|
|
|
|
<template v-if="!sorting">
|
|
|
|
|
<el-button class="action-btn"
|
|
|
|
|
plain
|
|
|
|
|
@click="editChapter(chapter)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:修改章节名称'">修改章节名称</el-button>
|
|
|
|
|
<el-button class="action-btn"
|
|
|
|
|
plain
|
|
|
|
|
@click="addSection(chapter.id)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:添加小节'">添加小节</el-button>
|
|
|
|
|
<el-button class="action-btn"
|
|
|
|
|
plain
|
|
|
|
|
@click="delChapter(chapter.id)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:删除章节'">删除</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>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-table :data="chapter.subsectionList"
|
|
|
|
|
class="table"
|
|
|
|
|
stripe
|
|
|
|
|
header-align="center"
|
|
|
|
|
row-key="id">
|
|
|
|
|
<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="资源名称">
|
|
|
|
|
</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">
|
|
|
|
|
<el-button type="text"
|
|
|
|
|
@click="download(scope.row)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:下载'">下载</el-button>
|
|
|
|
|
<el-button type="text"
|
|
|
|
|
@click="preview(scope.row)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:查看'">查看</el-button>
|
|
|
|
|
<el-button type="text"
|
|
|
|
|
@click="delSection(scope.row)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:删除小节'">删除</el-button>
|
|
|
|
|
<el-button type="text"
|
|
|
|
|
@click="editSectionName(scope.row,chapter.id)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:修改小节名称'">修改小节名称</el-button>
|
|
|
|
|
<el-button type="text"
|
|
|
|
|
@click="switchFile(scope.row,chapter.id)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:更换文件'">更换文件</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>
|
|
|
|
|
|
|
|
|
|
<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-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer"
|
|
|
|
|
class="dialog-footer">
|
|
|
|
|
<el-button @click="chapterVisible = false">取消</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-form ref="form"
|
|
|
|
|
:model="sectionForm"
|
|
|
|
|
label-width="80px"
|
|
|
|
|
@submit.native.prevent>
|
|
|
|
|
<el-form-item label="资源添加">
|
|
|
|
|
<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="请输入小节名称"
|
|
|
|
|
v-model.trim="sectionForm.sectionName"
|
|
|
|
|
maxlength="50"
|
|
|
|
|
@keyup.enter.native="sectionSubmit()"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer"
|
|
|
|
|
class="dialog-footer">
|
|
|
|
|
<el-button @click="sectionVisible = false">取消</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">
|
|
|
|
|
<div style="text-align: center">
|
|
|
|
|
<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">
|
|
|
|
|
<el-button @click="switchVisible = false">取消</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-form @submit.native.prevent>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input placeholder="请输入小节名称"
|
|
|
|
|
v-model="sectionForm.sectionName"
|
|
|
|
|
maxlength="50"
|
|
|
|
|
@keyup.enter.native="sectionNameSubmit()"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer"
|
|
|
|
|
class="dialog-footer">
|
|
|
|
|
<el-button @click="sectionNameVisible = false">取消</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 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>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<pdf :visible.sync="pdfVisible"
|
|
|
|
|
:src.sync="pdfSrc"></pdf>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<div class="player-download"
|
|
|
|
|
id="playerDownload"></div>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
</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>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<span slot="footer"
|
|
|
|
|
class="dialog-footer">
|
|
|
|
|
<el-button @click="moveVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary"
|
|
|
|
|
@click="moveConfirm">确定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { Loading } from "element-ui";
|
|
|
|
|
import pdf from "@/components/pdf";
|
|
|
|
|
import axios from 'axios'
|
|
|
|
|
import Util from '@/libs/util'
|
|
|
|
|
import OSS from '@/libs/aliyun/aliyun-oss-sdk-6.17.1.min'
|
|
|
|
|
window.OSS = OSS;
|
|
|
|
|
import '@/libs/aliyun/aliyun-upload-sdk-1.5.6.min'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "contentSettings",
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
name: this.$route.query.name,
|
|
|
|
|
headers: {
|
|
|
|
|
token: sessionStorage.getItem('token')
|
|
|
|
|
},
|
|
|
|
|
id: this.$route.query.cid,
|
|
|
|
|
originChapters: [],
|
|
|
|
|
chapters: [],
|
|
|
|
|
multipleSelection: [],
|
|
|
|
|
sorting: false,
|
|
|
|
|
uploading: false,
|
|
|
|
|
uploadList: [],
|
|
|
|
|
chapterVisible: false,
|
|
|
|
|
chapterId: "",
|
|
|
|
|
chapterName: "",
|
|
|
|
|
sectionVisible: false,
|
|
|
|
|
sectionName: "",
|
|
|
|
|
sectionId: "",
|
|
|
|
|
switchVisible: false,
|
|
|
|
|
sectionNameVisible: false,
|
|
|
|
|
|
|
|
|
|
rules: {
|
|
|
|
|
sectionName: [
|
|
|
|
|
{ required: true, message: "请输入小节名称", trigger: "blur" }
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
sectionForm: {
|
|
|
|
|
sectionName: ''
|
|
|
|
|
},
|
|
|
|
|
fileId: "",
|
|
|
|
|
fileName: "",
|
|
|
|
|
fileUrl: "",
|
|
|
|
|
originalFileName: "",
|
|
|
|
|
fileType: "",
|
|
|
|
|
playAuth: "",
|
|
|
|
|
player: null,
|
|
|
|
|
previewImg: "",
|
|
|
|
|
iframeSrc: "",
|
|
|
|
|
curFile: {},
|
|
|
|
|
isAddSection: false,
|
|
|
|
|
isWord: false,
|
|
|
|
|
isPPT: false,
|
|
|
|
|
isExcel: false,
|
|
|
|
|
showMask: false,
|
|
|
|
|
showMask1: false,
|
|
|
|
|
showMask2: false,
|
|
|
|
|
loadIns: null,
|
|
|
|
|
pdfVisible: false,
|
|
|
|
|
pdfSrc: "",
|
|
|
|
|
previewing: false,
|
|
|
|
|
showProgress: false,
|
|
|
|
|
progressPercent: 0,
|
|
|
|
|
moveVisible: false,
|
|
|
|
|
checkList: [],
|
|
|
|
|
sortList: [
|
|
|
|
|
{
|
|
|
|
|
id: 'bottom',
|
|
|
|
|
name: '置末'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'top',
|
|
|
|
|
name: '置顶'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
moveForm: {
|
|
|
|
|
id: '',
|
|
|
|
|
sort: 'bottom'
|
|
|
|
|
},
|
|
|
|
|
moved: false // 是否移动过
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: { pdf },
|
|
|
|
|
mounted () {
|
|
|
|
|
this.insertScript();
|
|
|
|
|
this.id && this.getData();
|
|
|
|
|
// 处理预览资源后返回弹框不会消失的问题
|
|
|
|
|
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}`)
|
|
|
|
|
.then(res => {
|
|
|
|
|
this.chapters = res.chapterList;
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 处理多选
|
|
|
|
|
handleSelectionChange (val) {
|
|
|
|
|
this.multipleSelection = val
|
|
|
|
|
},
|
|
|
|
|
goBack () {
|
|
|
|
|
// 如果是预览则关闭预览
|
|
|
|
|
if (this.previewing) {
|
|
|
|
|
this.closeIframe();
|
|
|
|
|
} else {
|
|
|
|
|
// 排序中
|
|
|
|
|
if (this.sorting) {
|
|
|
|
|
// 已经移动了顺序
|
|
|
|
|
if (this.moved) {
|
|
|
|
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', {
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.saveSort()
|
|
|
|
|
this.moved = false
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.sorting = false
|
|
|
|
|
this.chapters = JSON.parse(JSON.stringify(this.originChapters))
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.sorting = false
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.$router.back()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
iframeOnload () {
|
|
|
|
|
document.querySelector("#fileIframe").onload = e => {
|
|
|
|
|
if (this.isPPT) {
|
|
|
|
|
this.showMask = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.showMask = false;
|
|
|
|
|
}
|
|
|
|
|
if (this.isWord) {
|
|
|
|
|
this.showMask1 = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.showMask1 = false;
|
|
|
|
|
}
|
|
|
|
|
if (this.isExcel) {
|
|
|
|
|
this.showMask2 = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.showMask2 = false;
|
|
|
|
|
}
|
|
|
|
|
this.loadIns.close();
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
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";
|
|
|
|
|
document.body.appendChild(linkTag);
|
|
|
|
|
|
|
|
|
|
const scriptTag = document.createElement("script");
|
|
|
|
|
scriptTag.type = "text/javascript";
|
|
|
|
|
scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js";
|
|
|
|
|
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) {
|
|
|
|
|
// this.$message.error("请上传10M以内的文件");
|
|
|
|
|
// return false;
|
|
|
|
|
// }
|
|
|
|
|
// if (type == "视频" && (file.size / 1024 / 1024) > 30) {
|
|
|
|
|
// this.$message.warning('请上传30M以内的视频')
|
|
|
|
|
// return false;
|
|
|
|
|
// }
|
|
|
|
|
this.uploading = true;
|
|
|
|
|
this.originalFileName = file.name;
|
|
|
|
|
if (this.isAddSection) this.sectionForm.sectionName = file.name.substring(0, file.name.lastIndexOf("."));
|
|
|
|
|
this.fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
|
|
|
|
|
this.showProgress = true
|
|
|
|
|
},
|
|
|
|
|
handleExceed (files, fileList) {
|
|
|
|
|
this.$message.warning(
|
|
|
|
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
// 自定义上传
|
|
|
|
|
handleRequest (data) {
|
|
|
|
|
console.log(33, Util.isVideo(this.fileType))
|
|
|
|
|
// 视频上传另外调阿里云的接口处理
|
|
|
|
|
if (Util.isVideo(this.fileType)) {
|
|
|
|
|
|
|
|
|
|
console.log("🚀 ~ file: contentSettings.vue:587 ~ handleRequest ~ AliyunUpload:", AliyunUpload)
|
|
|
|
|
var uploader = new AliyunUpload.Vod({
|
|
|
|
|
// userID，必填，您可以使用阿里云账号访问账号中心（https://account.console.aliyun.com/），即可查看账号ID
|
|
|
|
|
userId: "1686385620732064",
|
|
|
|
|
// 分片大小默认1 MB，不能小于100 KB（100*1024）
|
|
|
|
|
partSize: 1048576,
|
|
|
|
|
// 并行上传分片个数，默认5
|
|
|
|
|
parallel: 5,
|
|
|
|
|
// 网络原因失败时，重新上传次数，默认为3
|
|
|
|
|
retryCount: 3,
|
|
|
|
|
// 网络原因失败时，重新上传间隔时间，默认为2秒
|
|
|
|
|
retryDuration: 2,
|
|
|
|
|
// 开始上传
|
|
|
|
|
'onUploadstarted': function (uploadInfo) {
|
|
|
|
|
console.log("🚀 ~ file: contentSettings.vue:567 ~ handleRequest ~ uploadInfo:", uploadInfo)
|
|
|
|
|
debugger
|
|
|
|
|
},
|
|
|
|
|
// 文件上传成功
|
|
|
|
|
'onUploadSucceed': function (uploadInfo) {
|
|
|
|
|
console.log("🚀 ~ file: contentSettings.vue:571 ~ handleRequest ~ uploadInfo:", uploadInfo)
|
|
|
|
|
},
|
|
|
|
|
// 文件上传失败
|
|
|
|
|
'onUploadFailed': function (uploadInfo, code, message) {
|
|
|
|
|
console.log("🚀 ~ file: contentSettings.vue:576 ~ handleRequest ~ uploadInfo, code, message:", uploadInfo, code, message)
|
|
|
|
|
},
|
|
|
|
|
// 文件上传进度，单位：字节
|
|
|
|
|
'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
|
|
|
|
|
console.log("🚀 ~ file: contentSettings.vue:578 ~ handleRequest ~ uploadInfo, totalSize, loadedPercent:", uploadInfo, totalSize, loadedPercent)
|
|
|
|
|
},
|
|
|
|
|
// 上传凭证或STS token超时
|
|
|
|
|
'onUploadTokenExpired': function (uploadInfo) {
|
|
|
|
|
},
|
|
|
|
|
// 全部文件上传结束
|
|
|
|
|
'onUploadEnd': function (uploadInfo) {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
const param = new FormData()
|
|
|
|
|
param.append('file', data.file)
|
|
|
|
|
const config = {
|
|
|
|
|
timeout: 10000000000,
|
|
|
|
|
headers: {
|
|
|
|
|
'Accept': '*/*',
|
|
|
|
|
'Content-Type': 'multipart/form-data'
|
|
|
|
|
},
|
|
|
|
|
// 获取上传进度，自带的组件上传进度不准确
|
|
|
|
|
onUploadProgress: progressEvent => {
|
|
|
|
|
const per = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
|
|
|
|
|
console.log("🚀 ~ file: contentSettings.vue ~ line 329 ~ handleRequest ~ per", per, this.progressPercent)
|
|
|
|
|
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.fileId = fileId
|
|
|
|
|
this.fileType = fileType
|
|
|
|
|
this.fileUrl = fileUrl
|
|
|
|
|
this.fileName = ossFileName
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
uploadError (err, file, fileList) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "上传出错，请重试！",
|
|
|
|
|
type: "error",
|
|
|
|
|
center: true
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
beforeRemove (file, fileList) {
|
|
|
|
|
if ((file.size / 1024 / 1024) < 10) {
|
|
|
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleRemove (file, fileList) {
|
|
|
|
|
this.uploadList = fileList;
|
|
|
|
|
},
|
|
|
|
|
uploadSure () {
|
|
|
|
|
this.importVisible = false;
|
|
|
|
|
this.pageNo = 1;
|
|
|
|
|
this.staffGradeId = "";
|
|
|
|
|
this.keyword = "";
|
|
|
|
|
this.getTeacher();
|
|
|
|
|
},
|
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
addChapter () {
|
|
|
|
|
this.chapterName = "";
|
|
|
|
|
this.chapterId = "";
|
|
|
|
|
this.chapterVisible = true;
|
|
|
|
|
},
|
|
|
|
|
sort () {
|
|
|
|
|
this.originChapters = JSON.parse(JSON.stringify(this.chapters))
|
|
|
|
|
this.sorting = true;
|
|
|
|
|
},
|
|
|
|
|
// 批量移动
|
|
|
|
|
move () {
|
|
|
|
|
const list = this.chapters
|
|
|
|
|
const checkList = []
|
|
|
|
|
list.map(e => {
|
|
|
|
|
e.subsectionList.map(n => {
|
|
|
|
|
n.check && checkList.push(n)
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
this.checkList = checkList
|
|
|
|
|
if (checkList.length) {
|
|
|
|
|
this.moveForm = {
|
|
|
|
|
id: '',
|
|
|
|
|
sort: 'bottom'
|
|
|
|
|
}
|
|
|
|
|
this.sortList = [
|
|
|
|
|
{
|
|
|
|
|
id: 'bottom',
|
|
|
|
|
name: '置末'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 'top',
|
|
|
|
|
name: '置顶'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
this.moveVisible = true
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning('请选择小节！')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 目标章节选择回调
|
|
|
|
|
chapterChange (id) {
|
|
|
|
|
const list = []
|
|
|
|
|
// 获取多少个小节
|
|
|
|
|
this.chapters.find(e => e.id === id).subsectionList.map((e, i) => {
|
|
|
|
|
list.push({
|
|
|
|
|
id: i,
|
|
|
|
|
name: i + 1
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
// 置末和置顶写死
|
|
|
|
|
this.sortList = [
|
|
|
|
|
{
|
|
|
|
|
id: 'bottom',
|
|
|
|
|
name: '置末'
|
|
|
|
|
},
|
|
|
|
|
...list,
|
|
|
|
|
{
|
|
|
|
|
id: 'top',
|
|
|
|
|
name: '置顶'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
// 资源移动校验
|
|
|
|
|
moveConfirm () {
|
|
|
|
|
let { id, sort } = this.moveForm
|
|
|
|
|
if (!id) return this.$message.warning('请选择目标章节')
|
|
|
|
|
if (sort === '') return this.$message.warning('请选择目标排序')
|
|
|
|
|
if (typeof sort === 'string') sort = sort === 'top' ? 0 : this.sortList.length - 2 // 置顶和置末直接给排序
|
|
|
|
|
this.moveVisible = false
|
|
|
|
|
const list = this.checkList
|
|
|
|
|
list.map(e => e.check = false)
|
|
|
|
|
const ids = list.map(e => e.id)
|
|
|
|
|
const { chapters } = this
|
|
|
|
|
chapters.map(e => {
|
|
|
|
|
e.children = []
|
|
|
|
|
e.subsectionList.map(n => {
|
|
|
|
|
if (!ids.includes(n.id)) {
|
|
|
|
|
e.children.push(n)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
e.subsectionList = e.children
|
|
|
|
|
delete e.children
|
|
|
|
|
if (e.id === id) e.subsectionList.splice(sort, 0, ...list)
|
|
|
|
|
})
|
|
|
|
|
this.moved = true
|
|
|
|
|
},
|
|
|
|
|
cancelSort () {
|
|
|
|
|
this.chapters = JSON.parse(JSON.stringify(this.originChapters))
|
|
|
|
|
this.sorting = false;
|
|
|
|
|
},
|
|
|
|
|
saveSort () {
|
|
|
|
|
this.chapters.forEach((n, k) => {
|
|
|
|
|
n.sort = k + 1;
|
|
|
|
|
n.subsectionList.forEach((j, i) => {
|
|
|
|
|
j.sort = i + 1
|
|
|
|
|
j.chapterId = n.id
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
let data = {
|
|
|
|
|
chapterVOList: this.chapters
|
|
|
|
|
};
|
|
|
|
|
this.$post(this.api.reorder, data).then(res => {
|
|
|
|
|
this.sorting = false;
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
},
|
|
|
|
|
editChapter (item) {
|
|
|
|
|
this.chapterId = item.id;
|
|
|
|
|
this.chapterName = item.name;
|
|
|
|
|
this.chapterVisible = true;
|
|
|
|
|
},
|
|
|
|
|
delChapter (id) {
|
|
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
|
|
|
|
|
type: "warning"
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
this.$del(`${this.api.deleteChapter}/${id}`).then(res => {
|
|
|
|
|
this.$message.success("删除成功");
|
|
|
|
|
this.getData();
|
|
|
|
|
}).catch(res => {
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
closeSection () {
|
|
|
|
|
this.isAddSection = false;
|
|
|
|
|
this.progressPercent = 0
|
|
|
|
|
},
|
|
|
|
|
addSection (id) {
|
|
|
|
|
this.chapterId = id;
|
|
|
|
|
this.sectionForm.sectionName = "";
|
|
|
|
|
this.fileUrl = "";
|
|
|
|
|
this.uploadList = [];
|
|
|
|
|
this.sectionId = "";
|
|
|
|
|
this.isAddSection = true;
|
|
|
|
|
this.sectionVisible = true;
|
|
|
|
|
},
|
|
|
|
|
chapterSubmit () {
|
|
|
|
|
if (!this.chapterName) return this.$message.warning("请填写章节名称");
|
|
|
|
|
let data = {
|
|
|
|
|
cid: this.id,
|
|
|
|
|
name: this.chapterName
|
|
|
|
|
};
|
|
|
|
|
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 => {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sectionSubmit (e) {
|
|
|
|
|
if (!this.sectionForm.sectionName) return this.$message.warning("请填写小节名称");
|
|
|
|
|
if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
|
|
|
|
|
if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
|
|
|
|
|
let data = {
|
|
|
|
|
id: this.sectionId,
|
|
|
|
|
cid: this.id,
|
|
|
|
|
chapterId: this.chapterId,
|
|
|
|
|
name: this.sectionForm.sectionName,
|
|
|
|
|
fileId: this.fileId,
|
|
|
|
|
fileUrl: this.fileUrl,
|
|
|
|
|
fileName: this.fileName,
|
|
|
|
|
fileType: this.fileType,
|
|
|
|
|
originalFileName: this.originalFileName
|
|
|
|
|
};
|
|
|
|
|
this.$post(this.api.addSubsection, data).then(res => {
|
|
|
|
|
this.$message.success("添加成功");
|
|
|
|
|
this.sectionVisible = false;
|
|
|
|
|
this.getData();
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
closeSwitch () {
|
|
|
|
|
this.fileId = "";
|
|
|
|
|
this.fileName = "";
|
|
|
|
|
this.fileType = "";
|
|
|
|
|
this.fileUrl = "";
|
|
|
|
|
this.sectionId = "";
|
|
|
|
|
this.progressPercent = 0
|
|
|
|
|
},
|
|
|
|
|
// 下载资源
|
|
|
|
|
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 => { })
|
|
|
|
|
} else {
|
|
|
|
|
this.downloadFile(row.name + '.' + row.fileType, row.fileUrl)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
preview (row) {
|
|
|
|
|
if (this.transferType(row.fileType) == "视频") {
|
|
|
|
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
|
|
|
|
|
this.playAuth = res.data.playAuth;
|
|
|
|
|
if (this.player) {
|
|
|
|
|
this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
|
|
|
|
|
} else {
|
|
|
|
|
this.player = new Aliplayer({
|
|
|
|
|
id: "player",
|
|
|
|
|
width: "100%",
|
|
|
|
|
autoplay: false,
|
|
|
|
|
vid: row.fileId,
|
|
|
|
|
playauth: this.playAuth,
|
|
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}).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 {
|
|
|
|
|
this.$get(`${this.api.getSubsection}/${row.id}`).then(res => {
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
this.iframeSrc = res.previewUrl;
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.iframeOnload();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
editSectionName (row, chapterId) {
|
|
|
|
|
this.chapterId = chapterId;
|
|
|
|
|
this.sectionId = row.id;
|
|
|
|
|
this.sectionForm.sectionName = row.name;
|
|
|
|
|
this.sectionNameVisible = true;
|
|
|
|
|
},
|
|
|
|
|
switchFile (row, chapterId, sectionId) {
|
|
|
|
|
this.uploadList = [];
|
|
|
|
|
this.curFile = {
|
|
|
|
|
fileId: row.fileId,
|
|
|
|
|
fileName: row.fileName,
|
|
|
|
|
fileType: row.fileType,
|
|
|
|
|
fileUrl: row.fileUrl
|
|
|
|
|
};
|
|
|
|
|
this.chapterId = chapterId;
|
|
|
|
|
this.sectionId = row.id;
|
|
|
|
|
this.sectionForm.sectionName = row.sectionName;
|
|
|
|
|
|
|
|
|
|
this.switchVisible = true;
|
|
|
|
|
},
|
|
|
|
|
switchSubmitFile () {
|
|
|
|
|
let data = {
|
|
|
|
|
id: this.sectionId,
|
|
|
|
|
cid: this.id,
|
|
|
|
|
chapterId: this.chapterId,
|
|
|
|
|
name: this.sectionForm.sectionName,
|
|
|
|
|
fileId: this.fileId,
|
|
|
|
|
fileName: this.fileName,
|
|
|
|
|
fileType: this.fileType,
|
|
|
|
|
fileUrl: this.fileUrl,
|
|
|
|
|
originalFileName: this.originalFileName
|
|
|
|
|
};
|
|
|
|
|
this.$put(this.api.editSubsection, data).then(res => {
|
|
|
|
|
this.$message.success("更换成功");
|
|
|
|
|
this.switchVisible = false;
|
|
|
|
|
this.getData();
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
switchSubmit () {
|
|
|
|
|
if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
|
|
|
|
|
if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
|
|
|
|
|
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) {
|
|
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
|
|
|
|
|
type: "warning"
|
|
|
|
|
})
|
|
|
|
|
.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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sortSection (chapterIndex, type, disabled, index) {
|
|
|
|
|
if (!disabled) {
|
|
|
|
|
this.moved = true
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
this.chapters[chapterIndex].subsectionList = list;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sectionNameSubmit () {
|
|
|
|
|
if (!this.sectionForm.sectionName) return this.$message.warning("请填写小节名称");
|
|
|
|
|
let data = {
|
|
|
|
|
id: this.sectionId,
|
|
|
|
|
cid: this.id,
|
|
|
|
|
chapterId: this.chapterId,
|
|
|
|
|
name: this.sectionForm.sectionName
|
|
|
|
|
};
|
|
|
|
|
this.$put(this.api.editSubsection, data).then(res => {
|
|
|
|
|
this.$message.success("修改成功");
|
|
|
|
|
this.sectionNameVisible = false;
|
|
|
|
|
this.getData();
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
closePlayer () {
|
|
|
|
|
this.playAuth = "";
|
|
|
|
|
this.player.pause();
|
|
|
|
|
},
|
|
|
|
|
closeIframe () {
|
|
|
|
|
this.iframeSrc = "";
|
|
|
|
|
this.showMask = false;
|
|
|
|
|
this.showMask1 = false;
|
|
|
|
|
this.showMask2 = false;
|
|
|
|
|
this.previewing = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.page-content {
|
|
|
|
|
max-height: calc(100vh - 420px);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
.action-btn {
|
|
|
|
|
color: #9076ff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
border: #9076ff 1px solid;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btns {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 12px;
|
|
|
|
|
right: 24px;
|
|
|
|
|
|
|
|
|
|
.el-button {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sort-icon {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&.disabled {
|
|
|
|
|
color: #ccc;
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.el-progress-bar {
|
|
|
|
|
padding-right: 70px;
|
|
|
|
|
margin-right: -70px;
|
|
|
|
|
}
|
|
|
|
|
.el-upload__tip {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -4px;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 300px;
|
|
|
|
|
line-height: 1.4;
|
|
|
|
|
}
|
|
|
|
|
.el-image-viewer__wrapper {
|
|
|
|
|
transform: translateY(-10px);
|
|
|
|
|
transition: transform 0.5s;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-image-viewer__close {
|
|
|
|
|
z-index: 10000;
|
|
|
|
|
top: 15px;
|
|
|
|
|
right: 15px;
|
|
|
|
|
|
|
|
|
|
&.doc-close {
|
|
|
|
|
i {
|
|
|
|
|
color: #000 !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.player {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
width: 1200px !important;
|
|
|
|
|
height: 600px !important;
|
|
|
|
|
}
|
|
|
|
|
.player-download {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -9999px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
|
|
.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, 0.65);
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.mul {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
|
|
|
|
.filter {
|
|
|
|
|
width: 1200px;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
