irc_web/src/components/UploadFiles/index.vue

<template>
  <!-- 上传协议 -->
  <div class="uploadFiles-container">
    <el-upload
      class="upload-demo"
      action
      :show-file-list="false"
      :http-request="handleUploadFile"
      :file-list="fileList"
      :accept="accept"
    >
      <el-button size="small" type="primary" :disabled="isDisabled">{{
        $t('common:button:upload')
      }}</el-button>
    </el-upload>
  </div>
</template>
<script>
import {
  getAttachmentByType,
  uploadFile,
  saveAttachments,
  deleteAttachment,
} from '@/api/attachment'
export default {
  name: 'UploadFiles',
  props: {
    type: {
      type: String,
      required: true,
    },
    doctorId: {
      type: String,
      required: true,
    },
    accept: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      fileList: [],
      repeat: false,
      isDisabled: false,
    }
  },
  watch: {
    doctorId() {
      if (this.doctorId) {
        this.initFileList()
      }
    },
  },
  mounted() {
    if (!this.doctorId) return
    this.initFileList()
  },
  methods: {
    initFileList() {
      const loading = this.$loading({
        fullscreen: false,
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.07)',
      })
      getAttachmentByType(this.doctorId, this.type)
        .then((res) => {
          loading.close()
          if (res.IsSuccess) {
            if (res.Result.length > 0) {
              this.fileList = this.formatterFileList(res.Result)
              this.$emit('getFileList', this.fileList)
            } else {
              this.fileList = []
            }
          }
        })
        .catch(() => {
          loading.close()
        })
    },

    formatterFileList(list) {
      var arr = []
      list.forEach((item) => {
        const data = {
          DoctorId: item.DoctorId,
          Type: item.Type,
          Path: item.Path,
          FullPath: item.FullPath,
          FileName: item.FileName,
          CreateTime: item.CreateTime,
          Id: item.Id,
        }
        arr.push(data)
      })
      return arr
    },
    handleUploadFile(param) {
      this.repeat = false
      // 检测文件后缀名
      if (this.checkFileSuffix(param.file.name)) {
        // 检测是否有重名文件
        const isRepeat = this.fileList.some(
          (item) => item.FileName === param.file.name
        )
        if (isRepeat) {
          this.$confirm(
            this.$t('curriculumVitae:resume:message:existingResume'),
            {
              type: 'warning',
              distinguishCancelAndClose: true,
            }
          )
            .then(() => {
              // 重名覆盖
              this.repeat = true
              this.uploadFile(param.file)
            })
            .catch((action) => {})
        } else {
          this.uploadFile(param.file)
        }
      } else {
        let str = this.accept.join(', ')
        let message = this.$t(
          'trials:readingUnit:qsList:message:imageFormat'
        ).replace('xxx', str)
        this.$alert(message)
      }
    },
    async uploadFile(file) {
      this.isDisabled = true
      var fileName = file.name
      file = await this.fileToBlob(file)
      let res = await this.OSSclient.put(
        `/SystemData/reviewer/Agreements/${this.doctorId}/${fileName}`,
        file
      )
      if (this.repeat) {
        const index = this.fileList.findIndex((item, index) => {
          return item.FileName === fileName
        })
        this.fileList[index].Path = this.$getObjectName(res.url)
        this.fileList[index].FullPath = this.$getObjectName(res.url)
        this.fileList[index].ReUpload = true
      } else {
        const fileData = {
          DoctorId: this.doctorId,
          Type: this.type,
          Path: this.$getObjectName(res.url),
          FullPath: this.$getObjectName(res.url),
          FileName: fileName,
        }
        this.fileList.push(fileData)
      }
      this.saveUploadFiles()
    },
    saveUploadFiles() {
      saveAttachments(this.fileList)
        .then((res) => {
          this.fileList = this.formatterFileList(res.Result)
          this.isDisabled = false
          this.$message.success('Uploaded successfully')
          this.$emit('getFileList', this.fileList)
        })
        .catch(() => {
          this.isDisabled = false
        })
    },
    handleDeleteFile(file) {
      this.$confirm(this.$t('system:reviewer:confirm:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true,
      })
        .then(() => {
          deleteAttachment(file.Id, file.Path).then((res) => {
            if (res.IsSuccess) {
              this.fileList.splice(
                this.fileList.findIndex((item) => item.Id === file.Id),
                1
              )
              this.$emit('getFileList', this.fileList)
              this.$message({
                message: this.$t('common:message:deletedSuccessfully'),
                type: 'success',
              })
            }
          })
        })
        .catch((action) => {})
    },
    checkFileSuffix(fileName) {
      var index = fileName.lastIndexOf('.')
      var suffix = fileName.substring(index + 1, fileName.length)
      return (
        this.accept.toLocaleLowerCase().search(suffix.toLocaleLowerCase()) === 1
      )
    },
  },
}
</script>
<style>
.uploadFiles-container {
  margin: 0 5px;
}
.uploadFiles-container .el-upload--text {
  border: none;
  /* width: 80px;
  height: 30px; */
}
.uploadFiles-container .el-input--small {
  margin-bottom: 5px;
}
.uploadFiles-container .el-icon-circle-check {
  color: #428bca;
  font-size: 14px;
}
</style>