<template>
    <el-dialog :title="title" :visible.sync="open" width="400px" :before-close="handleClose" append-to-body>
        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="headers"
            :action="baseApi + url + '?updateSupport=' + updateSupport" :disabled="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">
                <div class="el-upload__tip" slot="tip">
                    <el-checkbox v-model="updateSupport"> 是否更新已經存在的數據</el-checkbox>
                </div>
                <span>僅允許導入xls、xlsx格式文件。</span>
                <el-link v-if="tempUrl" 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="handleClose">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
    props: {
        url: {
            type: String,
        },
        tempUrl: {
            type: String,
        },
        title: {
            type: String,
            default: "數據導入"
        },
        open: {
            type: Boolean,
            default: false
        },
        // 是否更新已經存在的用戶數據
        updateSupport: {
            type: Number,
            default: 0
        },
        callback: Function
    },
    data() {
        return {
            loading: undefined,
            baseApi: process.env.VUE_APP_BASE_API,
            headers: { Authorization: "Bearer " + getToken() },
            isUploading: false
        }
    },
    methods: {
        // 下載模板操作
        importTemplate() {
            this.download(this.$props.tempUrl, {
            }, `${this.$props.title}模板_${new Date().getTime()}.xlsx`)
        },
 
        // 文件上傳中處理
        handleFileUploadProgress(event, file, fileList) {
            this.isUploading = true;
            this.loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        },
 
        // 文件上傳成功處理
        handleFileSuccess(response) {
            this.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.handleClose();
            this.$props.callback && this.$props.callback();
        },
 
        // 提交上傳文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
 
        // 模態(tài)框關閉
        handleClose() {
            this.loading && this.loading.close();
            this.$refs.upload.clearFiles();
            this.$importModel.hide();
        }
    }
}
</script>
 
<style></style>

import ImportModel from './index.vue'
import { Message } from 'element-ui';
 
const ImportComponent = {
    install(Vue) {
        // 創(chuàng)建組件構造函數
        const ImportInstance = Vue.extend(ImportModel);
        let component;
        const initInstance = () => {
            component = new ImportInstance();
            let mountDom = component.$mount().$el;
            document.body.appendChild(mountDom);
        }
        // 全局掛載組件方法
        Vue.prototype.$importModel = {
            // 顯示模態(tài)框
            show(option) {
                if(!option.url) return Message.error("上傳地址必填！");
                initInstance();
                component.open = true;
                Object.assign(component, option);
            },
            // 關閉模態(tài)框
            hide() {
                component.open = false;
                let mountDom = component.$mount().$el;
                document.body.removeChild(mountDom);
            }
        };
    }
};
 
export default ImportComponent;

/**
     * 導入操作
     */
    handleImport() {
      this.$importModel.show({
        url: this.queryConfig.importUrl,
        tempUrl: this.queryConfig.importTempUrl,
        title: this.tableName || null,
        callback: () => {
          this.handleQuery();
        }
      })
    },
 

import Logo from './Logo.vue'
import MyIcon from './MyIcon.vue'

const components = {
    install(Vue){
        Vue.component("Logo",Logo)
        Vue.component("MyIcon",MyIcon)
    }
}
export default components

//引入全局組件
import Components from '@/components/common'
Vue.use(Components)

<template>
  <div class="home">
    <my-icon></my-icon>
    <logo></logo>
   </div>
</template>