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

<template>
  <div class="patent-table-list-view">
    <el-table
        v-if="refreshData"
        ref="table"
        class="view-table"
        :data="records"
        style=""
        border
        :height="tableHeight"
        header-row-class-name="custom-table-header"
        @cell-click="handleClick"
        :cell-class-name="cellClassName"
    >
      <el-table-column width="80" align="center">
        <template slot="header">
          <patent-table-view-sort prop="id" @on-sort="onSort" />
        </template>
        <template slot-scope="scope">
          <div v-if="refresh">
            <el-checkbox :label="scope.row.id" @change="changeSelect(scope.row)" :checked="selected.indexOf(scope.row.id) !== -1 || patentNoList.indexOf(scope.row.patentNo)!== -1 || patentNoList.indexOf(scope.row.applicationNo)!== -1 ">
              <span>{{ (scope.$index + 1) + ((params.current - 1) * params.size) }}</span>
            </el-checkbox>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="专利号" show-overflow-tooltip align="center" width="180">
        <template slot="header">
          <patent-table-view-sort title="专利号" prop="patentNo" @on-sort="onSort" />
        </template>
        <template slot-scope="scope">
          <el-popover placement="right-start" width="500" trigger="hover" >
            <table class="patent-popover-table" >
              <tr>  
                <td>
                  <div class="patent-abstract-image text-align_center" >
                    <!-- <img :src="getPatentAbstractImage(scope.row.abstractPath)"> -->
                    <!-- <img :src="getImagePath1(scope.row)"> -->
                    <el-image v-if="(!reportId && scope.row.abstractPath2)||reportId" :src="scope.row.abstractPath2?scope.row.abstractPath2:getImagePath1(scope.row)" :preview-src-list="[scope.row.abstractPath2]" style="vertical-align:middle;" :style="{width:scope.row.imgWidth?scope.row.imgWidth:'100%',height:scope.row.imgHeight?scope.row.imgHeight:'100%'}">
                      <div slot="error" class="image-slot">
                        <el-image :src="getErrorImage(scope.row)" :preview-src-list="[getErrorImage(scope.row)]">
                          <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>
                </td>
                <td>
                  <p v-html="getViewDom2(scope.row, 'abstractStr')"></p>
                  <el-link v-if="reportId" type="primary" @click.native="handleChange(scope.row, 'abstractStr')">
                    <span v-if="!scope.row.change2">切换译文</span>
                    <span v-else>切换原文</span>
                  </el-link>
                </td>
              </tr>
            </table>
            <el-link slot="reference" :disabled="!$permission('/workspace/details')" :class="$permission('/workspace/details')?'':'jinzhi'" :type="scope.row.read === 1 ? 'success' : 'danger'" @click.native="handleLink(scope.row,scope.$index)">
              <span v-html="getViewDom(scope.row.patentNo)"></span>
            </el-link>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column v-for="column in columnList" :label="column.name" show-overflow-tooltip align="center">
        <template slot="header">
          <patent-table-view-sort :title="column.name" :prop="column.key" :reportId="reportId" @on-sort="onSort" />
        </template>
        <template slot-scope="scope">
          <div style="" v-for="data in getColumnValue(scope.row, column)">
            <template v-if="column.key === 'name'">
              <span v-html="getViewDom2(scope.row, 'name')"></span>
              <br>
              <el-link v-if="reportId" type="primary" @click.native="handleChange(scope.row, 'name')">
                <span v-if="!scope.row.change">切换译文</span>
                <span v-else>切换原文</span>
              </el-link>
            </template>
            <template v-else-if="column.key === 'abstractStr'">
              <span v-html="getViewDom2(scope.row, 'abstractStr')"></span>
              <br>
              <el-link v-if="reportId" type="primary" @click.native="handleChange(scope.row, 'abstractStr')">
                <span v-if="!scope.row.change2">切换译文</span>
                <span v-else>切换原文</span>
              </el-link>
            </template>
            <template v-else>
              <span v-html="getViewDom(data)"></span>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

