3 changed files with 280 additions and 1 deletions
-
3src/api/ecss/ecss.js
-
19src/views/modules/ecss/partHsCode.vue
-
259src/views/modules/ecss/partHsCodeImport.vue
@ -0,0 +1,259 @@ |
|||
<template> |
|||
<div class="customer-css"> |
|||
<el-dialog title="物料包装属性导入" :close-on-click-modal="false" :visible.sync="visible" |
|||
width="600px" class="customer-dialog"> |
|||
<el-form label-position="top"> |
|||
<el-row :gutter="16"> |
|||
<el-col :span="12"> |
|||
<el-form-item label="BU"> |
|||
<el-select v-model="pageData.buNo" placeholder="请选择" style="width: 100%"> |
|||
<el-option v-for="i in buList" :key="i.buNo" :label="i.buDesc" :value="i.buNo"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label=" "> |
|||
<el-button type="primary" @click="downloadTemplate()">下载导入模板</el-button> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24" style="margin-top: 10px"> |
|||
<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" :show-file-list="false" style="text-align: left;"> |
|||
<i class="el-icon-upload"></i> |
|||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> |
|||
<!-- <div class="el-upload__tip" slot="tip"> |
|||
模板字段：BU、物料编码、每卷数量、每箱卷数、每卷重量、箱重量（kg）、Box No、长（米）、宽（米）、高（米） |
|||
</div>--> |
|||
</el-upload> |
|||
<!-- 已选择的文件名显示 --> |
|||
<div v-if="selectedFileName" style="margin-top: 10px; color: #409EFF;"> |
|||
<i class="el-icon-document"></i> 已选择: {{ selectedFileName }} |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
|
|||
<span slot="footer" class="dialog-footer" style="margin-top: 10px"> |
|||
<el-button type="primary" @click="saveImport" :loading="saveButtonLoading" :disabled="saveButtonLoading || fileList.length === 0">导入</el-button> |
|||
<el-button @click="closeDialog" :disabled="saveButtonLoading">关闭</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getBuList } from '@/api/factory/site.js' |
|||
import { importPartPackageProperties } from '@/api/ecss/ecss.js' |
|||
import { queryFileId } from '@/api/qc/qc.js' |
|||
import { downLoadObjectFile } from '@/api/eam/eam_object_list.js' |
|||
|
|||
export default { |
|||
name: 'partHsCodeImport', |
|||
data() { |
|||
return { |
|||
buList: [], |
|||
visible: false, |
|||
fileList: [], |
|||
pageData: { |
|||
buNo: '', |
|||
createBy: this.$store.state.user.name |
|||
}, |
|||
selectedFileName: '', // 已选择的文件名 |
|||
saveButtonLoading: false // 保存按钮加载状态 |
|||
} |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 初始化组件 |
|||
*/ |
|||
init() { |
|||
// 重置数据 |
|||
this.fileList = [] |
|||
this.selectedFileName = '' |
|||
this.saveButtonLoading = false |
|||
|
|||
// 打开弹窗 |
|||
this.visible = true |
|||
|
|||
// 清除上传组件的内部状态（需要在弹窗渲染后执行） |
|||
this.$nextTick(() => { |
|||
if (this.$refs.uploadFile) { |
|||
this.$refs.uploadFile.clearFiles() |
|||
} |
|||
}) |
|||
|
|||
// 获取BU列表 |
|||
let tempData = { |
|||
username: this.$store.state.user.name |
|||
} |
|||
getBuList(tempData).then(({ data }) => { |
|||
if (data.code === 0) { |
|||
this.buList = data.row2 |
|||
if (data.row2.length === 1) { |
|||
this.pageData.buNo = data.row2[0].buNo |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
/** |
|||
* 上传前验证 |
|||
*/ |
|||
beforeUploadHandle(file) { |
|||
let extName = file[0].name.substring(file[0].name.lastIndexOf('.')).toLowerCase() |
|||
if (!(extName === '.xlsx' || extName === '.xls')) { |
|||
this.$message.error('请选择正确的Excel文件（xlsx或xls格式）') |
|||
return false |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 文件选择变化 |
|||
*/ |
|||
onChange(file) { |
|||
this.fileList = [file] |
|||
this.selectedFileName = file.name |
|||
}, |
|||
|
|||
/** |
|||
* 确认导入 |
|||
*/ |
|||
async saveImport() { |
|||
if (!this.pageData.buNo) { |
|||
this.$message.error('请先选择BU!') |
|||
return |
|||
} |
|||
if (!this.fileList || this.fileList.length === 0) { |
|||
this.$message.error('请先选择文件!') |
|||
return |
|||
} |
|||
|
|||
this.saveButtonLoading = true |
|||
|
|||
const formData = new FormData() |
|||
formData.append('file', this.fileList[0].raw) |
|||
formData.append('buNo', this.pageData.buNo) |
|||
formData.append('username', this.$store.state.user.name) |
|||
formData.append('previewOnly', 'false') |
|||
|
|||
try { |
|||
const { data } = await importPartPackageProperties(formData) |
|||
if (data.code === 0) { |
|||
const successCount = data.successCount || 0 |
|||
const failCount = data.failCount || 0 |
|||
|
|||
let html = `<div style="max-height:380px;overflow:auto;font-size:12px;line-height:1.4;">` |
|||
|
|||
if (successCount > 0) { |
|||
html += `<div style="margin-bottom:6px;"> |
|||
<div style="color:green;font-weight:bold;margin-bottom:3px;"> |
|||
✅ 成功导入 ${successCount} 条记录 |
|||
</div> |
|||
</div>` |
|||
} |
|||
|
|||
if (failCount > 0) { |
|||
html += `<div> |
|||
<div style="color:red;font-weight:bold;margin-bottom:3px;"> |
|||
❌ 失败 ${failCount} 条记录 |
|||
</div> |
|||
</div>` |
|||
} |
|||
|
|||
if (data.details && data.details.length > 0) { |
|||
html += `<div style="margin-top:10px;"> |
|||
<table border="1" cellspacing="0" cellpadding="2" style="border-collapse:collapse;width:100%;">` |
|||
data.details.forEach(item => { |
|||
const color = item.success ? 'green' : 'red' |
|||
html += `<tr><td style="color:${color};padding:2px 4px;">${item.message}</td></tr>` |
|||
}) |
|||
html += `</table></div>` |
|||
} |
|||
|
|||
html += `</div>` |
|||
|
|||
this.$alert(html, '导入结果', { |
|||
confirmButtonText: '确定', |
|||
dangerouslyUseHTMLString: true, |
|||
callback: () => { |
|||
if (successCount > 0) { |
|||
this.closeDialog() |
|||
this.$emit('refreshTable') |
|||
} |
|||
} |
|||
}) |
|||
} else { |
|||
this.$alert(data.msg || '导入失败', '错误', { |
|||
confirmButtonText: '确定' |
|||
}) |
|||
} |
|||
} catch (error) { |
|||
this.$message.error('导入失败：' + (error.message || '网络异常')) |
|||
} finally { |
|||
this.saveButtonLoading = false |
|||
} |
|||
}, |
|||
|
|||
/** |
|||
* 关闭弹窗 |
|||
*/ |
|||
closeDialog() { |
|||
// 清除上传组件的内部状态 |
|||
if (this.$refs.uploadFile) { |
|||
this.$refs.uploadFile.clearFiles() |
|||
} |
|||
this.visible = false |
|||
this.fileList = [] |
|||
this.selectedFileName = '' |
|||
}, |
|||
|
|||
/** |
|||
* 下载导入模板 |
|||
*/ |
|||
async downloadTemplate() { |
|||
let file = { |
|||
id: 0, |
|||
fileName: '' |
|||
} |
|||
let tempData = { |
|||
orderRef1: 'ecss', |
|||
orderRef2: 'partPackageImport' |
|||
} |
|||
await queryFileId(tempData).then(({ data }) => { |
|||
if (data && data.code === 0) { |
|||
file.id = data.data.id |
|||
file.fileName = data.data.fileName |
|||
} else { |
|||
// 如果没有配置模板文件，提示用户模板格式 |
|||
this.$alert('模板字段：BU、物料编码、每卷数量、每箱卷数、每卷重量、箱重量（kg）、Box No、长（米）、宽（米）、高（米）', '导入模板说明', { |
|||
confirmButtonText: '确定' |
|||
}) |
|||
return |
|||
} |
|||
}) |
|||
|
|||
if (file.id > 0) { |
|||
await downLoadObjectFile(file).then(({ data }) => { |
|||
const blob = new Blob([data], { type: 'application/octet-stream' }) |
|||
const fileName = file.fileName |
|||
const linkNode = document.createElement('a') |
|||
linkNode.download = fileName |
|||
linkNode.style.display = 'none' |
|||
linkNode.href = URL.createObjectURL(blob) |
|||
document.body.appendChild(linkNode) |
|||
linkNode.click() |
|||
URL.revokeObjectURL(linkNode.href) |
|||
document.body.removeChild(linkNode) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/deep/ .customer-upload .el-upload .el-upload-dragger { |
|||
width: 580px; |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue