avue导出Excel,使用当前日期做文件名,可以批量导出、全量导出、搜索后的全量数据导出

1. avue做导出Excel功能

1.1 vue文件

// 静态页面
<template>
    <div>
        <template
            slot="menuLeft"
            slot-scope="scope">
            <el-button
              icon="el-icon-download"
              type="menu"
              size="primary"
              @click="exportExcel"
              :loading="loading.exportLoading"
            >导出
            </el-button>
        </template>
    </div>
</template>

<script>
// 格式化日期对象
const getNowDate = () => {
  var date = new Date();
  var sign2 = ":";
  var year = date.getFullYear() // 年
  var month = date.getMonth() + 1; // 月
  var day = date.getDate(); // 日
  var hour = date.getHours(); // 时
  var minutes = date.getMinutes(); // 分
  var seconds = date.getSeconds() //秒
  var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
  var week = weekArr[date.getDay()];
  // 给一位数的数据前面加 “0”
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (day >= 0 && day <= 9) {
    day = "0" + day;
  }
  if (hour >= 0 && hour <= 9) {
    hour = "0" + hour;
  }
  if (minutes >= 0 && minutes <= 9) {
    minutes = "0" + minutes;
  }
  if (seconds >= 0 && seconds <= 9) {
    seconds = "0" + seconds;
  }
  return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
}
export default {
  name: 'logs',
  data() {
    return {
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      excelData: '',
      loading:{
        exportLoading:false
      },
      selectContent: {
        checkData: []
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
  },
  methods: {
    getList(page, params) {
      this.tableLoading = true
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.records
        this.page.total = response.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    searchChange(form, done) {
      this.searchForm = form
      this.getList(this.page, form)
      done()
    },

    refreshChange() {
      this.getList(this.page)
    },

    // 导出
    exportExcel(){
      this.loading.exportLoading = true
      if (this.isEmpty(this.selectContent.checkData)){
        findExcel(this.searchForm).then(res =>{
          // this.excelData =
          this.handleExcel(res.data)
        })
      } else {
        this.handleExcel(this.selectContent.checkData).then(() =>{
          this.selectContent.checkData.clear()
        })
      }
    },
    handleExcel(exportData) {
      let opt = {
        title:  "日志(" + getNowDate() + ")",
        column: [{
            "label": "来源系统",
            "prop": "serviceSource"
          },	{
          "label": "主键",
          "prop": "id"
        },	  {
          "label": "接口编码",
          "prop": "serviceCode",
        },	  {
          "label": "接口名称",
          "prop": "serviceName",
        },	{
          "label": "说明",
          "prop": "description"
        },	  {
          "label": "批次",
          "prop": "batchId"
        },	  {
          "label": "ESB标识",
          "prop": "esbFlag"
        },	  {
          "label": "ESB返回代码",
          "prop": "esbReturnCode"
        },	  {
          "label": "系统返回消息",
          "prop": "esbReturnMessage"
        },	  {
          "label": "业务服务执行标识",
          "prop": "bizServiceFlag"
        },	  {
          "label": "业务服务返回代码",
          "prop": "bizReturnCode"
        },	  {
          "label": "业务服务返回消息",
          "prop": "bizReturnMessage"
        },	  {
          "label": "实例ID",
          "prop": "instanceId"
        },	  {
          "label": "总记录数",
          "prop": "totalRecord"
        },	  {
          "label": "总页数",
          "prop": "totalPage"
        },	  {
          "label": "页面大小",
          "prop": "pageSize"
        },	  {
          "label": "当前页",
          "prop": "currentPage"
        },  {
          "label": "是否",
          "prop": "statusCode"
        },	  {
          "label": "错误信息",
          "prop": "errorMessage",
        },	  {
          "label": "创建人ID",
          "prop": "createId"
        },	  {
          "label": "创建人",
          "prop": "createName"
        },	  {
          "label": "创建时间",
          "prop": "createTime"
        },	  {
          "label": "更新人ID",
          "prop": "updateId"
        },	  {
          "label": "更新人",
          "prop": "updateName"
        },	  {
          "label": "更新时间",
          "prop": "updateTime"
        },	  {
          "label": "操作来源(手动/自动)",
          "prop": "source"
        } ],
        data: exportData,
      }
      $Excel.excel({
        title: opt.title,
        columns: opt.column,
        data: opt.data
      });
      this.loading.exportLoading = false
    },
    selectionChange(list){
      this.selectContent.checkData = list
    }
  }
}
</script>

1.2 const下的js文件

export const tableOption = {
  title: "日志列表",
  "border": true,
  "index": true,
  "indexLabel": "序号",
  "stripe": true,
  "menuAlign": "center",
  "align": "center",
  "searchMenuSpan": 6,
  queryBox: true,
  viewBtn:true,
  selection:true,
  addBtn: false,
  editBtn: false,
  delBtn: false,
  calcHeight: 15,
  "column": [
    {
      "type": "select",
      "label": "来源系统",
      "prop": "serviceSource",
      search: true,
      dicUrl: '/admin/dict/type/abu_interface_sysname'
    },{
      "type": "input",
      "label": "主键",
      "prop": "id",
      hide: true
    },	{
      type: 'input',
      "label": '服务编码',
      "prop": 'serviceCode',
      search: true,
      cell: true,
      slot: true
    },  {
      "type": "input",
      "label": "服务中文名称",
      "prop": "description"
    },	{
      "type": "input",
      "label": "服务英文名",
      "prop": "serviceName",
      "searchLabel": "服务名称",
      search: true
    },{
      "type": "input",
      "label": "批次",
      "prop": "batchId",
      hide: true
    },	  {
      "type": "input",
      "label": "ESB标识",
      "prop": "esbFlag"
    },	  {
      "type": "input",
      "label": "ESB返回代码",
      "prop": "esbReturnCode"
    },	  {
      "type": "input",
      "label": "系统返回消息",
      "prop": "esbReturnMessage",
      hide: true
    },	  {
      "type": "input",
      "label": "业务服务执行标识",
      "prop": "bizServiceFlag"
    },	  {
      "type": "input",
      "label": "业务服务返回代码",
      "prop": "bizReturnCode"
    },	  {
      "type": "input",
      "label": "业务服务返回消息",
      "prop": "bizReturnMessage"
    },	  {
      "type": "input",
      "label": "实例ID",
      "prop": "instanceId"
    },	  {
      "type": "input",
      "label": "总记录数",
      "prop": "totalRecord",
      hide: true
    },	  {
      "type": "input",
      "label": "总页数",
      "prop": "totalPage",
      hide: true
    },	  {
      "type": "input",
      "label": "页面大小",
      "prop": "pageSize",
      hide: true
    },	  {
      "type": "input",
      "label": "当前页",
      "prop": "currentPage",
      hide: true
    },  {
      "type": "select",
      "label": "是否启用",
      "prop": "statusCode",
      search: true,
      hide: true,
      dicData: [
        {
          label: '否',
          value: 'E'
        },
        {
          label: '是',
          value: 'S'
        }
      ],
    },  {
      "type": "input",
      "label": "错误信息",
      "prop": "errorMessage",
      overHidden: true
    },	  {
      "type": "input",
      "label": "创建人ID",
      "prop": "createId",
      hide: true
    },	  {
      "type": "input",
      "label": "创建人",
      "prop": "createName",
      hide: true
    },	  {
      "type": "input",
      "label": "创建时间",
      "prop": "createTime",
      hide: true
    },	  {
      "type": "input",
      "label": "更新人ID",
      "prop": "updateId",
      hide: true
    },	  {
      "type": "input",
      "label": "更新人",
      "prop": "updateName",
      hide: true
    },	  {
      "type": "input",
      "label": "更新时间",
      "prop": "updateTime",
      hide: true
    },	  {
      "type": "input",
      "label": "操作来源(手动/自动)",
      "prop": "source",
      hide: true
    }  ]
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值