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">
      <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 :disabled="!$permission('/workspace/details/figureDelete')" class="delete" type="text" @click="handleDelete(item)">删除</el-button>
            <el-button :disabled="!$permission('/workspace/details/figuremodify')" class="edit" type="text" @click="handleEdit(item)">编辑</el-button>
          </div>
          <div class="text-align_center">
            <el-image :src="!projectId?item.url:getImagePath(item.url)" :preview-src-list="srcList" style="height: 100%; min-height:125px;"></el-image>
          </div>
      </el-card>
    </div>

    <div type="primary" class="up" v-if="$permission('/workspace/details/figureUpdata')&& projectId && $r(projectId,[1,2])" @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: {
    patentId() {
      this.srcList = this.patent.image.map(item => this.getImagePath(item.url))
    },
    'patent'(){

    },
    patentNo(){
      if(!this.projectId){
        this.getData()
      }
    }
  },
  mounted() {
    if(this.patent.image){
      this.srcList = this.patent.image.map(item => this.getImagePath(item.url))
    }else{
      if(!this.projectId){
        this.getData()
      }
    }
    
    // console.log(this.patent)
  },
  methods: {
    getData(){
      var params = {
            patentCell:4,
            patentNo:this.patent.publicNo,
            appNo:this.patent.applicationNo,
          }
        this.$api.getPatentPart(params).then(response=>{
            if(response.code == 200){
              if(Object.keys(response.data).length>0 && response.data.image.length>0){
                this.$set(this.patent,'image',response.data.image)
              }else{
                this.$set(this.patent,'image',[])
              }
              this.srcList = this.patent.image.map(item=>item.url)
            }
        })
    },
    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">
.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;
    cursor: pointer;
    text-align: center;
    .card-header {
      height: 20px;
    }
    .el-card__header {
      border-bottom: 1px solid #EBEEF5;
      font-weight: normal;
    }
  }
  .el-image {
    width: 100%;
  }
}
</style>