| | |
| | | <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"> |
| | | <a-button type="primary" :disabled="uploading"> |
| | | <a-icon type="import"/> |
| | | 选取文件 |
| | | </a-button> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import dncApi from '@/api/dnc' |
| | | |
| | | export default { |
| | | name: 'ImportFileModal', |
| | | components: {}, |
| | |
| | | visible: false, |
| | | title: '', |
| | | fileList: [], |
| | | uploading: false |
| | | uploadParams: {}, |
| | | uploading: false, |
| | | isUploadMultiple: true, |
| | | currentDeviceDocClassCode: 'SEND', |
| | | currentTitleAfterClass: '' |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | this.$bus.$on('tableMenuItemMethodTrigger', this.triggerCorrespondingMethod) |
| | | }, |
| | | methods: { |
| | | handleImport(modalTitle) { |
| | | this.handleModalOpen(modalTitle) |
| | | /** |
| | | * 点击导入文档或NC程序时触发 |
| | | * @param treeNodeInfo 点击树节点右键菜单导入程序时传入树节点信息 |
| | | * @param tableRowInfo 右键表格行时传入行信息 |
| | | * @param modalTitle 弹窗标题 |
| | | */ |
| | | handleImport(treeNodeInfo, tableRowInfo, modalTitle) { |
| | | this.isUploadMultiple = true |
| | | let attributionId // 文档所属层级Id |
| | | let attributionType // 文档所属层级类型 |
| | | let docClassCode // 文档类型 |
| | | if (treeNodeInfo) { |
| | | attributionId = treeNodeInfo.treeKey |
| | | attributionType = treeNodeInfo.type |
| | | docClassCode = treeNodeInfo.param |
| | | } else { |
| | | // 若工序及工步层级下有设备类时则导入NC的参数需要调整 |
| | | attributionId = tableRowInfo.param==='deviceCustomType'?tableRowInfo.id:tableRowInfo.attributionId |
| | | attributionType = tableRowInfo.attributionType |
| | | docClassCode = tableRowInfo.param==='deviceCustomType'?'NC':tableRowInfo.param |
| | | } |
| | | this.setModalTitle(modalTitle, docClassCode) |
| | | this.uploadParams = Object.assign({}, { attributionId, attributionType, docClassCode }) |
| | | console.log('uploadParams=====================', this.uploadParams) |
| | | this.visible = true |
| | | }, |
| | | |
| | | /** |
| | | * 点击文档生命周期的入库时触发 |
| | | * @param _ |
| | | * @param tableRowInfo 右键表格行时传入行信息 |
| | | */ |
| | | handlePush(_, tableRowInfo) { |
| | | this.isUploadMultiple = false |
| | | console.log('tableRowInfo', tableRowInfo) |
| | | this.uploadParams = Object.assign({}, { |
| | | docId: tableRowInfo.docId, |
| | | attributionId: tableRowInfo.attributionId, |
| | | docClassCode: tableRowInfo.param |
| | | }) |
| | | this.visible = true |
| | | }, |
| | | |
| | | /** |
| | | * 选择好文件点击确定后 |
| | | * @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 |
| | | }, |
| | | |
| | | // 点击上传至服务器按钮时触发 |
| | | handleUpload() { |
| | | const { fileList, $notification, isUploadMultiple, uploadParams, $bus, handleModalClose } = this |
| | | this.uploading = true |
| | | let uploadedFileCount = 0 |
| | | let uploadSuccessFileCount = 0 |
| | | let apiMethod |
| | | let params |
| | | |
| | | fileList.forEach((file, index) => { |
| | | const formData = new FormData() |
| | | formData.append('file', file) |
| | | file.status = 'uploading' |
| | | // 目前根据是否上传多个文件判断两个功能,若后续增加功能或调整需求则调整判断条件 |
| | | if (isUploadMultiple) { |
| | | apiMethod = dncApi.importDocumentFromLocalApi |
| | | params = Object.assign({}, { params: uploadParams, formData }) |
| | | } else { |
| | | apiMethod = dncApi.documentVersionUpdateApi |
| | | params = Object.assign({}, { docId: uploadParams.docId, formData }) |
| | | } |
| | | apiMethod(params) |
| | | .then(res => { |
| | | if (res.success) { |
| | | file.status = 'done' |
| | | uploadSuccessFileCount++ |
| | | console.log('uploadSuccessFileCount++', 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) { |
| | | $bus.$emit('reloadDocumentListData', uploadParams) |
| | | if (!isUploadMultiple) { |
| | | $bus.$emit('reloadMainBottomTableData', 'documentVersion') |
| | | handleModalClose() //无法连续入库多个版本因此入库成功后即可退出窗口 |
| | | } |
| | | } |
| | | this.uploading = false |
| | | } |
| | | }) |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 删除文件列表项时触发 |
| | | * @param file 文件对象 |
| | | */ |
| | | handleRemove(file) { |
| | | const index = this.fileList.indexOf(file) |
| | | const newFileList = this.fileList.slice() |
| | |
| | | this.fileList = newFileList |
| | | }, |
| | | |
| | | beforeUpload(file) { |
| | | this.fileList = [...this.fileList, file] |
| | | return false |
| | | }, |
| | | |
| | | handleUpload() { |
| | | const { fileList } = this |
| | | const formData = new FormData() |
| | | fileList.forEach(file => { |
| | | formData.append('files[]', file) |
| | | }) |
| | | this.uploading = true |
| | | |
| | | // You can use any AJAX library you like |
| | | request({ |
| | | url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76', |
| | | method: 'post', |
| | | processData: false, |
| | | data: formData, |
| | | success: () => { |
| | | this.fileList = [] |
| | | this.uploading = false |
| | | this.$message.success('upload successfully.') |
| | | }, |
| | | error: () => { |
| | | this.uploading = false |
| | | this.$message.error('upload failed.') |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | /** |
| | | * 控制文件上传窗口开启并设置窗口标题 |
| | | * @param modalTitle 窗口标题 |
| | | */ |
| | | handleModalOpen(modalTitle) { |
| | | this.title = modalTitle |
| | | this.visible = true |
| | | }, |
| | | |
| | | /** |
| | | * 控制文件上传窗口关闭并清空文件列表 |
| | | */ |
| | | // 控制文件上传窗口关闭并清空文件列表 |
| | | handleModalClose() { |
| | | this.visible = false |
| | | this.fileList = [] |
| | | }, |
| | | |
| | | triggerCorrespondingMethod({ methodName, modalTitle }) { |
| | | if (this[methodName]) this[methodName](modalTitle) |
| | | /** |
| | | * 设置弹窗标题 |
| | | * @param modalTitle 弹窗标题 |
| | | * @param docClassCode 文档类型 |
| | | */ |
| | | setModalTitle(modalTitle, docClassCode) { |
| | | switch (docClassCode) { |
| | | case 'SEND': |
| | | this.title = modalTitle + '(发送)' |
| | | break |
| | | case 'REC': |
| | | this.title = modalTitle + '(接收)' |
| | | break |
| | | } |
| | | }, |
| | | |
| | | triggerCorrespondingMethod({ methodName, modalTitle, treeNodeInfo, tableRowInfo }) { |
| | | if (this[methodName]) { |
| | | this.title = modalTitle |
| | | this[methodName](treeNodeInfo, tableRowInfo, modalTitle) |
| | | } |
| | | } |
| | | } |
| | | } |