RMS-FrontEnd/RMS-FrontEnd/src/views/report/InvalidResponse/components/FileDetails/index.vue

<template>
    <div style="height:calc(100% - 50px)">
        
        <div style="background:white;display:flex; justify-content:flex-end;align-items: center;">
            <!-- <el-button type="primary" size="small" @click="checkInvalid" style="margin-right:10px;height:32px;"> 查看无效请求书/标的专利 </el-button> -->
            <el-button type="primary" size="small" @click="addOpinion" style="margin-right:10px;height:32px;" v-if=" $reportPermission(params.reportId,[0,1])"> 陈述意见 </el-button>
            <el-switch
                v-model="value"
                :disabled="!$permission('/workspace/details/comparison')"
                inactive-text="对比"
                active-color="#00BFFF"
                inactive-color="#D3D3D3">
            </el-switch>
            <div class="evidence" style="max-width: 300px;height: 50px;;overflow: auto;margin-left:10px">
                <span style="margin-right:5px">
                  <el-tooltip class="item" effect="dark" content="无效请求书/标的专利" placement="top">
                    <el-link @click="checkInvalid" :type="evidence.id === -1 ? 'primary' : undefined">T</el-link>
                  </el-tooltip>
                </span>
                <span v-for="item in EvidenceList" :key="item.sortStr" style="margin-right:5px">
                  <el-tooltip class="item" effect="dark" :content="item.proofName" placement="top">
                    <el-link @click="evidenceBtn(item)" :type="item.id === evidence.id ? 'primary' : undefined">{{ item.sortStr }}</el-link>
                  </el-tooltip>
                  
                </span>
            </div>
        </div> 
        <div class="box1" v-dragControllerDiv1 style="display:flex;flex-direction:column;width:100%;">
          <div class="left1 fileDetails" style="width:100%;padding-bottom:10px" :style="{height:height}">
            <div class="box" ref="box" v-dragControllerDiv :style="{height:'100%'}">
              <div class="left" :style="{width:width}" v-loading="loading" style="height:100%"><!--左侧div内容-->
                <FileDetails :isEvidence="isEvidence" style="overflow-y:auto;overflow-x: hidden;" :style="{height:'100%'}" :evidence="evidence" :EvidenceList="EvidenceList1" :reportId="params.reportId" :height="height" :signPatentNo="params.signPatentNo" :reportType="params.reportType" :type="params.reportType"></FileDetails>
              </div>
              <div class="resize" title="收缩侧边栏"   v-show="width!='100%'" style="height:100%">⋮</div>
              <div class="mid" v-show="width!='100%'" :style="{width:width}" style="height:100%"><!--右侧div内容-->
                <FileDetails :isEvidence="isEvidence" style="overflow-y:auto;overflow-x: hidden;" :style="{height:'100%'}" :evidence="evidence" :EvidenceList="EvidenceList1" :reportId="params.reportId" :height="height" :signPatentNo="params.signPatentNo" :reportType="params.reportType" :type="params.reportType"></FileDetails>
              </div>
            </div> 
          </div>
          <div class="resize2" title="收缩侧边栏" v-show="showPosition"><p><span>˙</span><span>˙</span><span>˙</span></p></div>
          <div class="resize1" title="收缩侧边栏" v-show="false"><span>⋮</span></div>
          <div class="mid1" v-show="showPosition" style="height:280px;border:1px solid #E4E7ED;margin:10px;overflow-y:auto;overflow-x: hidden;">
            <addOpinion :reportId="params.reportId" :signPatentNo="params.signPatentNo"></addOpinion>
          </div>
          

        </div>
        

  </div>
</template>

