html
<div class="mt-40">
<div class="mtb-20">第一步:下载模板,批量填写订单信息</div>
<a-button type="primary" ghost icon="vertical-align-bottom" size="large">
<a href="/订单导入模板(企业).xlsx" download="订单导入模板.xlsx" style="text-decoration: none"
>下载模板</a
>
</a-button>
<div class="mtb-20">第二步:上传填写好的订单列表</div>
<a-upload
name="file"
:action="uploadUrlExcel"
@change="handleChangeExcel"
:headers="headers"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
:showUploadList="false"
>
<a-button type="primary" ghost icon="vertical-align-top" size="large">
上传Excel
</a-button>
</a-upload>
//导入失败弹窗
<a-modal
title="导入失败文件"
style="top: 20px"
v-model="bisible"
@ok="handleSubmit2"
:closable="false"
:maskClosable="false"
>
<div style="margin-left: 50px">
<p>
<strong>导入成功数量 : </strong>
<span>{{ success }}</span>
</p>
<p>
<strong>导入失败数量 : </strong>
<sapn style="color: red">{{ err }}</sapn>
</p>
<strong v-if="err == 0">全部导入成功!</strong>
<strong v-else>是否下载导入失败文件?</strong>
</div>
</a-modal>
</div>
js上传Excel
// 使用到的data
uploadUrlExcel: process.env.VUE_APP_API_BASE_URL + '/order/order/batchOrderImport', //上传url
headers: {
token: Vue.ls.get(ACCESS_TOKEN)
},
bisible: false, // 批量订单导入失败弹窗
arrList: '', // 失败的多条数据数组
success: '', // 导入成功条数
err: '', // 导入失败条数
// 批量下单
handleChangeExcel(info) {
console.log(11111111111, info, info.file.response)
if (info.file.status === 'done') {
let file = info.file.response.data
if (file.failNum > 0) {
this.bisible = true
this.success = file.successNum
this.err = file.failNum
this.arrList = file.failDtoList
} else if (file.failNum == 0 && file.successNum == 0) {
this.$message.error(`无数据导入`)
} else {
this.$message.success('导入成功')
}
} else if (info.file.status === 'error') {
this.$message.error(`${info.file.name} 导入失败.`)
}
},
失败文件下载
// 失败文件处理
handleSubmit2() {
if (this.err == 0) {
this.bisible = false
} else {
batchOrderExport(this.arrList).then(res => {
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' })
const a = document.createElement('a')
// 生成文件路径
let href = window.URL.createObjectURL(blob)
a.href = href
let fileName = '导入失败订单文件'
// 文件名中有中文 则对文件名进行转码
a.download = decodeURIComponent(fileName)
// 利用a标签做下载
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(href)
})
this.bisible = false
}
},
// 失败上传处理的接口
//失败上传处理
export function batchOrderExport(parameter) {
return axios({
url: `/order/order/batchOrderExport`,
method: 'post',
data: parameter,
responseType: 'arraybuffer',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
}