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

<template>
  <div class="patent-basic height_100"  @mouseup="mouseup">
    <el-row :gutter="24">
      <el-col :span="18" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-tabs value="0">
              <el-tab-pane label="摘要" name="0">
                <p class="common" :data-type="'摘要'+(patent.change2?'译文':'原文')" :style="setStyle()" v-html="getViewDom2(patent, 'abstractStr','摘要'+(patent.change2?'译文':'原文'))"></p>
               
             <span>
                 <el-link v-if="projectId" type="primary" @click.native="handleChange(patent, 'abstractStr')" >
                  <span v-if="!patent.change2">切换译文</span>
                  <span v-else>切换原文</span>
                </el-link>
              </span>
        <table class="patent-basic-table">
          <tr v-if="$permission('/workspace/details/links')">
            <td width="80"><span class="patent-basic-label">外部链接:</span></td>
            <td>
              <el-link type="primary" :href="`https://worldwide.espacenet.com/patent/search?q=${patent.publicNo}`" target="_blank"  style="margin-right: 15px;">
                <span v-html="getViewDom('Espacenet')"></span>
              </el-link>
              <el-link type="primary" :href="`http://epub.cnipa.gov.cn/patent/${patent.publicNo}`" target="_blank" >
                <span v-html="getViewDom('CNIPA')"></span>
              </el-link>
            </td>
          </tr>
          <tr>
            <td width="80"><span  class="patent-basic-label">标签:</span></td>
            <td>
              <div class="patent-label">
                <template >
                  <span v-if="$permission('/workspace/details/deleteLabel') && $r(projectId,[1,2])">
                    <el-tag  v-for="(label, index) in patent.label" :key="label.name" effect="dark" type="primary" size="small" closable :disable-transitions="false" @close="handleCloseLabel(index)">{{ label.name }}</el-tag>
                  </span>
                 <span  v-else>
                  <el-tag v-for="(label) in patent.label" :key="label.name" effect="dark" type="primary" size="small">{{ label.name }}</el-tag>
                 </span>
                 
                  <el-input
                      class="input-new-tag"
                      v-if="inputLabelVisible"
                      v-model="inputLabelValue"
                      ref="saveLabelInput"
                      size="mini"
                      @keyup.enter.native="handleInputLabelConfirm"
                      @blur="handleInputLabelConfirm"
                  >
                  </el-input>
                  <el-button :disabled="!($permission('/workspace/details/addLabel') && $r(projectId,[1,2]))" v-else type="primary" size="mini" @click="showInputLabel" circle icon="el-icon-plus"></el-button>
                </template>
              </div>
            </td>
          </tr>
        </table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
         <el-card shadow="never" class="text-align_center " style="margin-top:50px;" data-type="附图">
          <div style="height: 200px;" class="picture">
            <el-image v-if="(!projectId && patent.abstractPath2)||projectId" :src="patent.abstractPath2?patent.abstractPath2:getImagePath1(patent)" :preview-src-list="[patent.abstractPath2]" :style="{width:patent.imgWidth?patent.imgWidth:'100%',height:patent.imgHeight?patent.imgHeight:'100%'}">
              <div slot="error" class="image-slot">
                <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="">
              </div>
            </el-image>
          </div>
          
        </el-card>
        </el-col>
    </el-row>
     <el-row :gutter="24">
      <el-col :span="18" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-tabs value="0">
              <el-tab-pane label="著录项目" name="0">
                <el-descriptions :column=2>
                  <el-descriptions-item label="申请号"><div class="patent-basic-value"  v-html="getViewDom(patent.applicationNo,'申请号')"></div></el-descriptions-item>
                  <el-descriptions-item label="申请日"><div class="patent-basic-value"  v-html="getViewDom(patent.applicationDate,'申请日')"></div></el-descriptions-item>
                  <el-descriptions-item label="公开号"><div class="patent-basic-value" v-html="getViewDom(patent.publicNo,'公开号')"></div></el-descriptions-item>
                  <el-descriptions-item label="公开日"><div class="patent-basic-value"  v-html="getViewDom(patent.publicDate,'公开日')"></div></el-descriptions-item>
                  <el-descriptions-item label="授权号" v-if="patent.publicAccreditNo"><div class="patent-basic-value"  v-html="getViewDom(patent.publicAccreditNo,'授权号')"></div></el-descriptions-item>
                  <el-descriptions-item label="授权日" v-if="patent.publicAccreditDate"><div class="patent-basic-value"  v-html="getViewDom(patent.publicAccreditDate,'授权日')"></div></el-descriptions-item>
                  <el-descriptions-item label="优先权" v-if="patent.priorityNo"><div class="patent-basic-value"  v-html="getViewDom(patent.priorityNo,'优先权')+ '&nbsp;&nbsp;&nbsp;&nbsp;' +getViewDom(patent.priorityDate)"></div></el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>  
    <el-row :gutter="24">
      <el-col :span="18" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-tabs value="0">
              <el-tab-pane label="相关人" name="0">
                <el-descriptions :column="1">
                  <el-descriptions-item label="申请人" labelStyle="width:90px" v-if="patent.applicant" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                   <div class="patent-basic-value" v-for="item in patent.applicant.filter(a => a.dataType === 2)" :key="item.name">
                    <div class="margin-right_10">
                      <span v-html="getViewDom(item.name,'申请人')"></span>
                      <span v-if="item.shortName" v-html="'(标：'+getViewDom(item.shortName,'申请人')+')'"></span>
                    </div>
                   </div>
                </el-descriptions-item>
                <el-descriptions-item label="申请人地址" labelStyle="width:90px" v-if="patent.applicant">
                   <div class="patent-basic-value" v-if="patent.applicant.filter(a => a.dataType === 2)[0]" v-html="getViewDom(patent.applicant.filter(a => a.dataType === 2)[0].addressStr,'申请人地址')"></div>
                </el-descriptions-item>
               <el-descriptions-item label="权利人" labelStyle="width:90px" v-if="patent.applicant && patent.applicant.filter(a => a.dataType === 1).length>0" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                 <div class="patent-basic-value" v-for="item in patent.applicant.filter(a => a.dataType === 1)" :key="item.name">
                  <div class="margin-right_10">
                    <span v-html="getViewDom(item.name,'权利人')"></span>
                    <span v-if="item.shortName" v-html="'(标：'+getViewDom(item.shortName,'权利人')+')'"></span>
                  </div>
                 </div>
               </el-descriptions-item>
                <el-descriptions-item label="权利人地址" labelStyle="width:90px" v-if="patent.applicant && patent.applicant.filter(a => a.dataType === 1).length>0">
                  <div class="patent-basic-value"  v-if="patent.applicant.filter(a => a.dataType === 1)[0]"  v-html="getViewDom(patent.applicant.filter(a => a.dataType === 1)[0].addressStr,'权利人地址')"></div>
                </el-descriptions-item>
               
                <el-descriptions-item label="发明人" labelStyle="width:90px" v-if="patent.inventor && patent.inventor.length>0" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                  <div class="patent-basic-value margin-right_10" v-for="item in patent.inventor" :key="item.name" v-html="getViewDom(item.name,'发明人')" ></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理人" labelStyle="width:90px" v-if="patent.agent && patent.agent.length>0">
                  <div class="patent-basic-value margin-right_10" v-for="item in patent.agent" :key="item.name"  v-html="getViewDom(item.name,'代理人')"></div>
                </el-descriptions-item>
                <el-descriptions-item label="代理机构" labelStyle="width:90px" v-if="patent.agency">
                   <div v-if="patent.agency" class="patent-basic-value"  v-html="getViewDom(patent.agency.name,'代理机构')"></div>
                </el-descriptions-item>
            </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

     <el-row :gutter="24">
      
      <el-col :span="18" >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-tabs value="0">
              <el-tab-pane label="分类号" name="0"  v-if="patent.ipcList">
                <el-descriptions :column=1>
                <el-descriptions-item label="IPC分类号" contentStyle="display:flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
                  <div class="patent-basic-value margin-right_10" v-for="item in patent.ipcList" :key="item" v-html="getViewDom(item,'IPC分类号')"></div>
                </el-descriptions-item>
            </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    
  </div>
