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>
<div class="content-height report-detail">
<div class="title">
<el-tooltip :content="row.name" placement="top-start">
<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-col :span="24" class="desc-item">
<label>关键词</label>
<div>{{ getKeyContent(row.keyContent) }}</div>
</el-col>
<el-col :span="24" class="desc-item">
<label>内容摘要</label>
<p>{{ row.mainContent || '-' }}</p>
</el-col>
<el-col :span="12" class="desc-item">
<label>所属部门</label>
<div>{{ row.departmentName || '-' }}</div>
</el-col>
<el-col :span="12" class="desc-item">
<label>报告年份</label>
<div>{{ row.year || '-' }}</div>
</el-col>
<el-col :span="12" class="desc-item">
<label>报告涉密等级</label>
<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>
<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 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>
</div>
</div>
</template>
<script>
import { downloadFile } from '@/utils/downloadFile'
import { formatDate2 } from '@/utils/date'
import {downloadFile} from '@/utils/downloadFile'
import {formatDate2} from '@/utils/date'
export default {
name: 'ReportDetail',
data () {
data() {
return {
isAdmin: false, //是否是管理员
report:{},
report: {},
formatDate2,
isShow: false,
userRating:'',
userRating: '',
watermarkText: '', // 水印
content: '',
row: {},
comment:'',
reportId:'',
commonList:[],
q:{
pageNo:1,
pageSize:5,
comment: '',
reportId: '',
commonList: [],
q: {
pageNo: 1,
pageSize: 5,
},
userId:this.$store.getters.userInfo.USID,
userName:this.$store.getters.userInfo.USNAME,
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
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
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){
pointZan(type) {
this.$api.report.goodLuck({reportId:this.reportId}).then(res=>{
this.$message.success("操作成功")
this.getGood()
}).catch(()=>{
})
this.$api.report.goodLuck({reportId: this.reportId}).then(res => {
this.$message.success("操作成功")
this.getGood()
}).catch(() => {
})
},
//评分
saveScore(){
let userRating = this.userRating*2
this.$api.report.addScore({userRating:+userRating,reportId:this.reportId}).then(res=>{
saveScore() {
let userRating = this.userRating * 2
this.$api.report.addScore({userRating: +userRating, reportId: this.reportId}).then(res => {
})
},
addJuggle(){
if(this.comment!=''){
addJuggle() {
if (this.comment != '') {
this.$api.report.addJuggle({
comment:this.comment,
reportId:this.reportId,
comment: this.comment,
reportId: this.reportId,
userId: this.userId,
userName:this.userName
}).then(res=>{
userName: this.userName
}).then(res => {
this.$message.success("评论成功")
this.comment=''
this.comment = ''
this.getComment()
})
}else {
} else {
this.$message.warning("请填写评论")
}
},
@@ -186,7 +202,7 @@ export default {
type: 'warning'
}).then(() => {
this.$api.report.delJuggle(id).then(res=>{
this.$api.report.delJuggle(id).then(res => {
this.$message.success("删除成功")
this.getComment()
})
@@ -204,10 +220,10 @@ export default {
this.getComment();
},
// 获取评论
getComment(){
this.$api.report.getJuggle({...this.q,reportId:this.reportId}).then(res=>{
this.commonList=res.data.records
this.total=res.data.total
getComment() {
this.$api.report.getJuggle({...this.q, reportId: this.reportId}).then(res => {
this.commonList = res.data.records
this.total = res.data.total
})
},
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.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
})
},
// 下载
downloadRow (row) {
downloadRow(row) {
// this.$confirm('此操作将下载所选数据文件, 是否继续?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).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)
})
// })
},
// 获取详情
getReportDetail(){
this.$api.report.getReportDetail(this.reportId).then(res=>{
getReportDetail() {
this.$api.report.getReportDetail(this.reportId).then(res => {
this.row = res.data
// 需要给分数/2
this.previewRow()
})
},
},
mounted () {
this.reportId=this.$route.query.reportId
mounted() {
this.reportId = this.$route.query.reportId
this.isAdmin = this.$store.getters.userInfo.roleIdList.indexOf('35LLRCAQ8D') > -1
// this.previewRow()
this.getComment()
@@ -269,163 +285,184 @@ export default {
</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;
.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;
span {
font-size: 16px;
font-weight: 600;
color: #262626;
}
}
.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;
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;
}
}
}
.desc {
padding: 11px 26px 6px 48px;
.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 {
// 定位使水印不溢出元素
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{
.desc-item {
display: flex;
justify-content: space-between;
padding: 10px;
.report-jug-left{
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;
}
}
.juggle_box{
padding: 10px;
.all_juggle{
margin-top: 20px;
display: flex;
width: 100%;
border: 1px solid #e6f6fe;
min-height: 150px;
.juggle_left{
width: 15%;
}
.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 {
// 定位使水印不溢出元素
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;
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;
.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;
.bottom {
position: absolute;
display: flex;
justify-content: space-between;
width: calc(100% - 40px);
bottom: 10px;
left: 20px;
height: 30px;
color: #434343;
.time {
line-height: 30px;
color: #ccc;
}
.bottom{
position: absolute;
display: flex;
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;
}
.delbtn {
vertical-align: center;
}
}
}
.fabiaoBtn{
margin-left: 20px;
height: 100%;
}
}
.isBackground{
background-color: pink;
}
}
.pointclick{
cursor: pointer;
.fabiaoBtn {
margin-left: 20px;
height: 100%;
}
}
.isBackground {
background-color: pink;
}
}
.pointclick {
cursor: pointer;
}
</style>