DZ/faw-report-library-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【修改】修改详情布局

Browse Source
This commit is contained in:
zhoulingpo
2023-05-12 11:10:00 +08:00
parent 1f0a94dda9
commit 74aa206bad
1 changed files with 328 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/Report/ReportDetail.vue
+328 -291
View File
@@ -1,179 +1,195 @@
<template> <template>
<div class="content-height report-detail"> <div class="content-height report-detail">
<div class="title"> <div class="title">
<el-tooltip :content="row.name" placement="top-start"> <el-tooltip :content="row.name" placement="top-start">
<span>{{ row.name || '-' }}</span> <span>{{ row.name || '-' }}</span>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="desc"> <div class="desc">
<el-row> <el-row>
<el-col :span="24" class="desc-item"> <el-col :span="24" class="desc-item">
<label>上传人</label> <label>上传人</label>
<div>{{ row.uploaderName }}</div> <div>{{ row.uploaderName }}</div>
</el-col> </el-col>
<el-col :span="24" class="desc-item"> </el-row>
<label>关键词</label> <el-row>
<div>{{ getKeyContent(row.keyContent) }}</div> <el-col :span="24" class="desc-item">
</el-col> <label>关键词</label>
<el-col :span="24" class="desc-item"> <div>{{ getKeyContent(row.keyContent) }}</div>
<label>内容摘要</label> </el-col>
<p>{{ row.mainContent || '-' }}</p> </el-row>
</el-col> <el-row>
<el-col :span="12" class="desc-item"> <el-col :span="24" class="desc-item">
<label>所属部门</label> <label>内容摘要</label>
<div>{{ row.departmentName || '-' }}</div> <p>{{ row.mainContent || '-' }}</p>
</el-col> </el-col>
<el-col :span="12" class="desc-item"> </el-row>
<label>报告年份</label> <el-row>
<div>{{ row.year || '-' }}</div> <el-col :span="10" class="desc-item">
</el-col> <label>所属部门</label>
<el-col :span="12" class="desc-item"> <div>{{ row.departmentName || '-' }}</div>
<label>报告涉密等级</label> </el-col>
<div>{{ row.confidentialLevel || '-' }}</div>
</el-col>
<el-col :span="12" class="desc-item">
<label>报告隐私等级</label>
<div>{{ row.privacyLevel || '-' }}</div>
</el-col>
<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 type="primary" v-if="row.downPower==1" @click="downloadRow(row)">报告下载</el-button>
</div>
<div class="preview-box" v-watermark="{ text: watermarkText }">
<div class="preview-content" v-html="content"></div>
</div>
<div class="report-jug">
<div class="report-jug-left">
报告满意度:<el-rate allow-half :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">
<el-row >
<el-col :span="1">
<span>评论</span>
</el-col>
<el-col :span="21">
<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.orgName ||'' ) +"【"+item.userName+"】"}}
</div>
</div>
<div class="juggle_right">
<div class="content">{{ item.comment }}</div>
<div class="bottom">
<div class="time">{{ 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>
<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 type="primary" v-if="row.downPower==1" @click="downloadRow(row)">报告下载</el-button>
</div>
<div class="preview-box" v-watermark="{ text: watermarkText }">
<div class="preview-content" v-html="content"></div>
</div>
<div class="report-jug">
<div class="report-jug-left">
报告满意度:
<el-rate allow-half :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> </div>
<div class="juggle_box showLimit">
<el-row>
<el-col :span="1">
<span>评论</span>
</el-col>
<el-col :span="21">
<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.orgName || '') + "【" + item.userName + "】" }}
</div>
</div>
<div class="juggle_right">
<div class="content">{{ item.comment }}</div>
<div class="bottom">
<div class="time">{{ 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> </template>
<script> <script>
import { downloadFile } from '@/utils/downloadFile' import {downloadFile} from '@/utils/downloadFile'
import { formatDate2 } from '@/utils/date' import {formatDate2} from '@/utils/date'
export default { export default {
name: 'ReportDetail', name: 'ReportDetail',
data () { data() {
return { return {
isAdmin: false, //是否是管理员 isAdmin: false, //是否是管理员
report:{}, report: {},
formatDate2, formatDate2,
isShow: false, isShow: false,
userRating:'', userRating: '',
watermarkText: '', // 水印 watermarkText: '', // 水印
content: '', content: '',
row: {}, row: {},
comment:'', comment: '',
reportId:'', reportId: '',
commonList:[], commonList: [],
q:{ q: {
pageNo:1, pageNo: 1,
pageSize:5, pageSize: 5,
}, },
userId:this.$store.getters.userInfo.USID, userId: this.$store.getters.userInfo.USID,
userName:this.$store.getters.userInfo.USNAME, userName: this.$store.getters.userInfo.USNAME,
} }
}, },
methods: { methods: {
// 获取评分 // 获取评分
getScore(){ getScore() {
this.$api.report.getScore({reportId:this.reportId}).then(res=>{ this.$api.report.getScore({reportId: this.reportId}).then(res => {
this.userRating=res.data/2 this.userRating = res.data / 2
}) })
}, },
// 获取点赞数量及其状态 // 获取点赞数量及其状态
getGood(){ getGood() {
this.$api.report.getGood({reportId:this.reportId}).then(res=>{ this.$api.report.getGood({reportId: this.reportId}).then(res => {
if(res.data.logId){ if (res.data.logId) {
this.isShow=true this.isShow = true
}else{ } else {
this.isShow=false this.isShow = false
} }
this.pointNum=res.data.thumbUpCount this.pointNum = res.data.thumbUpCount
}) })
}, },
//点赞 //点赞
pointZan(type){ pointZan(type) {
this.$api.report.goodLuck({reportId:this.reportId}).then(res=>{ this.$api.report.goodLuck({reportId: this.reportId}).then(res => {
this.$message.success("操作成功") this.$message.success("操作成功")
this.getGood() this.getGood()
}).catch(()=>{ }).catch(() => {
}) })
}, },
//评分 //评分
saveScore(){ saveScore() {
let userRating = this.userRating*2 let userRating = this.userRating * 2
this.$api.report.addScore({userRating:+userRating,reportId:this.reportId}).then(res=>{ this.$api.report.addScore({userRating: +userRating, reportId: this.reportId}).then(res => {
}) })
}, },
addJuggle(){ addJuggle() {
if(this.comment!=''){ if (this.comment != '') {
this.$api.report.addJuggle({ this.$api.report.addJuggle({
comment:this.comment, comment: this.comment,
reportId:this.reportId, reportId: this.reportId,
userId: this.userId, userId: this.userId,
userName:this.userName userName: this.userName
}).then(res=>{ }).then(res => {
this.$message.success("评论成功") this.$message.success("评论成功")
this.comment='' this.comment = ''
this.getComment() this.getComment()
}) })
}else { } else {
this.$message.warning("请填写评论") this.$message.warning("请填写评论")
} }
}, },
@@ -186,7 +202,7 @@ export default {
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$api.report.delJuggle(id).then(res=>{ this.$api.report.delJuggle(id).then(res => {
this.$message.success("删除成功") this.$message.success("删除成功")
this.getComment() this.getComment()
}) })
@@ -204,10 +220,10 @@ export default {
this.getComment(); this.getComment();
}, },
// 获取评论 // 获取评论
getComment(){ getComment() {
this.$api.report.getJuggle({...this.q,reportId:this.reportId}).then(res=>{ this.$api.report.getJuggle({...this.q, reportId: this.reportId}).then(res => {
this.commonList=res.data.records this.commonList = res.data.records
this.total=res.data.total this.total = res.data.total
}) })
}, },
getKeyContent(list) { getKeyContent(list) {
@@ -228,36 +244,36 @@ export default {
} }
}, },
// 预览 // 预览
previewRow () { previewRow() {
// this.watermarkText = `${this.$store.state.userInfo.usname} ${formatDate(+new Date(), 'yyyy年MM月dd日 hh:mm:ss')}` // 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.row = JSON.parse(this.$route.query.row)
this.$api.report.reportGetReportHtmlId({ id: this.row.id }).then(({ data }) => { this.$api.report.reportGetReportHtmlId({id: this.row.id}).then(({data}) => {
this.content = data.content this.content = data.content
}) })
}, },
// 下载 // 下载
downloadRow (row) { downloadRow(row) {
// this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', { // this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
// confirmButtonText: '确定', // confirmButtonText: '确定',
// cancelButtonText: '取消', // cancelButtonText: '取消',
// type: 'warning' // type: 'warning'
// }).then(() => { // }).then(() => {
this.$api.report.reportDownload({ fileId: row.fileId,repostId:row.id }).then(res => { this.$api.report.reportDownload({fileId: row.fileId, repostId: row.id}).then(res => {
downloadFile(res) downloadFile(res)
}) })
// }) // })
}, },
// 获取详情 // 获取详情
getReportDetail(){ getReportDetail() {
this.$api.report.getReportDetail(this.reportId).then(res=>{ this.$api.report.getReportDetail(this.reportId).then(res => {
this.row = res.data this.row = res.data
// 需要给分数/2 // 需要给分数/2
this.previewRow() this.previewRow()
}) })
}, },
}, },
mounted () { mounted() {
this.reportId=this.$route.query.reportId this.reportId = this.$route.query.reportId
this.isAdmin = this.$store.getters.userInfo.roleIdList.indexOf('35LLRCAQ8D') > -1 this.isAdmin = this.$store.getters.userInfo.roleIdList.indexOf('35LLRCAQ8D') > -1
// this.previewRow() // this.previewRow()
this.getComment() this.getComment()
@@ -269,163 +285,184 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.report-detail { .report-detail {
.title { .title {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
border-bottom: 1px solid #EBEEF5; border-bottom: 1px solid #EBEEF5;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
margin: 0 18px 0 22px; margin: 0 18px 0 22px;
text-align: center; text-align: center;
span { span {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #262626; color: #262626;
} }
} }
.desc{
padding: 11px 26px 6px 48px;
.desc-item{ .desc {
display: flex; padding: 11px 26px 6px 48px;
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;
border-right: 1px solid #BFBFBF;
margin-right: 9px;
}
div,p{
flex: 1;
font-size: 14px;
font-weight: 400;
color: #434343;
}
p{
line-height: 20px;
text-align: justify;
}
}
}
.report-download { .desc-item {
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 {
// 定位使水印不溢出元素
position: relative;
// 居中
width: calc(100% - 13px - 14px);
margin-left: 13px;
.preview-content {
//margin: 0 14px 0 13px;
max-height: 500px;
padding-bottom: 11px;
overflow: auto;
img {
max-width: 100% !important;
}
table{
margin: 0 auto;
}
}
}
.report-jug{
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
padding: 10px; align-items: flex-start;
.report-jug-left{ margin-bottom: 12px;
display: flex;
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;
} }
} }
.juggle_box{ }
padding: 10px;
.all_juggle{ .report-download {
margin-top: 20px; height: 40px;
display: flex; background: #F2F6FC;
width: 100%; border: 1px solid #EBEEF5;
border: 1px solid #e6f6fe; margin: 0 14px 0 13px;
min-height: 150px; display: flex;
.juggle_left{ align-items: center;
width: 15%; justify-content: space-between;
padding: 0 7px 0 9px;
span {
font-size: 16px;
font-weight: 500;
color: #262626;
}
}
.preview-box {
// 定位使水印不溢出元素
position: relative;
// 居中
width: calc(100% - 13px - 14px);
margin-left: 13px;
.preview-content {
//margin: 0 14px 0 13px;
max-height: 500px;
padding-bottom: 11px;
overflow: auto;
img {
max-width: 100% !important;
}
table {
margin: 0 auto;
}
}
}
.report-jug {
display: flex;
justify-content: space-between;
padding: 10px;
.report-jug-left {
display: flex;
}
}
.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; text-align: center;
border-right: 1px solid #e6f6fe; 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; 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; .bottom {
width: 85%; position: absolute;
padding: 10px 10px 40px; display: flex;
.content{ justify-content: space-between;
width: 100%; width: calc(100% - 40px);
color: #434343; bottom: 10px;
left: 20px;
height: 30px;
color: #434343;
.time {
line-height: 30px;
color: #ccc;
} }
.bottom{
position: absolute; .delbtn {
display: flex; vertical-align: center;
justify-content: space-between;
width: calc(100% - 40px);
bottom: 10px;
left: 20px;
height: 30px;
color: #434343;
.time{
line-height: 30px;
color: #ccc;
}
.delbtn{
vertical-align: center;
}
} }
} }
} }
.fabiaoBtn{
margin-left: 20px;
height: 100%;
}
} }
.isBackground{
background-color: pink; .fabiaoBtn {
} margin-left: 20px;
} height: 100%;
.pointclick{
cursor: pointer;
} }
}
.isBackground {
background-color: pink;
}
}
.pointclick {
cursor: pointer;
}
</style> </style>