xiaoshi_system/src/views/project/patentDetails/components/patentMessage/PatentPDF.vue

<template>
  <div class="patent-pdf height_100">
    <div>
      <el-button-group class="float_left margin-bottom_10" v-if="patent.pdf && patent.pdf.length > 1">
        <el-button size="small" :type="pdfType === 1 ? 'primary' : ''" @click="handleSelect(1)">授权文档</el-button>
        <el-button size="small" :type="pdfType === 0 ? 'primary' : ''" @click="handleSelect(0)">公开文档</el-button>
      </el-button-group>
      <!-- <el-upload class="float_right" action="#" :auto-upload="false" :show-file-list="false" :on-change="handleChange"
        :multiple="false">
        <el-button type="success" size="small" :loading="btnLoading" v-if="projectId"
          :disabled="!($permission('/workspace/details/updataInstruction') && $r(projectId, [1, 2]))">上传文档</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload> -->
    </div>
    <div style="height:calc(100% - 120px)" v-loading="loading">
      <myIframe v-if="show" :src="src" frameborder="0" :height="height" width="100%"></myIframe>
      <div v-else class="no-pdf-file">
        <span>暂无文档</span>
      </div>
    </div>
    
  </div>
</template>

<script>
import { patentDetails } from './mixins';
export default {
  mixins: [patentDetails],
  props: ['patent', 'projectId', 'patentNo'],
  components: {},
  data() {
    return {
      src: '',
      fullHeight: document.documentElement.clientHeight,
      height: 0,
      show: true,
      btnLoading: false,
      pdfType: 1,
      pdf: null
    }
  },
  watch: {
    patentNo() {
      this.pdfType = 1
      if (this.outside) {
        this.getData()
      }else{
        this.refreshData()
      }
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  mounted() {
    // outside为true是外部
    if (this.outside) {//外部
      this.getData()
    } else {
      this.refreshData()
    }
  },
  methods: {
    // 获取外部的pdf地址
    getData() {
      
      this.height = (this.fullHeight - 230) + 'px'
      if (this.patent.pdf && this.patent.pdf.length > 0) {
        this.getSrc()
        return false
      }
      var params = {
        appNo: this.patent.appNo,
        rowApplicationNo: this.patent.rowApplicationNo,
      }
      this.loading = true
      this.$api.getCnPdf(params).then(response => {
        if (response.code == 200) {
          this.$set(this.patent, 'pdf', response.data)
          this.getSrc()
          this.loading = false
        }
      }).catch(error=>{
        this.loading = false
      })
    },
    // 内部专利根据guid获取路径
    getSrc() {
      if(this.patent.pdf.length==0){
        this.show = false
        return 
      }
      let obj = this.patent.pdf.find(item => {
        return item.type == this.pdfType
      })
      var guid = ''
      if (obj) {//外部内部都是返回guid
        guid = obj.pdfGuid
      }else{
        this.pdfType = this.patent.pdf[0].type
        guid = this.patent.pdf[0].pdfGuid
      }
      
      this.src = this.$commonJS.checkGuid(guid)
      this.$nextTick(() => {
        this.show = true
      })
    },
    // 点击切换按钮（授权、公开）
    handleSelect(type) {
      this.pdfType = type
      this.show = false
      this.getSrc()
    },
    // 上传文档
    // handleChange(file, fileList) {
    //   if (file.name.split('.')[1].toLowerCase() !== 'pdf') {
    //     this.$message.error('请选择PDF格式文件')
    //     return false
    //   }
    //   let formData = new FormData()
    //   formData.append('file', file.raw)
    //   formData.append('type', this.pdfType)
    //   formData.append('patentNo', this.patent.patentNo)
    //   if (this.pdf) {
    //     formData.append('url', this.pdf.url)
    //   }
    //   this.btnLoading = true
    //   this.$api.editPatentInstruction(formData).then(response => {
    //     this.$message.success('操作成功')
    //     this.btnLoading = false
    //     this.$emit('refreshData')
    //     this.refreshData()
    //   }).catch(error => {
    //     this.btnLoading = false
    //   })
    // },
    // 请求内部pdf的guid
    refreshData() {
      this.show = false
      this.height = (this.fullHeight - 230) + 'px'
      if(this.patent.pdf && this.patent.pdf.length>0){
        this.getSrc()
        return
      }
      let params = {
        appNo: this.patent.appNo,
        // type: this.pdfType,//0公开1授权
      }
      this.loading = true
      this.$api.getTextPdf(params).then(response => {
        if (response.code == 200) {
          this.$set(this.patent, 'pdf', response.data)
          this.getSrc()
          this.loading  =false
        }
      }).catch(error=>{
        this.loading = false
      })
    },
    handleResize(event) {
      this.fullHeight = document.documentElement.clientHeight
    },
  }
}
</script>

<style lang="scss">
.patent-pdf {
  height: 100%;

  .no-pdf-file {
    float: left;
    text-align: center;
    width: 100%;
    background: #e3e2e2;
    height: calc(100% - 120px);
    padding-top: 50px;

    span {
      font-size: 50px;
    }
  }
}
</style>