irc_web/.svn/pristine/49/49f7ecae5f6817835d3e02cf783c08b55a8c2a07.svn-base

<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">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
    }
  },
  mounted() {
    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('Override the existing resume?', {
            type: 'warning',
            distinguishCancelAndClose: true,
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel'
          })
            .then(() => {
              // 重名覆盖
              this.repeat = true
              this.uploadFile(param.file)
            })
            .catch(action => {})
        } else {
          this.uploadFile(param.file)
        }
      } else {
        this.$alert(`Must be in ${this.accept} format`)
      }
    },
    uploadFile(file) {
      this.isDisabled = true
      uploadFile(file, this.type, this.doctorId).then(res => {
        if (this.repeat) {
          const index = this.fileList.findIndex((item, index) => {
            return item.FileName === file.name
          })
          this.fileList[index].Path = res.Result.FilePath
          this.fileList[index].FullPath = res.Result.FullFilePath
          this.fileList[index].ReUpload = true
        } else {
          const fileData = {
            DoctorId: this.doctorId,
            Type: this.type,
            Path: res.Result.FilePath,
            FullPath: res.Result.FullFilePath,
            FileName: file.name
          }
          this.fileList.push(fileData)
        }
        this.saveUploadFiles()
      })
        .catch(() => {
          this.isDisabled = false
        })
    },
    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('Sure to remove?', {
        type: 'warning',
        distinguishCancelAndClose: true,
        confirmButtonText: 'Ok',
        cancelButtonText: 'Cancel'
      }).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: 'Deleted successfully!',
                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>