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

<template>
  <div class="patent-articles-patent-family height_100">
    <el-container>
      <el-header v-if="!outside">
        <el-form :inline="true" style="" >
          <el-form-item label="同族类型">
            <el-select v-model="type" size="small" @change="onChange">
              <el-option label="简单同族" value="simple"></el-option>
              <el-option label="INPADOC同族" value="inpadoc"></el-option>
              <el-option label="扩展同族" value="patsnap"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专利号">
            <el-input v-model="queryParams2.patentNo" size="small" placeholder="请输入专利号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="" size="small" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table v-loading="loading" :data="tableData2" header-row-class-name="custom-table-header">
          <el-table-column label="摘要附图" align="center" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="height: 150px;" class="picture">
                <el-image :src="$commonJS.checkViewer(scope.row.pictureGuid)"
                  :preview-src-list="[$commonJS.checkViewer(scope.row.pictureGuid)]"
                  :style="{ width: scope.row.imgWidth ? scope.row.imgWidth : '100%', height: scope.row.imgHeight ? scope.row.imgHeight : '100%' }">
                  <div slot="error" class="image-slot">
                    <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="">
                  </div>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="专利号" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-html="getViewDom(scope.row.patentNo)"></span>
            </template>
          </el-table-column>
          <el-table-column label="专利名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-html="getView(scope.row, 'title')"></span>
            </template>
          </el-table-column>
          <el-table-column label="申请人" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- <div v-if="scope.row.patentId !== -1"> -->
                <span v-for="item in scope.row.applicant" :key="item">
                  <span v-html="getViewDom(item, '申请人')"></span> <span>;</span>
                </span>
              <!-- </div>
              <span v-else v-html="getViewDom(scope.row.name)"></span> -->
            </template>
          </el-table-column>
          <el-table-column label="权利人" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- <div v-if="scope.row.patentId !== -1"> -->
                <span v-for="item in scope.row.rightHolder" :key="item">
                  <span v-html="getViewDom(item, '权利人')"></span> <span>;</span>
                </span>
              <!-- </div>
              <span v-else v-html="getViewDom(scope.row.name)"></span> -->
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- <el-footer class="pagination">
        <el-pagination :current-page.sync="queryParams2.pageNum" :page-size="queryParams2.pageSize" :total="total"
          @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
      </el-footer> -->
    </el-container>
  </div>
</template>

<script>
import { patentDetails } from './mixins';
export default {
  mixins: [patentDetails],
  data() {
    return {
      type: 'inpadoc',
      queryParams2: {
        // familyId: 0,
        pageNum: 1,
        pageSize: 10,
      },
      tableData2: [],
      total: 0
    }
  },
  watch: {
    patentNo() {
      this.queryParams2.pageNum = 1
      this.onChange()
    }
  },
  mounted() {
    this.onChange()
  },
  methods: {
    getList() {
      this.loading = true
      let params = {
        ...this.queryParams2,
        no: this.patent.patentNo,//专利号
        type: this.type,//同族类型
      }
      this.$api.selectKinByPatentNo(params).then(response => {
        if(response.data.data){
            this.tableData2 = response.data.data
          }else{
            this.tableData2 = []
          }
        this.loading = false
      }).catch(error=>{
        this.tableData2 = []
        this.total = 0
        this.loading = false
      })
    },
    getData() {
      this.loading = true
      var params = {
        patentNo: this.patent.patentNo,
        pageNum: this.queryParams2.pageNum,
        pageSize: this.queryParams2.pageSize
      }
      this.$api.queryExternalFamily(params).then(response => {
        if (response.code == 200) {
          if(response.data.data){
            this.tableData2 = response.data.data
            this.total = response.data.total
          }else{
            this.tableData2 = []
            this.total = 0
          }
          this.loading = false
        }
      }).catch(error => {
        this.tableData2 = []
        this.total = 0
        this.loading = false
      })
    },
    getFamilyImage(patent) {
      var params = {
        patentCell: 4,
        patentNo: patent.publicNo,
        appNo: 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(patent, 'abstractPath2', response.data.image[0].url)
          } else {
            this.$set(patent, 'abstractPath2', 'q')
          }

          this.getHeight(patent.abstractPath2, patent)
        }
      })
    },
    onChange() {
      if (this.outside) {
        this.getData()
        return false;
      }
      if (this.type == 'simpleFamilyId') {
        this.queryParams2.familyId = this.patent.simpleFamily
      } else if (this.type == 'inpadocFamilyId') {
        this.queryParams2.familyId = this.patent.inpadocFamily
      } else {
        this.queryParams2.familyId = this.patent.patSnapFamily
      }
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams2.pageNum = val;
      this.getList();
    },
  }
}
</script>

<style lang="scss">
.patent-articles-patent-family {
  .el-image {
    width: 100%;
  }
}</style>