<!--
@name: importComponent
@description: 通用导入组件
@author: zc
@time: 2023/11/30
@引入:

  <el-form-item v-hasPermiRouter="['demo:demo:demo']">
    <import-component :importConfig="importConfig"></import-component>
  </el-form-item>

  import importComponent from "@/components/importComponent/importComponent.vue";

  components: {
    importComponent,
  },
  importConfig:{
    upLoadApi:'/system/user/student/importData',                //上传接口地址
    downloadApi:'/system/user/student/importTemplate',          //下载模板接口地址
    downloadCustomKey:null,                                     //下载模板自定义参数KEY(非必填)
    downloadCustomValue:null,                                   //下载模板自定义参数VALUE(非必填)
    loseApi:'/system/user/student/importErrorData',             //失败报表接口地址
    loseCustomKey:null,                                         //失败报表自定义参数KEY(非必填)
    loseCustomValue:null,                                       //失败报表自定义参数VALUE(非必填)
    fileName:'导入模板-',                                       //下载模板命名
  },

-->
<template>
  <div style="display: inline-block">
    <el-dropdown @command="importButton">
      <div class="importComponent">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAchJREFUOE+tk7FrU1EUxn/fu8lrhjTpUJCUDkrr1g6CFCcXtYp/g7tzQSolwTyNWp0cHEQnF0UFF1FwdlIEBxURXG0dChEltS++9+6RvETTagsV/cZ7v/u75577HdGTmWh9nwEakg4AhXx9ewVAbPCUOLum3BN9HadQWpZpzsRDvH3EAR5HQN/Tk8cwhJgRHDXpbn+zFe8XwW3DHpOFN6ixziccq2RMbALUsNy/So1Cclkw1QdcsSrd9CCu8J6GVrjU2UMWHsf750QjH0D9gz+1uDZKudJ77slheb0+aGDsV3TLsG+kLHE+fLMF0rQKLq1LdmII2HxDZCGue1gWRCatkfomCt8Syee2s+0q5dG6sHkRfR6jODZCsv4nzJUOCd80sxWcGiTF1zlkC+BCfCaQmzPzxbzPA0mkHmUSsxjTBnfINhaJqu3/DPjnJ2yXtr9qYg/wwByvvlTYV+1wWglRPC3nbho+3t03Nm0SlyyAHnGu8IylzjilcB6zl7sLUiueEsE9gxdkxYtAGwh2jPJaPIG5ZRl7B8NkZVy6ILNTJp5gvMu/VDsME8xKHDF0fxieqzZJN6lLHBuM869M/NbnAGNjMHjXfwAgVvTSjFOz2AAAAABJRU5ErkJggg==">
        <p>导入</p>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAQAAABQ+cdNAAAAAXNSR0IArs4c6QAAAFxJREFUCNdFiLENwCAQxH4SqEDMlCJiB/QHzAINJTOxQNJDnaCAlHNzNrHyB1s+N3aaIg5ofONazNc4UNRcMPBsBpeoichJJPQvdSQnac0L5Bk6shf0zxlUVGeWvWfOMytyOTQwAAAAAElFTkSuQmCC">
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item style="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:1}">下载模板</el-dropdown-item>
        <el-dropdown-item style="margin:0 10px;color:#333;" :command="{command:2}">导入数据</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!--导入窗口-->
    <el-dialog title="导入" :visible.sync="importOpen" @close="importOpenOff" width="600px" append-to-body class="importComponent-dialog-box">
      <el-upload
        class="importComponent-dialog-upLoad-box"
        :drag="true"
        :data="upImportData"
        :action="uploadImgUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :headers="headers"
        :before-upload="beforeAvatarUpload">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--        <div class="el-upload__tip" slot="tip">-->
