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

<template>
  <div class="patent-image">
    <div class="block">
      <div class="demonstration">图片大小：</div>
      <el-slider v-model="value" @change="changeWidth" :min="25" :max="100" style="padding-left:90px"></el-slider>
    </div>
    <div class="imageCard" v-if="patent.image">
      <template v-if="patent.image.abstImgs && patent.image.abstImgs.length">
        <el-card class="preview" v-for="(item, index) in patent.image.abstImgs" :key="'abs'+index" shadow="hover" :style="{ width: width }" >
          <div class="text-align_center image_contain">
            <div class="image_name">摘要附图</div>
            <!-- <el-image fit="contain" :src="outside ? item : item.path" :preview-src-list="srcList"
              style="width:250px;height:250px;"></el-image> -->
              <patentImage fit="contain" lazy :patent="item" :preview-src-list="[item.patentAbsImage]"></patentImage>
          </div>
        </el-card>
      </template>
      <template v-if="patent.image.figures && patent.image.figures.length">
        <el-card class="preview" v-for="(item, index) in patent.image.figures" :key="'figures'+index" shadow="hover" :style="{ width: width }">
          <div class="text-align_center image_contain">
            <div class="image_name" v-if="item.name">{{ item.name }}</div>
            <el-image fit="contain" :src="outside ? item : item.path" :preview-src-list="srcList"
              style="width:250px;height:250px;"></el-image>
          </div>
        </el-card>
      </template>
      <template v-if="patent.image.fulltextImgs && patent.image.fulltextImgs.length">
        <el-card class="preview" v-for="(item, index) in patent.image.fulltextImgs" :key="'fulltextImgs'+index" shadow="hover" :style="{ width: width }">
          <div class="text-align_center image_contain">
            <div class="image_name" v-if="item.name">{{ item.name }}</div>
            <el-image fit="contain" :src="outside ? item : item.path" :preview-src-list="srcList"
              style="width:250px;height:250px;"></el-image>
          </div>
        </el-card>
      </template>
      <!-- <el-card class="preview" v-for="(item, index) in patent.image" :key="index" shadow="hover" :style="{ width: width }">
        <div slot="header" class="card-header" v-if="projectId">
          <span></span>
          <el-button class="delete" type="text" @click="handleDelete(item)">删除</el-button>
          <el-button class="edit" type="text" @click="handleEdit(item)">编辑</el-button>
        </div>
        <div class="text-align_center">
          <el-image fit="contain" :src="outside ? item : $commonJS.checkViewer(item)" :preview-src-list="srcList"
            style="width:250px;height:250px;"></el-image>
        </div>
      </el-card> -->
    </div>

    <!-- <div type="primary" class="up" @click="handleAdd">上传图片</div> -->

    <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body destroy-on-close :before-close="close"
      top="22vh">
      <el-form :model="form">
        <el-form-item label="是否设置为摘要附图">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload class="upload-file" drag action="#" :auto-upload="false" :show-file-list="false"
            :on-change="onChange">
            <i :class="!file ? 'el-icon-upload' : 'el-icon-refresh'"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip"></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { patentDetails } from './mixins';
