<template>
|
<div class="forum-content">
|
<h1 class="h1">微讲堂</h1>
|
<Statistics :list="list"></Statistics>
|
|
<div class="header">
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="关键词搜索" style="" >
|
<el-input style="width:385px" size="small" v-model="keyword" placeholder="请输入讲堂标题进行查找"></el-input>
|
</el-form-item>
|
<el-form-item label="发布时间" style="" >
|
<el-date-picker
|
v-model="time"
|
@change="changeTime"
|
type="datetimerange"
|
format="yyyy-MM-dd HH:MM:SS"
|
value-format="yyyy-MM-dd HH:MM:SS"
|
range-separator="至"
|
:clearable="false"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch">查询</el-button>
|
<el-button @click="Reset" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 操作按钮 -->
|
<div class="operation-btn">
|
<el-button size="small" type="primary" @click="$router.push('/addForum')">添加</el-button>
|
</div>
|
|
<div class="custom-h">
|
<div class="card-content" v-for="(item,index) in cardData" :key="index">
|
<div class="title">{{item.title}}</div>
|
<div class="icon" v-if="item.cover !== ''"><img :src="item.cover"></div>
|
<div class="icon" v-else><img src="../../assets/image/empty.png"></div>
|
<div class="text-details">
|
<span><i class="el-icon-edit"></i> {{item.scholars}}人参与学习</span>
|
<span><i class="el-icon-view"></i> {{item.viewNum}}浏览量</span>
|
</div>
|
<div class="hover-box">
|
<div>
|
<p>
|
<span @click="goDetails(item.id)">查看</span>
|
<span @click="edit(item.id)">编辑</span>
|
<span @click="deletes(item.id)">删除</span><br>
|
<span>{{item.createdAt}} 发布</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="card-content kong"></div>
|
<div class="card-content kong"></div>
|
<div class="card-content kong"></div>
|
</div>
|
<!-- 分页 -->
|
<div class="page">
|
<el-pagination
|
:current-page="paginationParams.currentPage"
|
:page-size="paginationParams.pageSize"
|
:page-sizes="[5, 10, 20, 50, 100]"
|
background
|
layout="total,prev,pager,next,sizes,jumper"
|
:total="paginationParams.total"
|
@size-change="onPageSizeChange"
|
@current-change="onPaginationChange">
|
</el-pagination>
|
</div>
|
<detailsModel v-model="isShow" :editId="editId" @change="isShow = false" @success="onSuccess"></detailsModel>
|
</div>
|
</template>
|
|
<script>
|
import detailsModel from "./forumComponents/details.vue"; //详情
|
export default {
|
components: {detailsModel},
|
data() {
|
return {
|
isShow:false,
|
list: [
|
{
|
key: "classroomCount",
|
name: "开课次数",
|
num: 0,
|
Company: "次",
|
},
|
{
|
key: "learnCount",
|
name: "学习人数",
|
num: 0,
|
Company: "人",
|
}
|
],
|
keyword:'',
|
createdAtBegin:'',
|
createdAtEnd:'',
|
cardData: [],
|
time:'',
|
editId:0,
|
/** 分页参数 */
|
paginationParams: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0
|
},
|
}
|
},
|
|
mounted() {
|
this.getStatistics();
|
this.init();
|
|
},
|
|
methods:{
|
edit(id) {
|
this.$router.push({path:"/addForum",query:{id:id}})
|
},
|
goDetails(id) {
|
this.editId = id;
|
this.isShow = true;
|
},
|
onSuccess() {
|
this.isShow = false;
|
},
|
changeTime() {
|
this.createdAtBegin = this.time[0];
|
this.createdAtEnd = this.time[1];
|
},
|
/** pageSize 改变时会触发 */
|
onPageSizeChange (pageSize) {
|
this.paginationParams.pageSize = pageSize;
|
this.init();
|
},
|
/** 分页 */
|
onPaginationChange (page) {
|
this.paginationParams.currentPage = page;
|
this.init();
|
},
|
// 获取数据
|
init() {
|
let v = {
|
pageNum: this.paginationParams.currentPage,
|
pageSize: this.paginationParams.pageSize,
|
keyword:this.keyword,
|
createdAtBegin:this.createdAtBegin,
|
createdAtEnd:this.createdAtEnd
|
}
|
|
this.$api.post("fms/classroom/page", v, (e) => {
|
this.paginationParams.total = e.total;
|
this.cardData = e.records || [];
|
// this.tds.map((item,index) => {
|
// item.index = (this.paginationParams.currentPage-1) * this.paginationParams.pageSize + index + 1
|
// })
|
});
|
},
|
Reset() {
|
this.keyword = '';
|
this.time = [];
|
this.createdAtBegin = '';
|
this.createdAtEnd = '';
|
this.paginationParams.currentPage = 1;
|
this.init();
|
},
|
|
onSearch() {
|
this.paginationParams.currentPage = 1;
|
this.init();
|
},
|
|
deletes(id) {
|
this.$confirm('确定要删除该条数据吗？删除后将无法恢复?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
this.$api.del(`fms/classroom/delete?id=${id}`, {id:id}, (e) => {
|
demo.toast("删除成功")
|
this.init();
|
this.getStatistics();
|
});
|
})
|
},
|
|
//统计详情
|
getStatistics() {
|
this.$api.get("fms/classroom/statistics", {}, (e) => {
|
for(let key in e){
|
this.list.map(item=>{
|
if(key ===item.key){
|
item.num = e[key]
|
}
|
if(key ===item.keyTwo) {
|
item.day = e[key]
|
}
|
})
|
}
|
});
|
},
|
}
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.forum-content {
|
overflow-y: auto;
|
.h1 {
|
font-size: 18px;
|
height: 40px;
|
line-height: 40px;
|
}
|
}
|
.custom-h {
|
min-height: 500px;
|
display: flex;
|
justify-content: space-evenly;
|
flex-flow: wrap;
|
padding-bottom: 20px;
|
padding: 0px 14px 20px 14px;
|
}
|
.header {
|
padding-top: 20px;
|
}
|
.card-content {
|
width: 350px;
|
height: 190px;
|
padding: 10px 15px;
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
position: relative;
|
margin-top: 15px;
|
cursor: pointer;
|
.title {
|
width: 100%;
|
color: #333;
|
font-size: 14px;
|
line-height: 25px;
|
height: 50px;
|
text-overflow: -o-ellipsis-lastline;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
.icon {
|
width: 100%;
|
height: 100px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.text-details {
|
color: #888;
|
font-size: 13px;
|
padding-top: 10px;
|
line-height: 28px;
|
height: 28px;
|
display: flex;
|
justify-content: space-between;
|
|
}
|
.hover-box {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
z-index: 2;
|
background-color: rgba(0,0,0,.6);
|
left: 0;
|
top: 0;
|
color: #fff;
|
text-align: center;
|
transition:visibility .5s, opacity .5s;
|
visibility:hidden;
|
opacity: 0;
|
div {
|
padding-top: 50px;
|
p {
|
padding-bottom: 10px;
|
width: 270px;
|
margin: auto;
|
span {
|
margin-right: 10px;
|
margin-bottom: 10px;
|
display: inline-block;
|
}
|
span:hover {
|
color: #409EFF;
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
}
|
.card-content:hover .hover-box{
|
visibility:visible;
|
opacity: 1;
|
}
|
.kong {
|
opacity: 0;
|
height: 2px !important;
|
}
|
.page {
|
padding: 20px 0;
|
text-align: center;
|
}
|
</style>
|
