<template> <div class="commonList"> <ul class="left_bar"> <li v-for="(item, index) in leftBar" :key="index" :class="index == activeBar ? 'activeBar' : ''" @click="changeActive(index)" > {{ item.name }} </li> </ul> <div v-loading="listLoading" class="right_list"> <div class="list_title"> {{ leftBar[activeBar].name }} </div> <ul v-if="tableData.length > 0" class="list"> <li v-for="(item, index) in tableData" :key="index" title="点击预览pdf" @click="setPdf(item)" > <div class="left_text"> <div class="circle"></div> <div class="title">{{ item.articleTitle }}</div> </div> <div class="rig_date"> {{ item.createTime }} </div> </li> </ul> <el-empty v-else description="暂无数据"></el-empty> <div v-if="pageSize && total > 10" class="pagination-footer"> <!-- <span class="description">{{ description }}</span> --> <el-pagination background :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination> </div> </div> <!-- 弹窗 --> <pdf-dialog ref="pdfDialog" :cur-pdf="curPdf" :pdf-src="pdfSrc" ></pdf-dialog> </div> </template> <script> import { articleList } from "@/api/operation-management" import paginationMixin from "@/components/TabComponents/mixin" import PdfDialog from "../PdfDialog/index.vue" export default { components: { PdfDialog }, mixins: [paginationMixin], data() { return { activeBar: 0, listLoading: false, leftBar: [ { name: "筛查技术方案", }, { name: "筛查指南", }, { name: "学术成果", }, { name: "项目进展与成果", }, ], tableData: [], curPdf: { articleTitle: "测试pdf" }, pdfSrc: "", } }, mounted() { if (this.$route.query.tabIndex) { this.activeBar = this.$route.query.tabIndex } this.getArticleList() }, methods: { changeActive(i) { this.activeBar = i this.getArticleList() // this.$router.replace("/scientificresearch") }, // 获取科学研究 getArticleList() { this.listLoading = true let params = { size: this.pageSize, current: this.pageIndex, moduleType: "5", articleType: this.activeBar - 0 + 1, } articleList(params) .then((res) => { if (res.code == 1) { this.tableData = [...res.data.records] this.total = res.data.total this.listLoading = false } }) .catch((e) => { this.listLoading = false }) }, setPdf(item) { this.$refs.pdfDialog.showPdf = true this.curPdf = item this.pdfSrc = "https://ds.cixincloud.com/geca-api/disease-data/file/info/" + item.filePath[0].bucketName + "/" + item.filePath[0].uuidName }, }, } </script> <style lang="scss" scoped> .commonList { display: flex; justify-content: space-between; .left_bar { width: 188px; height: 760px; background: #ffffff; border-radius: 4px; padding: 20px 0; li { width: 188px; height: 52px; font-size: 16px; font-family: AlibabaPuHuiTiM; display: flex; justify-content: center; align-items: center; cursor: pointer; &:hover { background: rgba(78, 104, 255, 0.04); } // background: rgba(78, 104, 255, 0.1); } .activeBar { color: #4e68ff; background: rgba(78, 104, 255, 0.1); } } .right_list { width: calc(100% - 208px); height: 760px; background: #ffffff; border-radius: 4px; padding: 32px; .list_title { height: 37px; font-size: 16px; font-family: AlibabaPuHuiTiR; color: rgba(0, 0, 0, 0.8); border-bottom: 1px solid #efefef; } .list { li { height: 22px; font-size: 16px; font-family: AlibabaPuHuiTiR; color: #333333; line-height: 22px; margin-top: 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; &:hover { background: rgba(78, 104, 255, 0.04); .left_text .title { color: #4e68ff; } } .left_text { display: flex; align-items: center; .circle { width: 6px; height: 6px; background: #4e68ff; border-radius: 50%; margin-right: 8px; } } .rig_date { font-size: 14px; font-family: Roboto-Regular, Roboto; font-weight: 400; color: #999999; } } } } } </style>