139 lines
		
	
	
		
			3.7 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			139 lines
		
	
	
		
			3.7 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.$alert('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>
 |