<script>
import PatentDetail from './patentDetail.vue';
import FileDetails from './fileDetails.vue';
import addOpinion from './addOpinions.vue'
export default {
  components: {
    PatentDetail,
    FileDetails,
    addOpinion
  },
  props: {},
  data() {
    return {
        ban:0,
        value: false,
        width:'100%',
        height:null,
        applicationNo:this.$route.query.applicationNo || null,
        patentNo:this.$route.query.patentNo || null,
        FileVisible: false,
        EvidenceList:[],
        EvidenceList1:[],
        params:{},
        evidence:{},//证据文献
        // literatureType:1,//文献类型1是专利文献
        loading:false,
        isEvidence:true,
        showPosition:false,
    };
  },
  watch: {
    value(val){
      if(val==true){
        this.width='50%'
      }else{
        this.width='100%'
      }
    },
  },
  computed: {
    piZhuContrastList() {
      return this.$store.state.report.piZhuContrastList
    }
  },
  created() {
    // var that = this
    //监听指定DOM变化
    // this.resizeObserver = new ResizeObserver(function( entries ) { 
    //       entries.forEach((item, index) =>{ 
    //         that.$set(that,'height',item.target.clientHeight)
    //         // item.target.childNodes[0].style.height= item.target.clientHeight + 'px'
    //         // console.log(item.target.childNodes)
    //       }) 
    //     })
  },
  mounted() {
    this.params = this.$s.getSession('params')
    
    this.evidence.id = this.params.aid
    
    if(!this.evidence.id ||this.evidence.id == -1){
        this.isEvidence = false
    }else{
      this.loading = true
        this.queryScratchs()//获取陈述意见列表
    }
    this.getQueryProofList()//获取证据列表
    this.$nextTick(()=>{
        this.$set(this,'height',document.getElementsByClassName('el-main')[0].offsetHeight-60  + 'px')
        if(this.$reportPermission(this.params.reportId,[0,1])){
          this.addOpinion()
        }
        
     })
  },
  methods: {
    //打开无效请求书/标的专利
    async checkInvalid(){
        this.isEvidence = false
        this.$set(this.evidence,'id',-1)
        // this.evidence.id = -1
        this.params.aid = -1
        this.$s.setSession('params',this.params)
        // this.getPiZhuContrastList(this.params.signPatentNo)
        await this.$router.push({
        path: '/checkFileDetails/' + -1,
      })
    },
    //打开陈述意见
    addOpinion(){
      this.showPosition = !this.showPosition 
      if(this.showPosition){
        // 监听dom
        // this.resizeObserver.observe(document.getElementsByClassName('fileDetails')[0])
        this.$set(this,'height',document.getElementsByClassName('el-main')[0].offsetHeight-260 + 'px')
      }else{
        // resizeObserver.disconnect()  
        this.$set(this,'height',document.getElementsByClassName('el-main')[0].offsetHeight-60 + 'px')
      }
    },
    // 查询划词陈述意见
    queryScratchs() {
      this.$api.queryScratchs({proofId:this.evidence.id}).then((res) => {
        if (res.code == 200) {
          this.$store.commit('SET_PATENT_OPINION_CONTRAST', res.data)
        }
      })
    },
     // 文献点击事件
   async evidenceBtn(val) {
    this.isEvidence = true
    this.$set(this,'evidence',JSON.parse(JSON.stringify(val)))
    //   this.literatureType = val.type
    //  this.evidenceFlieId = val.id
     this.params.aid = val.id
     this.$s.setSession('params',this.params)
      this.loading = false
      // 1是文献2是非文献
     if (val.type == 1) {
      this.queryScratchs()
        // this.getPatent(val.proofConditions)
        // this.getPiZhuContrastList(val.proofConditions)
      } else {
        // let url = `http://${this.$c.hostname}:8012/onlinePreview?url=` + btoa(encodeURIComponent(this.$p + val.proofConditions))
        // this.$nextTick(() => {
        //   this.$refs.checkFile1.open(url)
        // })
     }
      await this.$router.push({
        path: '/checkFileDetails/' + val.id,
      })
    },
    //查询证据文献
    getQueryProofList() {
      let params = {
        reportId:this.params.reportId,
        signPatentNo:this.params.signPatentNo,
        size: 99,
        current: 1,
      }
      this.$api.queryProof(params).then((res) => {
        if (res.code==200) {
          this.EvidenceList = res.data
          this.EvidenceList1 = JSON.parse(JSON.stringify(res.data))
          var index = this.EvidenceList.findIndex(item => {
            return item.id == this.evidence.id
          })
          if (index != -1) {
            this.evidenceBtn(this.EvidenceList[index])
          }
        }
      }).catch((error) => {
        
      })
    },
    //修改定住
    changefix(){

    },
    //切换专利
    async onChange(val){
        this.applicationNo = val.applicationNo
        this.patentNo = val.patentNo
       
        this.changePageTitle(val.patentNo,val.name)
        this.getContrastList(val.patentNo)
        await this.$router.push({
          path: '/search/patentDetail',
          query: {
            applicationNo: val.applicationNo,
            patentNo: val.patentNo,
          }
        })
    },
    // 查询批注
    getPiZhuContrastList(val) {
      if (val) {
        var index = this.piZhuContrastList.findIndex(item => {
          item.patentNo == val
        })
        if (index != -1) {
          return false;
        }
      }
      let params = {
        patentNo: val,
        id: this.params.reportId,
        createFrom:this.params.reportId?2:0
      }
      this.$api.scratchWordsQuery(params).then(response => {
        if (response.code==200) {
          if (this.piZhuContrastList.length > 0) {
             var a = this.piZhuContrastList.filter(item => {
              return item.patentNo != params.patentNo
             }).concat(response.data)
          } else {
             var a = response.data
          }
           this.$store.commit('SET_PATENT_PIZHU_CONTRAST', a)
        }
      })
    },
    //修改title
    changePageTitle(patentNo,name) {
      document.title = `${patentNo} ${name || ''}`
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/activeDiv.scss';

</style>