export default {
  mixins: [patentDetails],
  data() {
    return {
      value: 25,
      width: "25%",
      srcList: [],
      url: '',
      title: '',
      visible: false,
      form: {},
      file: null,
      btnLoading: false
    }
  },
  watch: {
    patentNo() {
      if (this.outside) {
        this.getData()
      }else {
        this.refreshData()
      }
    }
  },
  mounted() {
    // outside为true是外部
    if (this.outside) {//外部
      this.getData()
    } else {
      this.refreshData()
    }
  },
  methods: {
    // 获得外部的附图
    getData() {
      if(this.patent.image){
        return false
      }
      var params = {
        appNo: this.patent.rowApplicationNo,
      }
      this.loading = true
      this.$api.getExternalFigure(params).then(response => {
        if (response.code == 200) {
          if (response.data.length>0) {
            
            var image = {
              figures:[]
            }
            response.data.forEach(pic=>{
              image.figures.push(
                {
                  path:pic,
                  rowApplicationNo:this.patent.rowApplicationNo
                }
              )
            })
            this.$set(this.patent, 'image', image)
            this.$set(this, 'srcList', response.data)
          } else {
            this.$set(this.patent, 'image', null)
            this.$set(this, 'srcList', [])
          }
          this.loading = false
        }
      }).catch(error=>{
        this.loading = false
      })
    },
    // 获取内部的附图
    refreshData() {
      if(this.patent.image && this.patent.image.length>0){
        return false
      }
      var params = {
        patentNo:this.patent.patentNo
      }
      this.loading = true
      this.$api.getPatentFigures(params).then(response => {
        if (response.code == 200) {
          if (response.data&& Object.keys(response.data).length>0) {
            this.$set(this.patent, 'image', response.data)
            let srcList = []
            Object.keys(response.data).forEach(item=>{
              if(response.data[item] && response.data[item].length){
                response.data[item].forEach(pic=>{
                  pic.rowApplicationNo = this.patent.rowApplicationNo
                  srcList.push(pic.path)
                })
              }
            })
            // let srcList=response.data.map(item=>{
            //   return this.$commonJS.checkViewer(item)
            // })
            this.$set(this, 'srcList', srcList)
          } else {
            this.$set(this.patent, 'image', null)
            this.$set(this, 'srcList', [])
          }
          this.loading = false
        }
      }).catch(error=>{
        this.loading = false
      })
      return
      var params = {
        appNo: this.patent.appNo,
      }
      this.loading = true
      this.$api.getFigure(params).then(response => {
        if (response.code == 200) {
          if (response.data.length>0) {
            this.$set(this.patent, 'image', response.data)
            let srcList=response.data.map(item=>{
              return this.$commonJS.checkViewer(item)
            })
            this.$set(this, 'srcList', srcList)
          } else {
            this.$set(this.patent, 'image', [])
            this.$set(this, 'srcList', [])
          }
          this.loading = false
        }
      }).catch(error=>{
        this.loading = false
      })
    },
    changeWidth() {
      this.width = this.value + '%'
    },
    close() {
      this.visible = false
    },
    onChange(file, fileList) {
      this.file = file.raw
    },
    handleAdd() {
      this.visible = true
      this.title = '新增附图'
      this.form = {
        patentId: this.patent.id,
        status: 0,
        url: ''
      }
    },
    handleEdit(row) {
      this.visible = true
      this.title = '编辑附图'
      this.form = { ...row }
    },
    handleDelete(row) {
      this.$confirm('确认删除本条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deletePatentImage({ id: row.id }).then(response => {
          this.$message.success('删除成功')
          this.refreshPatent()
        }).catch(error => {
        })
      })
    },
    refreshPatent() {
      this.$emit('refresh')
    },
    submit() {
      let formData = new FormData()
      formData.append('patentId', this.form.patentId)
      formData.append('status', this.form.status)
      formData.append('url', this.form.url)
      if (this.file) {
        formData.append('file', this.file)
      }
      if (this.form.id) {
        this.btnLoading = true
        formData.append('id', this.form.id)
        this.$api.editPatentImage(formData).then(response => {
          this.btnLoading = false
          this.$message.success('操作成功')
          this.visible = false
          this.file = null
          this.refreshPatent()
        }).catch(error => {
          this.btnLoading = false
        })
      } else {
        if (!this.file) {
          this.$message.error('请选择文件')
          return false
        }
        this.btnLoading = true
        this.$api.uploadPatentImage(formData).then(response => {
          this.btnLoading = false
          this.$message.success('操作成功')
          this.visible = false
          this.file = null
          this.refreshPatent()
        }).catch(error => {
          this.btnLoading = false
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .image_contain{
    position: relative;
    width: 100%;
    height: 100%;
    .image_name{
      position: absolute;
      font-weight: bold;
      top: -25px;
      left: 0px;
      z-index: 999;
    }
  }
</style>
<style lang="scss">
.up {
  width: 70px;
  height: 30px;
  line-height: 30px;
  color: rgb(65, 65, 224);
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 0px;
}

.up:hover {
  border-bottom: 1px solid rgb(45, 45, 235);
}

.block {
  width: 60%;
  margin: 0 auto;
}

.imageCard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.demonstration {
  float: left;
  line-height: 38px;
  text-align: center;
}

.patent-image {
  position: relative;

  .delete {
    float: right;
    padding: 3px 0;
    color: red;
    padding-left: 10px;
  }

  .edit {
    float: right;
    padding: 3px 0;
  }

  .add {
    font-size: 80px;
    color: #6b6868;
    margin-top: 60px;
  }

  .preview {
    // height: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    text-align: center;

    .card-header {
      height: 20px;
    }

    .el-card__header {
      border-bottom: 1px solid #EBEEF5;
      font-weight: normal;
    }
    .el-card__body{
      height: 100%;
      width: 100%;
      padding: 30px 20px;
    }
  }

  .el-image {
    width: 100%;
  }
}</style>