xiaoshi_system/src/views/project/patentCollection/components/views/Table.vue

<template>
  <div class="patent-table-list-view height_100" v-DivHeight="getDivHeight">
    <el-table :data="tableData" border style="width: 100%" header-row-class-name="custom-table-header" ref="table"
      :maxHeight="tableHeight" @sort-change="sortChange" @cell-click="cellClick" :cell-class-name="cellClassName">
      <el-table-column label="#" width="100" type="index" align="center" fixed="left">
        <template slot-scope="scope">
          <div v-if="refresh">
            <el-checkbox-group :value="patentNoList" >
              <el-checkbox :label="scope.row.patentNo" @change="changeSelect(scope.row)">
                <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
              </el-checkbox>
            </el-checkbox-group>
            <!-- <el-checkbox :label="scope.row.patentNo" @change="changeSelect(scope.row)"
                :checked="patentNoList.filter(item => { return item == scope.row.patentNo || item == scope.row.appNo }).length > 0">
                <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
              </el-checkbox> -->
          </div>
          <div v-else>
            <span>{{ (scope.$index + 1) + ((queryParams.current - 1) * queryParams.size) }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column v-for="item in column.filter(item => !item.ifHidden)" :width="['abstractStr'].indexOf(item.value)!=-1?'500':'auto'" min-width="200" :fixed="['patentNo'].indexOf(item.value)!=-1?'left':false"
        :render-header="$commonJS.renderHeaderMethods" :key="item.value" :prop="item.field" :label="item.name"
        :sortable="(canSort && item.ifSort)?'custom':false" align="center">
        <template slot-scope="scope">
          <div v-if="['patentNo'].includes(item.value)">
            <el-popover placement="right-start" width="500" @show="showPopover(scope.row)" trigger="hover">
              <table class="patent-popover-table" v-if="scope.row.showPopover">
                <tr>
                  <td>
                    <div class="patent-abstract-image text-align_center">
                      <el-image fit="contain" :src="outside?scope.row.pictureGuid:$commonJS.checkViewer(scope.row.pictureGuid)" 
                        :preview-src-list="[outside?scope.row.pictureGuid:$commonJS.checkViewer(scope.row.pictureGuid)]" 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">
                          <img src="https://www.patentstar.com.cn/img/Common/nopic.jpg" alt="" style="">
                        </div>
                      </el-image>
                    </div>
                  </td>
                  <td>
                    <p v-html="getView(scope.row, 'abstractStr')"></p>
                    <el-link v-if="haveTranslatedText(scope.row, 'abstractStr')" type="primary" @click.native="handleChange(scope.row, 'abstractStr')">
                      <span v-if="!scope.row.change2">切换译文</span>
                      <span v-else>切换原文</span>
                    </el-link>
                  </td>
                </tr>
              </table>
              <template v-if="scope.row.ifSearch" slot="reference">
                <el-link  type="primary" @click="handleClick(scope.row, scope.$index)">
                  <span v-html="getView(scope.row, item.value, item.type)"></span>
                </el-link>
              </template>
              <template v-else slot="reference">
                  <span v-html="getView(scope.row, item.value, item.type)"></span>
                  <span>（未匹配到专利）</span>
              </template>
              
            </el-popover>
          </div>
          <template v-else-if="item.ifPersonal">
            <div>
              <span v-html="getCustomView(scope.row,item)"></span>
            </div>
          </template>
          <template v-else-if="item.value === 'title'">
            <span v-html="getView(scope.row, 'title')"></span>
            <br>
            <el-link v-if="haveTranslatedText(scope.row, 'title')" type="primary" @click.native="handleChange(scope.row, 'title')">
              <span v-if="!scope.row.change">切换译文</span>
              <span v-else>切换原文</span>
            </el-link>
          </template>
          <template v-else-if="item.value === 'abstractStr'">
            <span v-html="getView(scope.row, 'abstractStr')"></span>
            <br>
            <el-link v-if="haveTranslatedText(scope.row, 'abstractStr')" 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-if="item.value === 'legalStatus'">
            <span v-html="getView(scope.row, 'legalStatus')"></span>
          </template>
          <!-- 专利状态 -->
          <template v-else-if="item.value === 'simpleStatus'">
            <span v-html="getView(scope.row, 'simpleStatus')"></span>
          </template>
          <!-- 专利类型 -->
          <template v-else-if="item.value === 'patentType'">
            <span v-html="getView(scope.row, 'patentType')"></span>
          </template>
          <div v-else v-html="getView(scope.row, item.value, item.type)"></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { projectData, handleData } from '../mixins/index'
import { getTableHeight } from '@/views/components/mixins'
export default {
  props:{
    canSort:{
      type:Boolean,
      default:true
    }
  },
  mixins: [projectData, handleData, getTableHeight],
  components: {

  },
  data() {
    return {
    }
  },
  watch:{
    tableData(){
      this.$refs.table.doLayout();
    }
  },
  activated() {
  },
  computed: {

  },
  created() {

  },
  mounted() {

    // console.log(this.columnList);
  },
  methods: {
    showPopover(row){
      this.$set(row,'showPopover',true)
    },
    // 排序
    sortChange({ column, prop, order }) {
      this.$emit('on-sort', { column, prop, order })
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (this.validationCustomField(column.label)) {
        return 'custom-field-cell'
      }
    },
    validationCustomField(label) {
      const field = this.column.find(item => item.name === label)
      if (field && field.ifPersonal) {
        return field
      }
      return false
    },
    cellClick(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>