From 74aa206bad5b99e727c062ff063de78341fb1638 Mon Sep 17 00:00:00 2001
From: zhoulingpo <zhoulingpo>
Date: Fri, 12 May 2023 11:10:00 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E8=AF=A6=E6=83=85=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Report/ReportDetail.vue | 619 ++++++++++++++++--------------
 1 file changed, 328 insertions(+), 291 deletions(-)

diff --git a/src/views/Report/ReportDetail.vue b/src/views/Report/ReportDetail.vue
index 2be22ed..507ac44 100644
--- a/src/views/Report/ReportDetail.vue
+++ b/src/views/Report/ReportDetail.vue
@@ -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>