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

<template>
  <!-- 图片视图 -->
  <div class="pic">
    <div class="item" style="padding:10px;display: flex;flex-wrap: wrap;">
      <el-card shadow="hover" v-for="(item, index) in tableData" style="width:200px">
        <div slot="header"
          style="width: 100%; white-space: nowrap;overflow-x: hidden;text-overflow: ellipsis;font-size:12px;">
          <div>序号：{{ (index + 1) + ((queryParams.current - 1) * queryParams.size) }}</div>
          <el-divider></el-divider>
          <span v-if="refresh"> <el-checkbox :label="item.id" @change="changeSelect(item)"
             >

              <el-link :disabled="!$permission('/workspace/details')"
                :class="$permission('/workspace/details') ? '' : 'jinzhi'" :type="item.read === 1 ? 'success' : 'danger'"
                @click.native.prevent="handleLink(item)">
                <span v-html="getViewDom(item,'patentNo')"></span>
              </el-link>

            </el-checkbox> </span>
          <el-tooltip effect="dark" :content="getViewDom2(item,'title')" placement="left">
            <span style="" v-html="getViewDom2(item,'title')"></span>
          </el-tooltip>
        </div>
        <div class="picture text-align_center" style="height: 200px;width:100%;line-height:200px;">
          <el-image v-if="(!projectId && item.abstractPath2) || projectId"
            :src="item.abstractPath2 ? item.abstractPath2 : getImagePath1(item)" :preview-src-list="[item.abstractPath2]"
            style="margin:0 auto;vertical-align:middle;"
            :style="{ width: item.imgWidth ? item.imgWidth : '100%', height: item.imgHeight ? item.imgHeight : '100%' }">
            <div slot="error" class="image-slot">
              <el-image :src="getErrorImage(item)" :preview-src-list="[getErrorImage(item)]">
                <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>
      </el-card>
      <!--      
      </el-col>
    </el-row> -->
    </div>
  </div>
</template>

<script>
// import { commonMixins } from "../../articles/components/mixins"
// import { patentViewList, patentKeywordsHighlight } from '../mixins'
import { projectData, handleData } from '../mixins/index'
export default {
  mixins: [projectData, handleData],
  props: [],
  // mixins:[commonMixins,patentViewList, patentKeywordsHighlight ],
  data() {
    return {

    }
  },
  computed: {
    // records() {
    //   return this.$store.state.patent.records
    // }
  },
  watch: {
    records(val, oldval) {
      if (val != oldval) {
        this.$nextTick(() => {
          this.addRecords()
          this.refreshCheckBox()
        })
      }
    }
  },
  mounted() {

  },
  methods: {

  },
}
</script>

<style lang="scss">
.pic {
  .el-divider {
    margin: 5px 0px;
  }

  .el-card__header {
    padding: 5px !important
  }

  .el-card__body {
    padding: 0px !important
  }
}</style>