html部分
导入按钮:
<el-button class="importBtn" @click="handleAddTop">导入</el-button>
导入对话框:
<!-- 小区信息导入对话框 -->
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" :disabled="upload.isUploading" :http-request="handleFileUpload" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip" style="color:#ff0000">提示:仅允许导入“xls”或“xlsx”格式文件!
<el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="handleFileCancel">取 消</el-button>
</div>
</el-dialog>
js部分
data(){}里面:
// 小区信息导入参数
upload: {
open: false, title: '', isUploading: false, headers: { Authorization: getToken() },
url: process.env.VUE_APP_BASE_API + '/sys/community/import' // 上传的地址
},
methods:{}里面:
// 小区信息导入
handleAddTop() {
this.upload.title = '小区信息导入'
this.upload.open = true
},
// http-request(请求)
handleFileUpload(val) {
const formData = new FormData()
formData.append('file', val.file)
batchAddCommunity(this.$store.getters.id, 2, formData).then(res => {
val.onSuccess()
}).catch(res => {
val.onError(res)
})
},
// on-success(文件上传成功处理)
handleFileSuccess() {
this.$refs.upload.clearFiles()
this.upload.open = false
this.upload.isUploading = false
this.getList()
},
// 下载模板操作
importTemplate() {
importCommunityTemplates().then(res => {
fileDownload(res, '小区信息导入模板.xlsx')
}).catch(err => {
console.log(err)
})
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit()
},
// 导入弹出框取消
handleFileCancel() {
this.$refs.upload.clearFiles()
this.upload.open = false
this.upload.isUploading = false
},
api
// 下载小区信息导入模板
export function importCommunityTemplates() {
return request({
url: '/sys/community/template-import',
method: 'get',
responseType: 'arraybuffer'
})
}
// 导入小区信息
export function batchAddCommunity(id, merchantId, data) {
return request({
url: '/sys/community/import',
method: 'post',
params: {
id: id,
merchantId: merchantId
},
data: data
})
}