<template>
<div>
<el-button type="primary" @click="openDialog">{{ title }}</el-button>
<sys-dialog
:title="dialog.title"
:visible="dialog.visible"
:width="dialog.width"
:height="dialog.height"
:showCancel="false"
@onConfirm="dialog.visible = false"
>
<div slot="content">
<el-row style="padding-left: 30px;padding-top: 30px;">
<el-col :span="4">
下载模板:
</el-col>
<el-col :span="20">
<el-button type="primary" icon="el-icon-download">下载模板</el-button>
</el-col>
</el-row>
<el-row style="padding-left: 30px;padding-top: 30px;">
<el-col :span="4">
上传文件:
</el-col>
<el-col :span="20">
<el-upload
ref="upload"
:headers="headers"
:action="baseURL + apiURL"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:accept="acceptExcel"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary" icon="el-icon-folder-add">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" icon="el-icon-upload2">确定导入</el-button>
<div slot="tip" style="color: white;font-size: 12px;">只能上传xlsx/xls文件</div>
</el-upload>
</el-col>
</el-row>
</div>
</sys-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import SysDialog from "@/components/dialog/SysDialog.vue";
export default {
name: "importBtn",
props: {
apiURL: {
type: String,
default: null
},
title: {
type: String,
default: '导入文件'
}
},
components: {
SysDialog
},
data() {
return {
fileList: [],
baseURL: process.env.VUE_APP_BASE_API,
headers: {
Authorization: getToken()
},
acceptExcel: ".xlsx, .xls",
dialog: {
title: "上传数据文件",
visible: false,
width: 500,
height: 250,
},
};
},
methods: {
openDialog() {
this.dialog.visible = true
},
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleSuccess(response, file, fileList) {
// 处理上传成功的逻辑
this.$notify({
title: "上传成功",
type: "success",
duration: 2500
});
},
handleError(error, file, fileList) {
// 处理上传失败的逻辑
this.$notify({
title: "上传失败请重试",
type: "error",
duration: 2500
});
}
}
};
</script>
<style scoped>
::v-deep .el-upload-list__item-name {
color: white;
}
::v-deep .el-upload-list__item-name [class^="el-icon"] {
color: white;
}
</style>
原文地址:https://blog.csdn.net/weixin_45259917/article/details/132022796
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_37622.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。