列表

src/views/report_manage/reportV2/components/reportPreview.vue

@@ -0,0 +1,223 @@
+<template>
+  <el-drawer
+    :visible.sync="show"
+    :modal-append-to-body="false"
+    direction="rtl"
+    @close="handleClose"
+    :show-close="false"
+    size="60%"
+    custom-class="reportPreivew-drawer"
+  > 
+    <template slot="title">
+      <div class="header">
+        <span>报告预览</span>
+        <i class="el-icon-close" @click="handleClose"></i>
+      </div>
+    </template>
+    <div id="reportdtl" :loading="loading">
+      <header>{{reportInfo.Title}}</header>
+      <div style="padding:0 35px 0; box-sizing:border-box; color:#666; font-size:24px; overflow:hidden;">
+        <span>{{reportInfo.Author}}</span>
+        <span style="float:right;">{{reportInfo.PublishTime}}</span>
+      </div>
+      
+      <div id="abstract">
+        <div>摘要：{{reportInfo.Abstract}}</div>
+      </div>
+      <div id="resetsty" style="padding:30px; box-sizing:border-box; overflow:hidden;">
+        <block v-if="reportInfo.ChapterType=='day'||reportInfo.ChapterType=='week'">
+          <div class="chapter-item" v-for="item in reportInfo.ChapterList" :key="item.ReportChapterId">
+            <div style="margin-bottom:10px">
+              <span class="type">{{item.TypeName}}</span>
+              <span class="title">{{item.Title}}</span>
+            </div>
+            <div id="resetcss" style="overflow:hidden;" v-html="item.Content"></div>
+          </div>
+        </block>
+        <block v-else>
+          <div id="resetcss" style="overflow:hidden;" v-html="reportInfo.Content"></div>
+        </block>
+      </div>
+
+
+      <div v-if="linkUrl" style="width:100px;height30px;position:absolute;right:-100px;top:100px;cursor:pointer;">
+        <div v-permission="permissionBtn.reportManageBtn.reportManage_reportView_copyWechat"
+                  style="display:flex;alignItems:center;color:#333;" :data-clipboard-text='linkUrl' @click="copyHandle" class="copy">
+          <img src="@/assets/img/icons/cop.png" alt="" style="width:30px;height:30px;marginRight:10px;">复制链接
+        </div>
+        <div v-permission="permissionBtn.reportManageBtn.reportManage_reportView_wechartShare"
+                  style="display:flex;alignItems:center;color:#333;marginTop:20px;"  @mouseenter="isShowCode=true" @mouseleave="isShowCode=false">
+          <img src="@/assets/img/icons/wechat.png" alt="" style="width:30px;height:30px;marginRight:10px;">微信分享
+        </div>
+        <vue-qr :text="linkUrl" :margin="0" colorDark="#333" colorLight="#fff" :dotScale="1" :size="100" style="position:absolute;right:0;top:100px;" v-if="isShowCode"></vue-qr>
+      </div>
+    </div>
+
+  </el-drawer>
+</template>
+<script>
+import { reportdetail,departInterence } from 'api/api.js';
+import http from '@/api/http.js';
+import vueQr from 'vue-qr'
+export default {
+  props: {
+    show: {
+      type: Boolean
+    },
+    reportId: {
+      type:Number
+    }
+  },
+  computed: {
+    linkUrl(){
+      let str=''
+      const baseUrl= localStorage.getItem('dynamicOutLinks') ? JSON.parse(localStorage.getItem('dynamicOutLinks')).ReportViewUrl : '';
+      if(this.$route.query.code){
+        // 设置水印文案
+        let waterMarkStr=''
+        if(this.systemUserInfo){
+          waterMarkStr=`${this.systemUserInfo.RealName}${this.systemUserInfo.Mobile?this.systemUserInfo.Mobile:this.systemUserInfo.Email}`
+          const base64=new http.Base64()
+          waterMarkStr=encodeURIComponent(waterMarkStr)
+          waterMarkStr=base64.encode(waterMarkStr)
+        }
+        
+        if(this.$route.query.fromPage == 'en'){
+          str=`${baseUrl}/reportshare_crm_report_en?code=${this.$route.query.code}&flag=${waterMarkStr}`
+        }else{
+          str=`${baseUrl}/reportshare_crm_report?code=${this.$route.query.code}&flag=${waterMarkStr}`
+        }
+      }
+      
+      return str
+    }
+  },
+  watch: {
+    show(nval) {
+      if(!nval) return
+
+      this.getReportDetail()
+    }
+  },
+  data() {
+    return {
+      reportInfo:{},
+    
+      loading: false,
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+    handleClose() {
+      $('.el-drawer__body')[0].scrollTop = 0
+      this.$emit('update:show',false)
+    },
+
+    async getReportDetail() {
+
+      this.loading = true;
+      const res = await reportdetail({ReportId:parseInt(this.reportId)})
+			if( res.Ret!==200 ) return 
+
+      this.reportInfo=res.Data;
+      
+      this.loading = false;
+      this.isShow=true;
+    }
+  },
+}
+</script>
+<style lang="scss">
+  .reportPreivew-drawer {
+    .el-drawer__header {
+      margin-bottom: 0;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #ccc;
+    }
+    
+    .el-drawer__body {
+      position: relative;
+      overflow-y: auto;
+    }
+  }
+</style>
+<style scoped lang='scss'>
+.header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 16px;
+  color: #333;
+}
+
+	#reportdtl{ background:#fff;  max-width:1200px; margin:10px auto;position:relative;
+		img{ display:'block'; width:'100%'; margin:'0 auto'; }
+		header{ padding:10px 30px; box-sizing:border-box; font-size:28px; font-weight:500; color:#333; background:#fff; }
+		#abstract{ padding:10px 30px 0; box-sizing:border-box; font-size:22px; line-height:36px;
+		  >div{ padding:10px 20px; box-sizing:border-box; background:rgba(20,121,253,0.1); color:#0052D9; border-radius:10px;border:1px solid #0052D9; }
+		}
+		#resetsty{ 
+			img{ display:block; max-width:100%; height:auto; margin:0 auto; }
+		}
+		table{ border-top:1px solid #eaeaea; border-left:1px solid #eaeaea; border-collapse:collapse; 
+			th,td{ border-right:1px solid #eaeaea; border-bottom:1px solid #eaeaea; padding:5px 10px; box-sizing:border-box; }
+		}
+
+		.chapter-item{
+			margin-bottom: 20px;
+			padding-bottom: 20px;
+			border-bottom: 1px dashed #ccc;
+			.type{
+				font-size: 15px;
+				color: #fff;
+				padding: 5px 10px;
+				background-color: #E6A23C;
+				border-radius: 4px;
+			}
+			.title{
+				font-size: 15px;
+				margin-left: 10px;
+				font-weight: bold;
+			}
+		}
+    #abstract-en{
+      margin:35px 35px;
+      padding:20px;
+      background-color: rgba(77, 130, 191, 0.1);
+      border: 1px solid #E2E2E2;
+      .abstract{
+        font-size: 24px;
+        font-weight: 600;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #C1C1C1;
+      }
+      #overview{
+        margin-top:20px;
+        font-size: 24px;
+        .overview{
+          margin-top:20px;
+          font-size: 18px;
+        }
+      }
+    }
+		#resetcss{
+      img,video {
+        display:'block';margin:'0 auto'
+      }
+      pre {
+        display: "block";
+        white-space: "pre-wrap";
+      }
+			p{
+				font-size: 18px !important;
+			}
+			span{
+				font-size: 18px !important;
+			}
+			ul,ol {
+				list-style-position: inside !important;
+			}
+		}
+	}
+</style>

