139 lines
		
	
	
		
			3.9 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			139 lines
		
	
	
		
			3.9 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <div class="upload-container">
 | 
						|
    <el-upload
 | 
						|
      class="upload-demo"
 | 
						|
      action
 | 
						|
      :http-request="uploadFile"
 | 
						|
      :before-upload="beforeUpload"
 | 
						|
      :file-list="fileList"
 | 
						|
      :before-remove="beforeRemove"
 | 
						|
      :on-remove="handleRemoveFile"
 | 
						|
      :on-preview="handlePreview"
 | 
						|
      :limit="1"
 | 
						|
      :on-exceed="handleExceed"
 | 
						|
      accept=".pdf"
 | 
						|
    >
 | 
						|
      <el-button size="small" type="primary" :loading="btnDisabled">Upload</el-button>
 | 
						|
      <span slot="tip" class="el-upload__tip">(must be in pdf format)</span>
 | 
						|
    </el-upload>
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import { uploadFile } from '@/api/attachment'
 | 
						|
import { uploadReviewerAckSOW, deleteReviewerAckSOW } from '@/api/trials'
 | 
						|
const type = 'ACK of SOW'
 | 
						|
export default {
 | 
						|
  name: 'UploadFile',
 | 
						|
  props: {
 | 
						|
    doctorId: {
 | 
						|
      type: String,
 | 
						|
      required: true
 | 
						|
    },
 | 
						|
    trialId: {
 | 
						|
      type: String,
 | 
						|
      required: true
 | 
						|
    }
 | 
						|
  },
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      fileList: [],
 | 
						|
      btnDisabled: false
 | 
						|
    }
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    initFileList(fileList) {
 | 
						|
      this.fileList = fileList
 | 
						|
    },
 | 
						|
    uploadFile(param) {
 | 
						|
      var fileName = param.file.name
 | 
						|
      this.btnDisabled = true
 | 
						|
      uploadFile(param.file, type, this.doctorId)
 | 
						|
        .then(res => {
 | 
						|
          if (res.IsSuccess) {
 | 
						|
            this.fileList.push({ DoctorId: this.doctorId, name: fileName, FileName: fileName, Path: res.Result.FilePath, FullPath: res.Result.FullFilePath, Type: type })
 | 
						|
            this.saveFile()
 | 
						|
          }
 | 
						|
        })
 | 
						|
        .catch(() => {
 | 
						|
          this.btnDisabled = false
 | 
						|
        })
 | 
						|
    },
 | 
						|
    saveFile() {
 | 
						|
      const { name, Path, FullPath, Type } = this.fileList[0]
 | 
						|
      const param = { DoctorId: this.doctorId, Type: Type, Path: Path, FullPath: FullPath, FileName: name }
 | 
						|
      uploadReviewerAckSOW(this.trialId, param).then(res => {
 | 
						|
        this.btnDisabled = false
 | 
						|
        if (res.IsSuccess) {
 | 
						|
          this.fileList[0].Id = res.Result
 | 
						|
          this.$message.success('Uploaded successfully')
 | 
						|
          this.$emit('getFileList', this.fileList)
 | 
						|
        }
 | 
						|
      })
 | 
						|
        .catch(() => {
 | 
						|
          this.btnDisabled = false
 | 
						|
        })
 | 
						|
    },
 | 
						|
    beforeUpload(file, fileList) {
 | 
						|
      const isValidFile = this.fileValid(file.name, 'pdf')
 | 
						|
      if (isValidFile) {
 | 
						|
        this.fileList = []
 | 
						|
      } else {
 | 
						|
        this.$message.error('must be in pdf format')
 | 
						|
        return false
 | 
						|
      }
 | 
						|
    },
 | 
						|
    beforeRemove(file, fileList) {
 | 
						|
      if (file && file.status === 'success') {
 | 
						|
        return this.$confirm(`Sure to remove ${file.name}?`)
 | 
						|
      }
 | 
						|
    },
 | 
						|
    handleRemoveFile(file, fileList) {
 | 
						|
      if (file && file.status === 'success') {
 | 
						|
        if (file.Id) {
 | 
						|
          deleteReviewerAckSOW(this.trialId, this.doctorId, file.Id).then(res => {
 | 
						|
            if (res.IsSuccess) {
 | 
						|
              this.fileList = []
 | 
						|
              this.$message({
 | 
						|
                message: 'Deleted successfully!',
 | 
						|
                type: 'success'
 | 
						|
              })
 | 
						|
              this.$emit('getFileList', this.fileList)
 | 
						|
            }
 | 
						|
          })
 | 
						|
        } else {
 | 
						|
          this.fileList = []
 | 
						|
          this.$emit('getFileList', this.fileList)
 | 
						|
        }
 | 
						|
      }
 | 
						|
    },
 | 
						|
    handlePreview(file) {
 | 
						|
      file.FullPath ? window.open(file.FullPath, '_blank') : ''
 | 
						|
    },
 | 
						|
    handleExceed(files, fileList) {
 | 
						|
      this.$message.warning(`Upload is currently limited to 1 file`)
 | 
						|
    },
 | 
						|
    fileValid(fileName, typeArr) {
 | 
						|
      var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
 | 
						|
      if (typeArr.toLocaleLowerCase().indexOf(extendName) > -1) {
 | 
						|
        return true
 | 
						|
      } else {
 | 
						|
        return false
 | 
						|
      }
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
</script>
 | 
						|
<style>
 | 
						|
.upload-container .el-upload--text {
 | 
						|
  border: none;
 | 
						|
  width: 80px;
 | 
						|
  height: 30px;
 | 
						|
}
 | 
						|
.upload-container .el-form-item__label {
 | 
						|
  font-size: 12px;
 | 
						|
}
 | 
						|
.upload-container .el-upload-list__item {
 | 
						|
  font-size: 12px;
 | 
						|
}
 | 
						|
</style>
 |