<!--          <el-checkbox v-model="upImportData.upDate">是否更新已经存在的数据</el-checkbox>-->
<!--        </div>-->
        <div class="el-upload__tip" slot="tip">仅允许导入xls、xlsx、格式文件。<span style="color:#0183FA;cursor: pointer" @click="importTemplate">下载模板</span></div>
        <div class="el-upload-text-box" slot="tip" v-if="importType">
          <div class="img-text-box">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0NBMEIwMDVCMTk0MTFFQzlDODdBRjM0MDEzQjQ5N0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0NBMEIwMDZCMTk0MTFFQzlDODdBRjM0MDEzQjQ5N0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQ0EwQjAwM0IxOTQxMUVDOUM4N0FGMzQwMTNCNDk3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQ0EwQjAwNEIxOTQxMUVDOUM4N0FGMzQwMTNCNDk3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PubQz/gAAAIrSURBVHjabFM9a1RRED0z931sVrNBhKAYEIKl2ChoZRFIYSFYWug/sLZQwW38BfkJCoqkiaWdpWBnAiIRMWiTQHRj3OR93Bnn3pdk31ud17x7Z+bcM2dmSFVBz/xtVrmnSo5IDwAQJiYWMQvoovnfQJIVDGk7OEJuEkNUlkV1C4KXmqe/UMM1uQXgc4+kXiDRR0S4oVx9wXB7FcP5/RARARjIhPEeO+kGVqjAtD3VQ0qqTwL6waQ3hedqPNQ18/zmhgEqe93jbId62/ZFaYtVFxR6nogf4HR564RBY645Px5fQG+mH+kH87nGf3EfxNlT0O9W8mUmWjLv6waAzEHGwmEWSXqftboEYt/gVhqLtBCBfkMtz8Huul0tTRiEdPUpMjfGoV8V5lMwvkfgE6uyPTvvgr3Fi2+XIPaUoCrOIaErdpoxUN9RQZxD4g9Q+48G4iCkRw1ombc0dfp/HSUwDRpIG/pYg1ACI8t/oizXwZRHXbpG8L5AWY/Q61mG0ARA7HPOo64WjdMdZgyMYrcEDjViD/1sLXL1gdIxANsn3urKvoLLF4adB8k7ABogrJ9/yh30exdjTkfEMEyutFGiZXg6Y+4pES3d0whZ+tZKqa1Mabcxjf+c7QL1huk0+KcLFF7UMRLTKbC1rToBEKbaVusqfPUZlG7GuUimJCzisNo0VfPG8poQteZA6Z2VdFcJT2wgR3artpHdvUhiE635NDCH2G68Ctd/BRgAGOn246hr6dIAAAAASUVORK5CYII=">
            <p>{{getImportData.textName}}</p>
          </div>
          <p class="text-p">导入成功 <span style="color:#0183FA;">{{getImportData.successNum}}</span> 条，失败 <span style="color:#FF6464 ;">{{getImportData.failureNum}}</span> 条</p>
          <div class="img-text-box" v-if="importConfig.loseApi && getImportData.failureNum > 0">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzYxNjI5MTdCMTk0MTFFQ0ExRDU5MjRBRTY1ODBCMjEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzYxNjI5MThCMTk0MTFFQ0ExRDU5MjRBRTY1ODBCMjEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNjE2MjkxNUIxOTQxMUVDQTFENTkyNEFFNjU4MEIyMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNjE2MjkxNkIxOTQxMUVDQTFENTkyNEFFNjU4MEIyMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg0zgmgAAAHbSURBVHjaxFM7aFRBFD1n3m5MovGDX9BCFBKtzIpaJlZpxDqNKCKIjWAlpBAiYrQTLSSFYGdhCAjpbAIWFipI0CaFhZVaRQV1n/veHM/7EJ+aLoUDd+fdz5x7z5lZSsJ6VsA6F1e/LqqNvekEQ7hi7/gquJiKWIRwB29aLzDHfI0JXLKvN+rDV+2M27bYhkqjdlA6DcQpdH6OrE3hNjb796zthK1d5wpxYrkT/WQ4iQzncaM7gmkN/gZ4rARZdsRcJuz31/EI6ZP312b5vcbbRPICEWYRskuY0c4i2sJyeso4l93lQGOyovuSL+gJi9HJjbVe22xjpA4rzwZwUw9aVLjl1HAJVq1CpB4YUih+dq7yqzxr2rsJTSpm3eDQ/sbhoveK656J+ujSxPUFjZfO/PhLv0MGORdqoRoXq1TIn7r7vJ13/n7ox/b2n7qaaPjjLVQIu0xr0je7FaH9FUg65mydMNgoKsBe+fz9VqU0jtY3wJIO0SE4pby37H3M4T0NcTPn3yvqHgb6FhKMX1tyIJLl4ykAuy6ziNhutIP2+2r+qYEsKp8LuosvKwu4PvStGn9Gw8izMxSOVSDRI9ICWkSyV04sJm7yIcb4CNqwiGl2K8n+97/xlwADAMpupJmuA5FSAAAAAElFTkSuQmCC">
            <p style="color:#0183FA;cursor: pointer;" @click="failureExcel">点击下载失败数据报表</p>
          </div>
        </div>
      </el-upload>
      <!--<div slot="footer" class="importComponent-dialog-button-box">-->
        <!--<p class="inquire-button-one" @click="importOpenOff">确定</p>-->
      <!--</div>-->
      <div class="importComponent-dialog-position-box" v-if="loading"></div>
    </el-dialog>
  </div>