</template>

<script>

export default {
  mixins: [],
  data() {
    return {
      inputLabelVisible: false,
      inputLabelValue: '',
    }
  },
  watch:{
    patent(val,oldVal){
      if(val!=oldVal){
        this.$nextTick(()=>{
          if(!this.projectId && !this.patent.abstractPath2 && this.patent.publicNo){
            var params = {
              patentCell:4,
              patentNo:this.patent.publicNo,
              appNo:this.patent.applicationNo,
            }
            this.$api.getPatentPart(params).then(response=>{
                  if(response.code == 200){
                    if(Object.keys(response.data).length>0 && response.data.image.length>0){
                      this.$set(this.patent,'abstractPath2',response.data.image[0].url)
                    }else{
                      this.$set(this.patent,'abstractPath2','q')
                    }
                    
                    this.getHeight(this.patent.abstractPath2, this.patent)
                  }
              })
          }
        })
      }
    }
  },
  mounted() {
    if(!this.projectId && !this.patent.abstractPath2 && this.patent.publicNo){
      var params = {
        patentCell:4,
        patentNo:this.patent.publicNo,
        appNo:this.patent.applicationNo,
      }
       this.$api.getPatentPart(params).then(response=>{
            if(response.code == 200){
              if(Object.keys(response.data).length>0 && response.data.image.length>0){
                this.$set(this.patent,'abstractPath2',response.data.image[0].url)
              }else{
                this.$set(this.patent,'abstractPath2','q')
              }
              
              this.getHeight(this.patent.abstractPath2, this.patent)
            }
        })
    }
  },

  methods: {
    handleCloseLabel(index) {
      this.patent.label.splice(index, 1);
      this.handleSubmitLabel()
    },
    handleInputLabelConfirm() {
      let inputLabelValue = this.inputLabelValue;
      if (inputLabelValue) {
        this.patent.label.push({
          name: inputLabelValue
        });
        this.handleSubmitLabel()
      }
      this.inputLabelVisible = false;
      this.inputLabelValue = '';
    },
    showInputLabel() {
      this.inputLabelVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveLabelInput.$refs.input.focus();
      });
    },
    handleSubmitLabel() {
      let data = {
        projectId: this.projectId,
        patentId: this.patent.id,
        type: 96,
        field: '54-0',
        selected: this.patent.label.map(item => item.name)
      }
      this.$api.updatePatentLabel(data).then(response => {
        this.$message.success('操作成功')
      }).catch(error => {
      })
    }
  }
}
</script>

<style lang="scss">

.patent-basic {
  // height: 500px;
  overflow: auto;
  height:calc(100% + 30px) ;
  padding-bottom: 10px;
  .el-image {
    width: 100%;
  }
  .patent-basic-label {
    color: #6b6868;
  }
  .patent-basic-value {
  }
  .patent-basic-table {
    
    font-size: 14px;
    tr {
      height: 30px;
    }
  }
  .patent-articles-patent-abstract {
    .common {
      font-size: 14px;
      margin-top: 0;
    }
    .title {
      font-weight: bold;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 5px;
      margin-top: 0;
      margin-bottom: 5px;
    }
  }
  .patent-label {
    line-height: 35px;
    .el-tag {
      margin-left: 0;
      margin-right: 10px;
    }
    .input-new-tag {
      width: 90px;
      vertical-align: bottom;
    }
  }
}
</style>