【修改】调整下载传参
This commit is contained in:
zhoulingpo
@@ -0,0 +1,19 @@
|
||||
import { instance as request } from '@/utils/request'
|
||||
|
||||
export default {
|
||||
// 新增|编辑
|
||||
getList(data) {
|
||||
return request({
|
||||
url: '/api/message/list',
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
},
|
||||
allRead(data) {
|
||||
return request({
|
||||
url: '/api/message/allRead',
|
||||
method: 'get',
|
||||
params:data
|
||||
})
|
||||
},
|
||||
}
|
||||
@@ -102,8 +102,9 @@ export default {
|
||||
// 获取报告预览
|
||||
reportGetReportHtmlId (data) {
|
||||
return request({
|
||||
url: `/api/report/getReportHtml/${data.id}`,
|
||||
method: 'GET'
|
||||
url: `/api/report/getReportHtml`,
|
||||
method: 'GET',
|
||||
params:data
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@@ -28,7 +28,24 @@ const routes = [
|
||||
name:'monitorViews',
|
||||
component: () => import('../../views/userCenter/processCenter/monitorProcesses/monitorDetail.vue')
|
||||
},
|
||||
|
||||
// 站内信
|
||||
{
|
||||
path: 'mail',
|
||||
name: 'mail',
|
||||
component: () => import('../../views/userCenter/mail/index'),
|
||||
meta: {
|
||||
crumb: ['站内信']
|
||||
}
|
||||
},
|
||||
// 我的收藏
|
||||
{
|
||||
path: 'collect',
|
||||
name: 'collect',
|
||||
component: () => import('../../views/userCenter/collect/index'),
|
||||
meta: {
|
||||
crumb: ['我的收藏']
|
||||
}
|
||||
},
|
||||
],
|
||||
|
||||
},
|
||||
|
||||
@@ -55,8 +55,8 @@
|
||||
</div>
|
||||
<div class="report-download">
|
||||
<span>报告详情</span>
|
||||
<el-button type="primary" v-if="row.downPower==1" @click="downloadRow(file)"
|
||||
:disabled="showText">报告下载</el-button>
|
||||
<el-button v-if="row.downPower==1" @click="downloadRow(file)"
|
||||
:disabled="showText" size="mini" class="checkBtn">报告下载</el-button>
|
||||
</div>
|
||||
<div class="preview-box" v-watermark="{ text: watermarkText }">
|
||||
<div class="preview-list" >
|
||||
@@ -522,4 +522,13 @@ export default {
|
||||
.bgColor{
|
||||
background-color: #F2F6FC;
|
||||
}
|
||||
.checkBtn {
|
||||
padding: 5px 20px !important;
|
||||
background-color:#1890FF;
|
||||
color: #fff;
|
||||
}
|
||||
.el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{
|
||||
background-color: #82bffc;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -120,6 +120,7 @@
|
||||
<el-upload :disabled="formControl" action="/library/api/report/uploadFile" :show-file-list="true"
|
||||
:before-upload="beforeUploadFile" :on-remove="handleRemove"
|
||||
:file-list="fileList" multiple :on-success="onSuccess"
|
||||
:on-preview="handlePreview"
|
||||
drag :class="{'disable':formControl}">
|
||||
<i class="el-icon-upload" ></i>
|
||||
<div class="el-upload__text">点击或拖拽上传文件</div>
|
||||
@@ -297,7 +298,20 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePreview(file){
|
||||
let lastName=file.name.split('.')
|
||||
let list=['xls','xlsx']
|
||||
if(list.indexOf(lastName[lastName.length-1].toLower)==-1){
|
||||
if(this.form.id|| this.form.reportId ) {
|
||||
this.$api.report.reportDownload({reportId: this.form.id || this.form.reportId, fileId: file.id}).then(res => {
|
||||
downloadFile(res)
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.$message.warning("当前.xls,.xlsx文件不支持下载")
|
||||
}
|
||||
|
||||
},
|
||||
changeDate(d){
|
||||
this.form.secrecyLast = new Date(d)
|
||||
},
|
||||
|
||||
@@ -0,0 +1,788 @@
|
||||
<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-row>
|
||||
</div>
|
||||
<el-row class="tag-btn">
|
||||
|
||||
<el-button v-if="!isAdmin" type="primary" @click="permissionApp(false)">申请权限</el-button>
|
||||
|
||||
<div class="tag-right">
|
||||
排序：
|
||||
<el-button @click="clickBtn(1)" :class="{'checkClass':isShowbg1}">时间</el-button>
|
||||
<el-button @click="clickBtn(2)" class="clickNum" :class="{'checkClass':isShowbg2}">点击量</el-button>
|
||||
<el-button @click="clickBtn(3)" :class="{'checkClass':isShowbg3}">下载量</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
|
||||
<div class="table">
|
||||
<el-row>
|
||||
<el-col :span="4" class="treeList ">
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="filterText">
|
||||
</el-input>
|
||||
<div class="lef-tree scroll-myself">
|
||||
<el-tree
|
||||
class="filter-tree"
|
||||
:data="treeData"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
@check="getHalfCheckedNode"
|
||||
|
||||
>
|
||||
<template slot-scope="{node}">
|
||||
<!-- <span v-if="node.label.length <= 10">{{ node.label }}</span>-->
|
||||
<!-- <el-tooltip :content="node.label" placement="top">-->
|
||||
<div :title="node.label" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 150px">
|
||||
{{ node.label }}
|
||||
</div>
|
||||
<!-- </el-tooltip>-->
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="20" style="padding-left: 15px">
|
||||
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
|
||||
v-table-min-height="'calc(100vh - 320px)'"
|
||||
@checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<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 }">
|
||||
<!-- <label class="row-title" >-->
|
||||
<!-- <el-tooltip :content="row.name" placement="top-start">-->
|
||||
<span class="report-name"> {{ row.name }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="mainContent" title="摘要"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="reportRating" title="报告评级">
|
||||
<template #default="{row}">
|
||||
<el-rate
|
||||
v-model="row.reportRating/2"
|
||||
disabled
|
||||
text-color="#ff9900"
|
||||
>
|
||||
</el-rate>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="thumbUp" title="点赞数">
|
||||
<template #default="{ row }">
|
||||
{{row.thumbUp || 0}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="clicks" title="点击量">
|
||||
<template #default="{ row }">
|
||||
{{row.clicks || 0}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="download" title="下载量">
|
||||
<template #default="{ row }">
|
||||
{{row.download || 0}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="uploader" title="上传人"></vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="text" v-if="row.collect" @click="collectReport(row,'y')">收藏</el-button>
|
||||
<el-button type="text" v-if="!row.collect" @click="collectReport(row,'n')">取消收藏</el-button>
|
||||
<el-button type="text" v-if="row.power == 1 ||row.power == 2" @click="goReportDetail(row)">预览</el-button>
|
||||
<el-button type="text" v-if="row.power == 3 || row.power == 2 " @click="downloadRow(row)">下载</el-button>
|
||||
<el-button type="text" v-if="row.power !== 2 && !isAdmin" @click="permissionApp(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'
|
||||
import {sendTrackEvent} from '@/utils/quickTracking'
|
||||
export default {
|
||||
name: 'ReportList',
|
||||
data() {
|
||||
return {
|
||||
isShowbg1:true,
|
||||
isShowbg2:false,
|
||||
isShowbg3:false,
|
||||
value:3.7,
|
||||
watermarkText: '', // 水印
|
||||
fullscreen: false,
|
||||
q: {
|
||||
keyContent: '',
|
||||
year: [],
|
||||
name: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
orderByClicks:0,
|
||||
orderByDownload:0,
|
||||
orderByTime:1
|
||||
},
|
||||
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: [],
|
||||
checkIds: [],
|
||||
checkList: [],
|
||||
checkedKeys: [],
|
||||
isAdmin: false //是否是管理员
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBtn(type){
|
||||
for(let i= 1;i<4;i++){
|
||||
this['isShowbg'+i] = false
|
||||
}
|
||||
this['isShowbg'+type] = true
|
||||
if(type==1){
|
||||
this.q.orderByTime=1
|
||||
this.q.orderByClicks=0
|
||||
this.q.orderByDownload=0
|
||||
|
||||
}else if(type==2){
|
||||
this.q.orderByClicks=1
|
||||
this.q.orderByTime=0
|
||||
this.q.orderByDownload=0
|
||||
|
||||
}else{
|
||||
this.q.orderByDownload=1
|
||||
this.q.orderByClicks=0
|
||||
this.q.orderByTime=0
|
||||
}
|
||||
this.q.pageNo=1
|
||||
this.reportList()
|
||||
},
|
||||
getKeyContent(list) {
|
||||
if (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
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
getHalfCheckedNode(node, data) {
|
||||
this.checkedKeys = data.checkedKeys
|
||||
this.reportList()
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
selectAllEvent({checked}) {
|
||||
const records = this.$refs.xTable.getCheckboxRecords()
|
||||
this.checkList = records
|
||||
this.checkIds = records.map(item => {
|
||||
return item.id
|
||||
})
|
||||
},
|
||||
selectChangeEvent({checked}) {
|
||||
const records = this.$refs.xTable.getCheckboxRecords()
|
||||
this.checkList = records
|
||||
this.checkIds = records.map(item => {
|
||||
return item.id
|
||||
})
|
||||
},
|
||||
permissionApp(row) {
|
||||
if(row){
|
||||
if(row.isAct == 0){
|
||||
this.$message.warning("当前"+row.name+"已经在流程中")
|
||||
return
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/permission/launch',
|
||||
query: {id: 'AEHJB8YNJ3', isBegin: 1,ids:row.id}
|
||||
})
|
||||
}else{
|
||||
if(this.checkList.length <1){
|
||||
this.$message.warning("至少选择一条报告进行权限申请")
|
||||
return
|
||||
}
|
||||
let already=this.checkList.filter(item =>{
|
||||
if( +item.isAct == 0){
|
||||
return item
|
||||
}
|
||||
})
|
||||
if(already.length>0) {
|
||||
let name=already.map(item=>item.name)
|
||||
this.$message.warning("当前选择的"+name.join(',')+"已经在流程中")
|
||||
return
|
||||
}
|
||||
// 有预览权限的时候是否还让继续申请
|
||||
let temp=this.checkList.filter(item =>{
|
||||
if( +item.power == 2){
|
||||
return item.name
|
||||
}
|
||||
})
|
||||
console.log(temp)
|
||||
if(temp.length>0) {
|
||||
let name=temp.map(item=>item.name)
|
||||
this.$message.warning("当前选择的"+name.join(',')+"已经有权限，无须申请！")
|
||||
return
|
||||
}
|
||||
|
||||
this.$router.push({
|
||||
path: '/permission/launch',
|
||||
query: {id: 'AEHJB8YNJ3', isBegin: 1,ids:this.checkIds.join(',')}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
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,
|
||||
orderByTime:1,
|
||||
orderByDownload:0,
|
||||
orderByClicks:0
|
||||
}
|
||||
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,repostId:row.id}).then(res => {
|
||||
downloadFile(res)
|
||||
})
|
||||
// })
|
||||
},
|
||||
collectReport(row,type){
|
||||
if(type=='y'){
|
||||
// 调用收藏
|
||||
}else{
|
||||
|
||||
}
|
||||
},
|
||||
// 跳转到详情
|
||||
goReportDetail(row) {
|
||||
sendTrackEvent({
|
||||
eventName: 'preview_click',
|
||||
params: {id:row.id,name:row.name}
|
||||
})
|
||||
window.open('/report/detail?id='+this.$route.query.id+'&reportId='+row.id)
|
||||
this.reportList()
|
||||
// this.$router.push({path: '/report/detail', query: {id: this.$route.query.id, reportId: row.id}})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
// 判断当前人是不是管理员
|
||||
if((this.$store.getters.userInfo.levelId=='1' || this.$store.getters.userInfo.levelId=='2'
|
||||
||this.$store.getters.userInfo.levelId=='3' || this.$store.getters.userInfo.levelId=='4'
|
||||
)&&this.$store.getters.userInfo.employeeTypeId=='1' ){
|
||||
this.isAdmin = true
|
||||
}else{
|
||||
this.isAdmin=false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.keyContent {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.treeList {
|
||||
padding: 20px 20px 0;
|
||||
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;
|
||||
height: calc(100vh - 320px);
|
||||
//overflow: scroll;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tree {
|
||||
height: 500px;
|
||||
//overflow: auto;
|
||||
.filter-tree {
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.report-name {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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-btn {
|
||||
.el-button + .el-button {
|
||||
margin-left: 0px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
padding: 18px 13px 11px;
|
||||
.tag-right{
|
||||
float: right;
|
||||
::v-deep .el-button{
|
||||
border: 1px solid #3D87CC;
|
||||
border-radius: 0;
|
||||
color: #3D87CC;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
.clickNum{
|
||||
border: none;
|
||||
border-top: 1px solid #3D87CC ;
|
||||
border-bottom: 1px solid #3D87CC;
|
||||
}
|
||||
|
||||
}
|
||||
.checkClass{
|
||||
background-color: rgba(64, 158, 255, 1) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,482 @@
|
||||
<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.messageTitle" 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" :offset="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>
|
||||
<el-row class="tag-btn">
|
||||
|
||||
<el-button type="primary" @click="permissionApp(false)">全部标注已读</el-button>
|
||||
|
||||
</el-row>
|
||||
|
||||
<div class="table">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<vxe-table ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe
|
||||
v-table-min-height="'calc(100vh - 320px)'"
|
||||
@checkbox-all="selectAllEvent" @checkbox-change="selectChangeEvent">
|
||||
<vxe-column show-header-overflow field="messageTitle" title="标题">
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="messageTypeDesc" title="消息类型">
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="createDate" title="发布时间">
|
||||
<template #default="{ row }">
|
||||
{{formatDate2(row.createDate)}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow field="readType" title="阅读状态">
|
||||
<template #default="{row}">
|
||||
<el-tag :type="row.readType=='0'?'info':'success'">{{row.readType=='0'?'未读':'已读'}}</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="text" @click="goReportDetail(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="30%"
|
||||
class="addreport">
|
||||
<div class="messageBox">
|
||||
<div class="messageBox_title">
|
||||
<div class="messageBox_title_top">{{detail.messageTitle}}</div>
|
||||
<div class="messageBox_time">
|
||||
<!-- 发布人: {{detail.createDate}}-->
|
||||
发布时间： {{formatDate2(detail.createDate)}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="messageBox_content">
|
||||
<div class="messageBox_content_type">
|
||||
{{detail.messageTypeDesc}}
|
||||
</div>
|
||||
<div>
|
||||
通知内容:{{detail.content}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {formatDate2} from '@/utils/date'
|
||||
export default {
|
||||
name: 'ReportList',
|
||||
data() {
|
||||
return {
|
||||
detail:'',
|
||||
formatDate2,
|
||||
value:3.7,
|
||||
watermarkText: '', // 水印
|
||||
fullscreen: false,
|
||||
q: {
|
||||
messageTitle: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0,
|
||||
tableData: [],
|
||||
dialogPreview: false, // 预览
|
||||
content: '',
|
||||
filterText: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectAllEvent({checked}) {
|
||||
const records = this.$refs.xTable.getCheckboxRecords()
|
||||
this.checkList = records
|
||||
this.checkIds = records.map(item => {
|
||||
return item.id
|
||||
})
|
||||
},
|
||||
selectChangeEvent({checked}) {
|
||||
const records = this.$refs.xTable.getCheckboxRecords()
|
||||
this.checkList = records
|
||||
this.checkIds = records.map(item => {
|
||||
return item.id
|
||||
})
|
||||
},
|
||||
permissionApp(row) {
|
||||
this.$api.message.allRead().then(({data}) => {
|
||||
this.reportList()
|
||||
})
|
||||
},
|
||||
init() {
|
||||
this.reportList()
|
||||
},
|
||||
search() {
|
||||
this.q.pageNo = 1
|
||||
this.reportList()
|
||||
},
|
||||
// 列表
|
||||
reportList() {
|
||||
this.$api.message.getList({...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()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 单页数据量
|
||||
handleSizeChange(val) {
|
||||
this.q.pageSize = val
|
||||
this.q.pageNo = 1
|
||||
this.reportList()
|
||||
},
|
||||
// 第几页
|
||||
handleCurrentChange(val) {
|
||||
this.q.pageNo = val
|
||||
this.reportList()
|
||||
},
|
||||
|
||||
// 重置
|
||||
reset() {
|
||||
this.q = {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.tableData = []
|
||||
this.reportList()
|
||||
},
|
||||
goReportDetail(row) {
|
||||
//弹出详情
|
||||
this.detail=row
|
||||
this.dialogPreview=true
|
||||
}
|
||||
},
|
||||
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-btn {
|
||||
.el-button + .el-button {
|
||||
margin-left: 0px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
padding: 18px 13px 11px;
|
||||
.tag-right{
|
||||
float: right;
|
||||
::v-deep .el-button{
|
||||
border: 1px solid #3D87CC;
|
||||
border-radius: 0;
|
||||
color: #3D87CC;
|
||||
background-color: #ecf5ff;
|
||||
}
|
||||
.clickNum{
|
||||
border: none;
|
||||
border-top: 1px solid #3D87CC ;
|
||||
border-bottom: 1px solid #3D87CC;
|
||||
}
|
||||
|
||||
}
|
||||
.checkClass{
|
||||
background-color: rgba(64, 158, 255, 1) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageBox{
|
||||
min-height: 400px;
|
||||
padding: 20px;
|
||||
|
||||
.messageBox_title{
|
||||
border-bottom: 1px solid #ccc;
|
||||
//padding-bottom: 10px;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
.messageBox_title_top{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.messageBox_time{
|
||||
color: #acacac;
|
||||
font-size: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.messageBox_content{
|
||||
margin-top: 20px;
|
||||
padding: 10px 10px;
|
||||
.messageBox_content_type{
|
||||
font-size: 15px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user