本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(314)

2021-04(186)

2021-05(139)

2021-06(104)

2021-07(3)

vue-Excel导入对话框模板

发布于2021-10-19 22:57     阅读(998)     评论(0)     点赞(22)     收藏(3)


vue-Excel导入对话框模板

更新历史

名称内容
创建时间2021-10-18
更新时间2021-10-18
变更次数0

功能清单

  • 提供基于对话框的excel导入功能
  • 配置基本定制内容
  • 通过回调方法处理定制内容
  • 通过方法设置导入结果的显示
<!--
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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

22 0
收藏该文
已收藏

评论内容:(最多支持255个字符)