</template>
<script>
  import { getToken } from "@/utils/auth";
  export default {
    name: 'importComponent',
    props: {
      importConfig:{},
    },
    data () {
      return {
        loading:false,
        uploadImgUrl: window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + this.importConfig.upLoadApi, // 上传地址
        headers: {
          Authorization: getToken(),
        },
        //窗口状态
        importOpen:false,
        //导入数据
        upImportData:{
          upDate:false,
        },
        getImportData:{
          downFile:false,
          successNum:0,
          failureNum:0,
          failCode:null,
          textName:"",
        },
        //导入状态展示
        importType:false,
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      /** 导入按钮操作 */
      importButton(item){
        if(item.command == 1){
          //  下载模板
          if (this.importConfig.downloadCustomKey){
            let obj = {};
            obj[this.importConfig.downloadCustomKey] = this.importConfig.downloadCustomValue
            this.download(this.importConfig.downloadApi,obj,this.importConfig.fileName+`.xlsx`)
          } else {
            this.downloadPost(this.importConfig.downloadApi,this.importConfig.fileName+`.xlsx`)
          }
        }else if(item.command == 2){
          //  导入数据
          this.importOpen = true;
        }
      },
      //导入页面关闭
      importOpenOff(){
        this.$set(this,'importOpen',false);
        this.$set(this,'importType',false);
        this.$set(this,'getImportData',{
          downFile:false,
          successNum:0,
          failureNum:0,
          failCode:null,
          textName:"",
        });
      },
      /** 下载模板操作 */
      importTemplate() {
        if (this.importConfig.downloadCustomKey){
          let obj = {};
          obj[this.importConfig.downloadCustomKey] = this.importConfig.downloadCustomValue
          this.download(this.importConfig.downloadApi,obj,this.importConfig.fileName+`.xlsx`)
        } else {
          this.downloadPost(this.importConfig.downloadApi,this.importConfig.fileName+`.xlsx`)
        }
      },
      /*下载失败列表*/
      failureExcel(){
        if(this.importConfig.loseCustomKey || this.getImportData.failCode){
          let obj = {}
          if(this.getImportData.failCode){
            obj.failCode = this.getImportData.failCode;
          }
          if(this.importConfig.loseCustomKey){
            obj[this.importConfig.loseCustomKey] = this.importConfig.loseCustomValue;
          }
          this.download(this.importConfig.loseApi,obj, '失败报表.xlsx')
        }else{
          this.downloadPost(this.importConfig.loseApi,`失败报表.xlsx`)
        }
      },
      //****************************************导入功能**************************************
      handleAvatarSuccess(res, file) {
        if(res.code == 200){
          this.getImportData.downFile = res.data.downFile
          this.getImportData.successNum = res.data.successNum
          this.getImportData.failureNum = res.data.failureNum
          this.getImportData.failCode = res.data.failCode
          this.importType = true
          if (this.$parent.getList){
            this.$parent.getList();
          } else if(this.$parent.$parent.getList){
            this.$parent.$parent.getList();
          } else if(this.$parent.$parent.$parent.getList){
            this.$parent.$parent.$parent.getList();
          }
        }else{
          this.msgError(res.message);
        }
        this.loading = false;
      },
      beforeAvatarUpload(file) {
        let type = false;
        this.importType = false
        if (file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.type == 'application/vnd.ms-excel') {
          this.getImportData.textName = file.name;
          type = true;
          this.loading = true;
        }else{
          this.$message.error('只能上传xls/xlsx格式文件');
          type = false;
        }
        return type;
      },
    },
  }
</script>
<style scoped lang="scss">
  .importComponent{
    display: flex;
    margin:0;
    padding:0 10px;
    cursor: pointer;
    height:40px;
    img:nth-child(1){
      width:16px;
      height:16px;
      margin-top:12px;
    }
    p{
      width:47px;
      text-align: center;
      font-size:14px;
      margin:0;
      line-height:40px;
    }
    img:nth-child(3){
      width:10px;
      height:6px;
      margin-top:17px;
    }
  }

  .importComponent-dialog-box{
    .importComponent-dialog-upLoad-box{
      width:360px;
      margin:0 auto;
      .el-upload{
        width:450px;
        margin:0 55px;
        .el-upload-dragger{
          width:450px;
          .el-icon-upload{
            font-size:100px;
            color:#CBE6FE;
          }
          .el-upload__text{
            margin-top:20px;
          }
        }
      }
      .el-upload__tip{
        margin-left:60px;
        font-size:14px;
        margin-top:10px;
      }
      .el-upload-text-box{
        background: #F5F5F5;
        border-radius: 10px;
        margin:15px 30px 0;
        padding:0 20px 15px;
        overflow: hidden;
        *{
          margin:0;
        }
        .img-text-box{
          display: flex;
          margin-top:15px;
          img{
            width:16px;
            height:16px;
            margin-right:13px;
          }
          p{
            height:16px;
            line-height:16px;
            font-size:12px;
          }
        }
        .text-p{
          margin-top:15px;
          margin-left:29px;
          height:16px;
          line-height:16px;
          font-size:12px;
        }
      }
    }
    .importComponent-dialog-button-box{
      display: flex;
      width:190px;
      margin:0 auto;
      p{
        width:70px;
        height:30px;
        line-height:28px;
        font-size:14px;
        margin:0 auto;
        color:#0183FA;
        text-align: center;
        border:1px solid #0183FA;
        border-radius:4px;
        background-color: #fff;
        cursor: pointer;
      }
      p:hover{
        color:#fff;
        background-color: #0183FA;
        border:1px solid #0183FA;
      }
    }
    .importComponent-dialog-position-box{
      width:100%;
      height:100%;
      position: absolute;
      top:0;
      left:0;
      z-index: 999;
      background: rgba(255,255,255,0.4);
      border-radius:20px;
    }
  }
</style>
