feat: 供应商导入数据、导出模板功能

This commit is contained in:
2025-07-30 10:46:05 +08:00
parent 2de0b7149b
commit 9c207b18e6
7 changed files with 273 additions and 5 deletions

View File

@@ -0,0 +1,155 @@
<template>
<el-dialog
title="导入Excel文件"
append-to-body
:visible.sync="dialogVisible"
destroy-on-close
width="400px"
:show-close="true"
@close="close"
@open="open"
>
<el-upload
ref="upload"
class="upload-demo"
action=""
drag
:on-exceed="is_one"
:limit="1"
:auto-upload="false"
:multiple="false"
:show-file-list="true"
:on-change="uploadByJsqd"
:file-list="fileList"
accept=".xlsx,.xls"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">
只能上传Excel文件且不超过10MB
<el-button type="text" @click="downloadImportTemplate">下载模板</el-button>
</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="submit"> </el-button>
</span>
</el-dialog>
</template>
<script>
import crudSupp from './supplierbase'
import CRUD, { crud } from '@crud/crud'
import { download2 } from '@/api/data'
import { downloadFile } from '@/utils'
export default {
name: 'UploadDialog',
mixins: [crud()],
components: {},
props: {
dialogShow: {
type: Boolean,
default: false
},
openParam: {
type: String
}
},
data() {
return {
dialogVisible: false,
fileList: [],
file1: ''
}
},
watch: {
dialogShow: {
handler(newValue, oldValue) {
this.dialogVisible = newValue
}
},
openParam: {
handler(newValue, oldValue) {
this.opendtlParam = newValue
}
}
},
methods: {
open() {
},
close() {
this.$emit('update:dialogShow', false)
},
is_one() {
this.crud.notify('只能上传一个excel文件', CRUD.NOTIFICATION_TYPE.WARNING)
},
// 文件校验方法
beforeAvatarUpload(file) {
// 不能导入大小超过2Mb的文件
if (file.size > 10 * 1024 * 1024) {
return false
}
return true
},
// 文件发生改变就会触发的事件
uploadByJsqd(file) {
this.file1 = file
},
downloadImportTemplate() {
crudSupp.downloadImportSuppTemplate().then(res => {
// 1. 创建Blob对象
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
// 2. 创建临时下载链接
const downloadUrl = window.URL.createObjectURL(blob)
// 3. 创建隐藏的<a>标签
const link = document.createElement('a')
link.href = downloadUrl
// 设置下载文件名(根据后端返回或固定名称)
link.download = '供应商导入模板.xlsx'
// 4. 添加到DOM并触发点击
document.body.appendChild(link)
link.click()
// 5. 清理资源
document.body.removeChild(link)
window.URL.revokeObjectURL(downloadUrl)
}).catch(error => {
console.error('下载失败:', error)
// 这里可以添加错误提示如ElementUI的Message
this.$message.error('模板下载失败,请重试')
})
},
submit() {
if (this.beforeAvatarUpload(this.file1)) {
this.fileList.name = this.file1.name
this.fileList.url = ''
var formdata = new FormData()
formdata.append('file', this.file1.raw)
// excelImport请求接口 formdata传递参数
crudSupp.excelImport(formdata).then((res) => {
this.crud.notify('导入成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
this.$emit('tableChanged3', '')
this.$emit('update:dialogShow', false)
}).catch(err => {
const list = err.response.data.message
download2('/api/produceWorkorder/download', list).then(result => {
downloadFile(result, '错误信息汇总', 'xlsx')
crud.downloadLoading = false
})
})
} else {
this.crud.notify('文件过大请上传小于10MB的文件〜', CRUD.NOTIFICATION_TYPE.WARNING)
}
}
}
}
</script>

View File

@@ -24,4 +24,20 @@ export function edit(data) {
})
}
export default { add, edit, del }
export function excelImport(data) {
return request({
url: 'api/supplierbase/importExcel',
method: 'post',
data
})
}
export function downloadImportSuppTemplate(data) {
return request({
url: 'api/supplierbase/downloadImportSuppTemplate',
method: 'get',
responseType: 'blob'
})
}
export default { add, edit, del, downloadImportSuppTemplate, excelImport }