提交修改

src/components/PdfPreview/view.vue

@@ -0,0 +1,199 @@
+<template><!--pdf连接分页处理-->
+  <div class="pdf-perView" id="pdf-perView">
+    <div class="pdf-box">
+      <transition name="progress">
+        <el-progress v-if="showProgress" :percentage="Math.floor(loadedRatio * 100)" :text-inside="true" :show-text="false"></el-progress>
+      </transition>
+      <pdf
+      			v-for="i in showPages"
+      			:key="i"
+      			:src="src"
+      			:page="i"
+            @progress="loadedRatio = $event"
+            @page-loaded="loadedPageHandle"
+            @loaded="loadPdfHandle"
+      			style="display: inline-block; width:100%">
+            <div>每行的间隔内容</div>
+      </pdf>
+      <!-- <pdf
+        ref="pdf"
+        :src="pdfUrl"
+        :page="currentPage"
+        @progress="loadedRatio = $event"
+        @num-pages="pageCount = $event"
+        @page-loaded="currentPage = $event"
+        @loaded="loadPdfHandler"
+        @link-clicked="currentPage = $event">
+      </pdf> -->
+    </div>
+    <div v-if="totalPages>initNum" class="pdf-footer" >
+      <!-- <el-button icon="el-icon-arrow-left" @click="prePage('footer')" :disabled="loadedRatio !== 1"></el-button>
+      <span v-if="loadedRatio !== 1" style="margin:0 10px;">0 / 0</span>
+      <span v-else style="margin:0 10px;">{{ currentPage }} / {{ pageCount }}</span>
+      <el-button @click="nextPage('footer')" :disabled="loadedRatio !== 1" icon="el-icon-arrow-right"></el-button> -->
+      <el-button type="primary" @click="clickMore()">加载更多</el-button>
+    </div>
+  </div>
+</template>
+
+<script >
+import pdf from "vue-pdf";
+export default {
+  components: { pdf },
+  props: {
+    filePath: {
+      type: String,
+      default: "",
+    },
+    scrollToID: {
+      type: String,
+      default: "pdf-perView",
+    },
+    autoScroll: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      src: "",
+      showPages: undefined,
+      totalPages:0,
+      initNum:3,
+      scale: 100, //放大系数
+      loadedRatio:0,// 加载进度
+      showProgress:true,
+    };
+  },
+  mounted() {
+      // /case/demo.pdf
+      if(this.filePath){
+        this.loadInitPdf(this.filePath);
+      }
+  },
+  watch:{
+    filePath(newVal){
+      if(newVal){
+       this.loadInitPdf(newVal);
+      }
+    },
+    loadedRatio(newVal){
+      // 直接使用loadedRatio控制进度条没有加载效果
+      if(newVal == 1){
+        let that = this;
+        setTimeout(function(){
+          that.showProgress = false;
+        }, 500)
+      }
+    }
+  },
+  methods: {
+    loadProgress(e){
+      console.log(e,'loadProgress');
+    },
+    loadedPageHandle(e){
+      console.log(e,'loadedPageHandle');
+    },
+    loadPdfHandle(e){
+      console.log(e,'loadPdfHandle');
+    },
+    clickMore(){
+       if(this.totalPages>this.showPages){
+           this.showPages++;
+       }
+    },
+    //加载页面
+    loadInitPdf(url) {
+      if(url && url.indexOf('.pdf')>-1){
+        let loadingTask = pdf.createLoadingTask(url);
+        this.src=loadingTask;
+        loadingTask.promise.then((pdf) =>{
+            this.totalPages=pdf.numPages;
+            if(pdf.numPages>this.initNum){
+              this.showPages = this.initNum;
+            }else{
+              this.showPages =pdf.numPages;
+            }
+          }).catch((err) =>{
+            this.$message.error("加载内容失败,请联系管理员");
+          });
+      }
+    },
+    initSrc(url){
+      if(url && url.indexOf('.pdf')>-1){
+        //this.src = url;
+      }
+    },
+    prePage(type) {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+        if(type === 'footer'){
+          this.scrollTo();
+        }
+      }
+    },
+    nextPage(type) {
+      if (this.currentPage < this.pageCount) {
+        this.currentPage++;
+        if(type === 'footer'){
+          this.scrollTo();
+        }
+      }
+    },
+    scrollTo(){
+      if(!this.autoScroll){
+        return;
+      }
+      document.getElementById(this.scrollToID).scrollIntoView({ block: 'start', behavior: 'smooth' })
+    },
+    //放大
+    scaleD() {
+      if (this.scale == 200) {
+        return;
+      }
+      this.scale += 5;
+      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
+    },
+    //缩小
+    scaleX() {
+      if (this.scale == 50) {
+        return;
+      }
+      this.scale += -5;
+      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.pdf-perView {
+  .pdf-box {
+    min-height: 300px;
+    width: 100%;
+    //border: 1px solid #dfdfdf;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    >span{
+      margin-bottom: 20px;
+    }
+  }
+  .pdf-header,.pdf-footer {
+    //border: 1px solid #dfdfdf;
+    //background: #dfdfdf;
+    text-align: center;
+    line-height: 40px;
+  }
+  /* ------------------- 进度条 ------------------- */
+  //类名：隐藏到显示过程所需要的时间
+  .progress-leave-active{
+    transition: opacity 2s;
+  }
+  .progress-leave-to{
+    opacity: 0;
+  }
+  .el-progress .el-progress-bar .el-progress-bar__outer{
+    background-color: #FFFFFF;
+  }
+}
+</style>

