导出execl

<template>
  <div class="app-container company form-style">
    <div style="overflow:hidden">
      <div style="float:left;28%" class="left-area">
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
        <el-tree
          ref="tree"
          v-loading="loading"
          accordion
          render-after-expand
          node-key="value"
          style="height:350px;overflow:auto;margin-top:10px"
          :props="props"
          :data="deptTreeList"
          :filter-node-method="filterNode"
          :default-expanded-keys="defaultShowNodes"
          @node-click="handleNodeClick"
        >
          <span slot-scope="{ node }" class="span-ellipsis">
            <span :title="node.label">{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <!-- 右侧搜索+table -->
      <div style="float:right;70%" class="right-area">
        <ct-form ref="form" :inline="true" :model="form">
          <el-form-item label="利润中心编码">
            <ct-input v-model="queryItem.profitcenter_code" />
          </el-form-item>
          <el-form-item label="利润中心名称">
            <ct-input v-model="queryItem.profitcenter_name" />
          </el-form-item>
          <ct-select
            label="状态"
            select-prop="status"
            placeholder="请选择"
            :select-value="queryItem.status"
            :select-data-list="form.statusOptions"
            @selectChange="statusChange"
          />
          <ct-button style="margin-left:5px" @click="getTable">查询</ct-button>
          <ct-button @click="handleDownload(table.list)">导出当前</ct-button>
          <ct-button @click="exportAll">导出全部</ct-button>
          <ct-button v-if="false" @click="add">新增</ct-button>
        </ct-form>
        <div class="table-style">
          <ct-tables
            v-loading="loading"
            element-loading-text="数据加载中"
            :list="table.list"
            :options="table.options"
            class="table"
          >
            <el-table-column
              label="利润中心编码"
              width="120"
              prop="profitcenter_code"
              align="center"
            />
            <el-table-column
              label="利润中心名称"
              :show-overflow-tooltip="isShowText"
              prop="profitcenter_name"
              align="center"
            />
            <el-table-column
              label="利润中心组编码"
              width="130"
              prop="profitcenter_group_code"
              align="center"
            />
            <el-table-column
              label="利润中心组名称"
              width="130"
              :show-overflow-tooltip="isShowText"
              prop="profitcenter_group_name"
              align="center"
            />
            <el-table-column label="账套编码" width="90" prop="account_code" align="center" />
            <el-table-column label="账套名称" width="90" prop="account_name" align="center" />
            <el-table-column label="启用状态" width="90" prop="status_name" align="center" />
            <el-table-column
              v-if="false"
              label="操作"
              prop="profitcenter_code"
              align="center"
            >
              <template slot-scope="scope">
                <ct-button type="save" @click="edit(scope.row)">修改</ct-button>
              </template>
            </el-table-column>
          </ct-tables>
          <ct-pagination :child-msg="table.page" @callFather="getPagination" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCompany, getSelect } from '@/api/base/company'
export default {
  data() {
    return {
      defaultShowNodes: [], // 默认展开的节点
      organs: this.$store.state.user.organs,
      isShowText: true,
      form: {
        statusOptions: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '启用',
            value: '10'
          },
          {
            label: '停用',
            value: '20'
          }
        ],
        accountOptions: []
      },
      queryItem: {
        account_code: '',
        profitcenter_code: '',
        profitcenter_name: '',
        status: '',
        profitcenter_group_code: ''
      },
      // td模拟数据 业务中以下字段前台与后台须商定好
      table: {
        list: [],
        options: {
          stripe: true, // 是否为斑马纹 table
          highlightCurrentRow: true, // 是否支持当前行高亮显示
          mutiSelect: true // 是否支持列表项选中功能
        },
        page: {
          size: 10,
          pages: 0,
          current: 1,
          total: 0
        }
      },
      loading: true,
      filterText: '',
      deptTreeList: [],
      list: [],
      props: {
        label: 'label',
        children: 'children',
        isLeaf: 'isLeaf'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    deptTreeList: {
      handler() {
        // 默认展开2级
        this.deptTreeList.forEach(item => {
          // item.children.forEach(items => {
          //   this.defaultShowNodes.push(items.value)
          // })
          // 改为默认展开1级
          this.defaultShowNodes.push(item.value)
        })
      },
      deep: true
    }
  },
  mounted() {
    // 初始化部门树
    this.getAccountCompanySelect()
    this.$nextTick(() => {
      this.TreeChangeStyle()
    })
    this.loading = false
  },
  methods: {
    // 新增start
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data, node) {
      if (data.children !== null && data.children !== undefined) {
        this.queryItem.profitcenter_code = ''
        this.queryItem.profitcenter_group_code = data.value
      } else {
        this.queryItem.profitcenter_group_code = ''
        this.queryItem.profitcenter_code = data.value
      }
      this.getTable()
      this.$nextTick(() => {
        this.TreeChangeStyle()
      })
    },
    // 获取公司树
    getAccountCompanySelect() {
      getSelect().then(res => {
        res.data.forEach(item => {
          this.deleteNullChildren(item)
        })
        this.deptTreeList = res.data
        this.queryItem.profitcenter_group_code = this.deptTreeList[0].value
        const query = { profitcenter_group_code: this.queryItem.profitcenter_group_code, size: 10, current: 1 }
        getCompany(query).then(res => {
          this.table.list = res.data.records
          this.table.page.size = res.data.size
          this.table.page.current = res.data.current
          this.table.page.pages = res.data.pages
          this.table.page.total = res.data.total
        })
      })
    },
    deleteNullChildren(obj) {
      if (obj.children instanceof Array && obj.children.length > 0) {
        obj.children.forEach(item => {
          this.deleteNullChildren(item)
        })
      } else {
        delete obj.children
      }
    },
    // 新增end
    edit(row) {
      const profitcenter_code = row.profitcenter_code
      this.$router.push({
        path: '/base/company/edit',
        query: { profitcenter_code: profitcenter_code }
      })
    },
    getTable() {
      this.table.page.current = 1
      const query = { ...this.queryItem, ...this.table.page }
      this.loading = true
      getCompany(query).then(res => {
        this.table.list = res.data.records
        this.table.page.size = res.data.size
        this.table.page.current = res.data.current
        this.table.page.pages = res.data.pages
        this.table.page.total = res.data.total
        this.loading = false
      })
    },
    getPagination(page) {
      const query = { ...this.queryItem, ...page }
      getCompany(query).then(res => {
        this.table.list = res.data.records
        this.table.page.size = res.data.size
        this.table.page.current = res.data.current
        this.table.page.pages = res.data.pages
        this.table.page.total = res.data.total
        this.loading = false
      })
    },
    exportAll() {
      const page = JSON.parse(JSON.stringify(this.table.page))
      page.size = page.total
      getCompany(page).then(res => {
        const list = res.data.records
        this.handleDownload(list)
      })
    },
    handleDownload(list) {
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = [
          '利润中心编码',
          '利润中心名称',
          '利润中心组编码',
          '利润中心组名称',
          '账套编码',
          '账套名称',
          '启用状态'
        ]
        const filterVal = [
          'profitcenter_code',
          'profitcenter_name',
          'profitcenter_group_code',
          'profitcenter_group_name',
          'account_code',
          'account_name',
          'status_name'
        ] // 过滤表格输出的数据
        const data = this.formatJson(filterVal, list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '公司信息',
          autoWidth: true
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    add() {
      this.$router.push({
        path: '/base/company/add'
      })
    },
    statusChange(val) {
      this.queryItem.status = val
    },
    TreeChangeStyle() {
      // eslint-disable-next-line no-empty-character-class
      if (navigator.appName === 'Microsoft Internet Explorer' && parseInt(navigator.appVersion.split(';')[1].replace(/[]/g, '').replace('MSIE', '')) < 10) {
        // console.log("您的浏览器版本过低，请使用IE10及以上版本")
        var change = document.getElementsByClassName('el-tree-node__expand-icon')
        change.forEach((item) => {
          item.style.display = 'none'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.company{
  .left-area{
    .el-input {
       100%;
    }
  }
  .right-area{
    .el-form--inline .el-form-item {
      margin-right: 0px;
      vertical-align: inherit;
    }
  }
}
</style>