xiaoshi_system/src/views/components/import/conditionImport/view/Abstract.vue

<template>
  <div class="patent-abstract-list-view">
    <div class="patent-abstract-card" v-for="(patent, index) in records">
      <div class="patent-abstract-card-wrapper">
        <table class="patent-abstract-card-table">
          <tbody>
            <tr>
              <td v-if="refresh"><el-checkbox :label="patent.id" @change="changeSelect(patent)" :checked="selected.indexOf(patent.id) !== -1 || patentNoList.indexOf(patent.patentNo)!== -1"></el-checkbox></td>
              <td>
                <div class="patent-abstract-index-container">
                  <span>{{ (index + 1) + ((params.current - 1) * params.size) }}</span>
                  <span v-if="reportId">
                    <el-tag :type="patent.read === 0 ? 'danger' : 'success'" v-if="$permission('/workspace/folder/isRead')" effect="dark" size="small" @click="handleChangeRead(patent)">{{ readType[patent.read] }}</el-tag>
                    <el-tag type="info" v-else effect="dark" size="small" >{{ readType[patent.read] }}</el-tag>
                  </span>
                  
                </div>
                <!-- <el-popover placement="right-start" width="600" trigger="hover">
                  <img :src="getPatentAbstractImage(patent.abstractPath)" height="400" width="100%">
                  <div class="patent-abstract-image-container" slot="reference">
                    <img :src="getPatentAbstractImage(patent.abstractPath)">
                  </div>
                </el-popover> -->
                <div class="picture text-align_center patent-abstract-image-container" style="">
                    <el-image v-if="(!reportId && patent.abstractPath2)||reportId" :src="patent.abstractPath2?patent.abstractPath2:getImagePath1(patent)" :preview-src-list="[patent.abstractPath2]" style="margin:0 auto;vertical-align:middle;" :style="{width:patent.imgWidth?patent.imgWidth:'100%',height:patent.imgHeight?patent.imgHeight:'100%'}">
                    <div slot="error" class="image-slot">
                      <el-image :src="getErrorImage(patent)" :preview-src-list="[getErrorImage(patent)]">
                        <div slot="error" class="image-slot">
                          <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="" style="">
                        </div>
                      </el-image>
                    </div>
                  </el-image>

                </div>
                <div class="patent-abstract-pdf-button-container">
                  <el-button :disabled="!$permission('/workspace/folder/PDFdownload')" class="width_100" size="small" type="primary" @click="handleDownload(patent)">PDF 下载</el-button>
                </div>
              </td>
              <td width="850px">
                <div class="patent-abstract-title">
                  <el-link :disabled="!$permission('/workspace/details')" :class="$permission('/workspace/details')?'':'jinzhi'" type="success" @click.native="handleLink(patent)">
                    <span v-html="getViewDom(patent.patentNo)"></span>
                  </el-link>
                  <el-tag class="margin-left_10" type="primary" effect="dark" size="small" v-if="patent.simpleStatus">{{ patent.simpleStatus }}</el-tag>
                </div>
                <div style="font-size: 13px;">
                  <el-row>
                    <el-col :span="24" v-if="t()">
                      <span class="patent-abstract_label">标题:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getViewDom2(patent, 'name')"></span>
                        <el-link v-if="reportId" type="primary" @click.native="handleChange(patent, 'name')" style="margin-left: 10px;">
                          <span v-if="!patent.change">切换译文</span>
                          <span v-else>切换原文</span>
                        </el-link>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8" v-if="t()">
                      <span class="patent-abstract_label">申请日:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getViewDom(patent.applicationDate)"></span>
                      </span>
                    </el-col>
                    <el-col :span="8" v-if="t()">
                      <span class="patent-abstract_label">公开日:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getViewDom(patent.publicDate)"></span>
                      </span>
                    </el-col>
                    <el-col :span="8" v-if="t()">
                      <span class="patent-abstract_label">申请号:</span>
                      <span class="patent-abstract_text">
                        <span v-html="getViewDom(patent.applicationNo)"></span>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">权利人:</span>
                      <span class="patent-abstract_text" v-if="patent.applicant">
                        <template v-for="(item, index) in patent.applicant.filter(a => a.dataType === 1)">
                          <el-link type="primary">
                            <span v-html="getViewDom(item.name)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </template>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">申请人:</span>
                      <span class="patent-abstract_text" v-if="patent.applicant">
                        <template v-for="(item, index) in patent.applicant.filter(a => a.dataType === 2)">
                          <el-link type="primary">
                            <span v-html="getViewDom(item.name)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </template>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">发明人:</span>
                      <span class="patent-abstract_text">
                        <template v-for="(item, index) in patent.inventor">
                          <el-link type="primary">
                            <span v-html="getViewDom(item.name)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </template>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">IPC分类号:</span>
                      <span class="patent-abstract_text">
                        <template v-for="(item, index) in patent.ipcList">
                          <el-link type="primary">
                            <span v-html="getViewDom(item)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </template>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t('simpleFamily')">
                    <el-col :span="24">
                      <span class="patent-abstract_label">简单同族:</span>
                      <span class="patent-abstract_text">
                        <template v-for="(item, index) in patent.family.simple">
                          <el-link type="primary" @click.native="handleFamily(item)">
                            <span v-html="getViewDom(item)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </template>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t('inpadocFamily')">
                    <el-col :span="24">
                      <span class="patent-abstract_label">INPADOC同族:</span>
                      <span class="patent-abstract_text">
                        <template v-for="(item, index) in patent.family.inpadoc">
                          <el-link type="primary" @click.native="handleFamily(item)">
                            <span v-html="getViewDom(item)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </template>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t('patSnapFamily')">
                    <el-col :span="24">
                      <span class="patent-abstract_label">PatSnap同族:</span>
                      <span class="patent-abstract_text">
                        <template v-for="(item, index) in patent.family.patSnap">
                          <el-link type="primary" @click.native="handleFamily(item)">
                            <span v-html="getViewDom(item)"></span>
                          </el-link>
                          <span class="patent-abstract_semicolon">;</span>
                        </template>
                      </span>
                    </el-col>
                  </el-row>
                  <el-row v-if="t()">
                    <el-col :span="24">
                      <span class="patent-abstract_label">摘要:</span>
                      <div>
                        <span v-html="getViewDom2(patent, 'abstractStr')"></span>
                        <el-link v-if="reportId" type="primary" @click.native="handleChange(patent, 'abstractStr')">
                          <span v-if="!patent.change2">切换译文</span>
                          <span v-else>切换原文</span>
                        </el-link>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { commonMixins } from "@/views/workspace/folder/articles/components/mixins"
