<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>
|
|
<div style="margin-top: 16px">已选择{{fileList.length}}个文件</div>
|
|
<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"
|
>
|
{{ uploading ? '上传中...' : '上传至服务器' }}
|
</a-button>
|
</template>
|
|
</a-modal>
|
</template>
|
|
<script>
|
import dncApi from '@/api/dnc'
|
|
export default {
|
name: 'ImportFileModal',
|
components: {},
|
data() {
|
return {
|
visible: false,
|
title: '',
|
fileList: [],
|
uploadParams: {},
|
uploading: false
|
}
|
},
|
created() {
|
this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
this.$bus.$on('tableMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
},
|
methods: {
|
/**
|
* 点击导入文档或NC程序时触发
|
* @param treeNodeInfo 点击树节点右键菜单导入程序时传入树节点信息
|
* @param tableRowInfo 点击表格行右键菜单导入程序时传入行信息
|
*/
|
handleImport(treeNodeInfo, tableRowInfo) {
|
let attributionId // 文档所属层级Id
|
let attributionType // 文档所属层级类型
|
let docClassCode // 文档类型
|
if (treeNodeInfo) {
|
attributionId = treeNodeInfo.treeKey
|
attributionType = treeNodeInfo.type
|
} else {
|
attributionId = tableRowInfo.attributionId
|
attributionType = tableRowInfo.attributionType
|
}
|
if (attributionType === 5 || attributionType === 6) docClassCode = 'NC'
|
else docClassCode = 'OTHER'
|
this.uploadParams = Object.assign({}, { attributionId, attributionType, docClassCode })
|
this.visible = true
|
},
|
|
handleRemove(file) {
|
const index = this.fileList.indexOf(file)
|
const newFileList = this.fileList.slice()
|
newFileList.splice(index, 1)
|
this.fileList = newFileList
|
},
|
|
beforeUpload(file) {
|
if (!this.fileList.find(item => item.name === file.name)) this.fileList = [...this.fileList, file]
|
return false
|
},
|
|
handleUpload() {
|
const { fileList, $notification } = this
|
this.uploading = true
|
let uploadedFileCount = 0
|
let uploadSuccessFileCount = 0
|
fileList.forEach((file, index) => {
|
const formData = new FormData()
|
formData.append('file', file)
|
file.status = 'uploading'
|
dncApi.importDocumentFromLocalApi(this.uploadParams, 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.$bus.$emit('importFileSuccess', this.uploadParams)
|
this.uploading = false
|
}
|
})
|
})
|
},
|
|
/**
|
* 控制文件上传窗口关闭并清空文件列表
|
*/
|
handleModalClose() {
|
this.visible = false
|
this.fileList = []
|
},
|
|
triggerCorrespondingMethod({ methodName, modalTitle, treeNodeInfo, tableRowInfo }) {
|
if (this[methodName]) {
|
this[methodName](treeNodeInfo, tableRowInfo)
|
this.title = modalTitle
|
|
}
|
}
|
}
|
}
|
</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>
|
