auth-web/src/pages/common/import/index.vue

<template>
    <div>
        <dg-button @click="download" style="margin-bottom: 16px">模版下载</dg-button>
        <dg-upload
            ref="upload"
            :limit="limit"
            :accept="accept"
            :on-error="handleError"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            action="/dcucauth/duceap/v2/upload/file"
            drag
        >
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传excel(.xls,.xlsm,.xlsx,.et)文件，且不超过1M</div>
        </dg-upload>
        <!-- <div v-footer>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div> -->
    </div>
</template>

<script>
import { downloadBlob } from "@/utils/download";
import * as commonApi from "@/api/common";
// import axios from "@/utils/req";

const dd = {
    police: "警员模版.xls",
    auxiliaryPolice: "辅警模版.xls",
    externalPersonnel: "外部人员.xls",
    manager: "管理员模版.xls",
    govUser: "政府人员模版.xls",
    apply: "应用资源模板.xls",
    appFun: "功能资源模板.xls",
    serviceResource: "服务资源模板.xls",
    org: "机构模板.xls",
    user: "人员模板.xls",
};

export default {
    name: "import",
    props: {
        limit: {
            type: Number,
            default: 1
        },
        temp: {
            type: String,
            required: true
        },
        action: {
            type: String,
            required: true
        },
        accept: {
            type: String,
            default: ".xls,.xlsm,.xlsx,.et"
        },
        method: {
            type: String,
            default: "post"
        },
        otherParams: {
            type: Object,
            default() {
                return {}
            }
        }
        // url: {
        //     type: String,
        // },
        // fileName: {
        //     type: String,
        // },
    },
    methods: {
        download() {
            const that = this;
            const { temp } = that;
            // const { temp, url, fileName } = that;
            // if (url) {
            //     axios
            //         .request(url, {}, { method: 'post' })
            //         .then(res => {
            //             downloadBlob(fileName, res.data);
            //         })
            //         .catch(error => {
            //             console.error('[Error]', error);
            //             that.$message.error('下载失败');
            //         });
            //     return;
            // }
            commonApi
                .downTemplate({ type: temp })
                .then((res) => {
                    downloadBlob(dd[temp] || "模版", res.data);
                })
                .catch((error) => {
                    console.error("[Error]", error);
                    that.$message.error("下载失败");
                });
        },
        beforeUpload(file) {
            const that = this;
            const isExcel = [/.xls$/, /.xlsm$/, /.xlsx$/, /.et$/].some((item) => item.test(file.name));
            const isLt2M = file.size / 1024 / 1024 < 1;
            if (!isExcel) {
                that.$message.error("只能上传文件只能是 excel 格式文件!");
            }
            if (!isLt2M) {
                that.$message.error("上传文件大小不能超过 1MB!");
            }
            return isExcel && isLt2M;
        },
        onClose() {
            this.$emit("close");
        },
        clearFiles() {
            this.$refs.upload.clearFiles();
        },
        handleSuccess({ id }, file, fileList) {
            const { action, otherParams } = this;
            commonApi.importFile(action,{ fileId: id, ...otherParams}).then(res => {
                if(res.data.statusCode == '200') {
                   this.$message.success(res.data.message);
                   this.$emit("success");
                }else {
                    this.clearFiles();
                    this.$message.error(res.data.message);
                }
            }).catch(err => {
                this.clearFiles();
                this.$message.error("上传失败");
            })
        },
        handleError(err, file, fileList) {
            this.clearFiles();
            this.$message.error("上传失败,请重新上传");
        },
        // 取消
        handleCancel() {
            this.$emit("close");
        },
        // 确定
        handleSubmit() {
            this.$emit("success");
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/ .el-upload-dragger {
    width: 500px;
}
</style>