535 lines
14 KiB
Vue
535 lines
14 KiB
Vue
<template>
|
|
<div class="content-height report-detail">
|
|
<div class="title">
|
|
<el-tooltip :content="row.name" placement="top-start">
|
|
|
|
<span>{{ row.name || '-' }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="desc">
|
|
<el-row>
|
|
<el-col :span="24" class="desc-item">
|
|
<label>上传人</label>
|
|
<div>{{ row.uploaderName }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24" class="desc-item">
|
|
<label>关键词</label>
|
|
<div>{{ getKeyContent(row.keyContent) }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24" class="desc-item">
|
|
<label>内容摘要</label>
|
|
<p>{{ row.mainContent || '-' }}</p>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="10" class="desc-item">
|
|
<label>所属部门</label>
|
|
<div>{{ row.departmentName || '-' }}</div>
|
|
</el-col>
|
|
|
|
<el-col :span="10" :offset="2" class="desc-item">
|
|
<label>报告年份</label>
|
|
<div>{{ row.year || '-' }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="10" class="desc-item">
|
|
<label>报告涉密等级</label>
|
|
<div>{{ row.confidentialLevel || '-' }}</div>
|
|
</el-col>
|
|
<el-col :span="10" :offset="2" class="desc-item">
|
|
<label>报告隐私等级</label>
|
|
<div>{{ row.privacyLevel || '-' }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24" class="desc-item">
|
|
<label>标签</label>
|
|
<div>{{ row.labels && row.labels.join(',') || '-' }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<div class="report-download">
|
|
<span>报告详情</span>
|
|
<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" >
|
|
<div class="fileName" v-for="item in row.fileList" :title="item.fileName" @click="handleFile(item)"
|
|
:class="{'bgColor':file.fileId==item.fileId}">{{item.fileName}}</div>
|
|
</div>
|
|
<el-empty class="preview-content" description="excel不可预览" v-if="showText"></el-empty>
|
|
<div class="preview-content" v-html="content" v-else></div>
|
|
</div>
|
|
<div class="report-jug">
|
|
<div class="report-jug-left">
|
|
<div>报告评级:</div>
|
|
|
|
<el-rate allow-half :min="0" :max="5" v-model="userRating" @click.native="saveScore"></el-rate>
|
|
</div>
|
|
<div class="pointclick">
|
|
<svg-icon v-if="!isShow" icon-class="pointe" @click="pointZan('y')" style="font-size: 25px"
|
|
class-name="icon"></svg-icon>
|
|
<svg-icon v-else icon-class="pointe_fill" @click="pointZan('n')" style="font-size: 25px"
|
|
class-name="icon"></svg-icon>
|
|
{{ pointNum }}
|
|
</div>
|
|
</div>
|
|
<div class="juggle_box showLimit">
|
|
<span >评论</span>
|
|
<el-row style="margin-top: 5px">
|
|
|
|
<el-col :span="22">
|
|
<el-input type="textarea" v-model="comment" maxlength="1000" show-word-limit></el-input>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<el-button size="medium" type="primary" class="fabiaoBtn" @click="addJuggle">发表评论</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="all_juggle" v-for="item in commonList">
|
|
<div class="juggle_left">
|
|
<div class="nameCir">
|
|
{{ item.userName.slice(0, 1) }}
|
|
</div>
|
|
<div class="name">
|
|
{{ (item.account || '') + "【" + item.userName + "】" }}
|
|
</div>
|
|
</div>
|
|
<div class="juggle_right">
|
|
<div class="content">{{ item.comment }}</div>
|
|
<div class="bottom">
|
|
<div class="time">
|
|
<svg-icon icon-class="time" style="font-size: 20px"
|
|
class-name="icon"></svg-icon>
|
|
{{ item.createTime && formatDate2(item.createTime) }}</div>
|
|
<el-button class="delbtn" size="medium" plain type="primary" v-if="item.userId==userId || isAdmin"
|
|
@click="delJugg(item.id)">删除
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-pagination v-if="commonList.length>0" @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>
|
|
<div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {downloadFile} from '@/utils/downloadFile'
|
|
import {formatDate2} from '@/utils/date'
|
|
|
|
export default {
|
|
name: 'ReportDetail',
|
|
data() {
|
|
return {
|
|
showText:false,
|
|
pointNum:0,
|
|
file:{},
|
|
isAdmin: false, //是否是管理员
|
|
report: {},
|
|
formatDate2,
|
|
isShow: false,
|
|
userRating: '',
|
|
watermarkText: '', // 水印
|
|
content: '',
|
|
row: {},
|
|
comment: '',
|
|
reportId: '',
|
|
commonList: [],
|
|
q: {
|
|
pageNo: 1,
|
|
pageSize: 5,
|
|
|
|
},
|
|
userId: this.$store.getters.userInfo.usid,
|
|
userName: this.$store.getters.userInfo.usname,
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取评分
|
|
getScore() {
|
|
this.$api.report.getScore({reportId: this.reportId}).then(res => {
|
|
this.userRating = res.data / 2
|
|
})
|
|
},
|
|
// 获取点赞数量及其状态
|
|
getGood() {
|
|
this.$api.report.getGood({reportId: this.reportId}).then(res => {
|
|
if (res.data.logId) {
|
|
this.isShow = true
|
|
} else {
|
|
this.isShow = false
|
|
}
|
|
this.pointNum = res.data.thumbUpCount
|
|
})
|
|
},
|
|
//点赞
|
|
pointZan(type) {
|
|
|
|
this.$api.report.goodLuck({reportId: this.reportId}).then(res => {
|
|
this.$message.success("操作成功")
|
|
this.getGood()
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
//评分
|
|
saveScore() {
|
|
// if(this.userRating == )
|
|
let userRating = this.userRating * 2
|
|
this.$api.report.addScore({userRating: +userRating, reportId: this.reportId}).then(res => {
|
|
|
|
})
|
|
},
|
|
addJuggle() {
|
|
if (this.comment != '') {
|
|
this.$api.report.addJuggle({
|
|
comment: this.comment,
|
|
reportId: this.reportId,
|
|
userId: this.userId,
|
|
userName: this.userName
|
|
}).then(res => {
|
|
this.$message.success("评论成功")
|
|
this.comment = ''
|
|
this.getComment()
|
|
})
|
|
} else {
|
|
this.$message.warning("请填写评论")
|
|
}
|
|
},
|
|
// 删除评论
|
|
delJugg(id) {
|
|
this.$confirm('确认删除该条评论？', '删除', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
confirmButtonClass: 'common-button-primary',
|
|
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.$api.report.delJuggle(id).then(res => {
|
|
this.$message.success("删除成功")
|
|
this.getComment()
|
|
})
|
|
})
|
|
},
|
|
// 单页数据量
|
|
handleSizeChange(val) {
|
|
this.q.pageSize = val;
|
|
this.q.pageNo = 1;
|
|
this.getComment();
|
|
},
|
|
// 第几页
|
|
handleCurrentChange(val) {
|
|
this.q.pageNo = val;
|
|
this.getComment();
|
|
},
|
|
// 获取评论
|
|
getComment() {
|
|
this.$api.report.getJuggle({...this.q, reportId: this.reportId}).then(res => {
|
|
this.commonList = res.data.records
|
|
this.total = res.data.total
|
|
})
|
|
},
|
|
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 '-'
|
|
}
|
|
},
|
|
// 预览
|
|
previewRow(fileId,reportId) {
|
|
// this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}`
|
|
// this.row = JSON.parse(this.$route.query.row)
|
|
this.$api.report.reportGetReportHtmlId({fileId: fileId,reportId:reportId}).then(({data}) => {
|
|
this.content = data.content
|
|
})
|
|
},
|
|
handleFile(row){
|
|
this.file=row
|
|
let lastName=row.fileName.split('.')
|
|
let list=['xls','xlsx','XLS','XLSX']
|
|
if(list.indexOf(lastName[lastName.length-1])>-1){
|
|
this.showText=true
|
|
}else{
|
|
this.showText=false
|
|
this.previewRow(this.file.fileId,this.row.id)
|
|
|
|
}
|
|
},
|
|
// 下载
|
|
downloadRow(row) {
|
|
// this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
|
|
// confirmButtonText: '确定',
|
|
// cancelButtonText: '取消',
|
|
// type: 'warning'
|
|
// }).then(() => {
|
|
this.$api.report.reportDownload({ reportId: this.row.id}).then(res => {
|
|
downloadFile(res)
|
|
})
|
|
// })
|
|
},
|
|
// 获取详情
|
|
getReportDetail() {
|
|
this.$api.report.getReportDetail(this.reportId).then(res => {
|
|
this.row = res.data
|
|
this.isAdmin = this.$store.getters.userInfo.usid==this.row.createUserId
|
|
// 需要给分数/2
|
|
this.handleFile(this.row.fileList[0])
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
this.reportId = this.$route.query.reportId
|
|
|
|
// this.previewRow()
|
|
this.getComment()
|
|
this.getReportDetail()
|
|
this.getScore()
|
|
this.getGood()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.report-detail {
|
|
.title {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border-bottom: 1px solid #EBEEF5;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
margin: 0 18px 0 22px;
|
|
text-align: center;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #262626;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
padding: 11px 26px 6px 48px;
|
|
|
|
.desc-item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-start;
|
|
margin-bottom: 12px;
|
|
|
|
label {
|
|
display: inline-block;
|
|
height: 19px;
|
|
line-height: 19px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #595959;
|
|
width: 85px;
|
|
margin-right: 9px;
|
|
}
|
|
|
|
div, p {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #434343;
|
|
word-break: break-all;
|
|
}
|
|
|
|
p {
|
|
line-height: 20px;
|
|
text-align: justify;
|
|
}
|
|
}
|
|
}
|
|
|
|
.report-download {
|
|
height: 40px;
|
|
background: #F2F6FC;
|
|
border: 1px solid #EBEEF5;
|
|
margin: 0 14px 0 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 7px 0 9px;
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #262626;
|
|
}
|
|
}
|
|
|
|
.preview-box {
|
|
// 定位使水印不溢出元素
|
|
display: flex;
|
|
position: relative;
|
|
// 居中
|
|
width: calc(100% - 13px - 14px);
|
|
margin-left: 13px;
|
|
.preview-list{
|
|
width: 200px;
|
|
margin-top: 10px;
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
.fileName{
|
|
width: 100%;
|
|
height: 28px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: keep-all;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
color: #434343;
|
|
padding: 0px 10px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
.preview-content {
|
|
//margin: 0 14px 0 13px;
|
|
max-height: 500px;
|
|
padding-bottom: 11px;
|
|
overflow: auto;
|
|
width: calc(100% - 200px);
|
|
img {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
table {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.report-jug {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px;
|
|
|
|
.report-jug-left {
|
|
display: flex;
|
|
&>div{
|
|
margin-right: 10px;
|
|
}
|
|
::v-deep .el-rate__item{
|
|
vertical-align: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.juggle_box {
|
|
padding: 10px;
|
|
|
|
.all_juggle {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
width: 100%;
|
|
border: 1px solid #e6f6fe;
|
|
min-height: 150px;
|
|
|
|
.juggle_left {
|
|
width: 15%;
|
|
text-align: center;
|
|
border-right: 1px solid #e6f6fe;
|
|
color: #434343;
|
|
|
|
.nameCir {
|
|
background-color: pink;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
line-height: 60px;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
margin: 20px calc(50% - 30px);
|
|
}
|
|
}
|
|
|
|
.juggle_right {
|
|
position: relative;
|
|
width: 85%;
|
|
padding: 10px 10px 40px;
|
|
|
|
.content {
|
|
width: 100%;
|
|
color: #434343;
|
|
margin-bottom: 5px;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.bottom {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: calc(100% - 40px);
|
|
bottom: 10px;
|
|
left: 20px;
|
|
height: 35px;
|
|
color: #434343;
|
|
|
|
.time {
|
|
line-height: 35px;
|
|
color: #858585;
|
|
}
|
|
|
|
.delbtn {
|
|
//vertical-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.fabiaoBtn {
|
|
margin-left: 20px;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.isBackground {
|
|
background-color: pink;
|
|
}
|
|
}
|
|
|
|
.pointclick {
|
|
cursor: pointer;
|
|
}
|
|
.showLimit ::v-deep .el-textarea .el-input__count{
|
|
width: 98%;
|
|
}
|
|
.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>
|