siyu-admin/src/views/sylive/groups-win/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <gro-win-search @search="reload" />
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="syliveWinTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            class="ele-btn-icon"
            icon="el-icon-dwinload"
            @click="exportData"
          >
            导出
          </el-button>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import GroWinSearch from './components/gro-win-search.vue';
  import { getActivity } from '@/api/sylive/activity';
  import { listGroupsWin, exportGroupsWin } from '@/api/sylive/groups-win';
  import { utils, writeFile } from 'xlsx';
  const ROUTE_PATH = '/sylive/groups-win';

  export default {
    name: 'syliveGroupsWin',
    components: { GroWinSearch },
    data() {
      return {
        activityId: null,
        // 加载状态
        title: '中奖名单',
        loading: true,
        // 表格列配置
        columns: []
      };
    },
    methods: {
      /* 表格数据源 */
      async datasource({ page, limit, where, order }) {
        const result = await listGroupsWin({
          ...where,
          ...order,
          page,
          limit,
          activityId: this.activityId
        });
        if (!order.sort && result.columns) {
          this.columns = result.columns;
        }
        return { count: result.count, list: result.list };
      },
      query() {
        this.loading = true;
        getActivity(Number(this.activityId))
          .then((data) => {
            this.loading = false;
            // 修改页签标题
            if (this.$route.path === ROUTE_PATH) {
              this.title = data.title + '的中奖名单';
              setPageTabTitle(this.title);
            }
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      /* 导出数据 */
      exportData() {
        const loading = this.$loading({ lock: true });
        this.$refs.table.doRequest(({ where, order }) => {
          const activityId = this.activityId;
          exportGroupsWin({ ...where, ...order, activityId })
            .then((data) => {
              loading.close();
              const array = [data.columns];
              data.list.forEach((d) => {
                let arrayItem = [];
                for (let key in d) {
                  arrayItem.push(d[key]);
                }
                array.push(arrayItem);
              });
              writeFile(
                {
                  SheetNames: ['Sheet1'],
                  Sheets: {
                    Sheet1: utils.aoa_to_sheet(array)
                  }
                },
                this.title + '.xlsx'
              );
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        });
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          const activityId = this.$route.query.id;
          if (!activityId || activityId == this.activityId) {
            return;
          }
          this.activityId = activityId;
          this.query();
          if (this.$refs.table) {
            this.$refs.table.reload({ page: 1 });
          }
        },
        immediate: true
      }
    }
  };
</script>