vue-Excel导入对话框模板

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
}