发布于2021-10-19 22:57 阅读(1355) 评论(0) 点赞(22) 收藏(3)
名称 | 内容 |
---|---|
创建时间 | 2021-10-18 |
更新时间 | 2021-10-18 |
变更次数 | 0 |
<!--
version: 1.0
date: 2021-10-18
update:
author: Petty Fox
function: 提供基于对话框的excel导入功能
属性配置:
- allowType:配置允许的文件类型
- title:对话框标题
- allowType:配置允许的文件类型
- importDesc:导入框描述
- maxSize:最大字节数
回调方法:
- clickDownTemp(): 点击下载模板
- handleUpload({file:file}): 处理上传的文件,用axios接口调用上传
- update(): 导入完成后点击
方法:
- setResult 导入结果
- setResultError 导入错误
-->
<template>
<el-dialog
:close-on-click-modal="false"
:title="title"
top="10vh"
destroy-on-close
:visible.sync="dialogVisible"
width="50%">
<div class="import-layout">
<el-steps :active="activeStatus" finish-status="success">
<el-step title="导入文件" icon="el-icon-upload"></el-step>
<el-step title="导入中" icon="el-icon-top"></el-step>
<el-step title="导入完成"></el-step>
</el-steps>
<div>
<el-upload
v-if="activeStatus === 0"
style="text-align: center;margin-top:20px;"
drag
:show-file-list="false"
:before-upload="uploadBefore"
action="https://jsonplaceholder.typicode.com/posts/"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip"
style="display: flex;justify-content: center;align-items: center;"
slot="tip">
{{importDesc}}
<el-link type="primary" :underline="false" @click="clickDownTemp">下载模板</el-link>
</div>
</el-upload>
<div v-if="activeStatus === 1"
style="display: flex;justify-content: center;align-items: center;flex-direction: column;height: 15vh">
<div class="el-icon-loading" style="font-size: 3rem"></div>
<div style="line-height: 5vh">导入中请稍后</div>
</div>
<div v-if="activeStatus === 2">
<el-descriptions title="导入结果" border>
<el-descriptions-item label="成功数">
<el-tag size="small">{{ importResult.successCount }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="失败数">
<el-tag size="small" type="danger">{{ importResult.errorCount }}</el-tag>
</el-descriptions-item>
</el-descriptions>
<div style="display: flex;justify-content: center;margin-top:30px;">
<el-button type="primary" @click="clickClose">关闭</el-button>
</div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import {FileUtils} from "../utils/FileUtils";
export default {
name: "ExcelImportDialog",
data() {
return {
dialogVisible: false,
form: {},
activeStatus: 0,
importResult: {}
}
},
props: {
title: {
type: String,
default: '批量导入'
},
importDesc: {
type: String,
default: ' 只能上传xls、xlsx文件,且不超过100MB'
},
allowType: {
type: Array,
default() {
return ['xls', 'xlsx']
}
},
maxSize: {
type: Number,
default: 100 * 1024 * 1024
}
},
methods: {
open(form) {
this.form = form
this.dialogVisible = true
},
clickClose() {
this.dialogVisible = false
this.$emit("update")
},
setResult(result) {
this.activeStatus = 2
this.importResult = result
},
setResultError() {
this.activeStatus = 0
},
/***
* 上传之前处理,校验参数后触发上传事件
*/
uploadBefore(file) {
// 文件大小校验
if (file.size > this.maxSize) {
this.$message.warning(this.importDesc)
return
}
// 文件后缀名校验
let suffix = FileUtils.fileSuffix(file.name)
if (this.allowType.indexOf(suffix) < 0) {
this.$message.warning("只支持文件格式:" + this.allowType.join(","))
return
}
this.activeStatus = 1
this.$emit('handleUpload', {file: file})
},
//*****************界面操作
/***
* 点击下载模板
*/
clickDownTemp() {
this.$emit('handleDownTemp')
}
}
}
</script>
<style scoped>
.import-layout {
}
</style>
const formatFileSize = (bytes) => {
if (bytes === 0) return '0 B';
let k = 1024, // or 1024
sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
i = Math.floor(Math.log(bytes) / Math.log(k));
return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
/**
* 获取文件后缀名,不包含点
* @param name
* @returns {string}
*/
const fileSuffix = (name) => {
return name.substring(name.lastIndexOf(".") + 1)
}
/**
* 文件处理相关的工具类
* version: 1.0
* author: Petty Fox
*/
export const FileUtils = {
formatFileSize: formatFileSize,
fileSuffix: fileSuffix
}
原文链接:https://blog.csdn.net/mathcoder23/article/details/120831529
作者:92wwhehjw
链接:http://www.qianduanheidong.com/blog/article/203949/83e6cbd34b5fa2dbb598/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!