parent
0a042d07c8
commit
245397841c
58 changed files with 8503 additions and 2443 deletions
|
After Width: | Height: | Size: 239 B |
|
After Width: | Height: | Size: 318 B |
|
After Width: | Height: | Size: 209 B |
@ -0,0 +1,286 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-card shadow="hover" class="m-b-20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<el-page-header @back="goBack" :content="id ? '编辑课程' : '新增课程'"></el-page-header> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="m-b-20"> |
||||||
|
<el-form :disabled="isDetail" label-width="80px" label-suffix=":" size="small"> |
||||||
|
<el-form-item label="课程名称"> |
||||||
|
<div class="d-inline-block"> |
||||||
|
<el-input placeholder="请输入课程名称" v-model="name" clearable maxlength="25"></el-input> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="课程分类"> |
||||||
|
<div class="d-inline-block"> |
||||||
|
<el-select v-model="classificationId" placeholder="请选择课程分类"> |
||||||
|
<el-option v-for="item in classificationList" :key="item.id" :label="item.name" :value="item.id"></el-option> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<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> |
||||||
|
|
||||||
|
<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 label="课程介绍"> |
||||||
|
<quill :border="true" :readonly="isDetail" v-model="description" :height="400" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button type="primary" size="small" v-throttle @click="save" v-show="!isDetail">{{ id ? '更新' : '创建' }}</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from '@/libs/util' |
||||||
|
import Setting from '@/setting' |
||||||
|
|
||||||
|
import quill from '@/components/quill' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'courseAddEdit', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
headers: { |
||||||
|
token: util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
schoolId: Setting.schoolId, |
||||||
|
id: '', |
||||||
|
isDetail: Boolean(this.$route.query.show), |
||||||
|
username: this.$store.state.name, |
||||||
|
classificationId: '', |
||||||
|
coverUrl: '', |
||||||
|
name: '', |
||||||
|
classificationList: [], |
||||||
|
uploadList: [], |
||||||
|
description: '', |
||||||
|
submiting: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.id = this.$route.query.id |
||||||
|
this.getClassification() |
||||||
|
this.id && this.getData() |
||||||
|
}, |
||||||
|
components: { |
||||||
|
quill |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 返回 |
||||||
|
goBack() { |
||||||
|
this.$router.back(); |
||||||
|
}, |
||||||
|
save() { |
||||||
|
if (this.submiting) return false |
||||||
|
if (!this.name) return util.warningMsg('请填写课程名称'); |
||||||
|
if (!this.classificationId) return util.warningMsg('请选择课程分类'); |
||||||
|
if (!this.coverUrl) return util.warningMsg('请上传课程封面'); |
||||||
|
this.submiting = true |
||||||
|
|
||||||
|
let data = { |
||||||
|
id: this.id, |
||||||
|
classificationId: this.classificationId, |
||||||
|
coverUrl: this.coverUrl, |
||||||
|
description: this.description, |
||||||
|
name: this.name, |
||||||
|
|
||||||
|
schoolId: this.schoolId, |
||||||
|
founderId: this.userId, |
||||||
|
founderName: this.username, |
||||||
|
distinguish: 1 |
||||||
|
} |
||||||
|
if (this.id) { |
||||||
|
this.$put(this.api.editCourse, data).then(res => { |
||||||
|
this.submiting = false |
||||||
|
util.successMsg('修改成功'); |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.submiting = false |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(this.api.addCourse, data).then(res => { |
||||||
|
this.submiting = false |
||||||
|
this.$confirm('课程创建成功，是否马上进行课程内容设置？', '提示', { |
||||||
|
type: 'success', |
||||||
|
confirmButtonText: '马上设置', |
||||||
|
cancelButtonText: '稍后操作' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.push(`courseConfig?id=${res.data.courseId}`) |
||||||
|
}).catch(() => { |
||||||
|
this.$router.back() |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.submiting = false |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
getClassification() { |
||||||
|
this.$get(this.api.queryGlClassification).then(res => { |
||||||
|
this.classificationList = res.classificationList |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$get(`${this.api.getCourse}/${this.id}`) |
||||||
|
.then(res => { |
||||||
|
let data = res.course |
||||||
|
this.name = data.name |
||||||
|
this.classificationId = data.classificationId |
||||||
|
this.description = data.description |
||||||
|
this.coverUrl = data.coverUrl |
||||||
|
this.uploadList.push({ |
||||||
|
name: 'cover.jpg', |
||||||
|
url: this.coverUrl |
||||||
|
}) |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
|
||||||
|
}); |
||||||
|
}, |
||||||
|
// 上传文件 |
||||||
|
handleExceed(files, fileList) { |
||||||
|
util.warningMsg('当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！'); |
||||||
|
}, |
||||||
|
uploadSuccess(res, file, fileList) { |
||||||
|
this.coverUrl = res.filesResult.fileUrl |
||||||
|
// this.uploadList.push({ name: file.name, url: response.message.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.importVisible = false |
||||||
|
this.pageNo = 1 |
||||||
|
this.staffGradeId = '' |
||||||
|
this.keyword = '' |
||||||
|
this.getTeacher() |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
if (this.isDetail) { |
||||||
|
this.$router.back() |
||||||
|
} else { |
||||||
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</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,742 @@ |
|||||||
|
<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"> |
||||||
|
<div class="page"> |
||||||
|
<div class="relative"> |
||||||
|
<div class="p-title">内容设置</div> |
||||||
|
<div class="btns" style="top: -10px"> |
||||||
|
<template v-if="!sorting"> |
||||||
|
<el-button type="primary" size="small" round v-throttle @click="addChapter">添加章节</el-button> |
||||||
|
<el-button type="primary" size="small" round v-throttle @click="sort">编辑顺序</el-button> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<el-button type="primary" size="small" round v-throttle @click="cancelSort">取消</el-button> |
||||||
|
<el-button type="primary" size="small" 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 class="action-btn" type="primary" size="small" round v-throttle @click="editChapter(chapter)">修改章节名称</el-button> |
||||||
|
<el-button class="action-btn" type="primary" size="small" round v-throttle @click="addSection(chapter.id)">添加小节</el-button> |
||||||
|
<el-button class="action-btn" type="primary" size="small" 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 type="index" width="100" label="序号" align="center"></el-table-column> |
||||||
|
<el-table-column prop="name" label="资源名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="fileType" label="资源类型" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{ transferType(scope.row.fileType) }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="300"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<template v-if="!sorting"> |
||||||
|
<el-button type="text" @click="preview(scope.row)">查看</el-button> |
||||||
|
<el-button type="text" @click="delSection(scope.row)">删除</el-button> |
||||||
|
<el-button type="text" @click="editSectionName(scope.row,chapter.id)">修改小节名称</el-button> |
||||||
|
<el-button type="text" @click="switchFile(scope.row,chapter.id)">更换文件</el-button> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<i class="el-icon-top sort-icon" :class="{disabled: scope.$index == 0}" style="margin-right: 5px" @click="sortSection(index,'up',scope.$index == 0,scope.$index)"></i> |
||||||
|
<i class="el-icon-bottom sort-icon" :class="{disabled: scope.$index == chapter.subsectionList.length-1}" @click="sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)"></i> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
|
||||||
|
<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 size="small" @click="chapterVisible = false">取消</el-button> |
||||||
|
<el-button size="small" type="primary" @click="chapterSubmit">确定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<el-dialog title="添加小节" :visible.sync="sectionVisible" width="24%" @close="closeSection" :close-on-click-modal="false"> |
||||||
|
<el-form label-width="80px"> |
||||||
|
<el-form-item label="资源添加"> |
||||||
|
<el-upload |
||||||
|
:before-upload="beforeUpload" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.fileupload" |
||||||
|
:file-list="uploadList" |
||||||
|
:headers="headers" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="小节名称"> |
||||||
|
<el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button size="small" @click="sectionVisible = false">取消</el-button> |
||||||
|
<el-button size="small" 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" |
||||||
|
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 size="small" @click="switchVisible = false">取消</el-button> |
||||||
|
<el-button size="small" 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 size="small" @click="sectionNameVisible = false">取消</el-button> |
||||||
|
<el-button size="small" type="primary" @click="sectionNameSubmit">确定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<div v-show="previewImg" class="el-image-viewer__wrapper" :class="{active: previewImg}" style="z-index: 2000"> |
||||||
|
<div class="el-image-viewer__mask"></div> |
||||||
|
<span class="el-image-viewer__btn el-image-viewer__close" @click="previewImg = ''"><i class="el-icon-circle-close" style="color: #fff"></i></span> |
||||||
|
<div class="el-image-viewer__canvas"> |
||||||
|
<img :src="previewImg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-show="iframeSrc" class="el-image-viewer__wrapper" :class="{active: iframeSrc}" style="z-index: 2000"> |
||||||
|
<div class="el-image-viewer__mask"></div> |
||||||
|
<span class="el-image-viewer__btn el-image-viewer__close" :class="{'doc-close': isWord}" :style="{top: isWord ? '50px' : '5px'}" @click="closeIframe"><i class="el-icon-circle-close" style="color: #fff"></i></span> |
||||||
|
<div class="el-image-viewer__canvas"> |
||||||
|
<iframe v-if="iframeSrc" class="fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe> |
||||||
|
<template v-if="showMask"> |
||||||
|
<div class="mask" style="width: 200px;height: 30px;top: 53px;right: 320px"></div> |
||||||
|
<div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div> |
||||||
|
</template> |
||||||
|
<template v-if="showMask1"> |
||||||
|
<div class="word-mask1" style="width: 200px;height: 50px;"></div> |
||||||
|
<div class="word-mask" style="height: 40px;top: 48px;"></div> |
||||||
|
<div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
||||||
|
</template> |
||||||
|
<template v-if="showMask2 && iframeSrc"> |
||||||
|
<div class="excel-mask1" style="height: 48px;"></div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-show="playAuth" class="el-image-viewer__wrapper" :class="{active: playAuth}" style="z-index: 2000"> |
||||||
|
<div class="el-image-viewer__mask"></div> |
||||||
|
<span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close" style="color: #fff"></i></span> |
||||||
|
<div class="player" id="player"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</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: '', |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
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 |
||||||
|
} |
||||||
|
}, |
||||||
|
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 { |
||||||
|
history.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.filesResult.fileId |
||||||
|
this.fileType = res.filesResult.fileType |
||||||
|
this.fileUrl = res.filesResult.fileUrl |
||||||
|
this.fileName = res.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) { |
||||||
|
if ('jpg,jpeg,png,gif,svg,psd'.includes(ext)) return '图片' |
||||||
|
if ('mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv'.includes(ext)) return '视频' |
||||||
|
return ext |
||||||
|
}, |
||||||
|
addChapter() { |
||||||
|
this.chapterName = '' |
||||||
|
this.chapterId = '' |
||||||
|
this.chapterVisible = true |
||||||
|
}, |
||||||
|
sort() { |
||||||
|
this.sorting = true |
||||||
|
}, |
||||||
|
cancelSort() { |
||||||
|
this.sorting = false |
||||||
|
}, |
||||||
|
saveSort() { |
||||||
|
this.chapters.forEach((n, k) => { |
||||||
|
n.sort = k + 1 |
||||||
|
n.subsectionList.forEach((j, i) => { |
||||||
|
j.sort = i + 1 |
||||||
|
}) |
||||||
|
}) |
||||||
|
let data = { |
||||||
|
chapterVOList: this.chapters |
||||||
|
} |
||||||
|
this.$post(this.api.reorder, data).then(res => { |
||||||
|
this.sorting = false |
||||||
|
this.getData() |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
editChapter(item) { |
||||||
|
this.chapterId = item.id |
||||||
|
this.chapterName = item.name |
||||||
|
this.chapterVisible = true |
||||||
|
}, |
||||||
|
delChapter(id) { |
||||||
|
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.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.data.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) { |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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,219 @@ |
|||||||
|
<template> |
||||||
|
<!-- 课程管理 --> |
||||||
|
<div style="padding-top: 24px"> |
||||||
|
<div class="tool"> |
||||||
|
<ul class="filter" style="align-items: flex-start"> |
||||||
|
<li> |
||||||
|
<label>课程分类：</label> |
||||||
|
<el-select v-model="classificationId" clearable placeholder="请选择课程分类" size="small" @change="getData"> |
||||||
|
<el-option label="不限" value=""></el-option> |
||||||
|
<el-option v-for="(item,index) in classificationList" :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 type="primary" size="small" round @click="addCourse" v-auth="'course:课程管理:新增课程'">新增</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllData" v-auth="'course:课程管理:批量删除'">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table :data="courseData" 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 + (current - 1) * pageSize + 1 }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="课程名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="gmtCreate" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="founder" label="创建人" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="章节数" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{ scope.row.chapterNum ? scope.row.chapterNum : 0 }}章({{ scope.row.subsectionNum ? scope.row.subsectionNum : 0 }}小节) |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="classification" label="课程分类"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="250"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="editCourse(scope.row)" v-auth="'course:课程管理:编辑信息'">编辑信息</el-button> |
||||||
|
<el-divider direction="vertical" v-auth="'course:课程管理:编辑信息'"></el-divider> |
||||||
|
<el-button type="text" @click="config(scope.row)" v-auth="'course:课程管理:配置资源'">内容设置</el-button> |
||||||
|
<el-divider direction="vertical" v-auth="'course:课程管理:配置资源'"></el-divider> |
||||||
|
<el-button type="text" @click="preview(scope.row)" v-auth="'course:课程管理:预览'">预览</el-button> |
||||||
|
<el-divider direction="vertical" v-auth="'course:课程管理:预览'"></el-divider> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)" v-auth="'course:课程管理:删除'">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="可授权状态" align="center" width="120"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
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)" |
||||||
|
v-auth="'course:课程管理:禁用'" |
||||||
|
></el-switch> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="current"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from '@/libs/util' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'courseManagement', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
schoolId: this.$store.state.schoolId, |
||||||
|
keyword: '', |
||||||
|
classificationId: '', |
||||||
|
courseData: [], |
||||||
|
multipleSelection: [], |
||||||
|
classificationList: [], |
||||||
|
current: 1, // 当前页码 |
||||||
|
pageSize: 10, |
||||||
|
totals: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.initData() |
||||||
|
}, 500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getClassification() |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
classificationId: this.classificationId, |
||||||
|
name: this.keyword |
||||||
|
} |
||||||
|
this.$get(`${this.api.queryCourseByCondition}/${this.current}/${this.pageSize}`, data).then(res => { |
||||||
|
this.courseData = res.courseList |
||||||
|
this.totals = res.total |
||||||
|
if (!this.courseData.length && this.totals) { |
||||||
|
this.current-- |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
initData() { |
||||||
|
this.current = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getClassification() { |
||||||
|
this.$get(this.api.queryGlClassification).then(res => { |
||||||
|
this.classificationList = res.classificationList |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
changeType(type) { |
||||||
|
this.classificationId = type |
||||||
|
this.initData() |
||||||
|
}, |
||||||
|
preview(row) { |
||||||
|
this.$router.push(`/course/preview?id=${row.id}`) |
||||||
|
}, |
||||||
|
config(row) { |
||||||
|
this.$router.push(`/course/contentSettings?id=${row.id}`) |
||||||
|
}, |
||||||
|
addCourse() { |
||||||
|
this.$router.push('/course/add') |
||||||
|
}, |
||||||
|
editCourse(row) { |
||||||
|
this.$router.push(`/course/add?id=${row.id}`) |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$del(`${this.api.deleteCourse}/${row.id}`).then(res => { |
||||||
|
util.successMsg('删除成功'); |
||||||
|
this.initData() |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.customerId; |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllData() { |
||||||
|
if (this.multipleSelection.length != '') { |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return item.id |
||||||
|
}) |
||||||
|
this.$confirm(`此批量删除操作不可逆，是否确认删除${newArr[0].name}等${newArr.length}个选中项？`, '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
courseIds: delList.join() |
||||||
|
} |
||||||
|
this.$del(this.api.deleteCourses, data).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
util.successMsg('删除成功'); |
||||||
|
this.initData() |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}).catch(() => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
util.errorMsg('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.current = 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,495 @@ |
|||||||
|
<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"> |
||||||
|
<div class="flex p-40"> |
||||||
|
<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 class="sectionName" v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section)">{{ section.name }}</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 |
||||||
|
} |
||||||
|
}, |
||||||
|
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) { |
||||||
|
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.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; |
||||||
|
@include mul-ellipsis(2); |
||||||
|
|
||||||
|
&.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; |
||||||
|
@include ellipsis; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.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> |
||||||
@ -0,0 +1,66 @@ |
|||||||
|
<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"> |
||||||
|
<!-- 课程管理 --> |
||||||
|
<CourseManagement v-if="active == 'first'" /> |
||||||
|
<!-- 分类管理 --> |
||||||
|
<SortManagement v-else /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Setting from '@/setting'; |
||||||
|
import { mapState } from 'vuex' |
||||||
|
import CourseManagement from "./courseManagement"; |
||||||
|
import SortManagement from "./sortManagement"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'course', |
||||||
|
components: { |
||||||
|
CourseManagement, |
||||||
|
SortManagement |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
active: 'first', // 当前标签页 |
||||||
|
tabs: { |
||||||
|
first: '课程管理', |
||||||
|
second: '分类管理' |
||||||
|
}, |
||||||
|
showTabs: true |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState('auth', [ |
||||||
|
'routes' |
||||||
|
]) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tabChange(index) { |
||||||
|
this.active = index; |
||||||
|
}, |
||||||
|
initTabs() { |
||||||
|
let btnPermissions = this.routes; |
||||||
|
let showStaff = btnPermissions.includes('课程资源管理:课程管理'); |
||||||
|
let showRole = btnPermissions.includes('课程资源管理:分类管理'); |
||||||
|
|
||||||
|
if (!showStaff || !showRole) { |
||||||
|
this.showTabs = false; |
||||||
|
} |
||||||
|
!showStaff && showRole && (this.active = 'second') |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
Setting.dynamicRoute && this.initTabs() |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,166 @@ |
|||||||
|
<template> |
||||||
|
<!-- 分类管理 --> |
||||||
|
<div> |
||||||
|
<div class="tool"> |
||||||
|
<ul class="filter"> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div style="margin-top: 24px"> |
||||||
|
<el-button type="primary" size="small" round @click="addClass" v-auth="'course:分类管理:新增'">新增</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="classificationList" 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 + (pageNo - 1) * pageSize + 1 }} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="课程分类名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="300"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="editClass(scope.row)" v-auth="'course:分类管理:修改'">修改</el-button> |
||||||
|
<el-divider direction="vertical" v-auth="'course:分类管理:修改'"></el-divider> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)" v-auth="'course:分类管理:删除'">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<el-dialog :title="isAddclass ? '添加分类' : '编辑分类'" :visible.sync="classVisible" width="400px" :close-on-click-modal="false" @close="closeColumn"> |
||||||
|
<el-form> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="分类名称" v-model="className"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button size="small" @click="classVisible = false">取 消</el-button> |
||||||
|
<el-button size="small" type="primary" @click="classSubmit">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from '@/libs/util' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'sortManagement', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
classificationList: [], |
||||||
|
multipleSelection: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
isAddclass: true, |
||||||
|
classVisible: false, |
||||||
|
curRow: {}, |
||||||
|
className: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
this.$get(this.api.queryGlClassification).then(res => { |
||||||
|
this.classificationList = res.classificationList |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
addCourse() { |
||||||
|
this.$router.push('/addcourse') |
||||||
|
}, |
||||||
|
editCourse(row) { |
||||||
|
this.$router.push(`/addcourse?id=${row.id}`) |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$del(`${this.api.deleteClassification}/${row.id}`).then(res => { |
||||||
|
util.successMsg('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.customerId; |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
closeColumn() { |
||||||
|
this.className = '' |
||||||
|
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.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
addClass() { |
||||||
|
this.isAddClass = true |
||||||
|
this.classVisible = true |
||||||
|
}, |
||||||
|
editClass(row) { |
||||||
|
this.curRow = row |
||||||
|
this.className = row.name |
||||||
|
this.isAddClass = false |
||||||
|
this.classVisible = true |
||||||
|
}, |
||||||
|
classSubmit() { |
||||||
|
if (!this.className) return util.warningMsg('请填写分类名称') |
||||||
|
let data = { |
||||||
|
name: this.className |
||||||
|
} |
||||||
|
if (this.curRow.id) { |
||||||
|
data.id = this.curRow.id |
||||||
|
this.$put(this.api.editClassification, data).then(res => { |
||||||
|
util.successMsg('修改成功'); |
||||||
|
this.classVisible = false |
||||||
|
this.getData() |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(`${this.api.addClassification}/${this.className}?distinguish=1`).then(res => { |
||||||
|
util.successMsg('添加成功'); |
||||||
|
this.classVisible = false |
||||||
|
this.getData() |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,397 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<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'> |
||||||
|
<template v-if='sorting'> |
||||||
|
<el-button class='action-btn' type='primary' size='small' round @click='cancelSort'>取消</el-button> |
||||||
|
<el-button class='action-btn' type='primary' size='small' round @click='sortSubmit'>保存</el-button> |
||||||
|
</template> |
||||||
|
<template v-if='!sorting'> |
||||||
|
<el-button class='action-btn' type='primary' size='small' round @click='openSort' v-auth>更改排序 |
||||||
|
</el-button> |
||||||
|
<el-button class='action-btn' type='primary' size='small' round @click='addColumn' v-auth>添加栏目 |
||||||
|
</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 type='text' @click.stop='editType(data)' v-auth>编辑</el-button> |
||||||
|
<el-divider direction='vertical' v-auth="'information:编辑'"></el-divider> |
||||||
|
<template v-if='node.level == 1' v-auth="'information:新增'"> |
||||||
|
<el-button type='text' @click.stop='addType(data)'>新增</el-button> |
||||||
|
<el-divider direction='vertical'></el-divider> |
||||||
|
</template> |
||||||
|
<el-button type='text' @click.stop='delData(data)' v-auth>删除</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 size='small' @click='columnVisible = false'>取 消</el-button> |
||||||
|
<el-button size='small' 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 size='small' @click='typeVisible = false'>取 消</el-button> |
||||||
|
<el-button size='small' type='primary' @click='typeSubmit'>确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from '@/libs/util' |
||||||
|
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 = { |
||||||
|
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: 20px; |
||||||
|
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,267 @@ |
|||||||
|
<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.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,197 @@ |
|||||||
|
<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 class="action-btn" type="primary" size="small" @click="sortSubmit" v-auth="'content:保存排序'">保存排序</el-button> |
||||||
|
<el-button class="action-btn" type="primary" size="small" @click="delAllData" v-auth="'content:批量删除'">批量删除</el-button> |
||||||
|
<el-button class="action-btn" type="primary" size="small" @click="addArticle" v-auth="'content:新增文章'">新增文章</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="标题"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="排序值" width="80" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input size="small" class="sort-input" width="120" min="1" v-model.number="scope.row.sort" type="number" v-auth="'content:保存排序'"></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 type="text" @click="editArticle(scope)" v-auth="'content:编辑'">编辑</el-button> |
||||||
|
<el-divider direction="vertical"></el-divider> |
||||||
|
<el-button type="text" @click="delData(scope.row)" v-auth="'content:删除'">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="文章发布状态" width="120" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
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)" |
||||||
|
v-auth="'content:禁用'" |
||||||
|
></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: 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.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 => {}) |
||||||
|
}) |
||||||
|
.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' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
export default { |
||||||
|
name: 'contentManage', |
||||||
|
components: { |
||||||
|
ContentList |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
menuList: [], |
||||||
|
activeName: this.$store.state.info.columnId, |
||||||
|
columnId: "" |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getMenuData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
...mapActions('info', [ |
||||||
|
'setColumnId' |
||||||
|
]), |
||||||
|
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.setColumnId(this.columnId); |
||||||
|
} else { |
||||||
|
this.columnId = this.$store.state.info.columnId; |
||||||
|
} |
||||||
|
} |
||||||
|
}).catch(err => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleSelect(key, keyPath) { |
||||||
|
this.columnId = key; |
||||||
|
this.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,64 @@ |
|||||||
|
<template> |
||||||
|
<!-- 资讯管理 --> |
||||||
|
<div class="page"> |
||||||
|
<el-tabs v-model="tabsName" tab-position="left" @tab-click="handleClick"> |
||||||
|
<el-tab-pane name="1"> |
||||||
|
<span slot="label"><i class="el-icon-collection-tag"></i> 栏目管理</span> |
||||||
|
<columnManage v-if="tabsName === '1'" /> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane name="2"> |
||||||
|
<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' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { |
||||||
|
ColumnManage, |
||||||
|
ContentManage |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tabsName: this.$store.state.info.tabsName, |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
...mapActions('info', [ |
||||||
|
'setTabsName' |
||||||
|
]), |
||||||
|
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,472 @@ |
|||||||
|
<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='170px' label-suffix=':' size='small'> |
||||||
|
<el-form-item label='竞赛封面（选填）'> |
||||||
|
<el-upload |
||||||
|
class='avatar-uploader' |
||||||
|
accept='.jpg,.png,.jpeg,.gif' |
||||||
|
: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> |
||||||
|
<div slot='tip' class='el-upload__tip'> |
||||||
|
<p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p> |
||||||
|
</div> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label='竞赛封面长图（选填）'> |
||||||
|
<el-upload |
||||||
|
class='avatar-uploader avatar-uploader-lg' |
||||||
|
accept='.jpg,.png,.jpeg,.gif' |
||||||
|
:on-remove='handleLgRemove' |
||||||
|
:on-error='uploadError' |
||||||
|
:on-success='uploadLgSuccess' |
||||||
|
:before-remove='beforeRemove' |
||||||
|
:limit='1' :on-exceed='handleExceed' |
||||||
|
:action='this.api.fileupload' |
||||||
|
:headers="headers" |
||||||
|
name='file' |
||||||
|
> |
||||||
|
<img v-if='carouselUrl' :src='carouselUrl' class='avatar-lg'> |
||||||
|
<div class='uploader-default' v-else> |
||||||
|
<i class='el-icon-plus'></i> |
||||||
|
<p>上传封面</p> |
||||||
|
</div> |
||||||
|
<div slot='tip' class='el-upload__tip'> |
||||||
|
<p>展示宽度为1920，高度300，JPG/PNG/GIF，3MB以内</p> |
||||||
|
</div> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label='竞赛名称'> |
||||||
|
<div class='d-inline-block'> |
||||||
|
<el-input placeholder='请输入竞赛名称' v-model='name' clearable></el-input> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label='主办方'> |
||||||
|
<div class='inline-input'> |
||||||
|
<div class='input-wrap' v-for='(item,index) in sponsorList' :key='index'> |
||||||
|
<el-input placeholder='主办方名称' v-model='sponsorList[index]'></el-input> |
||||||
|
<i v-if='sponsorList.length > 1' class='remove' @click='delSponsor(index)'></i> |
||||||
|
<button v-if='index == 0' class='add-btn' @click='addSponsor'> |
||||||
|
<i class='el-icon-plus'></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label='承办方（选填）'> |
||||||
|
<div class='inline-input'> |
||||||
|
<div class='input-wrap' v-for='(item,index) in undertakerList' :key='index'> |
||||||
|
<el-input placeholder='承办方名称' v-model='undertakerList[index]'></el-input> |
||||||
|
<i v-if='undertakerList.length > 1' class='remove' @click='delOrganizer(index)'></i> |
||||||
|
<button v-if='index == 0' class='add-btn' @click='addOrganizer'> |
||||||
|
<i class='el-icon-plus'></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button v-if='!undertakerList.length' class='add-btn' @click='addOrganizer'> |
||||||
|
<i class='el-icon-plus'></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label='报名时间'> |
||||||
|
<el-date-picker v-model='signupTime' value-format='yyyy-MM-dd HH:mm:ss' type='datetimerange' |
||||||
|
range-separator='-' start-placeholder='开始日期' end-placeholder='结束日期' |
||||||
|
:picker-options='pickerOptions'></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label='竞赛时间'> |
||||||
|
<el-date-picker v-model='playTime' value-format='yyyy-MM-dd HH:mm:ss' type='datetimerange' |
||||||
|
range-separator='-' start-placeholder='开始日期' end-placeholder='结束日期' |
||||||
|
:picker-options='pickerOptions'></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label='竞赛详情'> |
||||||
|
<quill :border='true' v-model='description' :height='400' /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button size='small' v-throttle @click='save(1)'>保存</el-button> |
||||||
|
<el-button type='primary' size='small' v-throttle @click='save(0)'>发布</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</el-card> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from '@/libs/util' |
||||||
|
import Setting from '@/setting' |
||||||
|
import quill from '@/components/quill'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'add', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
headers: { |
||||||
|
token: util.local.get(Setting.tokenKey) |
||||||
|
}, |
||||||
|
schoolId: Setting.schoolId, |
||||||
|
id: '', |
||||||
|
coverUrl: '', |
||||||
|
carouselUrl: '', |
||||||
|
publishStatus: 0, |
||||||
|
userId: this.$store.state.userLoginId, |
||||||
|
username: this.$store.state.name, |
||||||
|
uploadList: [], |
||||||
|
uploadDataList: [], |
||||||
|
coverVisible: false, |
||||||
|
coverImageUrl: '', |
||||||
|
name: '', |
||||||
|
sponsor: '', |
||||||
|
sponsorList: [''], |
||||||
|
undertaker: '', |
||||||
|
undertakerList: [''], |
||||||
|
signUpStartTime: '', |
||||||
|
signUpEndTime: '', |
||||||
|
signupTime: '', |
||||||
|
playTime: '', |
||||||
|
playStartTime: '', |
||||||
|
playEndTime: '', |
||||||
|
description: '', |
||||||
|
pickerOptions: { |
||||||
|
disabledDate: time => { |
||||||
|
return time.getTime() < new Date().getTime() - 86400000; |
||||||
|
} |
||||||
|
}, |
||||||
|
submiting: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
quill |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
signupTime: function(val) { |
||||||
|
if (val) { |
||||||
|
this.signUpStartTime = val[0]; |
||||||
|
this.signUpEndTime = val[1]; |
||||||
|
} else { |
||||||
|
this.signUpStartTime = ''; |
||||||
|
this.signUpEndTime = ''; |
||||||
|
} |
||||||
|
}, |
||||||
|
playTime: function(val) { |
||||||
|
if (val) { |
||||||
|
this.playStartTime = val[0]; |
||||||
|
this.playEndTime = val[1]; |
||||||
|
} else { |
||||||
|
this.playStartTime = ''; |
||||||
|
this.playEndTime = ''; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.id = this.$route.query.id; |
||||||
|
this.isDetail = Boolean(this.$route.query.show); |
||||||
|
this.id && this.getData(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 返回 |
||||||
|
goBack() { |
||||||
|
this.$router.back(); |
||||||
|
}, |
||||||
|
save(status) { |
||||||
|
if (this.submiting) return false; |
||||||
|
this.sponsor = this.sponsorList.filter(d => d).join(); |
||||||
|
this.undertaker = this.undertakerList.filter(d => d).join(); |
||||||
|
if (!this.name) return util.warningMsg('请填写竞赛名称'); |
||||||
|
if (status == 0) { |
||||||
|
if (!this.sponsor) return util.warningMsg('请填写主办方'); |
||||||
|
if (!this.signUpStartTime) return util.warningMsg('请选择报名时间'); |
||||||
|
} |
||||||
|
let now = new Date().getTime(); |
||||||
|
let signUpStartTime = new Date(this.signUpStartTime).getTime(); |
||||||
|
let signUpEndTime = new Date(this.signUpEndTime).getTime(); |
||||||
|
let playStartTime = new Date(this.playStartTime).getTime(); |
||||||
|
if (signUpStartTime && now > signUpStartTime) return util.warningMsg('报名时间不能早于当前时间'); |
||||||
|
if (!this.playStartTime && status == 0) return util.warningMsg('请选择竞赛时间'); |
||||||
|
if (playStartTime && playStartTime < signUpEndTime) return util.warningMsg('竞赛时间不能早于报名结束时间'); |
||||||
|
if (!this.description && status == 0) return util.warningMsg('请填写竞赛详情'); |
||||||
|
|
||||||
|
let data = { |
||||||
|
id: this.id, |
||||||
|
coverUrl: this.coverUrl, |
||||||
|
carouselUrl: this.carouselUrl, |
||||||
|
description: this.description, |
||||||
|
founderId: 1, |
||||||
|
founderName: this.username, |
||||||
|
name: this.name, |
||||||
|
playEndTime: this.playEndTime, |
||||||
|
playStartTime: this.playStartTime, |
||||||
|
publishStatus: status, |
||||||
|
signUpEndTime: this.signUpEndTime, |
||||||
|
signUpStartTime: this.signUpStartTime, |
||||||
|
sponsor: this.sponsor, |
||||||
|
undertaker: this.undertaker |
||||||
|
}; |
||||||
|
this.submiting = true; |
||||||
|
|
||||||
|
if (this.id) { |
||||||
|
this.$put(this.api.editContest, data).then(res => { |
||||||
|
this.submiting = false; |
||||||
|
util.successMsg('修改成功'); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.submiting = false; |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$post(this.api.addContest, data).then(res => { |
||||||
|
this.submiting = false; |
||||||
|
util.successMsg('创建成功'); |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
this.submiting = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$get(this.api.getContest + this.id) |
||||||
|
.then(res => { |
||||||
|
if (res.errmessage == 'success') { |
||||||
|
let info = res.ExperimentalTeaching; |
||||||
|
this.coverUrl = info.coverUrl; |
||||||
|
this.description = info.description; |
||||||
|
this.name = info.name; |
||||||
|
|
||||||
|
this.signupTime = [info.signUpStartTime, info.signUpEndTime]; |
||||||
|
this.playTime = [info.playStartTime, info.playEndTime]; |
||||||
|
} else { |
||||||
|
util.errorMsg('查询失败'); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
|
||||||
|
}); |
||||||
|
}, |
||||||
|
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.filesResult.fileUrl; |
||||||
|
}, |
||||||
|
uploadLgSuccess(res, file, fileList) { |
||||||
|
if (this.carouselUrl) { |
||||||
|
let fileName = this.carouselUrl.replace('https://liuwanr.oss-cn-shenzhen.aliyuncs.com/', ''); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} |
||||||
|
this.carouselUrl = res.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 => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleLgRemove(file, fileList) { |
||||||
|
let fileName = this.carouselUrl.replace('https://liuwanr.oss-cn-shenzhen.aliyuncs.com/', ''); |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
this.carouselUrl = ''; |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
uploadSure() { |
||||||
|
this.BatchUpload = false; |
||||||
|
this.pageNo = 1; |
||||||
|
this.keyword = ''; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.back(); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
}); |
||||||
|
}, |
||||||
|
addSponsor() { |
||||||
|
this.sponsorList.push(''); |
||||||
|
}, |
||||||
|
delSponsor(index) { |
||||||
|
this.sponsorList.splice(index, 1); |
||||||
|
}, |
||||||
|
addOrganizer() { |
||||||
|
this.undertakerList.push(''); |
||||||
|
}, |
||||||
|
delOrganizer(index) { |
||||||
|
this.undertakerList.splice(index, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang='scss'> |
||||||
|
$upload-width: 220px; |
||||||
|
$upload-height: 140px; |
||||||
|
$upload-lg-height: 150px; |
||||||
|
/deep/ .avatar-uploader { |
||||||
|
.el-upload { |
||||||
|
position: relative; |
||||||
|
width: $upload-width; |
||||||
|
height: $upload-height; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
border-color: #cb221c; |
||||||
|
} |
||||||
|
|
||||||
|
.uploader-default { |
||||||
|
display: flex; |
||||||
|
height: $upload-height; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
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-uploader-lg { |
||||||
|
.el-upload { |
||||||
|
width: 100%; |
||||||
|
max-width: 960px; |
||||||
|
height: $upload-lg-height; |
||||||
|
|
||||||
|
.uploader-default { |
||||||
|
height: $upload-lg-height; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.avatar { |
||||||
|
display: block; |
||||||
|
width: $upload-width; |
||||||
|
height: $upload-height; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-lg { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: $upload-lg-height; |
||||||
|
} |
||||||
|
|
||||||
|
.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%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.inline-input { |
||||||
|
.input-wrap { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.el-input { |
||||||
|
display: inline-block; |
||||||
|
width: 216px; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.remove { |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
background: url(../../assets/img/close.png) 0 0/cover no-repeat; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.add-btn { |
||||||
|
margin-left: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.add-btn { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 216px; |
||||||
|
line-height: 32px; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
background-color: transparent; |
||||||
|
border: 1px dashed rgba(0, 0, 0, 0.15); |
||||||
|
border-radius: 4px; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
i { |
||||||
|
margin-right: 8px; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,279 @@ |
|||||||
|
<template> |
||||||
|
<div class="page"> |
||||||
|
<h6 class="p-title">筛选</h6> |
||||||
|
<div class="tool mul"> |
||||||
|
<ul class="filter"> |
||||||
|
<li> |
||||||
|
<label>创建时间：</label> |
||||||
|
<div class="single-choice"> |
||||||
|
<dl> |
||||||
|
<dd> |
||||||
|
<el-radio-group size="small" v-model="form.month" @change="changeType"> |
||||||
|
<el-radio v-for="(item,index) in dateList" :key="index" :label="item.id" border>{{item.name}}</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</dd> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
<li> |
||||||
|
<label>创建区间：</label> |
||||||
|
<el-date-picker v-model="date" align="right" unlink-panels size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable></el-date-picker> |
||||||
|
</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 type="primary" size="small" round @click="add" v-auth>创建竞赛</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table ref="table" :data="matchData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||||
|
<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="name" label="竞赛名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="applicantNum" label="报名人数" width="100" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.row.applicantNum ? scope.row.applicantNum : 0}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="status" label="状态" width="80" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{transferPublishStatus[scope.row.publishStatus]}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="time" label="竞赛时间" align="center" width="300"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.row.playStartTime}} ~ {{scope.row.playEndTime}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="gmtCreate" label="创建时间" width="150" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="founder" width="100" label="创建人" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="100"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="manage(scope.row)" v-auth>管理</el-button> |
||||||
|
<el-divider direction="vertical"></el-divider> |
||||||
|
<el-button type="text" @click="delData(scope.row)" v-auth>删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="发布状态" align="center" width="120"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.publishStatus" |
||||||
|
:active-value="0" |
||||||
|
:inactive-value="1" |
||||||
|
style="margin: 0 10px 0 5px" |
||||||
|
:active-text="scope.row.publishStatus ? '关' : '开'" |
||||||
|
@change="switchOff($event,scope.row,scope.$index)" |
||||||
|
v-auth="'match:禁用'" |
||||||
|
></el-switch> |
||||||
|
</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> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from '@/libs/util' |
||||||
|
export default { |
||||||
|
name: 'match', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
keyword: '', |
||||||
|
statusList: [ |
||||||
|
{ |
||||||
|
value: '', |
||||||
|
name: '不限' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 1, |
||||||
|
name: '待发布' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
name: '已发布' |
||||||
|
} |
||||||
|
], |
||||||
|
matchData: [], |
||||||
|
form: { |
||||||
|
month: '', |
||||||
|
publishStatus: '', |
||||||
|
startTime: '', |
||||||
|
endTime: '' |
||||||
|
}, |
||||||
|
multipleSelection: [], |
||||||
|
dateList: [ |
||||||
|
{ |
||||||
|
id: '', |
||||||
|
name: '不限' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
name: '近一个月' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '近三个月' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
name: '近六个月' |
||||||
|
} |
||||||
|
], |
||||||
|
date: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0, |
||||||
|
transferPublishStatus: ['已发布','未发布'] |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
'form.month': function(val){ |
||||||
|
if(val){ |
||||||
|
let unit = 24 * 60 * 60 * 1000 |
||||||
|
this.date = [util.formatDate('yyyy-MM-dd',new Date(new Date().getTime() - unit * 30 * val)),util.formatDate('yyyy-MM-dd',new Date(new Date().getTime() + unit))] |
||||||
|
}else{ |
||||||
|
this.date = [] |
||||||
|
} |
||||||
|
}, |
||||||
|
date: function(val){ |
||||||
|
if(val){ |
||||||
|
this.form.startTime = val[0] |
||||||
|
this.form.endTime = val[1] |
||||||
|
}else{ |
||||||
|
this.form.startTime = '' |
||||||
|
this.form.endTime = '' |
||||||
|
} |
||||||
|
this.initData() |
||||||
|
}, |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.initData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = {} |
||||||
|
if(this.form.month) data.month = this.form.month |
||||||
|
if(this.keyword) data.name = this.keyword |
||||||
|
if(this.form.publishStatus !== '') data.publishStatus = this.form.publishStatus |
||||||
|
if(this.form.startTime) data.startTime = this.form.startTime |
||||||
|
if(this.form.endTime) data.endTime = this.form.endTime |
||||||
|
this.$get(`${this.api.queryContestByCondition}/${this.pageNo}/${this.pageSize }`,data).then(res => { |
||||||
|
this.matchData = res.contestList |
||||||
|
this.totals = res.total |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
if(!this.matchData.length && this.totals){ |
||||||
|
this.pageNo-- |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
initData(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
add(){ |
||||||
|
this.$router.push('add') |
||||||
|
}, |
||||||
|
manage(row){ |
||||||
|
this.$router.push(`manage?id=${row.id}`) |
||||||
|
}, |
||||||
|
|
||||||
|
changeType() { |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
this.initData(); |
||||||
|
}, |
||||||
|
delData(row) { |
||||||
|
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$del(`${this.api.deleteContest}/${row.id}`).then(res => { |
||||||
|
util.successMsg('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
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 |
||||||
|
this.$post(this.api.deleteContest,data).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
util.successMsg('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}else{ |
||||||
|
util.errorMsg('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
transferTime(date,type){ |
||||||
|
if(date == '0000-00-00 00:00:00') return '---' |
||||||
|
return date |
||||||
|
}, |
||||||
|
switchOff(val,row,index) { |
||||||
|
this.$put(`${this.api.publishContest}/${row.id}/${val}`) |
||||||
|
.then(res => { |
||||||
|
val == 1 ? util.warningMsg('该赛事信息已隐藏对学生端用户不可见') : util.successMsg('该赛事信息已对学生端用户公开') |
||||||
|
}) |
||||||
|
.catch(err => {}); |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
/deep/.tool{ |
||||||
|
.filter{ |
||||||
|
.el-input{ |
||||||
|
min-width: 190px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media(max-width: 1640px){ |
||||||
|
.page .page-content .tool .filter{ |
||||||
|
flex-wrap: wrap; |
||||||
|
margin-bottom: -15px; |
||||||
|
li{ |
||||||
|
min-width: 34%; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
<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> |
||||||
|
<div class="page" style="margin-bottom: 24px"> |
||||||
|
<div class="tabs"> |
||||||
|
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{item}}</a> |
||||||
|
</div> |
||||||
|
<!-- 大赛详情 --> |
||||||
|
<MatchDetail v-if="active == 'first'" /> |
||||||
|
<!-- 竞赛进展 --> |
||||||
|
<MatchProgress v-else-if="active == 'second'" /> |
||||||
|
<!-- 报名人员 --> |
||||||
|
<MatchSignup v-else /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import MatchDetail from './matchDetail' |
||||||
|
import MatchProgress from './matchProgress' |
||||||
|
import MatchSignup from './matchSignup' |
||||||
|
export default { |
||||||
|
name: 'matchManage', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
active: 'first', |
||||||
|
tabs: { |
||||||
|
first: '大赛详情', |
||||||
|
second: '竞赛进展', |
||||||
|
third: '报名人员' |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
MatchDetail, |
||||||
|
MatchProgress, |
||||||
|
MatchSignup |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
goBack() { |
||||||
|
this.$router.back(); |
||||||
|
}, |
||||||
|
tabChange(index){ |
||||||
|
this.active = index |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,421 @@ |
|||||||
|
<template> |
||||||
|
<!-- 大赛详情 --> |
||||||
|
<div style='padding: 24px'> |
||||||
|
<div class="page-content"> |
||||||
|
<el-form label-width="170px" label-suffix=":" size="small"> |
||||||
|
<el-form-item label="竞赛封面（选填）"> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader" |
||||||
|
accept=".jpg,.png,.jpeg,.gif" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.fileupload" |
||||||
|
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> |
||||||
|
<div slot="tip" class="el-upload__tip"> |
||||||
|
<p>展示宽度为220，高度140，JPG/PNG/GIF，3MB以内</p> |
||||||
|
</div> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛封面长图（选填）"> |
||||||
|
<el-upload |
||||||
|
class="avatar-uploader avatar-uploader-lg" |
||||||
|
accept=".jpg,.png,.jpeg,.gif" |
||||||
|
:on-remove="handleLgRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadLgSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="this.api.fileupload" |
||||||
|
name="file" |
||||||
|
> |
||||||
|
<img v-if="carouselUrl" :src="carouselUrl" class="avatar-lg"> |
||||||
|
<div class="uploader-default" v-else> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<p>上传封面</p> |
||||||
|
</div> |
||||||
|
<div slot="tip" class="el-upload__tip"> |
||||||
|
<p>展示宽度为1920，高度300，JPG/PNG/GIF，3MB以内</p> |
||||||
|
</div> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛名称"> |
||||||
|
<div class="d-inline-block"> |
||||||
|
<el-input placeholder="请输入竞赛名称" v-model="name" clearable></el-input> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="主办方"> |
||||||
|
<div class="inline-input"> |
||||||
|
<div class="input-wrap" v-for="(item,index) in sponsorList" :key="index"> |
||||||
|
<el-input placeholder="主办方名称" v-model="sponsorList[index]"></el-input> |
||||||
|
<i v-if="sponsorList.length > 1" class="remove" @click="delSponsor(index)"></i> |
||||||
|
<button v-if="index == 0" class="add-btn" @click="addSponsor"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="承办方（选填）"> |
||||||
|
<div class="inline-input"> |
||||||
|
<div class="input-wrap" v-for="(item,index) in undertakerList" :key="index"> |
||||||
|
<el-input placeholder="承办方名称" v-model="undertakerList[index]"></el-input> |
||||||
|
<i v-if="undertakerList.length > 1" class="remove" @click="delOrganizer(index)"></i> |
||||||
|
<button v-if="index == 0" class="add-btn" @click="addOrganizer"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<button v-if="!undertakerList.length" class="add-btn" @click="addOrganizer"> |
||||||
|
<i class="el-icon-plus"></i> |
||||||
|
<span>添加</span> |
||||||
|
</button> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="报名时间"> |
||||||
|
<el-date-picker v-model="signupTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛时间"> |
||||||
|
<el-date-picker v-model="playTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="竞赛详情"> |
||||||
|
<quill :border="true" v-model="description" :height="400" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item> |
||||||
|
<el-button size="small" v-throttle @click="save(1)">保存</el-button> |
||||||
|
<el-button type="primary" v-if="publishStatus == 1" v-throttle @click="save(0)">发布</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import quill from '@/components/quill' |
||||||
|
import util from '@/libs/util' |
||||||
|
export default { |
||||||
|
name: 'matchDetail', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: this.$route.query.id, |
||||||
|
coverUrl: '', |
||||||
|
carouselUrl: '', |
||||||
|
publishStatus: 0, |
||||||
|
uploadList: [], |
||||||
|
uploadDataList: [], |
||||||
|
name: '', |
||||||
|
sponsor: '', |
||||||
|
sponsorList: [''], |
||||||
|
undertaker: '', |
||||||
|
undertakerList: [], |
||||||
|
signUpStartTime: '', |
||||||
|
signUpEndTime: '', |
||||||
|
signupTime: '', |
||||||
|
playTime: '', |
||||||
|
playStartTime: '', |
||||||
|
playEndTime: '', |
||||||
|
description: '' |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
quill |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
signupTime: function(val){ |
||||||
|
if(val){ |
||||||
|
this.signUpStartTime = val[0] |
||||||
|
this.signUpEndTime = val[1] |
||||||
|
}else{ |
||||||
|
this.signUpStartTime = '' |
||||||
|
this.signUpEndTime = '' |
||||||
|
} |
||||||
|
}, |
||||||
|
playTime: function(val){ |
||||||
|
if(val){ |
||||||
|
this.playStartTime = val[0] |
||||||
|
this.playEndTime = val[1] |
||||||
|
}else{ |
||||||
|
this.playStartTime = '' |
||||||
|
this.playEndTime = '' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
this.commitId() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
save(status) { |
||||||
|
this.sponsor = this.sponsorList.filter(d=>d).join() |
||||||
|
this.undertaker = this.undertakerList.filter(d=>d).join() |
||||||
|
|
||||||
|
if(!this.name) return util.warningMsg('请填写竞赛名称') |
||||||
|
if(status == 0){ |
||||||
|
if(!this.sponsor) return util.warningMsg('请填写主办方') |
||||||
|
if(!this.signUpStartTime) return util.warningMsg('请选择报名时间') |
||||||
|
} |
||||||
|
let now = new Date().getTime() |
||||||
|
let signUpStartTime = new Date(this.signUpStartTime).getTime() |
||||||
|
let signUpEndTime = new Date(this.signUpEndTime).getTime() |
||||||
|
let playStartTime = new Date(this.playStartTime).getTime() |
||||||
|
// if(signUpStartTime && now > signUpStartTime) return this.$$message.warning('报名时间不能早于当前时间') |
||||||
|
if(!this.playStartTime && status == 0) return util.warningMsg('请选择竞赛时间') |
||||||
|
if(playStartTime && playStartTime < signUpEndTime) return util.warningMsg('竞赛时间不能早于报名结束时间') |
||||||
|
if(!this.description && status == 0) return util.warningMsg('请填写竞赛详情') |
||||||
|
|
||||||
|
let data = { |
||||||
|
id: this.id, |
||||||
|
coverUrl: this.coverUrl, |
||||||
|
carouselUrl: this.carouselUrl, |
||||||
|
description: this.description, |
||||||
|
founderId: 1, |
||||||
|
name: this.name, |
||||||
|
playEndTime: this.playEndTime, |
||||||
|
playStartTime: this.playStartTime, |
||||||
|
publishStatus: status ? this.publishStatus : 0, |
||||||
|
signUpEndTime: this.signUpEndTime, |
||||||
|
signUpStartTime: this.signUpStartTime, |
||||||
|
sponsor: this.sponsor, |
||||||
|
undertaker: this.undertaker |
||||||
|
} |
||||||
|
if(this.id){ |
||||||
|
this.$put(this.api.editContest, data).then(res => { |
||||||
|
util.successMsg('修改成功'); |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addContest, data).then(res => { |
||||||
|
util.successMsg('创建成功'); |
||||||
|
this.$router.back() |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
getData() { |
||||||
|
this.$get(this.api.getContest + '/' + this.id) |
||||||
|
.then(res => { |
||||||
|
let data = res.contest |
||||||
|
this.coverUrl = data.coverUrl |
||||||
|
this.carouselUrl = data.carouselUrl |
||||||
|
this.description = data.description |
||||||
|
this.name = data.name |
||||||
|
this.playEndTime = data.playEndTime |
||||||
|
this.playStartTime = data.playStartTime |
||||||
|
this.publishStatus = data.publishStatus |
||||||
|
this.signUpEndTime = data.signUpEndTime |
||||||
|
this.signUpStartTime = data.signUpStartTime |
||||||
|
this.sponsor = data.sponsor |
||||||
|
this.undertaker = data.undertaker |
||||||
|
|
||||||
|
this.signupTime = [data.signUpStartTime,data.signUpEndTime] |
||||||
|
this.playTime = [data.playStartTime,data.playEndTime] |
||||||
|
this.sponsorList = data.sponsor.split(',') |
||||||
|
this.undertakerList = data.undertaker.split(',') |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
|
||||||
|
}); |
||||||
|
}, |
||||||
|
commitId(){ |
||||||
|
this.$store.commit("setMatchData", { matchId : this.id}) |
||||||
|
}, |
||||||
|
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.filesResult.fileUrl |
||||||
|
}, |
||||||
|
uploadLgSuccess(res, file, fileList) { |
||||||
|
if(this.carouselUrl){ |
||||||
|
let fileName = this.carouselUrl.replace('https://liuwanr.oss-cn-shenzhen.aliyuncs.com/','') |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {}).catch(res => {}); |
||||||
|
} |
||||||
|
this.carouselUrl = res.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 => {}); |
||||||
|
}, |
||||||
|
handleLgRemove(file, fileList) { |
||||||
|
let fileName = this.carouselUrl.replace('https://liuwanr.oss-cn-shenzhen.aliyuncs.com/','') |
||||||
|
this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => { |
||||||
|
this.carouselUrl = '' |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
uploadSure(){ |
||||||
|
this.BatchUpload = false |
||||||
|
this.pageNo = 1 |
||||||
|
this.keyword = '' |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
goback() { |
||||||
|
this.$confirm('确定返回？未更新的信息将不会保存。', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$router.push('/match') |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
addSponsor(){ |
||||||
|
this.sponsorList.push('') |
||||||
|
}, |
||||||
|
delSponsor(index){ |
||||||
|
this.sponsorList.splice(index,1) |
||||||
|
}, |
||||||
|
addOrganizer(){ |
||||||
|
this.undertakerList.push('') |
||||||
|
}, |
||||||
|
delOrganizer(index){ |
||||||
|
this.undertakerList.splice(index,1) |
||||||
|
}, |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
$upload-width: 220px; |
||||||
|
$upload-height: 140px; |
||||||
|
$upload-lg-height: 150px; |
||||||
|
/deep/.avatar-uploader{ |
||||||
|
.el-upload { |
||||||
|
position: relative; |
||||||
|
width: $upload-width; |
||||||
|
height: $upload-height; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
overflow: hidden; |
||||||
|
&:hover { |
||||||
|
border-color: #cb221c; |
||||||
|
} |
||||||
|
.uploader-default{ |
||||||
|
display: flex; |
||||||
|
height: $upload-height; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
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-uploader-lg{ |
||||||
|
.el-upload { |
||||||
|
width: 100%; |
||||||
|
max-width: 960px; |
||||||
|
height: $upload-lg-height; |
||||||
|
.uploader-default{ |
||||||
|
height: $upload-lg-height; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.avatar { |
||||||
|
display: block; |
||||||
|
width: $upload-width; |
||||||
|
height: $upload-height; |
||||||
|
} |
||||||
|
.avatar-lg { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: $upload-lg-height; |
||||||
|
} |
||||||
|
.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%; |
||||||
|
} |
||||||
|
} |
||||||
|
.inline-input{ |
||||||
|
.input-wrap{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 10px; |
||||||
|
|
||||||
|
.el-input{ |
||||||
|
display: inline-block; |
||||||
|
width: 216px; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
.remove{ |
||||||
|
width: 16px; |
||||||
|
height: 16px; |
||||||
|
background: url(../../../assets/img/close.png) 0 0/cover no-repeat; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.add-btn{ |
||||||
|
margin-left: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
.add-btn{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 216px; |
||||||
|
line-height: 32px; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.65); |
||||||
|
background-color: transparent; |
||||||
|
border: 1px dashed rgba(0, 0, 0, 0.15); |
||||||
|
border-radius: 4px; |
||||||
|
cursor: pointer; |
||||||
|
i{ |
||||||
|
margin-right: 8px; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,162 @@ |
|||||||
|
<template> |
||||||
|
<!-- 竞赛进展 --> |
||||||
|
<div class="page-content" style='padding: 24px'> |
||||||
|
<el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||||
|
<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="name" label="标题"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input placeholder="请输入标题" v-model="scope.row.title"></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="详情描述"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input placeholder="请输入详情描述" type="textarea" v-model="scope.row.description"></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="name" label="状态" width="150"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-select v-model="scope.row.status" clearable placeholder="请选择状态"> |
||||||
|
<el-option v-for="(item,index) in statusList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="170"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="saveData(scope.row)">保存</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="plus" @click="addData"> |
||||||
|
<i class="el-icon-circle-plus-outline"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from '@/libs/util' |
||||||
|
export default { |
||||||
|
name: 'matchProgress', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
id: this.$route.query.id, |
||||||
|
statusList: [ |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
name: '未完成' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 1, |
||||||
|
name: '进行中' |
||||||
|
}, |
||||||
|
{ |
||||||
|
value: 2, |
||||||
|
name: '已完成' |
||||||
|
} |
||||||
|
], |
||||||
|
listData: [], |
||||||
|
multipleSelection: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
this.$get(`${this.api.getContestProgress}/${this.id}`).then(res => { |
||||||
|
this.listData = res.contestProgressList |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
saveData(row){ |
||||||
|
let data = row |
||||||
|
if(data.title.length){ |
||||||
|
if(row.id){ |
||||||
|
this.$put(this.api.editContestProgress,data).then(res => { |
||||||
|
util.successMsg('修改成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addContestProgress,data).then(res => { |
||||||
|
util.successMsg('创建成功') |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
util.warningMsg('请填写标题') |
||||||
|
} |
||||||
|
}, |
||||||
|
entry(){ |
||||||
|
this.$router.push('/permission') |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('此删除操作不可逆，是否确认删除选中项？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$del(`${this.api.deleteContestProgress}/${row.id}`).then(res => { |
||||||
|
util.successMsg('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
addData(){ |
||||||
|
if(this.listData.length){ |
||||||
|
if(this.listData[this.listData.length-1].id){ |
||||||
|
this.listData.push({ |
||||||
|
contestId: this.id, |
||||||
|
id: '', |
||||||
|
title: '', |
||||||
|
description: '', |
||||||
|
status: 0 |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
util.warningMsg('请先保存新数据') |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.listData.push({ |
||||||
|
contestId: this.id, |
||||||
|
id: '', |
||||||
|
title: '', |
||||||
|
description: '', |
||||||
|
status: 0 |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.box{ |
||||||
|
height: calc(100vh - 100px); |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
.plus{ |
||||||
|
padding: 15px 0 0; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
i{ |
||||||
|
font-size: 24px; |
||||||
|
color: #cb221c; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,154 @@ |
|||||||
|
<template> |
||||||
|
<!-- 报名人员 --> |
||||||
|
<div class="page-content" style='padding: 24px'> |
||||||
|
<div class="tool"> |
||||||
|
<ul class="filter"> |
||||||
|
<li> |
||||||
|
<label>搜索：</label> |
||||||
|
<el-input placeholder="请输入姓名/手机号" prefix-icon="el-icon-search" v-model="keyword" clearable size="mini"></el-input> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round @click="exportAll">全部导出</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="exportBatch">批量导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id"> |
||||||
|
<el-table-column type="selection" :selectable="row => row.isDisable!=0" 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="school" label="学校"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="username" label="学生姓名"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="account" label="账号"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="phone" label="手机号"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center" width="170"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.isDisable" |
||||||
|
:active-text="scope.row.isDisable ? '开' : '关'" |
||||||
|
:active-value="1" |
||||||
|
:inactive-value="0" |
||||||
|
style="margin: 0 10px 0 5px" |
||||||
|
@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="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import util from '@/libs/util' |
||||||
|
import Setting from '@/setting' |
||||||
|
export default { |
||||||
|
name: 'matchSignup', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
token: util.local.get(Setting.tokenKey), |
||||||
|
id: this.$route.query.id, |
||||||
|
keyword: '', |
||||||
|
listData: [], |
||||||
|
multipleSelection: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 0 |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword: function(val) { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.getData() |
||||||
|
},500) |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
contestId: this.id |
||||||
|
} |
||||||
|
if(this.keyword) data.name = this.keyword |
||||||
|
this.$get(`${this.api.queryApplicantByCondition}/${this.pageNo}/${this.pageSize}`,data).then(res => { |
||||||
|
this.listData = res.data.applicantList |
||||||
|
this.totals = res.data.total |
||||||
|
this.$refs.table.clearSelection() |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
switchOff(val,row,index) { |
||||||
|
this.$put(`${this.api.disableApplicant}/${row.id}/${val}`) |
||||||
|
.then(res => {}) |
||||||
|
.catch(err => {}); |
||||||
|
}, |
||||||
|
disalbeAllData() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(item => { |
||||||
|
return item.id |
||||||
|
}) |
||||||
|
|
||||||
|
this.$confirm('确定要禁用吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
console.log(11,delList.join()) |
||||||
|
this.$put(`${this.api.disableContests}?ids=${delList.join(',')}`).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
util.successMsg('禁用成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}else{ |
||||||
|
util.errorMsg('请先选择数据 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
exportAll(){ |
||||||
|
location.href = `${this.api.excelExport}/${this.id}/token=${this.token}` |
||||||
|
}, |
||||||
|
exportBatch(){ |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let data = newArr.map(item => { |
||||||
|
return item.id |
||||||
|
}) |
||||||
|
|
||||||
|
// return console.log(11,data) |
||||||
|
location.href = `${this.api.batchExport}?ids=${data.join(',')}/token=${this.token}` |
||||||
|
}else{ |
||||||
|
util.errorMsg('请先选择数据 ！'); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@ |
|||||||
|
import BasicLayout from '@/layouts/home' |
||||||
|
|
||||||
|
const meta = {} |
||||||
|
|
||||||
|
const pre = 'course-' |
||||||
|
|
||||||
|
export default { |
||||||
|
path: '/course', |
||||||
|
name: 'course', |
||||||
|
redirect: { |
||||||
|
name: `${pre}list` |
||||||
|
}, |
||||||
|
meta, |
||||||
|
component: BasicLayout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
name: `${pre}list`, |
||||||
|
path: `list`, |
||||||
|
component: () => import('@/pages/course'), |
||||||
|
meta: { title: '理论课程管理' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}add`, |
||||||
|
path: `add`, |
||||||
|
component: () => import('@/pages/course/courseManagement/add'), |
||||||
|
meta: { title: '新增课程' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}preview`, |
||||||
|
path: `preview`, |
||||||
|
component: () => import('@/pages/course/courseManagement/preview'), |
||||||
|
meta: { title: '课程预览' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}contentSettings`, |
||||||
|
path: `contentSettings`, |
||||||
|
component: () => import('@/pages/course/courseManagement/contentSettings'), |
||||||
|
meta: { title: '内容设置' } |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import BasicLayout from '@/layouts/home' |
||||||
|
|
||||||
|
const meta = {} |
||||||
|
|
||||||
|
const pre = 'information-' |
||||||
|
|
||||||
|
export default { |
||||||
|
path: '/information', |
||||||
|
name: 'information', |
||||||
|
redirect: { |
||||||
|
name: `${pre}list` |
||||||
|
}, |
||||||
|
meta, |
||||||
|
component: BasicLayout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
name: `${pre}list`, |
||||||
|
path: `list`, |
||||||
|
component: () => import('@/pages/information'), |
||||||
|
meta: { title: '资讯管理' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}addArticle`, |
||||||
|
path: `addArticle`, |
||||||
|
component: () => import('@/pages/information/contentManage/addArticle'), |
||||||
|
meta: { title: '新增文章' } |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
import BasicLayout from '@/layouts/home' |
||||||
|
|
||||||
|
const meta = {} |
||||||
|
|
||||||
|
const pre = 'match-' |
||||||
|
|
||||||
|
export default { |
||||||
|
path: '/match', |
||||||
|
name: 'match', |
||||||
|
redirect: { |
||||||
|
name: `${pre}list` |
||||||
|
}, |
||||||
|
meta, |
||||||
|
component: BasicLayout, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
name: `${pre}list`, |
||||||
|
path: `list`, |
||||||
|
component: () => import('@/pages/match'), |
||||||
|
meta: { title: '赛事管理' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}add`, |
||||||
|
path: `add`, |
||||||
|
component: () => import('@/pages/match/add'), |
||||||
|
meta: { title: '创建赛事' } |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: `${pre}manage`, |
||||||
|
path: `manage`, |
||||||
|
component: () => import('@/pages/match/manage'), |
||||||
|
meta: { title: '管理赛事' } |
||||||
|
}, |
||||||
|
] |
||||||
|
}; |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
/** |
||||||
|
* 资讯相关 |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state: { |
||||||
|
tabsName: '2', |
||||||
|
columnId: "" |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
SET_TABS_NAME: (state, name) => { |
||||||
|
state.tabsName = name |
||||||
|
}, |
||||||
|
SET_COLUMN_ID: (state, id) => { |
||||||
|
state.columnId = id |
||||||
|
}, |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
setTabsName({ state,commit },name) { |
||||||
|
commit('SET_TABS_NAME',name) |
||||||
|
}, |
||||||
|
setColumnId({ state,commit },id) { |
||||||
|
commit('SET_COLUMN_ID',id) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
/** |
||||||
|
* 赛事相关 |
||||||
|
* */ |
||||||
|
export default { |
||||||
|
namespaced: true, |
||||||
|
state: { |
||||||
|
matchId: '', |
||||||
|
}, |
||||||
|
mutations: { |
||||||
|
SET_MATCH_ID: (state, id) => { |
||||||
|
state.matchId = id |
||||||
|
}, |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
setMatchId({ state,commit },id) { |
||||||
|
commit('SET_MATCH_ID',id) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue