exportExcel-agent.vue 3.3 KB
<template>
  <!-- $t is vue-i18n global function to translate lang -->
  <div class="app-container">
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="searchText">
        <el-form-item>
          <el-date-picker v-model="searchText.startdate" value-format="yyyy-MM-dd" type="date"
                          placeholder="开始航班日期"
                          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="searchText.enddate" value-format="yyyy-MM-dd" type="date"
                          placeholder="结束航班日期"
          ></el-date-picker>
        </el-form-item>
        <FilenameOption v-model="filename" />
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="document" @click="exportExcel">导出 Excel</el-button>
      </el-form>
    </el-col>
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <span>导出进度:{{downloadSize}}</span>
    </el-col>
  </div>
</template>

<script>
// import { getAnalysisList } from '@/api/agent-excel'
import { parseTime } from '@/utils'

// options components
import FilenameOption from './components/FilenameOption'
export default {
  name: 'ExportExcel',
  components: { FilenameOption },
  data() {
    return {
      list: [],
      fetchList: [],
      listLoading: false,
      downloadLoading: false,
      filename: '',
      autoWidth: true,
      bookType: 'xlsx',
      searchText: {
        startdate: undefined,
        enddate: undefined
      },
      note: {
        type: 'info',
        message: ''
      },
      downloadSize: 0

    }
  },
  created() {
    // this.fetchData()
  },
  filters: {
    parseTime: parseTime
  },
  methods: {
    dateFormat:function(row,column){
      var t=new Date(row.updateTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
      return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate();
    },
    exportExcel(){
      let _this = this
      this.$loading({
        fullscreen: true,
        text: '正在导出',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.6)'
      })
      this.$axios({
        method:"get",
        url: "/analysis-agent/agent/analysis",
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params:this.searchText,
        onDownloadProgress: function (progressEvent) {
          _this.downloadSize = progressEvent.loaded
          console.log(progressEvent.loaded)
        }
      }).then(
              res=>{
                let data = res.data;
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                this.filename = this.filename == '' ? 'export' : this.filename
                link.setAttribute('download', this.filename+'.xls');
                document.body.appendChild(link);
                link.click()
                this.$loading().close()
              },err =>{
                this.$loading().close()
      });

    }
  }
}
</script>

<style>
.radio-label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 30px;
}
</style>