src/views/report_manage/reportV2/list.vue

@@ -309,6 +309,12 @@
       :id="0" 
     />
 
+    <!-- 报告预览弹窗 -->
+    <reportPreview
+      :show.sync="isShowPreview"
+      :reportId="previewReportId"
+    />
+
 
     <!-- 上传音频弹框 -->
     <el-dialog
@@ -493,9 +499,10 @@ import {approveInterence} from '@/api/modules/approve.js';
 import reportApproveConfig from "@/mixins/reportApproveConfig.js";
 import { reportFrequencyOption } from './common/constants';
 import reportBaseInfo from './components/reportBaseInfoDia.vue';
+import reportPreview from './components/reportPreview.vue';
 export default {
   name:'reportV2',
-  components: { reportBaseInfo },
+  components: { reportBaseInfo,reportPreview },
   mixins:[reportApproveConfig],
   computed: {
     exportUrlDl() {
@@ -611,7 +618,10 @@ export default {
       ],
 
       waterMarkStr:"",
-      publishReportCode:''
+      publishReportCode:'',
+
+      isShowPreview: false,//预览报告弹窗
+      previewReportId: 0,
     }
   },
   mounted(){
@@ -756,6 +766,9 @@ export default {
       //如果没有预览权限，就不跳转
       if(!this.permissionBtn.checkPermissionBtn(this.permissionBtn.reportManageBtn.reportManage_reportView)) return
 
+      this.previewReportId = item.Id
+      this.isShowPreview = true
+
       // sessionStorage.setItem("reportdtl", JSON.stringify(item));
       // let { href } = this.$router.resolve({
       //   name: "预览报告",