src/views/portal/case/Detail.vue

@@ -18,7 +18,7 @@
               <span>工号：{{ authorInfo.code }}</span>
               <span>部门：{{ authorInfo.orgInfo }}</span>
               <!-- <span>案例编号：{{ caseDetail.id }}</span> -->
-              <span>{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
+              <span v-if="caseDetail.sysCreateTime">{{ caseDetail.sysCreateTime.substring(0,10) }}</span>
               <interactBar :views="false" :data="caseDetail" :type="3" :comments="false" :shares="false"></interactBar>
             </div>
             <div class="btn-div">
@@ -31,7 +31,7 @@
             <!-- <div class="content">
               {{ caseDetail.content }}
             </div> -->
-            <pdfPreview :filePath="basePath+caseDetail.filePath"></pdfPreview>
+            <pdfPreview v-if="pdfPath" :filePath="pdfPath"></pdfPreview>
           </el-card>
           <!-- :authorId="articleDetailData.sysCreateAid" -->
           <el-row><comments @success="success" v-if="resolveId != ''" :obj-type="3" :obj-id="resolveId" :authorId="caseDetail.sysCreateAid"></comments></el-row>
@@ -70,7 +70,7 @@
 import { mapGetters } from 'vuex';
 import portalHeader from '@/components/PortalHeader.vue';
 import portalFooter from '@/components/PortalFooter.vue';
-import pdfPreview from '@/components/PdfPreview/index.vue';
+import pdfPreview from '@/components/PdfPreview/view.vue';
 
 import interactBar from '@/components/Portal/interactBar.vue';
 import comments from '@/components/Portal/comments.vue';
@@ -88,6 +88,7 @@ export default {
     return {
       resolveId: '',
       basePath:process.env.VUE_APP_FILE_BASE_URL,
+      pdfPath:'',
       caseDetail: {
         id:'',
         filePath:''
@@ -124,8 +125,9 @@ export default {
     },
     getCaseUserDetail() {
       apiUser.getByIds([this.caseDetail.sysCreateAid]).then(res => {
-        if (res.status == 200) {
+        if (res.status == 200 && res.result.length>0) {
           this.authorInfo = res.result[0];
+          //console.log(res.result,'res.result');
         }
       });
     },