560 lines
21 KiB
Vue
560 lines
21 KiB
Vue
<template>
|
|
<div class="content-height report-list">
|
|
<div class="title">
|
|
<span>报告列表</span>
|
|
</div>
|
|
<div class="tag-search">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<div class="tag-item">
|
|
<label class="tag-title">报告年份</label>
|
|
<el-select v-model="q.year" multiple collapse-tags placeholder="请选择报告年份">
|
|
<template v-for="item in yearList">
|
|
<el-option :label="item" :value="item" :key="item"></el-option>
|
|
</template>
|
|
</el-select>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<div class="tag-item">
|
|
<el-tooltip :content="tagData[1].name" placement="top">
|
|
<label class="tag-title">{{ tagData[1].name }}</label>
|
|
</el-tooltip>
|
|
<div class="tag-show" :class="{'active': tagData[1].tagShow}">
|
|
<el-checkbox :indeterminate="tagData[1].isIndeterminate" v-model="tagData[1].checkAll"
|
|
@change="(val) => handleCheckAllChange(val, 1)">全部
|
|
</el-checkbox>
|
|
<el-checkbox-group v-model="q.labelOneId"
|
|
@change="(val) => handleCheckedTagsChange(val, 1)">
|
|
<template v-for="item in tagData[1].tags">
|
|
<el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
|
|
</template>
|
|
</el-checkbox-group>
|
|
<i @click="switchTagShow(1)"
|
|
:class="{'el-icon-arrow-down': !tagData[1].tagShow, 'el-icon-arrow-up': tagData[1].tagShow}"></i>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<div class="tag-item">
|
|
<el-tooltip :content="tagData[2].name" placement="top">
|
|
<label class="tag-title">{{ tagData[2].name }}</label>
|
|
</el-tooltip>
|
|
<div class="tag-show" :class="{'active': tagData[2].tagShow}">
|
|
<el-checkbox :indeterminate="tagData[2].isIndeterminate" v-model="tagData[2].checkAll"
|
|
@change="(val) => handleCheckAllChange(val, 2)">全部
|
|
</el-checkbox>
|
|
<el-checkbox-group v-model="q.labelTwoId"
|
|
@change="(val) => handleCheckedTagsChange(val, 2)">
|
|
<template v-for="item in tagData[2].tags">
|
|
<el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
|
|
</template>
|
|
</el-checkbox-group>
|
|
<i @click="switchTagShow(2)"
|
|
:class="{'el-icon-arrow-down': !tagData[2].tagShow, 'el-icon-arrow-up': tagData[2].tagShow}"></i>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<div class="tag-item">
|
|
<el-tooltip :content="tagData[3].name" placement="top">
|
|
<label class="tag-title">{{ tagData[3].name }}</label>
|
|
</el-tooltip>
|
|
<div class="tag-show" :class="{'active': tagData[3].tagShow}">
|
|
<el-checkbox :indeterminate="tagData[3].isIndeterminate" v-model="tagData[3].checkAll"
|
|
@change="(val) => handleCheckAllChange(val, 3)">全部
|
|
</el-checkbox>
|
|
<el-checkbox-group v-model="q.labelThreeId"
|
|
@change="(val) => handleCheckedTagsChange(val, 3)">
|
|
<template v-for="item in tagData[3].tags">
|
|
<el-checkbox :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
|
|
</template>
|
|
</el-checkbox-group>
|
|
<i @click="switchTagShow(3)"
|
|
:class="{'el-icon-arrow-down': !tagData[3].tagShow, 'el-icon-arrow-up': tagData[3].tagShow}"></i>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="tag-item">
|
|
<label class="tag-title">搜索:</label>
|
|
<el-input v-model="q.keyContent" placeholder="请输入搜索内容"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12" align="right" class="tag-btns">
|
|
<el-button type="primary" @click="search">查询</el-button>
|
|
<el-button type="default" @click="reset">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="table">
|
|
<vxe-table :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 420px)'">
|
|
<vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
|
|
<template #default="{ row, rowIndex }">
|
|
{{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column show-header-overflow field="name" title="报告名称">
|
|
<template #default="{ row, rowIndex }">
|
|
<div class="row-info">
|
|
<img v-if="row.fileType === '3'" class="icon-file-type" src="@/assets/imgs/icon-pdf.png" alt="">
|
|
<img v-if="row.fileType === '4'" class="icon-file-type" src="@/assets/imgs/icon-doc.png" alt="">
|
|
<img v-if="row.fileType === '1'" class="icon-file-type" src="@/assets/imgs/icon-ppt.png" alt="">
|
|
<img v-if="row.fileType === '2'" class="icon-file-type" src="@/assets/imgs/icon-excel.png" alt="">
|
|
|
|
<div class="row-text">
|
|
<label class="row-title" @click="goReportDetail(row)">
|
|
<el-tooltip :content="row.name" placement="top-start">
|
|
<span>{{row.name}}</span>
|
|
</el-tooltip>
|
|
</label>
|
|
<div class="tag-info">
|
|
<span class="icon-tag-item"><img src="@/assets/imgs/icon-time.png"
|
|
alt=""><span>{{row.year}}</span></span>
|
|
<span class="icon-tag-item"><img src="@/assets/imgs/icon-tag01.png"
|
|
alt=""><span>{{row.labelOneName}}</span></span>
|
|
<span class="icon-tag-item"><img src="@/assets/imgs/icon-tag02.png"
|
|
alt=""><span>{{row.labelTwoName}}</span></span>
|
|
<span class="icon-tag-item"><img src="@/assets/imgs/icon-tag03.png"
|
|
alt=""><span>{{row.labelThreeName}}</span></span>
|
|
<!--<span class="icon-tag-item"><span>{{(row.fileSize / 1024 / 1024).toFixed(2) }}MB</span></span>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</vxe-column>
|
|
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button type="text" @click="previewRow(row)">预览</el-button>
|
|
<!-- <el-button type="text" @click="downloadRow(row)">下载</el-button>-->
|
|
</template>
|
|
</vxe-column>
|
|
</vxe-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="q.pageNo"
|
|
:page-sizes="[5, 10, 20]"
|
|
:page-size="q.pageSize"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total"/>
|
|
</div>
|
|
|
|
<!--预览-->
|
|
<el-dialog title="预览" :visible.sync="dialogPreview" width="1000px" :close-on-click-modal="false"
|
|
:close-on-press-escape="false" :fullscreen="fullscreen">
|
|
<div slot="title" class="dialog-title">
|
|
<span>预览</span>
|
|
<img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !fullscreen">
|
|
<img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen">
|
|
</div>
|
|
<div class="preview-dialog-body" :class="{'active': fullscreen}">
|
|
<!-- <img v-if="!fullscreen" class="full-screen" src="@/assets/imgs/icon-full.png" alt="" @click="fullscreen = !fullscreen">
|
|
<img v-else class="full-screen" src="@/assets/imgs/icon-small.png" alt="" @click="fullscreen = !fullscreen"> -->
|
|
<!-- 这里用v-if是让水印更新 -->
|
|
<el-scrollbar
|
|
v-if="dialogPreview"
|
|
v-watermark="{ text: watermarkText }">
|
|
<div class="preview-content" v-html="content"></div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {downloadFile} from "@/utils/downloadFile";
|
|
import {formatDate} from '@/utils/date'
|
|
|
|
export default {
|
|
name: "ReportList",
|
|
data() {
|
|
return {
|
|
watermarkText: '', // 水印
|
|
fullscreen: false,
|
|
q: {
|
|
keyContent: '',
|
|
year: [],
|
|
labelOneId: [],
|
|
labelTwoId: [],
|
|
labelThreeId: [],
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
},
|
|
total: 0,
|
|
tableData: [],
|
|
yearList: [],
|
|
tagData: {
|
|
1: {
|
|
name: '',
|
|
tagShow: false,
|
|
tags: [],
|
|
isIndeterminate: true,
|
|
checkAll: false,
|
|
},
|
|
2: {
|
|
name: '',
|
|
tagShow: false,
|
|
tags: [],
|
|
isIndeterminate: true,
|
|
checkAll: false,
|
|
},
|
|
3: {
|
|
name: '',
|
|
tagShow: false,
|
|
tags: [],
|
|
isIndeterminate: true,
|
|
checkAll: false,
|
|
},
|
|
},
|
|
dialogPreview: false, // 预览
|
|
content: '',
|
|
}
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.labelList();
|
|
this.reportDateList();
|
|
this.reportList();
|
|
},
|
|
// 标签列表
|
|
labelList() {
|
|
this.$api.report.labelList().then(({data}) => {
|
|
this.tagData[1].name = data.labelOne.name;
|
|
this.tagData[2].name = data.labelTwo.name;
|
|
this.tagData[3].name = data.labelThree.name;
|
|
this.tagData[1].tags = data.labelOne.childList;
|
|
this.tagData[2].tags = data.labelTwo.childList;
|
|
this.tagData[3].tags = data.labelThree.childList;
|
|
})
|
|
},
|
|
search(){
|
|
this.q.pageNo = 1;
|
|
this.reportList();
|
|
},
|
|
// 列表
|
|
reportList() {
|
|
this.$api.report.reportList(this.q).then(({data}) => {
|
|
this.tableData = data.records;
|
|
this.total = data.total;
|
|
this.q.pageNo = data.current;
|
|
this.q.pageSize = data.size;
|
|
if(!data.records.length && this.q.pageNo !== 1){
|
|
this.q.pageNo = 1;
|
|
this.reportList();
|
|
}
|
|
})
|
|
},
|
|
// 监听全选按钮
|
|
handleCheckAllChange(val, type) {
|
|
switch (type) {
|
|
case 1:
|
|
this.q.labelOneId = val ? this.tagData[type].tags.map(item => item.id) : [];
|
|
break;
|
|
case 2:
|
|
this.q.labelTwoId = val ? this.tagData[type].tags.map(item => item.id) : [];
|
|
break;
|
|
case 3:
|
|
this.q.labelThreeId = val ? this.tagData[type].tags.map(item => item.id) : [];
|
|
break;
|
|
}
|
|
this.tagData[type].isIndeterminate = !val;
|
|
},
|
|
// 监听group checkbox
|
|
handleCheckedTagsChange(val, type) {
|
|
this.tagData[type].checkAll = (val.length === this.tagData[type].tags.length);
|
|
this.tagData[type].isIndeterminate = val.length < this.tagData[type].tags.length;
|
|
},
|
|
// 切换展开隐藏
|
|
switchTagShow(type) {
|
|
this.tagData[type].tagShow = !this.tagData[type].tagShow;
|
|
},
|
|
// 日期列表
|
|
reportDateList() {
|
|
this.$api.report.reportDateList().then(({data}) => {
|
|
this.yearList = data.list;
|
|
})
|
|
},
|
|
// 单页数据量
|
|
handleSizeChange(val) {
|
|
this.q.pageSize = val;
|
|
this.q.pageNo = 1;
|
|
this.reportList();
|
|
},
|
|
// 第几页
|
|
handleCurrentChange(val) {
|
|
this.q.pageNo = val;
|
|
this.reportList();
|
|
},
|
|
// 预览
|
|
previewRow(row) {
|
|
this.fullscreen = false;
|
|
// 更新预览水印的时间戳
|
|
this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`;
|
|
this.$api.report.reportGetReportHtmlId({id: row.id}).then(({data}) => {
|
|
this.content = data.content;
|
|
this.dialogPreview = true;
|
|
})
|
|
},
|
|
// 重置
|
|
reset() {
|
|
this.q = {
|
|
keyContent: '',
|
|
year: [],
|
|
labelOneId: [],
|
|
labelTwoId: [],
|
|
labelThreeId: [],
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
};
|
|
this.total = 0;
|
|
this.tableData = [];
|
|
this.tagData[1].checkAll = false;
|
|
this.tagData[1].isIndeterminate = true;
|
|
this.tagData[2].checkAll = false;
|
|
this.tagData[2].isIndeterminate = true;
|
|
this.tagData[3].checkAll = false;
|
|
this.tagData[3].isIndeterminate = true;
|
|
this.reportList();
|
|
},
|
|
// 下载
|
|
downloadRow(row) {
|
|
// this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
|
|
// confirmButtonText: '确定',
|
|
// cancelButtonText: '取消',
|
|
// type: 'warning'
|
|
// }).then(() => {
|
|
this.$api.report.reportDownload({fileId: row.fileId}).then(res => {
|
|
downloadFile(res);
|
|
})
|
|
// })
|
|
},
|
|
// 跳转到详情
|
|
goReportDetail(row) {
|
|
this.$router.push({path: '/report/detail', query: {id: this.$route.query.id, row: JSON.stringify(row)}});
|
|
}
|
|
},
|
|
created() {
|
|
this.init();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.report-list {
|
|
.title {
|
|
border-bottom: 1px solid #EBEEF5;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
margin: 0 18px 0 22px;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
}
|
|
|
|
.tag-search {
|
|
padding-top: 9px;
|
|
|
|
::v-deep .el-date-picker,
|
|
::v-deep .el-input {
|
|
width: 240px;
|
|
}
|
|
|
|
.tag-item {
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
|
|
.year {
|
|
::v-deep .el-input__inner {
|
|
padding: 0 15px !important;
|
|
}
|
|
}
|
|
|
|
label.tag-title {
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
color: #646464;
|
|
display: inline-block;
|
|
width: 112px;
|
|
height: 19px;
|
|
line-height: 19px;
|
|
padding-left: 48px;
|
|
border-right: 1px solid #BFBFBF;
|
|
margin-right: 10px;
|
|
margin-top: 2.5px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tag-show {
|
|
flex: 1;
|
|
margin-right: 28px;
|
|
height: 19px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
&.active {
|
|
height: auto;
|
|
}
|
|
|
|
::v-deep .check-active{
|
|
.el-checkbox__label{
|
|
color: #434343;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-checkbox {
|
|
margin-right: 15px;
|
|
color: #434343;
|
|
}
|
|
|
|
::v-deep .el-checkbox__label {
|
|
min-width: 80px;
|
|
}
|
|
|
|
::v-deep .el-checkbox-group {
|
|
display: inline;
|
|
}
|
|
|
|
.el-icon-arrow-down,
|
|
.el-icon-arrow-up {
|
|
color: #C0C4CC;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag-btns {
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
|
|
.table {
|
|
margin: 0 14px 0 13px;
|
|
|
|
.row-info {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.icon-file-type {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 21px;
|
|
}
|
|
|
|
.row-text {
|
|
width: calc(100% - 48px - 21px);
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column;
|
|
text-align: left;
|
|
|
|
.row-title {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: #1890FF;
|
|
}
|
|
}
|
|
|
|
.tag-info {
|
|
.icon-tag-item {
|
|
margin-left: 12px;
|
|
|
|
img {
|
|
width: 12px;
|
|
margin-right: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
min-width: 80px;
|
|
font-size: 12px;
|
|
color: #8C8C8C;
|
|
font-weight: 500;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-pagination {
|
|
margin-top: 13px;
|
|
padding-left: 20px;
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.dialog-title{
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.full-screen{
|
|
cursor: pointer;
|
|
width: 24px;
|
|
height: 24px;
|
|
vertical-align: middle;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.preview-dialog-body {
|
|
padding: 9px 25px 17px 22px;
|
|
height: 60vh;
|
|
position: relative;
|
|
&.active{
|
|
height: calc(100vh - 52px);
|
|
}
|
|
.full-screen{
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 10;
|
|
right: 35px;
|
|
top: 10px;
|
|
width: 24px;
|
|
height: 24px;
|
|
//&:hover{
|
|
// color: #199BFF;
|
|
//}
|
|
}
|
|
|
|
::v-deep .el-scrollbar {
|
|
height: 100%;
|
|
.el-scrollbar__wrap{
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.el-scrollbar__view {
|
|
padding: 0 !important;
|
|
|
|
.preview-content{
|
|
img {
|
|
max-width: 100% !important;
|
|
}
|
|
table{
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|