safetyEducationExamination/src/components/exportComponent/exportComponent.vue

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


  <el-form-item v-hasPermiRouter="['system:user:export']">
    <export-component :exportConfig="exportConfig"></export-component>
  </el-form-item>

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

  components: {
    exportComponent,
  },

  exportConfig:{
    api:'system/user/student/export',              //导出接口地址
    ids:'',                                        //勾选导出,勾选的IDS
    fileName:'导出文件名',                         //导出文件的命名
    customKey:null,                                //自定义参数KEY(非必填)
    customValue:null,                               //自定义参数VALUE(非必填)
    screenData:{}                                  //导出筛选数据(非必要-如有该参数组件会显示导出筛选数据按钮)
  },

-->
<template>
  <el-dropdown @command="exportButton">
    <div class="exportComponent">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAddJREFUOE+dk71rU2EYxX/n3qTDpa1FEge/EcHJ/8FNEARbUCh0qaKg4CJSsGqb3DSDHQQXF0U3PwadROjfIIirIA6iKNhiSTUmuTf3SHKLtLZB8Vne5X1+73ue5xwRt6eELiGOACavAPPOIRe4PvQGLKqtYwqCO0AZVACF2O+luPMaeaetJeRvmBAU4OwLnewR9ehTH1nxQcJkHHxU1jhiDFiTap1VwxPSJEZRg+ay+g1RqQu0qChbBwQU2EeWXJE0Ce49lPUAK8b36A7FVNRcl7D1mPduCsmM4IThJfYOSSd7gGXjB6w1aiyW17YFLHgPdGeVdScsPSVNb1MonhaezgH2Q7434m0B895LIZkVTFjBM5KwTpXP1NqH6PrAYIAt6q39OLwmdMr4OSrWuaF8qP2yBgNmPMJwelXinPEL0nSBavTxT4mDAbc8QjuZRiqRJvepRh9+N1ccwI9dBMXyYEDvkhnmJ2ZRm4dbcUTYviiCM38f4nZryX8X9+T9H2Dm6wijo3Oyzv67kTb+pC+hMyd0PreyeEyS1DZZeZAlo5Jxc5Ri8abMZA/wCrtkaQm8up7EPA9bdtZPawYak30caUXE6ZSUXQYOb4jzwEjk/kGIt7bv/gIDxhB8p301WQAAAABJRU5ErkJggg==">
      <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="border-bottom:1px solid #E0E0E0;margin:0 10px;color:#333;" :command="{command:3}" v-if="exportConfig.screenData">导出筛选数据</el-dropdown-item>
      <el-dropdown-item style="margin:0 10px;color:#333;" :command="{command:2}">导出选中数据</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
  export default {
    name: 'exportComponent',
    props: {
      exportConfig:{},
    },
    data () {
      return {

      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      /** 导出按钮操作 */
      exportButton(item) {
        let self = this;
        let currentDate=this.getCurrentTime()
        if(item.command == 1){
          self.$confirm(`确认导出全部数据?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            let obj = {
              ids :''
            }
            if(self.exportConfig.customKey){
              obj[self.exportConfig.customKey] = self.exportConfig.customValue
            }
            self.download(self.exportConfig.api,obj, self.exportConfig.fileName+currentDate+'.xlsx')
            if(self.$parent.$refs['table-box']){
              self.$parent.$refs['table-box'].clearSelection();
            }else if(self.$parent.$parent.$refs['table-box']){
              self.$parent.$parent.$refs['table-box'].clearSelection();
            }else if(self.$parent.$parent.$parent.$refs['table-box']){
              self.$parent.$parent.$parent.$refs['table-box'].clearSelection();
            }
          }).catch(() => {})
        }else if(item.command == 2){
          if(self.exportConfig.ids.length>0) {
            self.$confirm(`确认导出选中数据?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(async () => {
              let ids = self.exportConfig.ids.join(',');
              let obj = {
                ids :ids
              }
              if(self.exportConfig.customKey){
                obj[self.exportConfig.customKey] = self.exportConfig.customValue
              }
              self.download(self.exportConfig.api,obj, self.exportConfig.fileName+currentDate+'.xlsx')
              if(self.$parent.$refs['table-box']){
                self.$parent.$refs['table-box'].clearSelection();
              }else if(self.$parent.$parent.$refs['table-box']){
                self.$parent.$parent.$refs['table-box'].clearSelection();
              }else if(self.$parent.$parent.$parent.$refs['table-box']){
                self.$parent.$parent.$parent.$refs['table-box'].clearSelection();
              }
            }).catch(() => {})
          }else{
            this.msgError('请勾选数据')
          }
        }else if(item.command == 3){
          self.$confirm(`确认导出当前筛选条件查出的数据?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(async () => {
            self.download(self.exportConfig.api,self.exportConfig.screenData, self.exportConfig.fileName+currentDate+'.xlsx')
            if(self.$parent.$refs['table-box']){
              self.$parent.$refs['table-box'].clearSelection();
            }else if(self.$parent.$parent.$refs['table-box']){
              self.$parent.$parent.$refs['table-box'].clearSelection();
            }else if(self.$parent.$parent.$parent.$refs['table-box']){
              self.$parent.$parent.$parent.$refs['table-box'].clearSelection();
            }
          }).catch(() => {})
        }
      },
      /** 当前时间 */
      getCurrentTime () {
        const yy = new Date().getFullYear()
        const mm = new Date().getMonth() + 1
        const dd = new Date().getDate()
        return yy + '-' + mm + '-' + dd
      },
    },
  }
</script>
<style scoped lang="scss">
  .exportComponent{
    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;
    }
  }
</style>