parent
7b495b35fd
commit
cae83ba5ee
21 changed files with 3831 additions and 20 deletions
|
After Width: | Height: | Size: 239 B |
@ -0,0 +1,282 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div class="flex-between"> |
||||
<el-page-header @back="goBack" :content="'新增文章'"></el-page-header> |
||||
</div> |
||||
</el-card> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<el-form label-width="90px" label-suffix=":" size="small"> |
||||
<el-form-item label="封面图"> |
||||
<el-upload |
||||
class="avatar-uploader" |
||||
accept=".jpg,.png,.jpeg" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:headers="headers" |
||||
name="file" |
||||
> |
||||
<img v-if="coverUrl" :src="coverUrl" class="avatar"> |
||||
<div class="uploader-default" v-else> |
||||
<i class="el-icon-plus"></i> |
||||
<p>上传封面</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item label="作者"> |
||||
<div class="d-inline-block"> |
||||
<el-input placeholder="请输入作者" v-model="author" clearable></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="日期"> |
||||
<div class="d-inline-block"> |
||||
<el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"></el-date-picker> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="文章标题"> |
||||
<el-input placeholder="请输入文章标题" v-model="title" clearable></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="文章内容"> |
||||
<quill :border="true" v-model="content" :uploading.sync="uploading" :height="400" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" v-throttle @click="saveData">确定</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import quill from "@/components/quill"; |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
|
||||
export default { |
||||
name: "addarticle", |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
columnId: this.$route.query.columnId, |
||||
sort: this.$route.query.sort, |
||||
id: "", |
||||
coverUrl: "", |
||||
uploadList: [], |
||||
uploadDataList: [], |
||||
author: "", |
||||
date: "", |
||||
title: "", |
||||
content: "", |
||||
submiting: false, |
||||
uploading: false |
||||
}; |
||||
}, |
||||
components: { |
||||
quill |
||||
}, |
||||
mounted() { |
||||
this.id = this.$route.query.id; |
||||
this.id && this.getData(); |
||||
}, |
||||
methods: { |
||||
// 返回 |
||||
goBack() { |
||||
this.$router.back(); |
||||
}, |
||||
getData() { |
||||
this.$get(`${this.api.getArticle}/${this.id}`) |
||||
.then(res => { |
||||
let data = res.article; |
||||
this.coverUrl = data.coverUrl; |
||||
this.author = data.author; |
||||
this.date = data.date; |
||||
this.title = data.title; |
||||
this.content = data.content; |
||||
}) |
||||
.catch(err => { |
||||
|
||||
}); |
||||
}, |
||||
saveData() { |
||||
if (this.submiting) return false; |
||||
if (!this.coverUrl) return util.warningMsg("请上传封面图"); |
||||
if (!this.author) return util.warningMsg("请填写作者"); |
||||
if (!this.date) return util.warningMsg("请选择日期"); |
||||
if (!this.title) return util.warningMsg("请填写文章标题"); |
||||
if (!this.content) return util.warningMsg("请填写文章内容"); |
||||
if (this.uploading) return util.warningMsg("图片正在上传中，请稍等"); |
||||
this.submiting = true; |
||||
|
||||
let data = { |
||||
id: this.id, |
||||
columnId: this.columnId, |
||||
author: this.author, |
||||
coverUrl: this.coverUrl, |
||||
date: this.date, |
||||
title: this.title, |
||||
content: this.content, |
||||
sort: this.sort |
||||
}; |
||||
if (this.id) { |
||||
this.$put(this.api.editArticle, data).then(res => { |
||||
this.submiting = false; |
||||
util.successMsg("修改成功"); |
||||
this.back(); |
||||
}) |
||||
.catch(err => { |
||||
this.submiting = false; |
||||
}); |
||||
} else { |
||||
this.$post(this.api.addArticle, data).then(res => { |
||||
this.submiting = false; |
||||
util.successMsg("创建成功"); |
||||
this.back(); |
||||
}) |
||||
.catch(err => { |
||||
this.submiting = false; |
||||
}); |
||||
} |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.currPage = val; |
||||
}, |
||||
handleExceed(files, fileList) { |
||||
util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`); |
||||
}, |
||||
uploadSuccess(res, file, fileList) { |
||||
if (this.coverUrl) { |
||||
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
this.coverUrl = res.data.filesResult.fileUrl; |
||||
}, |
||||
uploadError(err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}); |
||||
}, |
||||
beforeRemove(file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleRemove(file, fileList) { |
||||
let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", ""); |
||||
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||
this.coverUrl = ""; |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
uploadSure() { |
||||
this.BatchUpload = false; |
||||
this.pageNo = 1; |
||||
this.keyword = ""; |
||||
this.getData(); |
||||
}, |
||||
back() { |
||||
// this.$router.push(`/content?id=${this.columnId}`) |
||||
this.$router.back(); |
||||
}, |
||||
goback() { |
||||
this.$confirm("确定返回？未更新的信息将不会保存。", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.back(); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
}, |
||||
addSponsor() { |
||||
this.sponsorList.push(""); |
||||
}, |
||||
delSponsor(index) { |
||||
this.sponsorList.splice(index, 1); |
||||
}, |
||||
addOrganizer() { |
||||
this.organzinerList.push(""); |
||||
}, |
||||
delOrganizer(index) { |
||||
this.organzinerList.splice(index, 1); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$avatar-width: 104px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $avatar-width; |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
|
||||
&:hover { |
||||
border-color: #409EFF; |
||||
} |
||||
|
||||
.uploader-default { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
width: $avatar-width !important; |
||||
height: $avatar-width; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.04); |
||||
|
||||
i { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #8c939d; |
||||
} |
||||
|
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 1; |
||||
} |
||||
} |
||||
|
||||
.avatar { |
||||
width: $avatar-width; |
||||
height: $avatar-width; |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
|
||||
p { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 1; |
||||
|
||||
&:first-child { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .d-inline-block { |
||||
width: 216px; |
||||
|
||||
.el-select, .el-input { |
||||
width: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,394 @@ |
||||
<template> |
||||
<div> |
||||
<div class="page"> |
||||
<div class="btn-wrap"> |
||||
<template v-if="sorting"> |
||||
<el-button class="action-btn" type="primary" round @click="cancelSort">取消</el-button> |
||||
<el-button class="action-btn" type="primary" round @click="sortSubmit">保存</el-button> |
||||
</template> |
||||
<template v-if="!sorting"> |
||||
<el-button v-auth="'栏目管理:更改排序'" class="action-btn" type="primary" round @click="openSort">更改排序 |
||||
</el-button> |
||||
<el-button v-auth="'栏目管理:添加栏目'" class="action-btn" type="primary" round @click="addColumn">添加栏目 |
||||
</el-button> |
||||
</template> |
||||
</div> |
||||
<div class="page-content" style="padding-top: 24px; margin-top: 24px"> |
||||
<div class="el-table"> |
||||
<div class="list"> |
||||
<div class="thead"> |
||||
<span>栏目名称</span> |
||||
<span><em :class="{hide: sorting}" style="font-style: normal">操作</em></span> |
||||
</div> |
||||
</div> |
||||
<el-tree :data="listData" node-key="id" default-expand-all @node-drop="handleDrop" |
||||
:draggable="sorting" :allow-drop="allowDrop" :allow-drag="allowDrag"> |
||||
<span class="custom-tree-node" slot-scope="{ node, data }"> |
||||
<span class="name">{{ node.label }}</span> |
||||
<span class="action" v-show="!sorting"> |
||||
<el-button v-auth="'栏目管理:编辑'" type="text" @click.stop="editType(data)">编辑</el-button> |
||||
<el-divider v-auth="'栏目管理:编辑'" direction="vertical"></el-divider> |
||||
<template v-if="node.level < 6"> |
||||
<el-button v-auth="'栏目管理:新增'" type="text" @click.stop="addType(data)">新增</el-button> |
||||
<el-divider v-auth="'栏目管理:新增'" direction="vertical"></el-divider> |
||||
</template> |
||||
<el-button v-auth="'栏目管理:删除'" type="text" @click.stop="delData(data)">删除</el-button> |
||||
</span> |
||||
</span> |
||||
</el-tree> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-dialog :title="isAddColumn ? '添加栏目' : '编辑栏目'" :visible.sync="columnVisible" width="400px" |
||||
:close-on-click-modal="false" @close="closeColumn"> |
||||
<el-form> |
||||
<el-form-item> |
||||
<el-input placeholder="栏目名称" v-model="columnName"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="columnVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="columnSubmit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog :title="isAddType ? '添加分类' : '编辑分类'" :visible.sync="typeVisible" width="400px" |
||||
:close-on-click-modal="false" @close="closeType"> |
||||
<el-form> |
||||
<el-form-item> |
||||
<el-input placeholder="分类名称" v-model="typeName"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="typeVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="typeSubmit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from '@/setting' |
||||
export default { |
||||
name: "columnManage", |
||||
data() { |
||||
return { |
||||
activeName: "first", |
||||
tabs: { |
||||
first: "栏目管理" |
||||
}, |
||||
name: this.$store.state.name, |
||||
originalList: [], |
||||
listData: [], |
||||
multipleSelection: [], |
||||
pageNo: 1, |
||||
pageSize: 10, |
||||
totals: 0, |
||||
columnVisible: false, |
||||
columnName: "", |
||||
typeVisible: false, |
||||
typeName: "", |
||||
curRow: {}, |
||||
sortObj: null, |
||||
sorting: false, |
||||
curParentId: "", |
||||
isAddColumn: false, |
||||
isAddType: false, |
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label" |
||||
} |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getData(); |
||||
}, |
||||
beforeRouteLeave(to, from, next) { |
||||
if (JSON.stringify(this.originalList) !== JSON.stringify(this.listData)) { |
||||
this.$confirm("确定返回？排序尚未保存。", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
next(); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
} else { |
||||
next(); |
||||
} |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
let data = { |
||||
platformId: Setting.platformId, |
||||
page: this.pageNo, |
||||
size: this.pageSize |
||||
}; |
||||
this.$get(this.api.queryAllColumns, data).then(res => { |
||||
let columnTree = res.columnTree; |
||||
let total = columnTree.length; |
||||
let list = []; |
||||
columnTree.forEach((n, k) => { |
||||
list.push({ |
||||
id: n.id, |
||||
label: n.name, |
||||
level: n.level, |
||||
parentId: n.parentId, |
||||
sort: n.sort, |
||||
children: [] |
||||
}); |
||||
n.secondColumn.forEach((j, i) => { |
||||
list[k].children.push({ |
||||
id: j.id, |
||||
label: j.name, |
||||
level: j.level, |
||||
parentId: j.parentId, |
||||
sort: j.sort |
||||
}); |
||||
}); |
||||
total += n.secondColumn.length; |
||||
}); |
||||
this.listData = list; |
||||
this.originalList = JSON.parse(JSON.stringify(this.listData)); |
||||
this.totals = total; |
||||
if (!this.listData.length && this.totals) { |
||||
this.pageNo--; |
||||
this.getData(); |
||||
} |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
delData(row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$del(`${this.api.deleteColumn}/${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
}, |
||||
addColumn() { |
||||
this.isAddColumn = true; |
||||
this.columnVisible = true; |
||||
}, |
||||
sortSubmit() { |
||||
let list = JSON.parse(JSON.stringify(this.listData)); |
||||
list.forEach((n, k) => { |
||||
n.name = n.label; |
||||
n.parentId = 1; |
||||
n.level = 1; |
||||
n.sort = k + 1; |
||||
n.children && n.children.forEach((j, i) => { |
||||
j.name = j.label; |
||||
j.parentId = n.id; |
||||
j.level = 2; |
||||
j.sort = i + 1; |
||||
delete j.label; |
||||
j.secondColumn = []; |
||||
}); |
||||
delete n.label; |
||||
n.secondColumn = n.children; |
||||
n.children = null; |
||||
}); |
||||
let data = { columnTree: list }; |
||||
this.$post(this.api.columnReorder, data).then(res => { |
||||
util.successMsg("保存成功"); |
||||
this.sorting = false; |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
columnSubmit() { |
||||
if (!this.columnName) return util.warningMsg("请填写栏目名称"); |
||||
let data = { |
||||
level: 1, |
||||
parentId: 1, |
||||
name: this.columnName |
||||
}; |
||||
if (this.curRow.id) { |
||||
data.id = this.curRow.id; |
||||
this.$put(this.api.editColumn, data).then(res => { |
||||
util.warningMsg("修改成功"); |
||||
this.columnVisible = false; |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} else { |
||||
this.$post(this.api.addColumn, data).then(res => { |
||||
util.successMsg("添加成功"); |
||||
this.columnVisible = false; |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
}, |
||||
addType(row) { |
||||
this.isAddType = true; |
||||
this.curRow = row; |
||||
this.typeVisible = true; |
||||
}, |
||||
editType(row) { |
||||
this.curRow = row; |
||||
if (row.level == 1) { |
||||
this.isAddColumn = false; |
||||
this.columnVisible = true; |
||||
this.columnName = row.label; |
||||
} else { |
||||
this.isAddType = false; |
||||
this.typeVisible = true; |
||||
this.typeName = row.label; |
||||
} |
||||
}, |
||||
typeSubmit(row) { |
||||
if (!this.typeName) return util.warningMsg("请填写分类名称"); |
||||
let data = { |
||||
level: 2, |
||||
name: this.typeName |
||||
}; |
||||
if (this.curRow.level == 2) { |
||||
data.id = this.curRow.id; |
||||
data.parentId = this.curRow.parentId; |
||||
this.$put(this.api.editColumn, data).then(res => { |
||||
util.successMsg("修改成功"); |
||||
this.typeVisible = false; |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} else { |
||||
data.parentId = this.curRow.id; |
||||
this.$post(this.api.addColumn, data).then(res => { |
||||
util.successMsg("新增成功"); |
||||
this.typeVisible = false; |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
}, |
||||
cancelSort() { |
||||
this.sorting = false; |
||||
this.listData = JSON.parse(JSON.stringify(this.originalList)); |
||||
this.sortObj.destroy(); |
||||
}, |
||||
openSort() { |
||||
this.sorting = true; |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
onSearch() { |
||||
this.pageNo = 1; |
||||
this.getData(); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val; |
||||
this.getData(); |
||||
}, |
||||
closeColumn() { |
||||
this.columnName = ""; |
||||
this.curRow = {}; |
||||
}, |
||||
closeType() { |
||||
this.typeName = ""; |
||||
this.curRow = {}; |
||||
}, |
||||
handleDrop(draggingNode, dropNode, dropType, ev) { |
||||
// console.log('tree drop: ', dropNode, dropType); |
||||
}, |
||||
allowDrop(draggingNode, dropNode, type) { |
||||
if (dropNode.level == 2 && draggingNode.childNodes.length == 0) { |
||||
return type !== "inner"; |
||||
} else if ((draggingNode.childNodes.length > 0 && dropNode.level == 2) || (draggingNode.childNodes.length > 0 && type == "inner")) { |
||||
return false; |
||||
} else { |
||||
return true; |
||||
} |
||||
}, |
||||
allowDrag(draggingNode) { |
||||
return draggingNode.data.label.indexOf("三级 3-2-2") === -1; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.btn-wrap { |
||||
position: absolute; |
||||
top: 15px; |
||||
right: 15px; |
||||
} |
||||
|
||||
.list { |
||||
.thead { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
background: rgba(0, 0, 0, 0.04) !important; |
||||
|
||||
span { |
||||
padding: 0.75rem 0.625rem; |
||||
text-align: center; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
font-weight: normal; |
||||
box-sizing: border-box; |
||||
|
||||
&:first-child { |
||||
padding-left: 23.5vw; |
||||
@media(max-width: 1270px) { |
||||
padding-left: 25.5%; |
||||
} |
||||
} |
||||
|
||||
&:last-child { |
||||
width: 16%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .el-tree { |
||||
.el-tree-node__expand-icon { |
||||
margin-left: 22.5vw; |
||||
@media(max-width: 1270px) { |
||||
margin-left: 23.5%; |
||||
} |
||||
} |
||||
|
||||
.el-tree-node__content { |
||||
padding: 5px; |
||||
border-bottom: 0.0625rem solid #EBEEF5; |
||||
} |
||||
} |
||||
|
||||
.custom-tree-node { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 14px; |
||||
padding-right: 8px; |
||||
|
||||
.name { |
||||
line-height: 44px; |
||||
} |
||||
|
||||
.action { |
||||
width: 8.5vw; |
||||
text-align: left; |
||||
@media(max-width: 1270px) { |
||||
width: 16%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.hide { |
||||
opacity: 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,212 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<!-- <div class="tabs">--> |
||||
<!-- <a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == activeName}" @click="tabChange(index)">{{item}}</a>--> |
||||
<!-- </div>--> |
||||
<div class="btn-wrap"> |
||||
<el-button v-auth="'内容管理:保存排序'" class="action-btn" type="primary" @click="sortSubmit">保存排序</el-button> |
||||
<el-button v-auth="'内容管理:批量删除'" class="action-btn" type="primary" @click="delAllData">批量删除</el-button> |
||||
<el-button v-auth="'内容管理:新增文章'" class="action-btn" type="primary" @click="addArticle">新增文章</el-button> |
||||
</div> |
||||
<div class="page-content" style="padding-top: 24px"> |
||||
<el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (pageNo - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="title" label="标题" show-overflow-tooltip> |
||||
</el-table-column> |
||||
<el-table-column prop="name" label="排序值" width="80" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-input class="sort-input" width="120" min="1" v-model.number="scope.row.sort" type="number"></el-input> |
||||
<span>{{ scope.row.sort }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="date" label="添加日期" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ transferDate(scope.row.date) }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'内容管理:编辑'" type="text" @click="editArticle(scope)">编辑</el-button> |
||||
<el-divider v-auth="'内容管理:编辑'" direction="vertical"></el-divider> |
||||
<el-button v-auth="'内容管理:删除'" type="text" @click="delData(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="name" label="文章发布状态" width="120" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-switch |
||||
v-auth="'内容管理:禁用'" |
||||
class="off" |
||||
v-model="scope.row.status" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 5px" |
||||
:active-text="scope.row.status ? '关' : '开'" |
||||
@change="switchOff($event,scope.row,scope.$index)" |
||||
></el-switch> |
||||
<span>{{ scope.row.status ? "禁用" : "启用" }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
activeName: "first", |
||||
tabs: { |
||||
first: "栏目内容管理" |
||||
}, |
||||
listData: [], |
||||
multipleSelection: [], |
||||
pageNo: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
totals: 0 |
||||
}; |
||||
}, |
||||
props: { |
||||
columnId: "" |
||||
}, |
||||
watch: { |
||||
columnId() { |
||||
this.getData(); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
getData(id) { |
||||
let data = { |
||||
columnId: this.columnId |
||||
}; |
||||
this.$get(`${this.api.queryArticleByCondition}/${this.pageNo}/${this.pageSize}`, data).then(res => { |
||||
this.listData = res.articleList; |
||||
this.totals = res.total; |
||||
if (!this.listData.length && this.totals) { |
||||
this.pageNo--; |
||||
this.getData(); |
||||
} |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.pageNo = val; |
||||
this.$router.push(`list?page=${val}`) |
||||
this.getData(); |
||||
}, |
||||
addArticle() { |
||||
this.$router.push(`/information/addarticle?columnId=${this.columnId}&sort=${this.listData.length + 1}`); |
||||
}, |
||||
editArticle(scope) { |
||||
this.$router.push(`/information/addarticle?columnId=${this.columnId}&id=${scope.row.id}&sort=${scope.$index + 1}`); |
||||
}, |
||||
delData(row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$del(`${this.api.deleteArticles}?articleIds=${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
}, |
||||
transferDate(date) { |
||||
return date.replace(" 00:00:00", ""); |
||||
}, |
||||
delAllData() { |
||||
if (this.multipleSelection.length != "") { |
||||
let newArr = this.multipleSelection; |
||||
let delList = newArr.map(item => { |
||||
return item.id; |
||||
}); |
||||
|
||||
let title = newArr[0].title; |
||||
if (title.length > 14) { |
||||
title = title.substr(0, 14) + "……"; |
||||
} |
||||
this.$confirm(`此批量删除操作不可逆，是否确认删除${title}等${newArr.length}个选中项？`, "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$del(`${this.api.deleteArticles}?articleIds=${delList.join(",")}`).then(res => { |
||||
this.$refs.table.clearSelection(); |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
if(this.multipleSelection.length === this.listData.length && this.pageNo>1) { |
||||
this.handleCurrentChange(this.pageNo - 1) |
||||
} |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
} else { |
||||
util.errorMsg("请先选择数据 ！"); |
||||
} |
||||
}, |
||||
switchOff(val, row, index) { |
||||
this.$put(`${this.api.enableArticle}/${row.id}/${val}`) |
||||
.then(res => { |
||||
val == 1 ? util.errorMsg("该文章已隐藏，对学生端用户不可见") : util.successMsg("该文章已发布，对学生端用户可见"); |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
sortSubmit() { |
||||
if (this.listData.length) { |
||||
if (this.listData.find(n => n.sort < 1)) return util.errorMsg("排序值最小为1"); |
||||
let data = { articleList: this.listData }; |
||||
this.$post(this.api.articleSort, data).then(res => { |
||||
util.successMsg("保存成功"); |
||||
this.getContent(this.columnId); |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} else { |
||||
util.errorMsg("数据为空"); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.btn-wrap { |
||||
text-align: right; |
||||
} |
||||
|
||||
.sort-input { |
||||
/deep/ .el-input__inner { |
||||
padding: 0 0 0 10px; |
||||
} |
||||
} |
||||
|
||||
.sort-input + span { |
||||
display: none; |
||||
} |
||||
|
||||
.off + span { |
||||
display: none; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,102 @@ |
||||
<template> |
||||
<!-- 内容管理 --> |
||||
<div> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="3"> |
||||
<div class="menu-con"> |
||||
<el-menu |
||||
ref="columnMenu" |
||||
unique-opened |
||||
text-color="#303133" |
||||
:default-active="activeName" |
||||
@select="handleSelect" |
||||
> |
||||
<template v-for="item in menuList"> |
||||
<template v-if="item.secondColumn && item.secondColumn.length"> |
||||
<el-submenu :index="item.id"> |
||||
<template slot="title"> |
||||
<span>{{ item.name }}</span> |
||||
</template> |
||||
<el-menu-item v-for="item2 in item.secondColumn" :index="item2.id">{{ item2.name }}</el-menu-item> |
||||
</el-submenu> |
||||
</template> |
||||
<template v-else> |
||||
<el-menu-item :index="item.id">{{ item.name }}</el-menu-item> |
||||
</template> |
||||
</template> |
||||
</el-menu> |
||||
</div> |
||||
</el-col> |
||||
<el-col :span="21"> |
||||
<ContentList v-show="menuList.length" :columnId="columnId" /> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ContentList from "./contentList"; |
||||
export default { |
||||
name: "contentManage", |
||||
components: { |
||||
ContentList |
||||
}, |
||||
data() { |
||||
return { |
||||
menuList: [], |
||||
activeName: this.$store.state.columnId, |
||||
columnId: "" |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getMenuData(); |
||||
}, |
||||
methods: { |
||||
getMenuData() { |
||||
this.$get(this.api.queryAllColumns, { page: 1, size: 10000 }).then(res => { |
||||
this.menuList = res.columnTree; |
||||
if (this.menuList.length) { |
||||
if (this.menuList[0].secondColumn && this.menuList[0].secondColumn.length) { |
||||
this.columnId = this.menuList[0].secondColumn[0].id; |
||||
} else { |
||||
this.columnId = this.menuList[0].id; |
||||
} |
||||
if (!this.$store.state.info.columnId) { |
||||
this.$store.commit('setColumnId', this.columnId) |
||||
} else { |
||||
this.columnId = this.$store.state.info.columnId; |
||||
} |
||||
} |
||||
}).catch(err => { |
||||
}); |
||||
}, |
||||
handleSelect(key, keyPath) { |
||||
this.columnId = key; |
||||
this.$store.commit('setColumnId', key); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.menu-con { |
||||
// 改的 |
||||
height: calc(100vh - 250px); |
||||
border-right: solid 1px #e6e6e6; |
||||
background-color: #F2F6FC; |
||||
// overflow: hidden; |
||||
|
||||
.el-menu { |
||||
background-color: transparent; |
||||
|
||||
.el-submenu { |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.el-menu-item.is-active { |
||||
color: #ffffff; |
||||
background-color: #9278FF; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,59 @@ |
||||
<template> |
||||
<!-- 资讯管理 --> |
||||
<div class="page"> |
||||
<el-tabs v-model="tabsName" tab-position="left" @tab-click="handleClick"> |
||||
<el-tab-pane name="1" v-auth="'栏目管理'"> |
||||
<span slot="label"><i class="el-icon-collection-tag"></i> 栏目管理</span> |
||||
<columnManage v-if="tabsName === '1'" /> |
||||
</el-tab-pane> |
||||
<el-tab-pane name="2" v-auth="'内容管理'"> |
||||
<span slot="label"><i class="el-icon-document"></i> 内容管理</span> |
||||
<ContentManage v-if="tabsName === '2'" /> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ColumnManage from "../columnManage"; |
||||
import ContentManage from "../contentManage"; |
||||
export default { |
||||
components: { |
||||
ColumnManage, |
||||
ContentManage |
||||
}, |
||||
data() { |
||||
return { |
||||
tabsName: '1' |
||||
}; |
||||
}, |
||||
methods: { |
||||
handleClick(tab, event) { |
||||
// this.setTabsName(tab.name); |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.page .el-tabs--left { |
||||
// height: calc(100vh - 250px); |
||||
|
||||
/deep/ .el-tabs__item { |
||||
height: 60px; |
||||
line-height: 60px; |
||||
} |
||||
|
||||
/deep/ el-tabs__active-bar { |
||||
height: 60px; |
||||
transform: translateY(60px); |
||||
} |
||||
|
||||
.el-menu { |
||||
border-right: 0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,503 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div class="flex-between"> |
||||
<el-page-header @back="back" :content="form.id ? '编辑课程' : '新增课程'"></el-page-header> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<el-form :model="form" :rules="rules" ref="form" :disabled="isDetail" label-width="100px" label-suffix=":"> |
||||
<el-form-item prop="courseName" label="课程名称"> |
||||
<div class="d-inline-block"> |
||||
<el-input placeholder="请输入课程名称" v-model="form.courseName" clearable maxlength="25"></el-input> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="platformClassificationIds" label="课程分类"> |
||||
<div class="d-inline-block"> |
||||
<el-select v-model="form.platformClassificationIds" placeholder="请选择课程分类" multiple> |
||||
<el-option v-for="item in classificationList" :key="item.id" :label="item.classificationName" :value="item.id"></el-option> |
||||
</el-select> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="coverUrl" label="课程封面"> |
||||
<el-upload |
||||
class="avatar-uploader" |
||||
accept=".jpg,.png,.jpeg" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:headers="headers" |
||||
name="file" |
||||
> |
||||
<img v-if="form.coverUrl" :src="form.coverUrl" class="avatar"> |
||||
<div class="uploader-default" v-else> |
||||
<i class="el-icon-plus"></i> |
||||
<p>上传封面</p> |
||||
</div> |
||||
|
||||
<div slot="tip" class="el-upload__tip"> |
||||
<p>只能上传jpg/png文件</p> |
||||
<p>课程封面图将按2:1显示，最佳分辨率1400*700</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item prop="courseType" label="课程类型"> |
||||
<div class="d-inline-block"> |
||||
<el-select v-model="form.courseType" placeholder="请选择课程类型"> |
||||
<el-option label="免费" :value="0"></el-option> |
||||
<el-option label="付费" :value="1"></el-option> |
||||
</el-select> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="可见范围"> |
||||
<div> |
||||
<el-radio v-model="form.visibleRange" :label="1">全平台</el-radio> |
||||
</div> |
||||
<div> |
||||
<el-radio v-model="form.visibleRange" :label="2">指定区域、院校</el-radio> |
||||
<el-button v-if="form.visibleRange === 2" type="primary" size="mini" @click="showRange">选择院校</el-button> |
||||
<span style="margin-left: 20px">{{ rangeName }}</span> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="课程介绍"> |
||||
<quill :border="true" :readonly="isDetail" v-model="form.courseIntroduction" :height="400" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="save" v-show="!isDetail">{{ form.id ? "更新" : "创建" }}</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
|
||||
<el-dialog title="请勾选院校" :visible.sync="rangeVisible" width="580px" custom-class="range-dia" :close-on-click-modal="false"> |
||||
<div class="range-wrap"> |
||||
<el-cascader |
||||
ref="range" |
||||
class="range-cas" |
||||
key="range" |
||||
v-model="range" |
||||
:props="props" |
||||
:show-all-levels="false" |
||||
clearable |
||||
filterable |
||||
:before-filter="beforeFilter" |
||||
:options="rangeList" |
||||
@change="rangeChange" |
||||
@visible-change="rangeViChange" |
||||
@input.native="rangeSearch"></el-cascader> |
||||
<el-tag |
||||
v-for="(tag, i) in rangeChecked" |
||||
:key="tag.value" |
||||
class="range-check" |
||||
closable |
||||
:disable-transitions="false" |
||||
@close="val => closeRange(i)"> |
||||
{{tag.label}} |
||||
</el-tag> |
||||
</div> |
||||
|
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button size="small" @click="rangeVisible = false">取 消</el-button> |
||||
<el-button size="small" type="primary" @click="rangeSubmit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
import quill from "@/components/quill"; |
||||
|
||||
export default { |
||||
name: "courseAddEdit", |
||||
data() { |
||||
const that = this |
||||
return { |
||||
headers: { |
||||
token: sessionStorage.getItem("token") |
||||
}, |
||||
isDetail: Boolean(this.$route.query.show), |
||||
form: { |
||||
id: this.$route.query.id, |
||||
courseIntroduction: '', |
||||
courseName: '', |
||||
courseType: 0, |
||||
coverUrl: '', |
||||
platformSource: Setting.platformSource, |
||||
platformClassificationIds: [], |
||||
schoolClassificationsIds: [], |
||||
visibleRange: 1 |
||||
}, |
||||
rules: { |
||||
courseName: [ |
||||
{ required: true, message: '请输入课程名称', trigger: 'blur' } |
||||
], |
||||
platformClassificationIds: [ |
||||
{ required: true, message: '请选择课程分类', trigger: 'change' } |
||||
], |
||||
coverUrl: [ |
||||
{ required: true, message: '请选择课程封面', trigger: 'change' } |
||||
] |
||||
}, |
||||
classificationList: [], |
||||
uploadList: [], |
||||
submiting: false, |
||||
updateTime: 0, |
||||
|
||||
rangeVisible: false, |
||||
range: [], |
||||
rangeInit: [], |
||||
rangeName: '', |
||||
rangeChecked: [], |
||||
schools: [], |
||||
rangeList: [], |
||||
rangeTimer: null, |
||||
// 选择区域懒加载 |
||||
props: { |
||||
multiple: true, |
||||
checkStrictly: true, |
||||
lazy: true, |
||||
lazyLoad (node, resolve) { |
||||
// 如果是在模糊搜索中，则不再用懒加载请求数据 |
||||
const input = document.querySelector('.el-cascader__search-input') |
||||
const checked = that.rangeChecked |
||||
|
||||
if (input && input.value.trim()) { |
||||
const val = input.value.trim() |
||||
return that.schools.filter(e => e.label.includes(val)) |
||||
} |
||||
|
||||
const { level, value } = node |
||||
// 省份 |
||||
if (!level) { |
||||
that.$get(that.api.queryProvince).then(({ list }) => { |
||||
const data = [] |
||||
list.map(e => { |
||||
e.value = e.provinceId |
||||
e.label = e.provinceName |
||||
e.children = [] |
||||
e.disabled = !!checked.find(n => n.provinceId == e.provinceId && !n.cityId) |
||||
data.push(e) |
||||
}) |
||||
resolve(data) |
||||
}).catch(res => {}) |
||||
} else if (level === 1) { |
||||
// 城市 |
||||
that.$get(that.api.queryCity, { |
||||
provinceId: value |
||||
}).then(({ list }) => { |
||||
const data = [] |
||||
list.map(e => { |
||||
e.value = e.cityId |
||||
e.label = e.cityName |
||||
e.children = [] |
||||
e.disabled = !!checked.find(n => n.cityId == e.cityId && n.provinceId == e.provinceId && !n.schoolId) |
||||
data.push(e) |
||||
}) |
||||
resolve(data) |
||||
}).catch(res => {}) |
||||
} else if (level === 2) { |
||||
// 学校 |
||||
that.$get(that.api.getSchoolsByProvince, { |
||||
provinceId: node.data.provinceId, |
||||
cityId: value, |
||||
schoolName: '' |
||||
}).then(({ list }) => { |
||||
const data = [] |
||||
list.map(e => { |
||||
e.value = e.schoolId |
||||
e.label = e.schoolName |
||||
e.leaf = true |
||||
e.disabled = !!checked.find(n => n.schoolId == e.schoolId && n.cityId == e.cityId && n.provinceId == e.provinceId) |
||||
data.push(e) |
||||
}) |
||||
resolve(data) |
||||
}).catch(res => {}) |
||||
} else { |
||||
resolve([]) |
||||
} |
||||
} |
||||
}, |
||||
}; |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler(val){ |
||||
this.updateTime++ |
||||
}, |
||||
deep:true |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getClassification(); |
||||
this.form.id && this.getData(); |
||||
this.getSchool() |
||||
}, |
||||
components: { |
||||
quill |
||||
}, |
||||
methods: { |
||||
getClassification() { |
||||
this.$post(this.api.listClassification, { |
||||
pageNum: 1, |
||||
pageSize: 1000, |
||||
platformSource: Setting.platformSource |
||||
}).then(({ page }) => { |
||||
this.classificationList = page.records |
||||
}).catch(res => {}) |
||||
}, |
||||
getData() { |
||||
this.$post(`${this.api.findTheoreticalCourse}?id=${this.form.id}`).then(({ data }) => { |
||||
this.form = data |
||||
this.uploadList.push({ |
||||
name: "cover.jpg", |
||||
url: data.coverUrl |
||||
}) |
||||
}).catch(err => {}) |
||||
}, |
||||
// 选择范围 |
||||
showRange() { |
||||
this.rangeVisible = true |
||||
}, |
||||
// 范围勾选回调 |
||||
rangeChange(val, e) { |
||||
const checked = this.$refs.range.getCheckedNodes() |
||||
const name = [] |
||||
const { rangeChecked } = this |
||||
checked.map(e => { |
||||
rangeChecked.find(n => n.value === e.value && n.label == e.label) || name.push(e.data) // 未勾选的，则push |
||||
}) |
||||
this.rangeChecked.push(...name) |
||||
}, |
||||
// 范围展开收缩回调 |
||||
rangeViChange(e) { |
||||
// 展开的时候清空搜索结果 |
||||
if (e) { |
||||
this.rangeList = [] |
||||
} |
||||
}, |
||||
// 获取学校列表 |
||||
getSchool() { |
||||
this.$get(this.api.querySchoolData).then(({ list }) => { |
||||
const result = [] |
||||
list.map(e => { |
||||
e.value = e.schoolId |
||||
e.label = e.schoolName |
||||
e.leaf = true |
||||
result.push(e) |
||||
}) |
||||
this.schools = result |
||||
}).catch(res => {}) |
||||
}, |
||||
// 范围模糊查询前置钩子 |
||||
beforeFilter() { |
||||
return false |
||||
}, |
||||
// 范围筛选 |
||||
rangeSearch(el) { |
||||
const val = el.target.value.trim() |
||||
const checked = this.rangeChecked |
||||
if (!val) { |
||||
this.rangeList = [] |
||||
return false |
||||
} |
||||
clearTimeout(this.rangeTimer) |
||||
this.rangeTimer = setTimeout(() => { |
||||
let result = this.schools.filter(e => { |
||||
if (e.label.includes(val)) { |
||||
e.disabled = !!checked.find(n => n.schoolId == e.schoolId) |
||||
return e |
||||
} |
||||
}) // 用学校列表做比对 |
||||
this.rangeList = result |
||||
}, 100) |
||||
}, |
||||
closeRange(i) { |
||||
this.rangeChecked.splice(i, 1) |
||||
}, |
||||
// 范围确定 |
||||
rangeSubmit() { |
||||
// 处理提交需要的id |
||||
const data = [] |
||||
const checked = this.rangeChecked |
||||
checked.map(e => { |
||||
data.push({ |
||||
provinceId: e.provinceId || '', |
||||
cityId: e.cityId || '', |
||||
schoolId: e.schoolId || '', |
||||
type: e.schoolId ? 0 : 1 |
||||
}) |
||||
}) |
||||
this.form.courseRangeList = data |
||||
|
||||
// 处理显示的name |
||||
const name = [] |
||||
checked.map(e => { |
||||
name.push(e.label) |
||||
}) |
||||
this.rangeName = name.join('、') |
||||
|
||||
this.rangeVisible = false |
||||
}, |
||||
handleExceed(files, fileList) { // 上传文件 |
||||
util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！"); |
||||
}, |
||||
uploadSuccess(res, file, fileList) { |
||||
this.form.coverUrl = res.data.filesResult.fileUrl |
||||
}, |
||||
uploadError(err, file, fileList) { |
||||
this.$message({ |
||||
message: "上传出错，请重试！", |
||||
type: "error", |
||||
center: true |
||||
}); |
||||
}, |
||||
beforeRemove(file, fileList) { |
||||
return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
handleRemove(file, fileList) { |
||||
let fileName = this.form.coverUrl.replace('https://huoran.oss-cn-shenzhen.aliyuncs.com/', ""); |
||||
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||
this.form.coverUrl = '' |
||||
}).catch(res => {}); |
||||
}, |
||||
save() { |
||||
this.$refs.form.validate((valid) => { |
||||
if (valid) { |
||||
if (this.submiting) return false |
||||
const { form } = this |
||||
this.submiting = true |
||||
if (form.id) { |
||||
this.$post(this.api.updateTheoreticalCourse, form).then(res => { |
||||
this.submiting = false; |
||||
util.successMsg("修改成功"); |
||||
this.$router.back(); |
||||
}).catch(err => { |
||||
this.submiting = false; |
||||
}); |
||||
} else { |
||||
this.$post(this.api.saveTheoreticalCourse, form).then(res => { |
||||
this.submiting = false; |
||||
this.$confirm("课程创建成功，是否马上进行课程内容设置？", "提示", { |
||||
type: "success", |
||||
confirmButtonText: "马上设置", |
||||
cancelButtonText: "稍后操作" |
||||
}).then(() => { |
||||
this.$router.push(`/setTheoreticalCourse?id=${res.id}`); |
||||
}).catch(() => { |
||||
this.$router.back(); |
||||
}); |
||||
}).catch(err => { |
||||
this.submiting = false; |
||||
}); |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
// 返回上一页 |
||||
backPage() { |
||||
this.$router.back() |
||||
}, |
||||
back() { |
||||
const { id } = this.form |
||||
const updateTime = this.updateTime |
||||
// 更改了信息才需要提示 |
||||
if ((id && updateTime > 2) || (!id && updateTime)) { |
||||
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.save() |
||||
}).catch(() => { |
||||
this.backPage() |
||||
}) |
||||
} else { |
||||
this.backPage() |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$avatar-width: 104px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $avatar-width; |
||||
border: 1px dashed #d9d9d9; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
|
||||
&:hover { |
||||
border-color: #409EFF; |
||||
} |
||||
|
||||
.uploader-default { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
width: $avatar-width !important; |
||||
height: $avatar-width; |
||||
text-align: center; |
||||
background: rgba(0, 0, 0, 0.04); |
||||
|
||||
i { |
||||
font-size: 20px; |
||||
font-weight: bold; |
||||
color: #8c939d; |
||||
} |
||||
|
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 1; |
||||
} |
||||
} |
||||
|
||||
.avatar { |
||||
width: $avatar-width; |
||||
height: $avatar-width; |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
|
||||
p { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
line-height: 1; |
||||
|
||||
&:first-child { |
||||
margin-bottom: 5px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/deep/ .d-inline-block { |
||||
width: 216px; |
||||
|
||||
.el-select, .el-input { |
||||
width: 100%; |
||||
} |
||||
} |
||||
.range-check { |
||||
display: inline-block; |
||||
margin: 0 0 10px 10px; |
||||
} |
||||
/deep/.range-cas { |
||||
.el-tag { |
||||
display: none; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,888 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div class="flex-between"> |
||||
<el-page-header @back="goBack" :content="sorting? '更改排序' : '内容设置'"></el-page-header> |
||||
</div> |
||||
</el-card> |
||||
<!--内容设置--> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div class="page"> |
||||
<div class="relative"> |
||||
<div class="p-title">内容设置</div> |
||||
<div class="btns" style="top: -10px"> |
||||
<template v-if="!sorting"> |
||||
<el-button v-auth="'/course/list:课程管理:内容设置:添加章节'" type="primary" round v-throttle @click="addChapter">添加章节</el-button> |
||||
<el-button v-auth="'/course/list:课程管理:内容设置:编辑顺序'" type="primary" round v-throttle @click="sort">编辑顺序</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<el-button type="primary" round @click="move">批量移动</el-button> |
||||
<el-button type="primary" round v-throttle @click="cancelSort">取消</el-button> |
||||
<el-button type="primary" round v-throttle @click="saveSort">保存</el-button> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
<el-divider></el-divider> |
||||
<div class="page-content"> |
||||
<div class="m-b-20" v-for="(chapter,index) in chapters" :key="chapter.id"> |
||||
<div class="flex j-between a-center m-b-10"> |
||||
<div>{{ chapter.name }}</div> |
||||
<div> |
||||
<template v-if="!sorting"> |
||||
<el-button v-auth="'/course/list:课程管理:内容设置:修改章节名称'" class="action-btn" type="primary" round v-throttle @click="editChapter(chapter)">修改章节名称</el-button> |
||||
<el-button v-auth="'/course/list:课程管理:内容设置:添加小节'" class="action-btn" type="primary" round v-throttle @click="addSection(chapter.id)">添加小节</el-button> |
||||
<el-button v-auth="'/course/list:课程管理:内容设置:章节删除'" class="action-btn" type="primary" round v-throttle @click="delChapter(chapter.id)">删除</el-button> |
||||
</template> |
||||
<template v-else> |
||||
<i class="el-icon-top sort-icon" :class="{disabled: index == 0}" style="margin-right: 5px" @click="sortChapter(chapter,'up',index == 0,index)"></i> |
||||
<i class="el-icon-bottom sort-icon" :class="{disabled: index == chapters.length-1}" @click="sortChapter(chapter,'down',index == chapter.length-1,index)"></i> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="chapter.subsectionList" class="table" stripe header-align="center"> |
||||
<el-table-column v-if="sorting" width="55" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-checkbox v-model="scope.row.check"></el-checkbox> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="name" label="资源名称"> |
||||
</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 v-auth="'/course/list:课程管理:内容设置:查看'" type="text" @click="preview(scope.row)">查看</el-button> |
||||
<el-button v-auth="'/course/list:课程管理:内容设置:小节删除'" type="text" @click="delSection(scope.row)">删除</el-button> |
||||
<el-button v-auth="'/course/list:课程管理:内容设置:修改小节名称'" type="text" @click="editSectionName(scope.row,chapter.id)">修改小节名称</el-button> |
||||
<el-button v-auth="'/course/list:课程管理:内容设置:更换文件'" 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> |
||||
|
||||
<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"> |
||||
<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="28%" @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"> |
||||
<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="28%" :close-on-click-modal="false" @close="closeSwitch"> |
||||
<div style="text-align: center"> |
||||
<el-upload |
||||
:before-upload="beforeUpload" |
||||
:on-remove="handleRemove" |
||||
:on-error="uploadError" |
||||
:on-success="uploadSuccess" |
||||
:before-remove="beforeRemove" |
||||
:limit="1" |
||||
:on-exceed="handleExceed" |
||||
:action="this.api.fileupload" |
||||
:file-list="uploadList" |
||||
:headers="headers" |
||||
name="file" |
||||
> |
||||
<el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button> |
||||
</el-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="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"> |
||||
<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> |
||||
|
||||
<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 util from "@/libs/util"; |
||||
import Setting from "@/setting"; |
||||
import { Loading } from "element-ui"; |
||||
import pdf from "@/components/pdf"; |
||||
|
||||
export default { |
||||
name: "contentSettings", |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: util.local.get(Setting.tokenKey) |
||||
}, |
||||
id: "", |
||||
originChapters: [], |
||||
chapters: [], |
||||
sorting: false, |
||||
uploading: false, |
||||
uploadList: [], |
||||
chapterVisible: false, |
||||
chapterId: "", |
||||
chapterName: "", |
||||
sectionVisible: false, |
||||
sectionName: "", |
||||
sectionId: "", |
||||
switchVisible: false, |
||||
sectionNameVisible: false, |
||||
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, |
||||
moveVisible: false, |
||||
checkList: [], |
||||
sortList: [ |
||||
{ |
||||
id: 'bottom', |
||||
name: '置末' |
||||
}, |
||||
{ |
||||
id: 'top', |
||||
name: '置顶' |
||||
} |
||||
], |
||||
moveForm: { |
||||
id: '', |
||||
sort: 'bottom' |
||||
}, |
||||
moved: false // 是否移动过 |
||||
}; |
||||
}, |
||||
components: { pdf }, |
||||
mounted() { |
||||
this.insertScript(); |
||||
this.id = this.$route.query.id; |
||||
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 => { |
||||
|
||||
}); |
||||
}, |
||||
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) { |
||||
util.errorMsg("请上传10M以内的文件"); |
||||
return false; |
||||
} |
||||
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); |
||||
}, |
||||
handleExceed(files, fileList) { |
||||
util.warningMsg( |
||||
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||
); |
||||
}, |
||||
uploadSuccess(res, file, fileList) { |
||||
this.uploading = false; |
||||
this.fileId = res.data.filesResult.fileId; |
||||
this.fileType = res.data.filesResult.fileType; |
||||
this.fileUrl = res.data.filesResult.fileUrl; |
||||
this.fileName = res.data.filesResult.ossFileName; |
||||
}, |
||||
uploadError(err, file, fileList) { |
||||
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(); |
||||
}, |
||||
goback() { |
||||
this.$router.push("course"); |
||||
}, |
||||
transferType(ext) { |
||||
const suf = ext.toLowerCase() |
||||
if ("jpg,jpeg,png,gif,svg,psd".includes(suf)) return "图片"; |
||||
if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(suf)) return "视频"; |
||||
return suf; |
||||
}, |
||||
addChapter() { |
||||
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 => { |
||||
util.successMsg("删除成功"); |
||||
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 util.warningMsg("请填写章节名称"); |
||||
let data = { |
||||
courseId: this.id, |
||||
name: this.chapterName |
||||
}; |
||||
if (this.chapterId) { |
||||
data.id = this.chapterId; |
||||
this.$put(this.api.editChapter, data).then(res => { |
||||
util.successMsg("修改成功"); |
||||
this.chapterVisible = false; |
||||
this.getData(); |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} else { |
||||
this.$post(this.api.addChapter, data).then(res => { |
||||
util.successMsg("添加成功"); |
||||
this.chapterVisible = false; |
||||
this.getData(); |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
}, |
||||
sectionSubmit() { |
||||
if (!this.sectionName) return util.warningMsg("请填写小节名称"); |
||||
if (this.uploading) return util.warningMsg("资源正在上传中，请稍候"); |
||||
if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源"); |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.sectionName, |
||||
fileId: this.fileId, |
||||
fileUrl: this.fileUrl, |
||||
fileName: this.fileName, |
||||
fileType: this.fileType, |
||||
originalFileName: this.originalFileName |
||||
}; |
||||
this.$post(this.api.addSubsection, data).then(res => { |
||||
util.successMsg("添加成功"); |
||||
this.sectionVisible = false; |
||||
this.getData(); |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
closeSwitch() { |
||||
this.fileId = ""; |
||||
this.fileName = ""; |
||||
this.fileType = ""; |
||||
this.fileUrl = ""; |
||||
this.sectionId = ""; |
||||
}, |
||||
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.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.sectionName = row.sectionName; |
||||
|
||||
this.switchVisible = true; |
||||
}, |
||||
switchSubmitFile() { |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.sectionName, |
||||
fileId: this.fileId, |
||||
fileName: this.fileName, |
||||
fileType: this.fileType, |
||||
fileUrl: this.fileUrl, |
||||
originalFileName: this.originalFileName |
||||
}; |
||||
this.$put(this.api.editSubsection, data).then(res => { |
||||
util.successMsg("更换成功"); |
||||
this.switchVisible = false; |
||||
this.getData(); |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
switchSubmit() { |
||||
if (this.uploading) return util.warningMsg("资源正在上传中，请稍候"); |
||||
if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源"); |
||||
if (this.transferType(this.curFile.fileType) == "视频") { |
||||
let data = { |
||||
videoIdList: [this.sectionId] |
||||
}; |
||||
this.$del(`${this.api.removeVideo}/${this.curFile.fileId}`).then(res => { |
||||
this.switchSubmitFile(); |
||||
}).catch(res => { |
||||
}); |
||||
} else { |
||||
this.$del(`${this.api.fileDeletion}?keys=${this.curFile.fileName}`).then(res => { |
||||
this.switchSubmitFile(); |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
}, |
||||
delSection(row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
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.sectionName) return util.warningMsg("请填写小节名称"); |
||||
let data = { |
||||
id: this.sectionId, |
||||
courseId: this.id, |
||||
chapterId: this.chapterId, |
||||
name: this.sectionName |
||||
}; |
||||
this.$put(this.api.editSubsection, data).then(res => { |
||||
util.successMsg("修改成功"); |
||||
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"> |
||||
.btns { |
||||
position: absolute; |
||||
top: 12px; |
||||
right: 24px; |
||||
|
||||
.el-button { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
/deep/.el-progress-bar { |
||||
padding-right: 70px; |
||||
margin-right: -70px; |
||||
} |
||||
.sort-icon { |
||||
font-size: 24px; |
||||
cursor: pointer; |
||||
|
||||
&.disabled { |
||||
color: #ccc; |
||||
cursor: not-allowed |
||||
} |
||||
} |
||||
|
||||
.el-image-viewer__wrapper { |
||||
transform: translateY(-10px); |
||||
transition: transform .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; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,269 @@ |
||||
<template> |
||||
<!-- 课程管理 --> |
||||
<div style="padding-top: 24px"> |
||||
<div class="tool"> |
||||
<ul class="filter" style="align-items: flex-start"> |
||||
<li> |
||||
<label>可见范围</label> |
||||
<el-select v-model="form.visibleRange" clearable placeholder="请选择可见范围" @change="getData"> |
||||
<el-option v-for="(item,index) in regions" :key="index" :label="item.name" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>课程分类：</label> |
||||
<el-select v-model="form.categoryId" clearable placeholder="请选择课程分类" @change="getData"> |
||||
<el-option label="不限" value=""></el-option> |
||||
<el-option v-for="(item,index) in classificationList" :key="index" :label="item.classificationName" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>课程类型：</label> |
||||
<el-select v-model="form.courseType" clearable placeholder="请选择课程类型" @change="getData"> |
||||
<el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>搜索：</label> |
||||
<el-input placeholder="请输入理论课程名称/创建人" suffix-icon="el-icon-search" v-model="keyword" clearable size="small"></el-input> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button v-auth="'课程管理:新增'" type="primary" round @click="addCourse">新增</el-button> |
||||
<el-button v-auth="'课程管理:批量删除'" type="primary" round @click="delAllData">批量删除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="100" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (page - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="courseName" label="课程名称"> |
||||
</el-table-column> |
||||
<el-table-column label="可见范围"> |
||||
<template slot-scope="scope"> |
||||
{{ regionName[scope.row.visibleRange] }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="createTime" label="创建时间"> |
||||
</el-table-column> |
||||
<el-table-column prop="courseClassification" label="课程类型"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.courseType == 1 ? '付费' : '免费' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="founder" label="创建人"> |
||||
</el-table-column> |
||||
<el-table-column prop="courseClassification" label="课程分类"> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="250"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'课程管理:编辑信息'" type="text" @click="editCourse(scope.row)">编辑信息</el-button> |
||||
<el-divider v-auth="'课程管理:编辑信息'" direction="vertical"></el-divider> |
||||
<el-button v-auth="'课程管理:内容设置'" type="text" @click="config(scope.row)">内容设置</el-button> |
||||
<el-divider v-auth="'课程管理:内容设置'" direction="vertical"></el-divider> |
||||
<el-button v-auth="'课程管理:预览'" type="text" @click="preview(scope.row)">预览</el-button> |
||||
<el-divider v-auth="'课程管理:预览'" direction="vertical"></el-divider> |
||||
<el-button v-auth="'课程管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="可授权状态" align="center" width="120"> |
||||
<template slot-scope="scope"> |
||||
<el-switch |
||||
v-auth="'课程管理:禁用'" |
||||
v-model="scope.row.isEnable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 5px" |
||||
:active-text="scope.row.isEnable ? '关' : '开'" |
||||
@change="switchOff($event,scope.row,scope.$index)" |
||||
></el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from '@/setting' |
||||
export default { |
||||
name: "courseManagement", |
||||
data() { |
||||
return { |
||||
regionName: ['本校内', '全平台可见', '指定院校区域'], |
||||
regions: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '全平台' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '指定院校' |
||||
} |
||||
], |
||||
types: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '付费' |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '免费' |
||||
} |
||||
], |
||||
form: { |
||||
visibleRange: '', |
||||
categoryId: '', |
||||
courseType: '' |
||||
}, |
||||
keyword: "", |
||||
classificationId: "", |
||||
list: [], |
||||
multipleSelection: [], |
||||
classificationList: [], |
||||
page: +this.$route.query.page || 1, // 当前页码 |
||||
pageSize: 10, |
||||
total: 0 |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getClassification(); |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(this.api.listTheoreticalCourse, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
keyWord: this.keyword, |
||||
createPlatform: 0, |
||||
platformSource: Setting.platformSource, |
||||
...this.form |
||||
}).then(({ page }) => { |
||||
this.list = page.records; |
||||
this.total = page.total; |
||||
if (!this.list.length && this.total) { |
||||
this.page--; |
||||
this.getData(); |
||||
} |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
initData() { |
||||
this.page = 1; |
||||
this.getData(); |
||||
}, |
||||
getClassification() { |
||||
this.$post(this.api.listClassification, { |
||||
pageNum: 1, |
||||
pageSize: 1000, |
||||
platformSource: Setting.platformSource |
||||
}).then(({ page }) => { |
||||
this.classificationList = page.records |
||||
}).catch(res => {}) |
||||
}, |
||||
changeType(type) { |
||||
this.classificationId = type; |
||||
this.initData(); |
||||
}, |
||||
preview(row) { |
||||
this.$router.push(`/previewTheoreticalCourse?id=${row.id}`); |
||||
}, |
||||
config(row) { |
||||
this.$router.push(`/setTheoreticalCourse?id=${row.id}`); |
||||
}, |
||||
addCourse() { |
||||
this.$router.push("/addTheoreticalCourse"); |
||||
}, |
||||
editCourse(row) { |
||||
this.$router.push(`/addTheoreticalCourse?id=${row.id}`); |
||||
}, |
||||
handleDelete(row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$post(`${this.api.delTheoreticalCourse}?ids=${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.initData(); |
||||
}).catch(res => { |
||||
}); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
delAllData() { |
||||
const list = this.multipleSelection |
||||
if (list.length != "") { |
||||
this.$confirm(`确定要删除吗？`, "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.delTheoreticalCourse}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection(); |
||||
util.successMsg("删除成功"); |
||||
this.initData(); |
||||
}).catch(res => { |
||||
}); |
||||
}).catch(() => { |
||||
}); |
||||
} else { |
||||
util.errorMsg("请先选择数据 ！"); |
||||
} |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
switchOff(val, row, index) { |
||||
this.$put(`${this.api.enableCourse}?courseId=${row.id}&isEnable=${val}`) |
||||
.then(res => { |
||||
this.getData(); |
||||
val == 1 ? util.warningMsg("该教学资源已隐藏，对学生端用户不可见") : util.successMsg("该教学资源已公开，对学生端用户可见"); |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/ .tool { |
||||
.filter { |
||||
.el-input { |
||||
min-width: 215px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,269 @@ |
||||
<template> |
||||
<!-- 课程管理 --> |
||||
<div style="padding-top: 24px"> |
||||
<div class="tool"> |
||||
<ul class="filter" style="align-items: flex-start"> |
||||
<li> |
||||
<label>可见范围</label> |
||||
<el-select v-model="form.visibleRange" clearable placeholder="请选择可见范围" @change="getData"> |
||||
<el-option v-for="(item,index) in regions" :key="index" :label="item.name" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>课程分类：</label> |
||||
<el-select v-model="form.categoryId" clearable placeholder="请选择课程分类" @change="getData"> |
||||
<el-option label="不限" value=""></el-option> |
||||
<el-option v-for="(item,index) in classificationList" :key="index" :label="item.classificationName" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>课程类型：</label> |
||||
<el-select v-model="form.courseType" clearable placeholder="请选择课程类型" @change="getData"> |
||||
<el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.id"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<label>搜索：</label> |
||||
<el-input placeholder="请输入理论课程名称/创建人" suffix-icon="el-icon-search" v-model="keyword" clearable size="small"></el-input> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button v-auth="'课程管理:新增'" type="primary" round @click="addCourse">新增</el-button> |
||||
<el-button v-auth="'课程管理:批量删除'" type="primary" round @click="delAllData">批量删除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="list" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="100" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (page - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="courseName" label="课程名称"> |
||||
</el-table-column> |
||||
<el-table-column label="可见范围"> |
||||
<template slot-scope="scope"> |
||||
{{ regionName[scope.row.visibleRange] }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="createTime" label="创建时间"> |
||||
</el-table-column> |
||||
<el-table-column prop="courseClassification" label="课程类型"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.courseType == 1 ? '付费' : '免费' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="founder" label="创建人"> |
||||
</el-table-column> |
||||
<el-table-column prop="courseClassification" label="课程分类"> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="250"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'课程管理:编辑信息'" type="text" @click="editCourse(scope.row)">编辑信息</el-button> |
||||
<el-divider v-auth="'课程管理:编辑信息'" direction="vertical"></el-divider> |
||||
<el-button v-auth="'课程管理:内容设置'" type="text" @click="config(scope.row)">内容设置</el-button> |
||||
<el-divider v-auth="'课程管理:内容设置'" direction="vertical"></el-divider> |
||||
<el-button v-auth="'课程管理:预览'" type="text" @click="preview(scope.row)">预览</el-button> |
||||
<el-divider v-auth="'课程管理:预览'" direction="vertical"></el-divider> |
||||
<el-button v-auth="'课程管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="可授权状态" align="center" width="120"> |
||||
<template slot-scope="scope"> |
||||
<el-switch |
||||
v-auth="'课程管理:禁用'" |
||||
v-model="scope.row.isEnable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 5px" |
||||
:active-text="scope.row.isEnable ? '关' : '开'" |
||||
@change="switchOff($event,scope.row,scope.$index)" |
||||
></el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from '@/setting' |
||||
export default { |
||||
name: "courseManagement", |
||||
data() { |
||||
return { |
||||
regionName: ['本校内', '全平台可见', '指定院校区域'], |
||||
regions: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '全平台' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '指定院校' |
||||
} |
||||
], |
||||
types: [ |
||||
{ |
||||
id: '', |
||||
name: '不限' |
||||
}, |
||||
{ |
||||
id: 1, |
||||
name: '付费' |
||||
}, |
||||
{ |
||||
id: 0, |
||||
name: '免费' |
||||
} |
||||
], |
||||
form: { |
||||
visibleRange: '', |
||||
categoryId: '', |
||||
courseType: '' |
||||
}, |
||||
keyword: "", |
||||
classificationId: "", |
||||
list: [], |
||||
multipleSelection: [], |
||||
classificationList: [], |
||||
page: +this.$route.query.page || 1, // 当前页码 |
||||
pageSize: 10, |
||||
total: 0 |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getClassification(); |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(this.api.listTheoreticalCourse, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
keyWord: this.keyword, |
||||
createPlatform: 1, |
||||
platformSource: Setting.platformSource, |
||||
...this.form |
||||
}).then(({ page }) => { |
||||
this.list = page.records; |
||||
this.total = page.total; |
||||
if (!this.list.length && this.total) { |
||||
this.page--; |
||||
this.getData(); |
||||
} |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
initData() { |
||||
this.page = 1; |
||||
this.getData(); |
||||
}, |
||||
getClassification() { |
||||
this.$post(this.api.listClassification, { |
||||
pageNum: 1, |
||||
pageSize: 1000, |
||||
platformSource: Setting.platformSource |
||||
}).then(({ page }) => { |
||||
this.classificationList = page.records |
||||
}).catch(res => {}) |
||||
}, |
||||
changeType(type) { |
||||
this.classificationId = type; |
||||
this.initData(); |
||||
}, |
||||
preview(row) { |
||||
this.$router.push(`/previewTheoreticalCourse?id=${row.id}`); |
||||
}, |
||||
config(row) { |
||||
this.$router.push(`/setTheoreticalCourse?id=${row.id}`); |
||||
}, |
||||
addCourse() { |
||||
this.$router.push("/addTheoreticalCourse"); |
||||
}, |
||||
editCourse(row) { |
||||
this.$router.push(`/addTheoreticalCourse?id=${row.id}`); |
||||
}, |
||||
handleDelete(row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$post(`${this.api.delTheoreticalCourse}?ids=${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.initData(); |
||||
}).catch(res => { |
||||
}); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
delAllData() { |
||||
const list = this.multipleSelection |
||||
if (list.length != "") { |
||||
this.$confirm(`确定要删除吗？`, "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.delTheoreticalCourse}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection(); |
||||
util.successMsg("删除成功"); |
||||
this.initData(); |
||||
}).catch(res => { |
||||
}); |
||||
}).catch(() => { |
||||
}); |
||||
} else { |
||||
util.errorMsg("请先选择数据 ！"); |
||||
} |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
switchOff(val, row, index) { |
||||
this.$put(`${this.api.enableCourse}?courseId=${row.id}&isEnable=${val}`) |
||||
.then(res => { |
||||
this.getData(); |
||||
val == 1 ? util.warningMsg("该教学资源已隐藏，对学生端用户不可见") : util.successMsg("该教学资源已公开，对学生端用户可见"); |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/ .tool { |
||||
.filter { |
||||
.el-input { |
||||
min-width: 215px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,68 @@ |
||||
<template> |
||||
<!-- 理论课程管理 --> |
||||
<div class="page"> |
||||
<div class="tabs"> |
||||
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a> |
||||
</div> |
||||
<div class="page-content"> |
||||
<!-- 平台自建 --> |
||||
<buildPlatform v-if="active == 'first'" /> |
||||
<!-- 院校创建 --> |
||||
<CourseManagement v-if="active == 'second'" /> |
||||
<!-- 分类管理 --> |
||||
<SortManagement v-if="active == 'third'" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from "@/setting"; |
||||
import { mapState } from "vuex"; |
||||
import buildPlatform from "./buildPlatform"; |
||||
import CourseManagement from "./courseManagement"; |
||||
import SortManagement from "./sortManagement"; |
||||
|
||||
export default { |
||||
name: "course", |
||||
components: { |
||||
buildPlatform, |
||||
CourseManagement, |
||||
SortManagement |
||||
}, |
||||
data() { |
||||
return { |
||||
active: "first", // 当前标签页 |
||||
tabs: { |
||||
first: "平台自建", |
||||
second: "院校创建", |
||||
third: "分类管理" |
||||
}, |
||||
showTabs: true |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapState("auth", [ |
||||
"btns" |
||||
]) |
||||
}, |
||||
mounted() { |
||||
Setting.dynamicRoute && this.initTabs(); |
||||
}, |
||||
methods: { |
||||
tabChange(index) { |
||||
this.active = index; |
||||
}, |
||||
initTabs() { |
||||
const { btns } = this |
||||
const tab1 = btns.includes('/course/list:课程管理') |
||||
const tab2 = btns.includes('/course/list:分类管理') |
||||
tab1 || delete this.tabs.first |
||||
tab2 || delete this.tabs.second |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,187 @@ |
||||
<template> |
||||
<!-- 分类管理 --> |
||||
<div> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
|
||||
</ul> |
||||
<div style="margin-top: 24px"> |
||||
<el-button v-auth="'分类管理:新增'" type="primary" round @click="addClass">新增</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||
<el-table-column type="index" width="100" label="序号" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.$index + (page - 1) * pageSize + 1 }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="classificationName" label="课程分类名称"> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="300"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'分类管理:修改'" type="text" @click="editClass(scope.row)">修改</el-button> |
||||
<el-divider v-auth="'分类管理:修改'" direction="vertical"></el-divider> |
||||
<el-button v-auth="'分类管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="page"> |
||||
</el-pagination> |
||||
</div> |
||||
|
||||
<el-dialog :title="!curRow.id ? '添加分类' : '编辑分类'" :visible.sync="classVisible" width="400px" :close-on-click-modal="false" @close="closeColumn"> |
||||
<el-form> |
||||
<el-form-item> |
||||
<el-input placeholder="分类名称" v-model="classificationName"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="classVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="classSubmit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import Setting from '@/setting' |
||||
export default { |
||||
name: "sortManagement", |
||||
data() { |
||||
return { |
||||
list: [], |
||||
multipleSelection: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
classVisible: false, |
||||
curRow: {}, |
||||
classificationName: "", |
||||
nameRepeat: false |
||||
}; |
||||
}, |
||||
watch: { |
||||
classificationName: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.nameChange(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(this.api.listClassification, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
platformSource: Setting.platformSource |
||||
}).then(({ page }) => { |
||||
this.list = page.records |
||||
this.total = page.total |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
handleDelete(row) { |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$post(`${this.api.delClassification}?id=${row.id}`).then(res => { |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
closeColumn() { |
||||
this.classificationName = ""; |
||||
this.curRow = {}; |
||||
}, |
||||
delAllData() { |
||||
if (this.multipleSelection.length != "") { |
||||
let newArr = this.multipleSelection; |
||||
let delList = newArr.map(item => { |
||||
return item.id; |
||||
}); |
||||
// 批量删除 |
||||
this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
let data = delList.join(); |
||||
this.$del(this.api.deleteClassification, data).then(res => { |
||||
this.multipleSelection = []; |
||||
util.successMsg("删除成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}).catch(() => { |
||||
}); |
||||
} else { |
||||
util.errorMsg("请先选择数据 ！"); |
||||
} |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
addClass() { |
||||
this.classVisible = true; |
||||
}, |
||||
editClass(row) { |
||||
this.curRow = row; |
||||
this.classificationName = row.classificationName; |
||||
this.classVisible = true; |
||||
}, |
||||
nameChange(val) { |
||||
const row = this.curRow |
||||
this.$post(this.api.checkRepeatClassification, { |
||||
id: row.id, |
||||
platformSource: Setting.platformSource, |
||||
classificationName: this.classificationName |
||||
}).then(res => { |
||||
this.nameRepeat = false |
||||
}).catch(res => { |
||||
this.nameRepeat = true |
||||
}) |
||||
}, |
||||
classSubmit() { |
||||
if (!this.classificationName) return util.errorMsg("请填写分类名称"); |
||||
if (this.nameRepeat) return util.errorMsg("当前分类已存在!"); |
||||
let data = { |
||||
classificationName: this.classificationName, |
||||
platformSource: Setting.platformSource |
||||
}; |
||||
if (this.curRow.id) { |
||||
data.id = this.curRow.id; |
||||
this.$post(this.api.updateClassification, data).then(res => { |
||||
util.successMsg("修改成功"); |
||||
this.classVisible = false; |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} else { |
||||
this.$post(this.api.saveClassification, data).then(res => { |
||||
util.successMsg("添加成功"); |
||||
this.classVisible = false; |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,500 @@ |
||||
<template> |
||||
<!-- 课程预览 --> |
||||
<div> |
||||
<el-card shadow="hover" class="m-b-20"> |
||||
<div class="flex-between"> |
||||
<el-page-header @back="goBack" :content="'课程预览'"></el-page-header> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover" class="m-b-20" style="background: none;"> |
||||
<div class="flex"> |
||||
<div class="cover" :class="{'is-word': showMask1}"> |
||||
<img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%"> |
||||
<template v-else-if="iframeSrc"> |
||||
<iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe> |
||||
<template v-if="showMask"> |
||||
<div class="mask" style="width: 500px;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-mask" style="height: 40px;"></div> |
||||
<div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
||||
</template> |
||||
<template v-if="showMask2"> |
||||
<div class="excel-mask1" style="height: 48px;"></div> |
||||
</template> |
||||
</template> |
||||
<div class="pdf inner" v-else-if="pdfSrc"> |
||||
<p class="arrow"> |
||||
<span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span> |
||||
{{ currentPage }} / {{ pageCount }} |
||||
<span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span> |
||||
</p> |
||||
<pdf |
||||
class="pdf-wrap" |
||||
:src="pdfSrc" |
||||
:page="currentPage" |
||||
@num-pages="pageCount=$event" |
||||
@page-loaded="currentPage=$event" |
||||
@loaded="loadPdfHandler"> |
||||
</pdf> |
||||
</div> |
||||
<div class="inner" v-else-if="playAuth"> |
||||
<div class="video_wid" id="player"></div> |
||||
</div> |
||||
</div> |
||||
<div class="catalog flex-1"> |
||||
<div class="list"> |
||||
<h4 class="title">{{ courseName }}</h4> |
||||
<div class="desc-wrap"> |
||||
<div class="desc" :class="{active: desShrink}" v-html="description"></div> |
||||
<i class="arrow" :class="{active: desShrink}" v-if="description.length > 40"> |
||||
<span>...</span> |
||||
<img src="@/assets/img/arrow-down.png" alt="" @click="desShrink = !desShrink"> |
||||
</i> |
||||
</div> |
||||
<div class="chapters"> |
||||
<template v-if="videoList.length"> |
||||
<div class="chapter" v-for="(item,index) in videoList" :key="index"> |
||||
<div class="chapterName">{{ item.name }}</div> |
||||
<div class="section" v-if="item.subsectionList.length"> |
||||
<div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)"> |
||||
<p class="sectionName" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import { mapState } from "vuex"; |
||||
import pdf from "vue-pdf"; |
||||
import "quill/dist/quill.core.css"; |
||||
import "quill/dist/quill.snow.css"; |
||||
import "quill/dist/quill.bubble.css"; |
||||
|
||||
export default { |
||||
name: "coursePreview", |
||||
data() { |
||||
return { |
||||
id: this.$route.query.id, |
||||
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
||||
videoSrc: "", |
||||
videoList: [], |
||||
courseName: "", |
||||
description: "", |
||||
coverUrl: "", |
||||
playAuth: "", |
||||
player: null, |
||||
previewImg: "", |
||||
iframeSrc: "", |
||||
isWord: false, |
||||
isPPT: false, |
||||
isExcel: false, |
||||
showMask: false, |
||||
showMask1: false, |
||||
showMask2: false, |
||||
closePosi: { |
||||
top: "80px" |
||||
}, |
||||
pdfVisible: false, |
||||
pdfSrc: "", |
||||
currentPage: 0, // pdf文件页码 |
||||
pageCount: 0, // pdf文件总页数 |
||||
fileType: "pdf", // 文件类型 |
||||
desShrink: false, |
||||
curLink: "", // 当前选中 |
||||
}; |
||||
}, |
||||
components: { pdf }, |
||||
mounted() { |
||||
this.insertScript(); |
||||
this.getData(); |
||||
this.getChapter(); |
||||
}, |
||||
methods: { |
||||
goBack() { |
||||
this.$router.back(); |
||||
}, |
||||
async getData() { |
||||
let res = await this.$get(`${this.api.getCourse}/${this.id}`); |
||||
this.courseName = res.course.name; |
||||
this.description = res.course.description; |
||||
this.coverUrl = res.course.coverUrl; |
||||
}, |
||||
async getChapter() { |
||||
let res = await this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`); |
||||
this.videoList = res.chapterList; |
||||
}, |
||||
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); |
||||
}, |
||||
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; |
||||
}, |
||||
preview(row, chapterName) { |
||||
this.curLink = `${chapterName}${row.name}`; |
||||
this.player = null; |
||||
this.playauth = ""; |
||||
this.coverUrl = ""; |
||||
this.pdfSrc = ""; |
||||
this.iframeSrc = ""; |
||||
if (this.transferType(row.fileType) == "视频") { |
||||
this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => { |
||||
this.playAuth = res.data.playAuth; |
||||
this.$nextTick(() => { |
||||
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.coverUrl = row.fileUrl; |
||||
} else if (row.fileType == "pdf") { |
||||
this.pdfSrc = row.fileUrl; |
||||
this.pdfVisible = true; |
||||
} else { |
||||
this.$get(`${this.api.getSubsection}/${row.id}`).then(res => { |
||||
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; |
||||
} |
||||
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.iframeSrc = res.previewUrl; |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
} |
||||
}, |
||||
closePlayer() { |
||||
this.playAuth = ""; |
||||
this.player.pause(); |
||||
}, |
||||
closeIframe() { |
||||
this.iframeSrc = ""; |
||||
this.showMask = false; |
||||
this.showMask1 = false; |
||||
}, |
||||
closePdf() { |
||||
this.pdfSrc = ""; |
||||
this.currentPage = 1; |
||||
}, |
||||
changePdfPage(val) { |
||||
if (val === 0 && this.currentPage > 1) { |
||||
this.currentPage--; |
||||
} |
||||
if (val === 1 && this.currentPage < this.pageCount) { |
||||
this.currentPage++; |
||||
} |
||||
}, |
||||
loadPdfHandler(e) { |
||||
this.currentPage = 1; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$height: 700px; |
||||
.video_wid, .cover { |
||||
position: relative; |
||||
width: 76%; |
||||
max-width: 1400px; |
||||
height: $height !important; |
||||
border: 0; |
||||
} |
||||
|
||||
.cover { |
||||
img { |
||||
border-radius: 8px; |
||||
} |
||||
|
||||
&.is-word { |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
|
||||
.fileIframe { |
||||
height: $height !important; |
||||
} |
||||
|
||||
.video_wid, .inner { |
||||
width: 100%; |
||||
height: 100% !important; |
||||
border: 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.cover.is-word { |
||||
.inner { |
||||
height: calc(100% + 38px) !important; |
||||
margin-top: -38px; |
||||
} |
||||
} |
||||
|
||||
.video_wid:focus { |
||||
outline: none; |
||||
} |
||||
|
||||
.catalog { |
||||
margin-left: 40px; |
||||
} |
||||
|
||||
.list { |
||||
height: $height; |
||||
overflow-y: auto; |
||||
padding: 24px 16px; |
||||
background: #fff; |
||||
|
||||
.title { |
||||
margin-bottom: 8px; |
||||
color: rgba(0, 0, 0, 0.85); |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.desc-wrap { |
||||
position: relative; |
||||
|
||||
.desc { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
line-height: 22px; |
||||
|
||||
&.active { |
||||
display: block; |
||||
overflow: visible; |
||||
} |
||||
} |
||||
|
||||
.arrow { |
||||
position: absolute; |
||||
bottom: 2px; |
||||
right: 0; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
width: 46px; |
||||
background-color: #fff; |
||||
|
||||
span { |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
} |
||||
|
||||
img { |
||||
width: 16px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
&.active { |
||||
span { |
||||
opacity: 0; |
||||
} |
||||
|
||||
img { |
||||
transform: rotate(180deg); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.chapters { |
||||
margin-top: 16px; |
||||
max-height: calc(100% - 53px); |
||||
overflow: auto; |
||||
} |
||||
|
||||
.chapter { |
||||
margin-bottom: 20px; |
||||
|
||||
.chapterName { |
||||
color: rgba(0, 0, 0, 0.85); |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.section { |
||||
padding: 5px 15px; |
||||
margin-top: 8px; |
||||
background: rgba(0, 0, 0, 0.02); |
||||
|
||||
.sectionName { |
||||
margin: 10px 0; |
||||
font-size: 14px; |
||||
color: rgba(0, 0, 0, 0.65); |
||||
cursor: pointer; |
||||
&.active{ |
||||
color: #9278FF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-image-viewer__wrapper { |
||||
transform: translateY(-10px); |
||||
transition: transform .5s; |
||||
|
||||
&.active { |
||||
transform: translateY(0) |
||||
} |
||||
} |
||||
|
||||
.el-image-viewer__close { |
||||
z-index: 2000; |
||||
top: 15px; |
||||
right: 15px; |
||||
|
||||
&.doc-close { |
||||
i { |
||||
color: #000 !important; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.list::-webkit-scrollbar { |
||||
width: 4px; |
||||
} |
||||
|
||||
.list::-webkit-scrollbar-thumb { |
||||
border-radius: 10px; |
||||
background: rgba(0, 0, 0, 0.06); |
||||
} |
||||
|
||||
.mask { |
||||
z-index: 9; |
||||
position: absolute; |
||||
background-color: rgb(57, 58, 61); |
||||
} |
||||
|
||||
.word-mask { |
||||
z-index: 9; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
background-color: rgb(243, 242, 241); |
||||
} |
||||
|
||||
.word-mask1 { |
||||
z-index: 9; |
||||
position: absolute; |
||||
top: 0; |
||||
right: 0; |
||||
width: 100%; |
||||
background-color: #185abd; |
||||
} |
||||
|
||||
.word-mask2 { |
||||
z-index: 9; |
||||
position: absolute; |
||||
background-color: transparent; |
||||
} |
||||
|
||||
.excel-mask1 { |
||||
z-index: 9; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 20%; |
||||
width: 60%; |
||||
background-color: #107c41; |
||||
} |
||||
|
||||
/deep/ .pdf-dia { |
||||
border-radius: 0 !important; |
||||
|
||||
.el-dialog__header { |
||||
display: none; |
||||
} |
||||
|
||||
.el-dialog__body { |
||||
padding: 0; |
||||
} |
||||
|
||||
.el-dialog__headerbtn { |
||||
top: 10px; |
||||
|
||||
.el-dialog__close { |
||||
color: #fff; |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.pdf { |
||||
.arrow { |
||||
padding: 10px 0; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 16px; |
||||
color: #fff; |
||||
background-color: #333; |
||||
|
||||
.turn { |
||||
margin: 0 10px; |
||||
font-size: 18px; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.pdf-wrap { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue