<template>
|
<a-modal :title="title" :visible="visible" @cancel="handleModalClose" :maskClosable="false">
|
<!-- 移除multiple属性，设置fileList为单个文件 -->
|
<a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" >
|
<a-button type="primary" :disabled="uploading">
|
<a-icon type="import"/>
|
选取文件
|
</a-button>
|
</a-upload>
|
|
<template slot="footer">
|
<a-button @click="handleModalClose">取消</a-button>
|
<a-button
|
id="custom-upload-button"
|
type="primary"
|
:disabled="fileList.length === 0"
|
:loading="uploading"
|
@click="handleUpload"
|
>
|
确认
|
</a-button>
|
</template>
|
</a-modal>
|
</template>
|
|
<script>
|
import { uploadAction } from '@/api/manage'
|
|
export default {
|
name: 'MaintenanceStandardImportModule',
|
data() {
|
return {
|
visible: false,
|
title: '',
|
id: '',
|
fileList: [], // 初始空文件列表
|
uploading: false,
|
|
url: {
|
add: "/eam/maintenanceStandard/importUpgrade",
|
},
|
}
|
},
|
methods: {
|
beforeUpload(file) {
|
// 只保留最新选择的文件
|
this.fileList = [file]
|
return false
|
},
|
|
handleRemove() {
|
// 清空文件列表
|
this.fileList = []
|
},
|
|
handleModalClose() {
|
this.visible = false
|
this.fileList = []
|
},
|
|
upload(id) {
|
this.id = id
|
this.visible = true
|
},
|
|
handleUpload() {
|
const { fileList, $notification, handleModalClose } = this
|
|
// 检查是否有文件
|
if (fileList.length === 0) {
|
this.$message.info("请上传文件")
|
return
|
}
|
|
this.uploading = true
|
|
const file = fileList[0] // 只取第一个文件
|
const formData = new FormData()
|
formData.append('file', file)
|
formData.append('id', this.id)
|
|
uploadAction(this.url.add, formData)
|
.then(res => {
|
if (res.success) {
|
$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
this.$emit('ok')
|
handleModalClose();
|
} else {
|
$notification.error({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.catch(err => {
|
$notification.error({
|
message: '错误',
|
description: '文件上传失败'
|
})
|
})
|
.finally(() => {
|
this.uploading = false
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
/deep/ .ant-btn-primary#custom-upload-button {
|
color: #fff;
|
background-color: #67C23A;
|
border-color: #67C23A;
|
|
&[disabled] {
|
color: rgba(0, 0, 0, 0.25);
|
background-color: #f5f5f5;
|
border-color: #d9d9d9;
|
}
|
}
|
</style>
|
