2 changed files with 411 additions and 0 deletions
@ -0,0 +1,29 @@ |
|||||
|
import http from '@/utils/httpRequest' |
||||
|
|
||||
|
export const downloadSupplierPriceTemplate = () => http({ |
||||
|
url: http.adornUrl('/sys/initialImport/supplierPrice/template'), |
||||
|
method: 'get', |
||||
|
responseType: 'blob' |
||||
|
}) |
||||
|
|
||||
|
export const previewSupplierPrice = (file, site) => { |
||||
|
const formData = new FormData() |
||||
|
formData.append('file', file) |
||||
|
formData.append('site', site) |
||||
|
return http({ |
||||
|
url: http.adornUrl('/sys/initialImport/supplierPrice/preview'), |
||||
|
method: 'post', |
||||
|
data: formData, |
||||
|
headers: { |
||||
|
'Content-Type': 'multipart/form-data' |
||||
|
}, |
||||
|
timeout: 120000 |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export const saveSupplierPrice = data => http({ |
||||
|
url: http.adornUrl('/sys/initialImport/supplierPrice/save'), |
||||
|
method: 'post', |
||||
|
data: http.adornData(data), |
||||
|
timeout: 600000 |
||||
|
}) |
||||
@ -0,0 +1,382 @@ |
|||||
|
<template> |
||||
|
<div class="mod-initial-import"> |
||||
|
<div class="page-toolbar"> |
||||
|
<div> |
||||
|
<div class="page-title">期初导入</div> |
||||
|
<div class="page-subtitle">按业务类型导入系统启用前的基础数据</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="rq"> |
||||
|
<el-table :data="importItems" border style="width: 100%"> |
||||
|
<el-table-column prop="name" label="期初导入功能" min-width="220" /> |
||||
|
<el-table-column prop="description" label="说明" min-width="520" show-overflow-tooltip /> |
||||
|
<el-table-column label="操作" width="220" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-upload2" |
||||
|
@click="openImportDialog(scope.row.type)"> |
||||
|
{{ scope.row.name }} |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<el-dialog |
||||
|
title="供应商价格期初导入" |
||||
|
v-drag |
||||
|
:visible.sync="dialogVisible" |
||||
|
width="94%" |
||||
|
top="5vh" |
||||
|
:show-close="!saving" |
||||
|
:close-on-click-modal="false" |
||||
|
:close-on-press-escape="!saving" |
||||
|
:before-close="handleDialogClose" |
||||
|
@closed="resetDialog"> |
||||
|
<div class="dialog-toolbar"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-download" |
||||
|
:loading="templateDownloading" |
||||
|
:disabled="previewLoading || saving" |
||||
|
@click="handleDownloadTemplate"> |
||||
|
下载导入模板 |
||||
|
</el-button> |
||||
|
<el-upload |
||||
|
ref="supplierPriceUpload" |
||||
|
action="#" |
||||
|
accept=".xls,.xlsx" |
||||
|
:auto-upload="false" |
||||
|
:show-file-list="false" |
||||
|
:limit="1" |
||||
|
:disabled="previewLoading || saving" |
||||
|
:on-change="handleFileChange" |
||||
|
:on-exceed="handleFileExceed"> |
||||
|
<el-button |
||||
|
icon="el-icon-upload2" |
||||
|
:loading="previewLoading" |
||||
|
:disabled="previewLoading || saving"> |
||||
|
选择导入文件 |
||||
|
</el-button> |
||||
|
</el-upload> |
||||
|
<span class="file-name" :title="fileName">{{ fileName || '未选择文件' }}</span> |
||||
|
<span class="preview-count">已读取 {{ previewRows.length }} 行</span> |
||||
|
</div> |
||||
|
|
||||
|
<el-table |
||||
|
v-loading="previewLoading" |
||||
|
:data="previewRows" |
||||
|
border |
||||
|
height="520" |
||||
|
size="mini" |
||||
|
empty-text="请选择Excel文件进行预览" |
||||
|
:row-class-name="previewRowClassName" |
||||
|
class="supplier-price-preview"> |
||||
|
<el-table-column |
||||
|
v-for="column in columns" |
||||
|
:key="column.prop" |
||||
|
:prop="column.prop" |
||||
|
:label="column.label" |
||||
|
:min-width="column.width" |
||||
|
:align="column.align" |
||||
|
show-overflow-tooltip /> |
||||
|
</el-table> |
||||
|
|
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
icon="el-icon-check" |
||||
|
:loading="saving" |
||||
|
:disabled="previewLoading || saving || !previewRows.length" |
||||
|
@click="handleSave"> |
||||
|
保存 |
||||
|
</el-button> |
||||
|
<el-button :disabled="previewLoading || saving" @click="dialogVisible = false">关闭</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
downloadSupplierPriceTemplate, |
||||
|
previewSupplierPrice, |
||||
|
saveSupplierPrice |
||||
|
} from '@/api/initialImport' |
||||
|
|
||||
|
export default { |
||||
|
name: 'SysInitialImport', |
||||
|
data () { |
||||
|
return { |
||||
|
importItems: [ |
||||
|
{ |
||||
|
type: 'supplierPrice', |
||||
|
name: '供应商价格期初导入', |
||||
|
description: '导入供应商物料的MOQ、阶梯数量和阶梯价格。' |
||||
|
} |
||||
|
], |
||||
|
dialogVisible: false, |
||||
|
previewLoading: false, |
||||
|
saving: false, |
||||
|
templateDownloading: false, |
||||
|
fileName: '', |
||||
|
previewRows: [], |
||||
|
missingItems: [], |
||||
|
missingSuppliers: [], |
||||
|
columns: [ |
||||
|
{ prop: 'rawCode', label: 'RAW CODE', width: 120, align: 'center' }, |
||||
|
{ prop: 'supplier', label: 'Short_NPC', width: 100, align: 'center' }, |
||||
|
{ prop: 'moqColor', label: 'MOQ/COLOR', width: 80, align: 'center' }, |
||||
|
{ prop: 'startDate', label: 'START DATE', width: 100, align: 'center' }, |
||||
|
{ prop: 'tierQty1', label: 'Tier_QTY_1', width: 80, align: 'center' }, |
||||
|
{ prop: 'tierQty2', label: 'Tier_QTY_2', width: 80, align: 'center' }, |
||||
|
{ prop: 'tierQty3', label: 'Tier_QTY_3', width: 80, align: 'center' }, |
||||
|
{ prop: 'tierQty4', label: 'Tier_QTY_4', width: 80, align: 'center' }, |
||||
|
{ prop: 'tierQty5', label: 'Tier_QTY_5', width: 80, align: 'center' }, |
||||
|
{ prop: 'tierQty6', label: 'Tier_QTY_6', width: 80, align: 'center' }, |
||||
|
{ prop: 'tierQty7', label: 'Tier_QTY_7', width: 80, align: 'center' }, |
||||
|
{ prop: 'tierQty8', label: 'Tier_QTY_8', width: 80, align: 'center' }, |
||||
|
{ prop: 'priceTier1', label: 'Price_Tier_1', width: 90, align: 'center' }, |
||||
|
{ prop: 'priceTier2', label: 'Price_Tier_2', width: 90, align: 'center' }, |
||||
|
{ prop: 'priceTier3', label: 'Price_Tier_3', width: 90, align: 'center' }, |
||||
|
{ prop: 'priceTier4', label: 'Price_Tier_4', width: 90, align: 'center' }, |
||||
|
{ prop: 'priceTier5', label: 'Price_Tier_5', width: 90, align: 'center' }, |
||||
|
{ prop: 'priceTier6', label: 'Price_Tier_6', width: 90, align: 'center' }, |
||||
|
{ prop: 'priceTier7', label: 'Price_Tier_7', width: 90, align: 'center' }, |
||||
|
{ prop: 'priceTier8', label: 'Price_Tier_8', width: 90, align: 'center' } |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
openImportDialog (type) { |
||||
|
if (type !== 'supplierPrice') { |
||||
|
return |
||||
|
} |
||||
|
this.dialogVisible = true |
||||
|
}, |
||||
|
handleFileChange (file) { |
||||
|
const rawFile = file && file.raw |
||||
|
if (!rawFile) { |
||||
|
return |
||||
|
} |
||||
|
const site = this.$store.state.user.site |
||||
|
if (!site) { |
||||
|
this.$message.error('当前登录用户没有Site') |
||||
|
this.clearSelectedFile() |
||||
|
return |
||||
|
} |
||||
|
this.fileName = file.name || '' |
||||
|
this.previewRows = [] |
||||
|
this.missingItems = [] |
||||
|
this.missingSuppliers = [] |
||||
|
this.previewLoading = true |
||||
|
previewSupplierPrice(rawFile, site).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.previewRows = data.data || [] |
||||
|
this.missingItems = data.missingItems || [] |
||||
|
this.missingSuppliers = data.missingSuppliers || [] |
||||
|
this.$message.success(`Excel读取成功，共${this.previewRows.length}行`) |
||||
|
this.showMissingDataAlert() |
||||
|
} else { |
||||
|
this.$message.error((data && data.msg) || 'Excel读取失败') |
||||
|
this.clearSelectedFile() |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
const message = error && error.response && error.response.data && error.response.data.msg |
||||
|
? error.response.data.msg |
||||
|
: 'Excel读取失败，请检查文件格式' |
||||
|
this.$message.error(message) |
||||
|
this.clearSelectedFile() |
||||
|
}).finally(() => { |
||||
|
this.previewLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
handleFileExceed (files) { |
||||
|
if (this.previewLoading || !files || !files.length) { |
||||
|
return |
||||
|
} |
||||
|
this.clearSelectedFile() |
||||
|
this.handleFileChange({ raw: files[0], name: files[0].name }) |
||||
|
}, |
||||
|
handleDownloadTemplate () { |
||||
|
this.templateDownloading = true |
||||
|
downloadSupplierPriceTemplate().then(response => { |
||||
|
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 = '供应商价格期初导入模板.xlsx' |
||||
|
document.body.appendChild(link) |
||||
|
link.click() |
||||
|
document.body.removeChild(link) |
||||
|
window.URL.revokeObjectURL(url) |
||||
|
}).catch(() => { |
||||
|
this.$message.error('模板下载失败，请联系管理员') |
||||
|
}).finally(() => { |
||||
|
this.templateDownloading = false |
||||
|
}) |
||||
|
}, |
||||
|
handleSave () { |
||||
|
if (!this.previewRows.length) { |
||||
|
this.$message.warning('没有可保存的导入数据') |
||||
|
return |
||||
|
} |
||||
|
const site = this.$store.state.user.site |
||||
|
if (!site) { |
||||
|
this.$message.error('当前登录用户没有Site') |
||||
|
return |
||||
|
} |
||||
|
const invalidCount = this.previewRows.filter(row => row && row.valid === false).length |
||||
|
if (invalidCount > 0) { |
||||
|
this.$confirm( |
||||
|
`存在${invalidCount}行淡黄色数据。如果继续保存，不存在的数据行将跳过，是否继续？`, |
||||
|
'数据校验提示', |
||||
|
{ |
||||
|
confirmButtonText: '继续保存', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
} |
||||
|
).then(() => { |
||||
|
this.performSave(site) |
||||
|
}).catch(() => {}) |
||||
|
return |
||||
|
} |
||||
|
this.performSave(site) |
||||
|
}, |
||||
|
performSave (site) { |
||||
|
this.saving = true |
||||
|
saveSupplierPrice({ |
||||
|
site, |
||||
|
rows: this.previewRows |
||||
|
}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
const savedCount = data.savedCount == null ? this.previewRows.length : data.savedCount |
||||
|
const skippedCount = data.skippedCount || 0 |
||||
|
const skippedText = skippedCount > 0 ? `，跳过${skippedCount}行` : '' |
||||
|
this.$message.success(`保存完成，成功${savedCount}行${skippedText}`) |
||||
|
this.dialogVisible = false |
||||
|
} else { |
||||
|
this.$message.error((data && data.msg) || '保存失败') |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
const message = error && error.response && error.response.data && error.response.data.msg |
||||
|
? error.response.data.msg |
||||
|
: '保存失败，请稍后重试' |
||||
|
this.$message.error(message) |
||||
|
}).finally(() => { |
||||
|
this.saving = false |
||||
|
}) |
||||
|
}, |
||||
|
showMissingDataAlert () { |
||||
|
if (!this.missingItems.length && !this.missingSuppliers.length) { |
||||
|
return |
||||
|
} |
||||
|
const messages = [] |
||||
|
if (this.missingItems.length) { |
||||
|
messages.push(`以下Item不存在：${this.missingItems.join('、')}`) |
||||
|
} |
||||
|
if (this.missingSuppliers.length) { |
||||
|
messages.push(`以下供应商简称不存在：${this.missingSuppliers.join('、')}`) |
||||
|
} |
||||
|
const content = this.$createElement( |
||||
|
'div', |
||||
|
{ style: { maxHeight: '360px', overflowY: 'auto', wordBreak: 'break-all', lineHeight: '1.6' } }, |
||||
|
messages.map(message => this.$createElement('p', { style: { margin: '0 0 8px' } }, message)) |
||||
|
) |
||||
|
this.$alert(content, '数据校验提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
type: 'warning' |
||||
|
}).catch(() => {}) |
||||
|
}, |
||||
|
previewRowClassName ({ row }) { |
||||
|
return row && row.valid === false ? 'initial-import-warning-row' : '' |
||||
|
}, |
||||
|
handleDialogClose (done) { |
||||
|
if (!this.saving) { |
||||
|
done() |
||||
|
} |
||||
|
}, |
||||
|
clearSelectedFile () { |
||||
|
this.fileName = '' |
||||
|
if (this.$refs.supplierPriceUpload) { |
||||
|
this.$refs.supplierPriceUpload.clearFiles() |
||||
|
} |
||||
|
}, |
||||
|
resetDialog () { |
||||
|
this.previewLoading = false |
||||
|
this.saving = false |
||||
|
this.templateDownloading = false |
||||
|
this.previewRows = [] |
||||
|
this.missingItems = [] |
||||
|
this.missingSuppliers = [] |
||||
|
this.clearSelectedFile() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.mod-initial-import { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
.page-toolbar { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 14px; |
||||
|
} |
||||
|
|
||||
|
.page-title { |
||||
|
color: #303133; |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.page-subtitle { |
||||
|
margin-top: 4px; |
||||
|
color: #909399; |
||||
|
font-size: 13px; |
||||
|
} |
||||
|
|
||||
|
.dialog-toolbar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
min-height: 40px; |
||||
|
margin-bottom: 12px; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
|
||||
|
.file-name { |
||||
|
display: inline-block; |
||||
|
max-width: 360px; |
||||
|
overflow: hidden; |
||||
|
color: #606266; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.preview-count { |
||||
|
margin-left: auto; |
||||
|
color: #606266; |
||||
|
font-variant-numeric: tabular-nums; |
||||
|
} |
||||
|
|
||||
|
.supplier-price-preview { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.supplier-price-preview /deep/ .initial-import-warning-row > td { |
||||
|
background-color: #fff7d6 !important; |
||||
|
} |
||||
|
|
||||
|
.supplier-price-preview /deep/ .initial-import-warning-row:hover > td { |
||||
|
background-color: #fff0b3 !important; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer { |
||||
|
text-align: right; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue