|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-card shadow="hover" class="m-b-20">
|
|
|
|
|
<div class="flex-between">
|
|
|
|
|
<el-page-header @back="back" :content="name + '/' + (sorting ? '编辑排序' : '内容设置')"></el-page-header>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<div class="page">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="flex-between">
|
|
|
|
|
<h6 class="title">课程目录</h6>
|
|
|
|
|
<el-button type="primary" size="mini" @click="addChapter" v-auth="'/curriculum:内容设置:添加章节'">新增章节</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="chapters">
|
|
|
|
|
<draggable v-model="chapters" :disabled="false" :group="{
|
|
|
|
|
name: 'sec',
|
|
|
|
|
pull: false,
|
|
|
|
|
}" animation="1000" @end="updateSort">
|
|
|
|
|
<li v-for="(chapter, i) in chapters" :key="i" :class="{ active: chapterId === chapter.id }">
|
|
|
|
|
<span class="name ellipsis" @click="chapterClick(chapter)">{{ chapter.name }}</span>
|
|
|
|
|
<el-link :underline="false" type="primary" @click="editChapter(chapter)">修改名称</el-link>
|
|
|
|
|
<el-link v-if="i" class="del" :underline="false" type="primary"
|
|
|
|
|
@click="delChapter(chapter.id)">删除</el-link>
|
|
|
|
|
</li>
|
|
|
|
|
</draggable>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="flex-between">
|
|
|
|
|
<el-input style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword"
|
|
|
|
|
clearable></el-input>
|
|
|
|
|
<div>
|
|
|
|
|
<el-button class="action-btn" @click="showSource" v-auth="'/curriculum:内容设置:修改章节名称'">添加系统资源</el-button>
|
|
|
|
|
<el-button class="action-btn" @click="addSection" v-auth="'/curriculum:内容设置:添加小节'">本地上传</el-button>
|
|
|
|
|
<el-button class="action-btn" @click="move" v-auth="'/curriculum:内容设置:删除章节'">批量移动</el-button>
|
|
|
|
|
<el-button class="action-btn" v-auth="'/curriculum:内容设置:删除章节'" @click="batchDelSection">批量移除</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ul v-if="sections.length" class="sections">
|
|
|
|
|
<draggable v-model="sections" :group="{
|
|
|
|
|
name: 'sec',
|
|
|
|
|
pull: false,
|
|
|
|
|
}" handle=".drag" animation="1000" @end="updateSort">
|
|
|
|
|
<template v-for="(section, i) in sections">
|
|
|
|
|
<li v-if="section.name.includes(keyword)" :key="i">
|
|
|
|
|
<div class="section-left">
|
|
|
|
|
<img class="drag" src="@/assets/img/drag.svg" alt="">
|
|
|
|
|
<el-checkbox v-model="section.check"></el-checkbox>
|
|
|
|
|
<span class="serial">{{ i + 1 }}.</span>
|
|
|
|
|
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
|
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
|
|
|
|
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
|
|
|
|
|
src="@/assets/img/exts/word.png" alt="">
|
|
|
|
|
<img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'"
|
|
|
|
|
src="@/assets/img/exts/excel.png" alt="">
|
|
|
|
|
<img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
|
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
|
|
|
|
|
<img v-else src="@/assets/img/exts/pic.png" alt="">
|
|
|
|
|
<span class="name">{{ section.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="section-actions">
|
|
|
|
|
<el-button type="text" :disabled="section.isDownload === 0" @click="download(section)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:下载'">下载</el-button>
|
|
|
|
|
<el-button type="text" @click="preview(section)" v-auth="'/curriculum:内容设置:查看'">预览</el-button>
|
|
|
|
|
<el-button type="text" @click="editSectionName(section)"
|
|
|
|
|
v-auth="'/curriculum:内容设置:修改小节名称'">修改资源名称</el-button>
|
|
|
|
|
<el-button type="text" @click="switchFile(section)" v-auth="'/curriculum:内容设置:更换文件'">更换</el-button>
|
|
|
|
|
<el-button type="text" @click="delSection(section)" v-auth="'/curriculum:内容设置:删除小节'">移除</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
</template>
|
|
|
|
|
</draggable>
|
|
|
|
|
</ul>
|
|
|
|
|
<div v-else class="none">
|
|
|
|
|
<img class="icon" src="@/assets/img/empty.svg" alt="">
|
|
|
|
|
<p>暂无数据</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</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="资源添加">
|
|
|
|
|
<Upload :max-size="100000" :limit="10000" :file-list="uploadList" :on-remove="handleRemove"
|
|
|
|
|
@beforeUpload="beforeUpload" @onSuccess="uploadSuccess">
|
|
|
|
|
<template slot="tip">
|
|
|
|
|
<p>视频请上传MP4格式，大小不超过150M；office文件大小不要超过10M</p>
|
|
|
|
|
</template>
|
|
|
|
|
</Upload>
|
|
|
|
|
</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">
|
|
|
|
|
<Upload :max-size="100000" :limit="10000" :file-list="uploadList" :on-remove="handleRemove"
|
|
|
|
|
@beforeUpload="beforeUpload" @onSuccess="uploadSuccess">
|
|
|
|
|
<div slot="tip"></div>
|
|
|
|
|
</Upload>
|
|
|
|
|
</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 || 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>
|
|
|
|
|
<div class="el-image-viewer__canvas">
|
|
|
|
|
<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>
|
|
|
|
|
</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" />
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="更换内容资源" :visible.sync="switchTypeVisible" width="400px">
|
|
|
|
|
<ul class="source-list">
|
|
|
|
|
<li @click="sourceVisible = true">系统资源</li>
|
|
|
|
|
<li @click="editSection">本地上传</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<Source :visible.sync="sourceVisible" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { Loading } from "element-ui";
|
|
|
|
|
import Pdf from "@/components/pdf";
|
|
|
|
|
import Upload from '@/components/upload';
|
|
|
|
|
import Oss from '@/components/upload/upload.js'
|
|
|
|
|
import Util from '@/libs/util'
|
|
|
|
|
import Source from './source'
|
|
|
|
|
import Draggable from 'vuedraggable'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: { Pdf, Upload, Source, Draggable },
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
name: this.$route.query.name,
|
|
|
|
|
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: ''
|
|
|
|
|
},
|
|
|
|
|
keyword: '',
|
|
|
|
|
searchTimer: null,
|
|
|
|
|
fileId: '',
|
|
|
|
|
fileName: '',
|
|
|
|
|
fileUrl: '',
|
|
|
|
|
originalFileName: '',
|
|
|
|
|
fileType: '',
|
|
|
|
|
videoSrc: '',
|
|
|
|
|
playAuth: '',
|
|
|
|
|
player: null,
|
|
|
|
|
previewImg: '',
|
|
|
|
|
iframeSrc: '',
|
|
|
|
|
curFile: {},
|
|
|
|
|
curSection: {},
|
|
|
|
|
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'
|
|
|
|
|
},
|
|
|
|
|
sourceVisible: false,
|
|
|
|
|
sections: [],
|
|
|
|
|
|
|
|
|
|
switchTypeVisible: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
this.insertScript();
|
|
|
|
|
this.id && this.getData();
|
|
|
|
|
// 处理预览资源后返回弹框不会消失的问题
|
|
|
|
|
if (window.history && window.history.pushState) {
|
|
|
|
|
history.pushState(null, null, document.URL);
|
|
|
|
|
window.addEventListener("popstate", this.back, false);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
destroyed () {
|
|
|
|
|
window.removeEventListener("popstate", this.back, false);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData () {
|
|
|
|
|
this.$get(`${this.api.curriculumChapter}/${this.id}`).then(res => {
|
|
|
|
|
const list = res.chapterList
|
|
|
|
|
if (list.length) {
|
|
|
|
|
list.forEach(e => {
|
|
|
|
|
e.subsectionList.forEach(n => {
|
|
|
|
|
n.check = false
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
if (this.chapterId) {
|
|
|
|
|
const cur = list.find(e => e.id === this.chapterId)
|
|
|
|
|
this.sections = cur ? cur.subsectionList : []
|
|
|
|
|
} else {
|
|
|
|
|
this.chapterClick(list[0])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.chapters = list
|
|
|
|
|
}).catch(err => { })
|
|
|
|
|
},
|
|
|
|
|
// 处理多选
|
|
|
|
|
handleSelectionChange (val) {
|
|
|
|
|
this.multipleSelection = val
|
|
|
|
|
},
|
|
|
|
|
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) {
|
|
|
|
|
this.uploading = true;
|
|
|
|
|
this.originalFileName = file.name;
|
|
|
|
|
if (this.isAddSection) this.sectionForm.sectionName = file.name.substring(0, file.name.lastIndexOf("."));
|
|
|
|
|
this.fileType = Util.getFileExt(file.name)
|
|
|
|
|
this.showProgress = true
|
|
|
|
|
},
|
|
|
|
|
handleExceed (files, fileList) {
|
|
|
|
|
this.$message.warning(
|
|
|
|
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
uploadSuccess (file) {
|
|
|
|
|
this.uploading = false
|
|
|
|
|
this.fileId = ''
|
|
|
|
|
this.fileType = file.format
|
|
|
|
|
this.fileUrl = file.url
|
|
|
|
|
this.fileName = file.name
|
|
|
|
|
this.uploadList = [{
|
|
|
|
|
name: file.name,
|
|
|
|
|
url: file.url,
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
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 () {
|
|
|
|
|
// Oss.del(this.fileUrl)
|
|
|
|
|
this.fileUrl = ''
|
|
|
|
|
},
|
|
|
|
|
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('请选择资源！')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 批量移除小节
|
|
|
|
|
batchDelSection () {
|
|
|
|
|
const list = this.sections.filter(e => e.check)
|
|
|
|
|
this.$confirm(list.length ? '此删除操作不可逆，是否确认删除选中项？' : '此删除操作不可逆，是否确认删除全部资源？', "提示", {
|
|
|
|
|
type: "warning"
|
|
|
|
|
}).then(async () => {
|
|
|
|
|
await this.$post(this.api.deleteSubsectionBatch, {
|
|
|
|
|
chapterId: this.chapterId,
|
|
|
|
|
subsectionIds: list.map(e => e.id)
|
|
|
|
|
})
|
|
|
|
|
this.sections.forEach(e => {
|
|
|
|
|
e.check = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
this.$message.success("删除成功")
|
|
|
|
|
this.getData()
|
|
|
|
|
}).catch(() => { })
|
|
|
|
|
},
|
|
|
|
|
// 拖拽后回调
|
|
|
|
|
async updateSort (e) {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
const { chapters, sections, chapterId } = this
|
|
|
|
|
chapters.forEach((n, k) => {
|
|
|
|
|
n.sort = k + 1
|
|
|
|
|
if (n.id === chapterId) n.subsectionList = sections
|
|
|
|
|
n.subsectionList && n.subsectionList.forEach((j, i) => {
|
|
|
|
|
j.sort = i + 1
|
|
|
|
|
j.chapterId = n.id
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
await this.$post(this.api.reorderCurriculm, {
|
|
|
|
|
chapterVOList: chapters
|
|
|
|
|
})
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
// 目标章节选择回调
|
|
|
|
|
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: '置顶'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
// 资源移动校验
|
|
|
|
|
async 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)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
chapters.forEach((n, k) => {
|
|
|
|
|
n.sort = k + 1
|
|
|
|
|
n.subsectionList.forEach((j, i) => {
|
|
|
|
|
j.sort = i + 1
|
|
|
|
|
j.chapterId = n.id
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
await this.$post(this.api.reorderCurriculm, {
|
|
|
|
|
chapterVOList: this.chapters
|
|
|
|
|
})
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
// 选中章节
|
|
|
|
|
chapterClick (row) {
|
|
|
|
|
row.subsectionList.map(e => this.$set(e, 'check', false))
|
|
|
|
|
this.sections = row.subsectionList
|
|
|
|
|
this.chapterId = row.id
|
|
|
|
|
},
|
|
|
|
|
// 编辑章节名称
|
|
|
|
|
editChapter (item) {
|
|
|
|
|
this.chapterId = item.id;
|
|
|
|
|
this.chapterName = item.name;
|
|
|
|
|
this.chapterVisible = true;
|
|
|
|
|
},
|
|
|
|
|
delChapter (id) {
|
|
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
|
|
|
|
|
type: "warning"
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.$del(`${this.api.deleteChapterCurriculm}/${id}`).then(res => {
|
|
|
|
|
this.$message.success("删除成功")
|
|
|
|
|
this.getData()
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
}).catch(() => { })
|
|
|
|
|
},
|
|
|
|
|
closeSection () {
|
|
|
|
|
this.isAddSection = false;
|
|
|
|
|
this.progressPercent = 0
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 添加系统资源
|
|
|
|
|
showSource () {
|
|
|
|
|
this.curSection = {}
|
|
|
|
|
this.sourceVisible = true
|
|
|
|
|
},
|
|
|
|
|
// 本地上传新增资源
|
|
|
|
|
addSection () {
|
|
|
|
|
this.sectionForm.sectionName = ''
|
|
|
|
|
this.fileUrl = ''
|
|
|
|
|
this.uploadList = []
|
|
|
|
|
this.sectionId = ''
|
|
|
|
|
this.isAddSection = true
|
|
|
|
|
this.sectionVisible = true
|
|
|
|
|
},
|
|
|
|
|
// 本地上传编辑资源
|
|
|
|
|
editSection () {
|
|
|
|
|
const row = this.curSection
|
|
|
|
|
this.sectionForm.sectionName = row.name
|
|
|
|
|
this.fileUrl = ''
|
|
|
|
|
this.uploadList = [{
|
|
|
|
|
name: row.originalFileName,
|
|
|
|
|
url: row.fileUrl,
|
|
|
|
|
}]
|
|
|
|
|
this.isAddSection = false
|
|
|
|
|
this.sectionVisible = true
|
|
|
|
|
},
|
|
|
|
|
chapterSubmit () {
|
|
|
|
|
if (!this.chapterName) return this.$message.warning("请填写章节名称")
|
|
|
|
|
const data = {
|
|
|
|
|
cid: this.id,
|
|
|
|
|
name: this.chapterName
|
|
|
|
|
};
|
|
|
|
|
if (this.chapterId) {
|
|
|
|
|
data.id = this.chapterId
|
|
|
|
|
this.$put(this.api.editChapterCurriculm, data).then(res => {
|
|
|
|
|
this.$message.success("修改成功")
|
|
|
|
|
this.chapterVisible = false
|
|
|
|
|
this.getData()
|
|
|
|
|
}).catch(err => { })
|
|
|
|
|
} else {
|
|
|
|
|
this.$post(this.api.addChapterCurriculm, data).then(res => {
|
|
|
|
|
this.$message.success("添加成功")
|
|
|
|
|
this.chapterVisible = false
|
|
|
|
|
this.getData()
|
|
|
|
|
}).catch(err => { })
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
async 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('请上传资源')
|
|
|
|
|
const 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
|
|
|
|
|
}
|
|
|
|
|
if (this.sectionId) {
|
|
|
|
|
await this.$put(this.api.editSubsectionCurriculm, data)
|
|
|
|
|
} else {
|
|
|
|
|
await this.$post(this.api.addSubsectionCurriculm, data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$message.success('添加成功')
|
|
|
|
|
this.sectionVisible = false
|
|
|
|
|
this.switchTypeVisible = false
|
|
|
|
|
this.getData()
|
|
|
|
|
},
|
|
|
|
|
closeSwitch () {
|
|
|
|
|
this.fileId = ''
|
|
|
|
|
this.fileName = ''
|
|
|
|
|
this.fileType = ''
|
|
|
|
|
this.fileUrl = ''
|
|
|
|
|
this.sectionId = ''
|
|
|
|
|
this.progressPercent = 0
|
|
|
|
|
},
|
|
|
|
|
// 下载资源
|
|
|
|
|
download (row) {
|
|
|
|
|
const { fileType, fileId } = row
|
|
|
|
|
// 下载ppt
|
|
|
|
|
if (fileType === 'pptx') {
|
|
|
|
|
Util.downloadFile(row.originalFileName || row.name, row.fileUrl)
|
|
|
|
|
} else if (fileId) {
|
|
|
|
|
// 阿里云点播视频，先生成视频，再拿到视频地址去下载（现在已经去掉视频点播的方法，但是还需要兼容历史数据）
|
|
|
|
|
this.$get(`${this.api.getPlayAuth}/${fileId}`).then(res => {
|
|
|
|
|
new Aliplayer({
|
|
|
|
|
id: "playerDownload",
|
|
|
|
|
width: "100%",
|
|
|
|
|
autoplay: false,
|
|
|
|
|
vid: fileId,
|
|
|
|
|
playauth: res.playAuth,
|
|
|
|
|
encryptType: 1 //当播放私有加密流时需要设置。
|
|
|
|
|
}, player => {
|
|
|
|
|
Util.downloadFile(row.name, player._urls[0].Url)
|
|
|
|
|
})
|
|
|
|
|
}).catch(res => { })
|
|
|
|
|
} else {
|
|
|
|
|
Util.downloadFile(row.name + '.' + row.fileType, row.fileUrl)
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
preview (row) {
|
|
|
|
|
if (this.transferType(row.fileType) == "视频") {
|
|
|
|
|
// 阿里云视频点播
|
|
|
|
|
if (row.fileId) {
|
|
|
|
|
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
|
|
|
|
|
this.playAuth = res.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 {
|
|
|
|
|
this.videoSrc = row.fileUrl
|
|
|
|
|
}
|
|
|
|
|
} 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.curriculumGetSubsection}/${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) {
|
|
|
|
|
this.sectionId = row.id;
|
|
|
|
|
this.sectionForm.sectionName = row.name;
|
|
|
|
|
this.sectionNameVisible = true;
|
|
|
|
|
},
|
|
|
|
|
switchFile (row) {
|
|
|
|
|
this.curSection = row
|
|
|
|
|
this.sectionId = row.id
|
|
|
|
|
this.switchTypeVisible = true
|
|
|
|
|
},
|
|
|
|
|
switchSubmitFile () {
|
|
|
|
|
this.$put(this.api.editSubsectionCurriculm, {
|
|
|
|
|
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
|
|
|
|
|
}).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("请上传资源")
|
|
|
|
|
this.switchSubmitFile()
|
|
|
|
|
},
|
|
|
|
|
delSection (row) {
|
|
|
|
|
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
|
|
|
|
|
type: "warning"
|
|
|
|
|
}).then(() => {
|
|
|
|
|
this.$del(`${this.api.deleteSubsectionCurriculm}/${row.id}`).then(res => {
|
|
|
|
|
// row.fileUrl && Oss.del(row.fileUrl)
|
|
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
sectionNameSubmit () {
|
|
|
|
|
if (!this.sectionForm.sectionName) return this.$message.warning("请填写资源名称")
|
|
|
|
|
this.$put(this.api.editSubsectionCurriculm, {
|
|
|
|
|
id: this.sectionId,
|
|
|
|
|
cid: this.id,
|
|
|
|
|
chapterId: this.chapterId,
|
|
|
|
|
name: this.sectionForm.sectionName
|
|
|
|
|
}).then(res => {
|
|
|
|
|
this.$message.success("修改成功")
|
|
|
|
|
this.sectionNameVisible = false
|
|
|
|
|
this.getData()
|
|
|
|
|
}).catch(err => { })
|
|
|
|
|
},
|
|
|
|
|
closePlayer () {
|
|
|
|
|
this.playAuth = ""
|
|
|
|
|
this.player.pause()
|
|
|
|
|
},
|
|
|
|
|
closeIframe () {
|
|
|
|
|
this.iframeSrc = ""
|
|
|
|
|
this.videoSrc = ''
|
|
|
|
|
this.showMask = false
|
|
|
|
|
this.showMask1 = false
|
|
|
|
|
this.showMask2 = false
|
|
|
|
|
this.previewing = false
|
|
|
|
|
},
|
|
|
|
|
back () {
|
|
|
|
|
// 如果是预览则关闭预览
|
|
|
|
|
if (this.previewing) {
|
|
|
|
|
this.closeIframe()
|
|
|
|
|
} else {
|
|
|
|
|
this.$router.push(this.$store.state.lesson.referrer || 'list')
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.page-content {
|
|
|
|
|
max-height: calc(100vh - 420px);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.action-btn {
|
|
|
|
|
color: #062c87;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
border: #062c87 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 {
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.left {
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: calc(100vh - 375px);
|
|
|
|
|
padding: 0 15px 15px 0;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
border-right: 1px solid #eee;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chapters {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
background-color: #d5e7fb;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
width: 68%;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #333;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #062c87;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.del {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right {
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
|
|
.sections {
|
|
|
|
|
max-height: calc(100vh - 429px);
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
cursor: move;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-left,
|
|
|
|
|
.section-right {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.serial {
|
|
|
|
|
margin: 0 8px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #858585;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #333;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.none {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #a3a3a3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.source-list {
|
|
|
|
|
display: flex;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
flex: 1;
|
|
|
|
|
line-height: 80px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #333;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background-color: #f6f8fa;
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: #062c87;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
