3 changed files with 407 additions and 2 deletions
-
3src/api/warehouse/ifsInventoryInit.js
-
91src/views/modules/warehouse/ifsInventoryInit.vue
-
313src/views/modules/warehouse/ifsInventory_upload_excel.vue
@ -0,0 +1,313 @@ |
|||
<template> |
|||
<div class="customer-css"> |
|||
<el-dialog |
|||
title="导入IFS库存数据" |
|||
:close-on-click-modal="false" |
|||
:visible.sync="visible" |
|||
width="450px" |
|||
class="customer-dialog" |
|||
@close="handleDialogClose" |
|||
:show-close="!uploading"> |
|||
<el-form :inline="true" label-position="top" label-width="80px"> |
|||
<el-row> |
|||
<el-form-item label=" "> |
|||
<el-button |
|||
type="primary" |
|||
icon="el-icon-download" |
|||
:disabled="uploading" |
|||
@click="downloadTemplate"> |
|||
下载 Excel 模板 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24"> |
|||
<el-upload |
|||
class="customer-upload" |
|||
drag |
|||
action="javascript:void(0);" |
|||
ref="uploadFile" |
|||
:limit="1" |
|||
accept=".xlsx,.xls" |
|||
:before-upload="beforeUploadHandle" |
|||
:on-change="onChange" |
|||
:auto-upload="false" |
|||
:disabled="uploading" |
|||
style="text-align: left;"> |
|||
<i class="el-icon-upload"></i> |
|||
<div class="el-upload__text"> |
|||
{{ uploading ? '正在上传中，请稍候...' : '将文件拖到此处，或点击上传' }} |
|||
</div> |
|||
</el-upload> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row style="margin-top: 15px;"> |
|||
<el-alert |
|||
title="导入说明" |
|||
type="info" |
|||
:closable="false" |
|||
show-icon> |
|||
<div style="font-size: 12px; line-height: 1.8;"> |
|||
1. 请先下载模板，按模板格式填写数据<br/> |
|||
2. 必填字段：Site、Part No、Lot/Batch No、Location No、Qty On Hand<br/> |
|||
3. A-K列：库存信息（保存到inventory_stock_ifs表）<br/> |
|||
4. L-U列：料件属性信息（保存到part_attribute表，可选填）<br/> |
|||
5. 料件属性如已存在会自动跳过，不会报错<br/> |
|||
6. 日期格式：YYYY/M/D 或 YYYY-MM-DD |
|||
</div> |
|||
</el-alert> |
|||
</el-row> |
|||
</el-form> |
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button type="primary" @click="saveUploadFile" :loading="uploading" :disabled="uploading"> |
|||
{{ uploading ? '上传中...' : '开始导入' }} |
|||
</el-button> |
|||
<el-button @click="closeDialog" :disabled="uploading">关闭</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { uploadIfsInventoryExcel } from '@/api/warehouse/ifsInventoryInit.js' |
|||
|
|||
export default { |
|||
name: 'ifsInventoryUploadExcel', |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
fileList: [], |
|||
uploading: false // 上传状态标志 |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化组件 |
|||
*/ |
|||
init() { |
|||
this.fileList = [] |
|||
this.uploading = false |
|||
this.visible = true |
|||
}, |
|||
|
|||
/** |
|||
* 上传之前的验证 |
|||
*/ |
|||
beforeUploadHandle(file) { |
|||
let extName = file.name.substring(file.name.lastIndexOf('.')).toLowerCase() |
|||
if (!(extName === '.xlsx' || extName === '.xls')) { |
|||
this.$message.error('数据导入失败，请选择正确的xlsx或xls格式的Excel文件') |
|||
return false |
|||
} |
|||
return true |
|||
}, |
|||
|
|||
/** |
|||
* 选择上传文件时 |
|||
*/ |
|||
onChange(file) { |
|||
// 清空之前的文件列表，确保只有一个文件 |
|||
this.fileList = [] |
|||
this.fileList.push(file) |
|||
}, |
|||
|
|||
/** |
|||
* 关闭弹窗 |
|||
*/ |
|||
closeDialog() { |
|||
this.deleteFile() |
|||
this.visible = false |
|||
}, |
|||
|
|||
/** |
|||
* 处理弹窗关闭事件（包括右上角X按钮） |
|||
*/ |
|||
handleDialogClose() { |
|||
if (this.uploading) { |
|||
this.$message.warning('正在上传中，请稍候...') |
|||
return |
|||
} |
|||
this.deleteFile() |
|||
}, |
|||
|
|||
/** |
|||
* 清除文件 |
|||
*/ |
|||
deleteFile() { |
|||
this.fileList = [] |
|||
this.uploading = false |
|||
// 清空文件上传记录 |
|||
this.$refs.uploadFile.clearFiles() |
|||
// 刷新父页面 |
|||
this.$emit('refreshTable') |
|||
}, |
|||
|
|||
/** |
|||
* 格式化错误信息为HTML列表 |
|||
*/ |
|||
formatErrorMessages(errorMessages) { |
|||
if (!errorMessages || errorMessages.length === 0) { |
|||
return '' |
|||
} |
|||
|
|||
// 限制显示的错误数量（前20条） |
|||
const displayMessages = errorMessages.slice(0, 20) |
|||
const hasMore = errorMessages.length > 20 |
|||
|
|||
let html = '<div style="text-align: left; max-height: 400px; overflow-y: auto;">' |
|||
html += '<p style="color: #E6A23C; font-weight: bold; margin-bottom: 10px;">以下数据导入失败：</p>' |
|||
html += '<ol style="padding-left: 20px; line-height: 1.8;">' |
|||
|
|||
displayMessages.forEach(msg => { |
|||
html += `<li style="color: #F56C6C; margin-bottom: 5px;">${msg}</li>` |
|||
}) |
|||
|
|||
html += '</ol>' |
|||
|
|||
if (hasMore) { |
|||
html += `<p style="color: #909399; margin-top: 10px;">...还有 ${errorMessages.length - 20} 条错误</p>` |
|||
} |
|||
|
|||
html += '</div>' |
|||
|
|||
return html |
|||
}, |
|||
|
|||
/** |
|||
* 下载Excel模板 |
|||
*/ |
|||
downloadTemplate() { |
|||
const loading = this.$loading({ |
|||
lock: true, |
|||
text: '正在下载模板...', |
|||
spinner: 'el-icon-loading', |
|||
background: 'rgba(0, 0, 0, 0.7)' |
|||
}) |
|||
|
|||
this.$http({ |
|||
url: this.$http.adornUrl('/ifsInventoryInit/downloadTemplate'), |
|||
method: 'get', |
|||
responseType: 'blob' |
|||
}).then(response => { |
|||
loading.close() |
|||
|
|||
// 创建下载链接 |
|||
const blob = new Blob([response.data], { |
|||
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' |
|||
}) |
|||
const url = window.URL.createObjectURL(blob) |
|||
const link = document.createElement('a') |
|||
link.href = url |
|||
link.download = 'IFS库存导入模板.xlsx' |
|||
document.body.appendChild(link) |
|||
link.click() |
|||
document.body.removeChild(link) |
|||
window.URL.revokeObjectURL(url) |
|||
|
|||
this.$message.success('模板下载成功') |
|||
}).catch(error => { |
|||
loading.close() |
|||
console.error('模板下载失败:', error) |
|||
this.$message.error('模板下载失败，请联系管理员') |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 保存上传文件 |
|||
*/ |
|||
saveUploadFile() { |
|||
// 判断文件是否上传 |
|||
if (null == this.fileList || 0 === this.fileList.length) { |
|||
this.$message.error("请先选择要上传的Excel文件!") |
|||
return false |
|||
} |
|||
|
|||
// 再次校验文件格式 |
|||
const file = this.fileList[0].raw |
|||
const fileName = file.name |
|||
const fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase() |
|||
|
|||
if (!('.xls' === fileExtension || '.xlsx' === fileExtension)) { |
|||
this.$message.error('文件格式不正确，只支持.xls和.xlsx格式的Excel文件') |
|||
return false |
|||
} |
|||
|
|||
// 设置上传状态 |
|||
this.uploading = true |
|||
|
|||
// 创建FormData对象 |
|||
const formData = new FormData() |
|||
formData.append("file", file) |
|||
formData.append("site", localStorage.getItem('site')) |
|||
formData.append("uploadBy", this.$store.state.user.name) |
|||
|
|||
// 调用上传接口 |
|||
uploadIfsInventoryExcel(formData).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
// 检查是否有错误信息 |
|||
const errorMessages = data.errorMessages || [] |
|||
|
|||
if (errorMessages.length > 0) { |
|||
// 有错误信息，使用弹窗显示详细错误列表 |
|||
const errorHtml = this.formatErrorMessages(errorMessages) |
|||
this.$alert(errorHtml, '导入完成（部分数据失败）', { |
|||
confirmButtonText: '确定', |
|||
dangerouslyUseHTMLString: true, |
|||
customClass: 'import-error-dialog' |
|||
}).then(() => { |
|||
// 关闭窗口并刷新页面 |
|||
this.closeDialog() |
|||
}) |
|||
} else { |
|||
// 完全成功，显示成功提示 |
|||
this.$message({ |
|||
message: data.msg || 'IFS库存数据导入成功', |
|||
type: 'success', |
|||
duration: 2000 |
|||
}) |
|||
// 关闭窗口并刷新页面 |
|||
this.closeDialog() |
|||
} |
|||
} else { |
|||
this.$alert(data.msg, '错误', { |
|||
confirmButtonText: '确定' |
|||
}) |
|||
} |
|||
}).catch(error => { |
|||
console.error('Excel上传异常:', error) |
|||
this.$message.error('Excel文件上传异常，请检查文件格式和内容') |
|||
}).finally(() => { |
|||
// 无论成功还是失败，都重置上传状态 |
|||
this.uploading = false |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.customer-css .customer-upload { |
|||
width: 100%; |
|||
} |
|||
|
|||
.customer-css .el-upload { |
|||
width: 100%; |
|||
} |
|||
|
|||
.customer-css .el-upload-dragger { |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
/* 导入错误弹窗样式 */ |
|||
.import-error-dialog { |
|||
width: 600px !important; |
|||
} |
|||
|
|||
.import-error-dialog .el-message-box__message { |
|||
max-height: 500px; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue