<template>
|
<a-modal :title="title" :visible="visible" @cancel="handleModalClose" :maskClosable="false">
|
<a-upload :multiple="true" :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 JUpload from '@/components/jeecg/JUpload'
|
import { getAction, postAction, uploadAction } from '@/api/manage'
|
|
export default {
|
name: 'FileImportModule',
|
components: {
|
JUpload,
|
},
|
data() {
|
return {
|
visible: false,
|
title: '',
|
id:'',
|
fileList: [],
|
uploadParams: {},
|
uploading: false,
|
isUploadMultiple: true,
|
currentDeviceDocClassCode: 'SEND',
|
currentTitleAfterClass: '',
|
|
url: {
|
add: "/nc/doc/add",
|
}
|
}
|
},
|
|
created() {
|
},
|
methods: {
|
|
/**
|
* 选择好文件点击确定后
|
* @param file 文件对象
|
*/
|
beforeUpload(file) {
|
if (this.isUploadMultiple) {
|
if (!this.fileList.find(item => item.name === file.name)) this.fileList = [...this.fileList, file]
|
} else this.fileList.splice(0, 1, file)
|
return false
|
},
|
|
/**
|
* 删除文件列表项时触发
|
* @param file 文件对象
|
*/
|
handleRemove(file) {
|
const index = this.fileList.indexOf(file)
|
const newFileList = this.fileList.slice()
|
newFileList.splice(index, 1)
|
this.fileList = newFileList
|
},
|
|
// 控制文件上传窗口关闭并清空文件列表
|
handleModalClose() {
|
this.visible = false
|
this.fileList = []
|
},
|
|
upload(){
|
this.isUploadMultiple = true
|
this.visible = true
|
},
|
handleUpload() {
|
const { fileList, $notification, handleModalClose} = this
|
this.uploading = true
|
let uploadedFileCount = 0
|
let uploadSuccessFileCount = 0
|
if (this.fileList.length === 0) {
|
this.$message.info("请上传文件")
|
this.uploading = false;
|
}
|
fileList.forEach((file, index) => {
|
const formData = new FormData()
|
formData.append('file', file)
|
uploadAction(this.url.add, formData).then(res => {
|
if (res.success) {
|
file.status = 'done'
|
uploadSuccessFileCount++
|
$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
} else {
|
file.status = 'error'
|
$notification.error({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.catch(err => {
|
file.status = 'error'
|
})
|
.finally(() => {
|
uploadedFileCount++
|
fileList.splice(index, 1, file)
|
if (uploadedFileCount === fileList.length) {
|
if (uploadSuccessFileCount > 0) {
|
this.$emit('ok')
|
}
|
// 当文件全部上传完成后
|
if (uploadSuccessFileCount === fileList.length) {
|
handleModalClose();
|
}
|
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>
|