export default {
  props: ['viewField'],
  mixins: [patentViewList, patentKeywordsHighlight,commonMixins],
  components: {
    PatentTableViewSort
  },
  data() {
    return {
      tableData: [],
      tableHeight: null,
      refreshData: false
    }
  },
  watch: {
    viewField: {
      handler(n, o) {
        this.refreshTable()
      },
      deep: true
    },
    records(val,oldval) {
      
      if(val != oldval){
        this.$nextTick(() => {
          this.addRecords()
          this.refreshCheckBox()
          this.setHeight()
        })
      }
      
    },
    refreshData(val){
      if(val){
        this.$nextTick(()=>{
          this.setHeight()
        })
        
      }
    }
  },
  activated() {
    // this.refreshTable()
  },
  computed: {
    columnList() {
      return this.viewField.filter(item => !item.hidden)
    }
  },
  created(){

  },
  mounted() {
    if(this.viewField.length>0){
      this.refreshTable()
    }
    this.$nextTick(()=>{
      this.addRecords()
    })
    // console.log(this.columnList);
  },
  methods: {
    getPatentAbstractImage(path) {
      if (!path) {
        return ''
      }
      return this.$p + path
    },
    onSort(data) {
      this.$emit('on-sort', data)
    },
    setHeight() {
      const offsetTop = window.innerHeight -250
      const body = document.querySelector('.el-table__body')
      if (!body) {
        return false
      }
      const offsetBodyHeight = body.offsetHeight
      if (this.records.length && offsetBodyHeight < offsetTop) {
        this.tableHeight = offsetBodyHeight + 75
      } else if (!this.records.length) {
        this.tableHeight = null
      } else {
        this.tableHeight = offsetTop
      }
    },
    refreshTable() {
      this.refreshData = false
      this.$nextTick(() => {
        this.refreshData = true
      })
    },
    getColumnValue(row, column) {
      if (column.type !== 'list') {
        const field = row.field.find(item => item.id === parseInt(column.key))
        if (field) {
          return field.selected
        }
      } else if (column.key === 'label') {
        if(row.label)
        return row.label.map(item => item.name)
      } else {
        const value = row[column.key]
        if (column.key === 'inventor' || column.key === 'agent') {
          if(value)
          return value.map(item => item.name)
        }
        if (column.key === 'applicant1') {
          if(row.applicant)
          return row.applicant.filter(a => a.dataType === 1).map(item => item.shortName)
        }
        if (column.key === 'applicant2') {
          if(row.applicant)
          return row.applicant.filter(a => a.dataType === 1).map(item => item.name)
        }
        if (column.key === 'applicant3') {
          if(row.applicant)
          return row.applicant.filter(a => a.dataType === 2).map(item => item.shortName)
        }
        if (column.key === 'applicant4') {
          if(row.applicant)
          return row.applicant.filter(a => a.dataType === 2).map(item => item.name)
        }
        if (column.key === 'simpleFamily') {
          return [row.family.simple.length]
        }
        if (column.key === 'inpadocFamily') {
          return [row.family.inpadoc.length]
        }
        if (column.key === 'patSnapFamily') {
          return [row.family.patSnap.length]
        }
        if (column.key === 'agency' && value) {
          return [value.name]
        }
        if (value instanceof Array) {
          return value
        } else if (typeof value === 'string' || typeof value === 'number') {
          return [value]
        }
        return ''
      }
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (this.validationCustomField(column.label)) {
        return 'custom-field-cell'
      }
    },
    validationCustomField(label) {
      const customField = this.viewField.filter(item => item.type !== 'list' || item.key === 'label')
      const field = customField.find(item => item.name === label)
      if (field) {
        return field
      }
      return false
    },
    handleClick(row, column, cell,event) {

      const field = this.validationCustomField(column.label)
      if (field) {
        this.$emit('index-setting', row, field)
      }
    },
  }
}
</script>

<style lang="scss">
.patent-popover-table {
  tbody, tr, td {
    height: 100%;
    vertical-align: top;
  }
  p {
    padding: 0 !important;
    margin: 0 !important;
  }
  .patent-abstract-image {
    padding: 10px;
    border: 1px solid #bcc2cc;
    border-radius: 4px;
    width: 120px;
    height: 150px;
    line-height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.patent-table-list-view {
  .view-table {
    width: 100%;
  }
  .el-table .cell {
    white-space: pre-line !important;
  }
  .custom-field-cell {
    cursor: pointer;
  }
}
</style>