640 lines
22 KiB
Vue
640 lines
22 KiB
Vue
<template>
|
||
<div class="content-height report-list">
|
||
<div class="title">
|
||
<span>报告列表</span>
|
||
</div>
|
||
<div class="tag-search">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<div class="tag-item">
|
||
<label class="tag-title">关键词:</label>
|
||
<el-input v-model="q.keyContent" placeholder="请输入关键词"></el-input>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<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="6">
|
||
<div class="tag-item">
|
||
<label class="tag-title">报告名称:</label>
|
||
<el-input v-model="q.name" placeholder="请输入报告名称"></el-input>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="6" align="right" class="tag-btns">
|
||
<el-button type="primary" @click="search">查询</el-button>
|
||
<el-button type="default" @click="reset">重置</el-button>
|
||
</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-row>
|
||
</div>
|
||
<div class="table">
|
||
<el-row>
|
||
<el-col :span="4" class="treeList">
|
||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||
</el-input>
|
||
<el-tree
|
||
class="filter-tree"
|
||
:data="treeData"
|
||
show-checkbox
|
||
node-key="id"
|
||
default-expand-all
|
||
:filter-node-method="filterNode"
|
||
ref="tree"
|
||
@check="getHalfCheckedNode"
|
||
>
|
||
</el-tree>
|
||
</el-col>
|
||
<el-col :span="19">
|
||
<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 class="keyContent">{{getKeyContent(row.keyContent)}}</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"/>
|
||
</el-col>
|
||
</el-row>
|
||
</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: [],
|
||
name:'',
|
||
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: '',
|
||
filterText:'',
|
||
treeData: [
|
||
],
|
||
checkedKeys:[]
|
||
}
|
||
},
|
||
watch: {
|
||
filterText(val) {
|
||
this.$refs.tree.filter(val);
|
||
}
|
||
},
|
||
methods: {
|
||
getKeyContent(list){
|
||
let keyContent=[]
|
||
list = JSON.parse(list)
|
||
list.forEach(item => {
|
||
keyContent.push(item.text)
|
||
})
|
||
keyContent = keyContent.toString().replace(/,/g, '/');
|
||
if(keyContent=='') keyContent='---'
|
||
// if(keyContent.length>15){
|
||
// keyContent=keyContent.slice(0,15) +'...'
|
||
// }
|
||
return keyContent
|
||
},
|
||
getHalfCheckedNode(node,data){
|
||
this.checkedKeys=data.checkedKeys
|
||
this.reportList()
|
||
},
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.label.indexOf(value) !== -1;
|
||
},
|
||
init () {
|
||
this.getTreeLabel()
|
||
this.labelList()
|
||
this.reportDateList()
|
||
this.reportList()
|
||
},
|
||
getTreeLabel(){
|
||
this.$api.report.labelList().then(res => {
|
||
this.treeData=res.data
|
||
})
|
||
},
|
||
|
||
// 标签列表
|
||
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,labelId:this.checkedKeys}).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>
|
||
.keyContent{
|
||
display: inline-block;
|
||
width: 50px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.treeList{
|
||
padding: 20px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
|
||
margin-right: 20px;
|
||
.filter-tree{
|
||
margin-top: 20px;
|
||
}
|
||
|
||
}
|
||
.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: 13px;
|
||
// 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>
|