import { patentViewList, patentKeywordsHighlight } from '@/views/workspace/folder/components/mixins.js'

export default {
  props: ['viewField'],
  mixins: [patentViewList, patentKeywordsHighlight,commonMixins],
  data() {
    return {
      checkList: [],
      readType: {
        1: '已读',
        0: '未读'
      },
      statusType: {

      },
      row: {}
    }
  },
  watch: {
    records(val,oldval) {
      if(val != oldval){
        this.$nextTick(() => {
          this.addRecords()
          this.refreshCheckBox()
        })
      }
      
    }
  },
  computed: {
    columnList() {
      return this.viewField.filter(item => !item.hidden)
    },
    customField() {
      return this.viewField.filter(item => !item.hidden && (item.type !== 'list' || item.key === 'label'))
    },
  },
  mounted() {

  },
  methods: {
    handleFamily(item) {
      this.$api.getPatentIdByPatentNo({ patentNo: item }).then(response => {
        if (response.data === 0) {
          this.$alert('专利暂未收录', '请求错误', {
            confirmButtonText: '确定',
            type: 'error',
            callback: action => {}
          });
        } else {
          this.handleLink({ id: response.data })
        }
      })
    },
    getColumnValue(patent, column) {
      if (column.key !== 'label') {
        const field = patent.field.find(item => item.id === parseInt(column.key))
        if (field) {
          return field.selected
        }
      } else {
        return patent.label.map(item => item.name)
      }
      return []
    },
    handleIndexSetting(row, field) {
      this.$emit('index-setting', row, field)
    },
    t(key) {
      if (key) {
        return this.columnList.map(item => item.key).indexOf(key) !== -1
      }
      return true
    },
    getPatentAbstractImage(path) {
      if (!path) {
        return ''
      }
      return this.$p + path
    },
    openPatentAbstractImage(abstractPath) {
      // console.log(abstractPath)
    },
    handleDownload(patent) {
      this.$emit('download', patent)
    },
    handleChangeRead(patent) {
      const status = patent.read === 1 ? 0 : 1
      this.$emit('change-read', [patent.id], status)
    }
  }
}
</script>

<style lang="scss">
.patent-abstract-list-view {
  .patent-abstract-card {
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    .patent-abstract-card-wrapper {
      padding: 10px;
      min-height: 200px;
      .patent-abstract-card-table {
        height: 100%;
        .patent-abstract-index-container {
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 10px;
          .el-tag {
            margin-left: 10px;
            cursor: pointer;
          }
        }
        .patent-abstract-image-container {
          // padding: 10px;
          border: 1px solid #bcc2cc;
          border-radius: 4px;
          width: 120px;
          height: 150px;
          line-height: 150px;
          // img {
          //   width: 100%;
          //   height: 100%;
          // }
        }
        .patent-abstract-pdf-button-container {
          text-align: center;
          margin-top: 10px;
        }
        .patent-abstract-title {
          margin-bottom: 5px;
        }
        .patent-custom-field {
          line-height: 35px;
          font-size: 14px;
          border-bottom: 1px solid #ebecf0;
          .name {
            width: 200px;
            float: left;
          }
          .data {
            width: calc(100% - 200px);
            float: right;
          }
        }
        .patent-abstract_label {
          color: #495973;
          padding-right: 8px;
        }
        .patent-abstract_text {
          .el-link {
            position: relative;
            top: -2px;
          }
        }
        .patent-abstract_semicolon {
          padding-left: 5px;
          padding-right: 5px;
          display: inline-block;
          color: #495973;
        }
        tbody, tr, td {
          height: 100%;
          vertical-align: top;
        }
      }
      .el-checkbox__label {
        display: none;
      }
    }
  }
  .el-card__header {
    font-weight: normal;
    font-size: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #EBEEF5;
  }
}
</style>