irc_web/.svn/pristine/8f/8f2cf94dde19c2b9fb253fe5638...

108 lines
2.7 KiB
Plaintext

<template>
<el-form
ref="uploadExcel"
class="upload-excel-file"
>
<!-- 文件 -->
<el-form-item :label="$t('trials:consistencyCheck:label:file')">
<div class="upload-container">
<el-upload
class="upload-demo"
action
accept=".xlsx,.xls,.csv"
:before-upload="beforeUpload"
:http-request="handleUploadFile"
:on-preview="handlePreview"
:show-file-list="true"
:limit="1"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary" :loading="btnLoading">
{{ $t('trials:consistencyCheck:dialogButton:upload') }}
</el-button>
<span
slot="tip"
style="margin-left:10px;"
class="el-upload__tip"
>
({{ $t('trials:consistencyCheck:message:excelFileOnly') }})
</span>
</el-upload>
</div>
</el-form-item>
</el-form>
</template>
<script>
import { uploadVisitCheckExcel } from '@/api/trials'
export default {
data() {
return {
btnLoading: false,
trialId: this.$route.query.trialId
}
},
methods: {
beforeUpload(file) {
// 检测文件类型是否符合要求
if (this.checkFileSuffix(file.name)) {
return true
} else {
// Must be xls or xlsx format
this.$message.error(this.$t('trials:consistencyCheck:message:xlsx'))
return false
}
},
handleUploadFile(param) {
this.btnLoading = true
uploadVisitCheckExcel(this.trialId, param.file).then(res => {
this.btnLoading = false
this.$emit('refreshTable')
}).catch(() => {
this.btnLoading = false
})
},
handlePreview(file) {
if (file.fullPath) {
window.open(file.fullPath, '_blank')
}
},
handleExceed(files, fileList) {
// Upload is currently limited to 1 file
this.$message.warning(this.$t('trials:consistencyCheck:message:onlyOneFile'))
},
checkFileSuffix(fileName) {
var typeArr = ['xls', 'xlsx', 'csv']
var extendName = fileName.substring(fileName.lastIndexOf('.') + 1).toLocaleLowerCase()
if (typeArr.indexOf(extendName) !== -1) {
return true
} else {
return false
}
}
}
}
</script>
<style lang="scss">
.upload-excel-file{
.upload-container .el-upload--text {
border: none;
width: 80px;
height: 40px;
}
.upload-container .el-input--small {
margin-bottom: 5px;
}
.upload-container .el-icon-circle-check {
color: #00d1b2;
font-size: 13px;
}
.account_item_clear{
.el-tag__close{
display: none !important;
}
}
}
</style>