<template>
<el-dialog title="用户导入" :visible="visible" width="600px" append-to-body :before-close="cancel">
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size:12px;vertical-align: baseline;"
@click="importTemplate"
>下载模板</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="visible = false">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import UploadImg from '@/components/UploadImg/index'
import { getToken } from "@/utils/auth";
export default {
components: { UploadImg },
data() {
return {
title:'',
disabled:true,
visible: false,
formData: {},
upload: {
open: false, // 是否显示弹出层(用户导入)
title: "", // 弹出层标题(用户导入)
isUploading: false, // 是否禁用上传
updateSupport: 0, // 是否更新已经存在的用户数据
headers: { Authorization: "Bearer " + getToken() }, // 设置上传的请求头部
url: process.env.VUE_APP_BASE_API + "/system/user/importData" // 上传的地址
}
};
},
methods: {
initFun(){
this.visible = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"system/user/importTemplate",
{},
`用户数据导入模板.xlsx`
);
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
console.log(event, file, fileList);
this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
console.log(response, file, fileList);
this.visible = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto; overflow-x: hidden;max-height: 70vh; padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.$emit('getList',{pageNum: 1,pageSize: 10},'clear')
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
// 取消按钮
cancel() {
this.visible = false;
},
}
}
</script>
上传文件
最新推荐文章于 2024-08-14 18:44:30 发布