|
<template>
<Card>
<span slot="title">考试公告</span>
<div slot="content">
<div class="examination_management">
<div class="main">
<!-- 表格 -->
<div class="table">
<el-table
style="width: 99.9%;min-height: 400px;"
stripe
:header-cell-style="headStyle"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
@row-click="getDetails"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="title" label="标题" width="300">
</el-table-column>
<el-table-column prop="publisher" label="来源" width="300">
</el-table-column>
<el-table-column prop="publish_time" label="发布时间" show-overflow-tooltip>
</el-table-column>
</el-table>
<div class="btm_tools">
<el-button size="small" @click="toggleSelection()"
>取消选择</el-button
>
<we-Pagination
:currentPage="page"
:pageSize="pageSize"
:total="total"
@currentChange="currentChange($event)"
@pageSizeChange="pageSizeChange($event)"
>
></we-Pagination
>
</div>
</div>
</div>
</div>
</div>
</Card>
</template>
<script>
import Card from "@/components/Card";
import WePagination from "@/components/WePagination";
import {
getAnnouncementList, //获取公告列表
} from "@/api/home";
import local from "@/utils/local";
export default {
components: {
Card,
WePagination,
},
data() {
return {
tableData: [],
multipleSelection: [],
// 分页数据
total: 20, // 总数据条数
pageSize: 8, // 每页条数
page: 1, // 当前页
}
},
created() {
this.fetchData();
},
methods:{
// 获取数据
async fetchData() {
// 发送请求 获取列表
let res = await getAnnouncementList({
type: 2,
curPage: 0,
pageSize: 10,
});
// 解构数据
let { code, data } = res;
// 边界判断
if (!data.res.list.length && this.page !== 1) {
this.pageNum -= 1;
this.fetchData();
}
// 赋值渲染
if (code === 200) {
this.total = data.res.total;
this.tableData = data.res.list;
}
},
// 取消选择
toggleSelection(rows) {
this.$refs.multipleTable.clearSelection();
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 表格头部样式回调
headStyle() {
return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
},
getDetails(row) {
local.set("ggdetails", row);
this.$router.push({
path:"/details",
});
}
}
}
</script>
<style lang="less" scoped>
/deep/.el-card__body {
padding: 0;
.examination_management {
display: flex;
.main {
padding: 10px;
flex: 1;
height: 100%;
.btm_tools {
margin: 16px 0 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
}
</style>
|