wt_project_web_bak/src/views/home/excel.vue

<template>
  <el-container>
    <basic-container class="mt-10 content">
      <div class="full-width white-bg" style="width: 100vw">
        <div class="flex flex-center flex-justify-start">
          <el-button type="primary" plain @click="back">返回</el-button>
          <el-button type="primary" @click="exportExcel">导出表格</el-button>
        </div>
        <span class="red full-width text-left flex flex-justify-start mt-10"
          >注：左右滑动，查看更多内容</span
        >
      </div>
      <div class="content mt-10">
        <div class="header flex flex-center flex-justify-start full-width">
          <div
            class="flex flex-center"
            style="background-color: #5acafa"
            v-for="(item, index) in header"
            :key="item.id"
          >
            <div
              class="item flex flex-center"
              :class="index === 0 ? 'item' : 'sub'"
            >
              {{ item }}
            </div>
          </div>
        </div>

        <div class="flex flex-center flex-justify-start flex-col">
          <div
            class="flex flex-center full-width"
            v-for="item in list"
            :key="item.id"
          >
            <div class="flex flex-center flex-justify-start full-width">
              <div class="flex flex-center">
                <div
                  v-for="(sub, index) in item"
                  :key="sub.id"
                  class="item flex flex-center overflow-hide"
                  :class="index === 0 ? 'item' : 'sub'"
                >
                  <el-tooltip :content="sub" placement="top">
                    {{ sub }}
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </basic-container>
  </el-container>
</template>

<route>
{
name: '导出预览'
}
</route>

<script>
import BasicContainer from '@/components/basic-container/main.vue'

export default {
  name: 'excel',
  components: { BasicContainer },
  data() {
    return {
      header: [],
      list: [],
      query: null
    }
  },
  created() {
    this.query = this.$route.query
    console.log(this.query)
    this.getList()
  },
  methods: {
    back() {
      this.$router.back()
    },
    getList() {
      this.$api.params.preview(this.query).then(res => {
        if (res.code === 200) {
          this.header = res.data.header
          this.list = res.data.list
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    exportExcel() {
      if (this.query.previewType === '1') {
        this.$api.params.exportResult(this.query).then(res => {
          if (res.hasOwnProperty('code')) {
            this.$message.error(res.msg)
            return
          }
          this.download(res)
        })
      } else {
        this.$api.params.summaryExport(this.query).then(res => {
          if (res.hasOwnProperty('code')) {
            this.$message.error(res.msg)
            return
          }
          this.download(res)
        })
      }
    },
    download(res) {
      const url = window.URL.createObjectURL(
        new Blob([res], { type: 'application/vnd.ms-excel' })
      )
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      const excelName = new Date().getTime() + '.xlsx'
      link.setAttribute('download', excelName)
      document.body.appendChild(link)
      link.click()
      link.remove()
      this.diaType = -1
      this.$message.success('导出成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  white-space: nowrap;
  overflow-x: scroll;
}

.header {
  background-color: #5acafa;
  border-top: #1a1a1a solid 1px;
}

.item {
  width: 80px;
  text-wrap: normal;
  height: 50px;
  border-collapse: collapse;
  border: #1a1a1a solid 1px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 5px;
  white-space: pre-wrap;
}

.top {
  position: static;
  top: 0;
  z-index: 3;
  left: 0;
}

.sub {
  width: 200px;
  height: 50px;
  text-wrap: normal;
}
</style>