FE_occupationlab_server/src/pages/match/manage/matchSignup.vue

<template>
    <!-- 报名人员 -->
    <div class="page-content" style="padding: 24px">
        <div class="tool">
            <ul class="filter">
                <li>
                    <label>搜索：</label>
                    <el-input placeholder="请输入姓名/手机号" prefix-icon="el-icon-search" v-model="keyword" clearable size="mini"></el-input>
                </li>
            </ul>
            <div>
                <el-button type="primary" round @click="exportAll">导出</el-button>
            </div>
        </div>

        <el-table ref="table" :data="listData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" row-key="id">
            <el-table-column type="selection" width="80" align="center" :reserve-selection="true"></el-table-column>
            <el-table-column type="index" width="60" label="序号" align="center">
                <template slot-scope="scope">
                    {{ scope.$index + (page - 1) * pageSize + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="school" label="学校">
            </el-table-column>
            <el-table-column prop="username" label="学生姓名">
            </el-table-column>
            <el-table-column prop="account" label="学号">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <!-- <el-table-column label="操作" align="center" width="170">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.isDisable"
                        :active-text="scope.row.isDisable ? '开' : '关'"
                        :active-value="1"
                        :inactive-value="0"
                        style="margin: 0 10px 0 5px"
                        @change="switchOff($event,scope.row,scope.$index)"
                    ></el-switch>
                </template>
            </el-table-column> -->
        </el-table>
        <div class="pagination">
            <el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="page">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import util from "@/libs/util";
import Setting from "@/setting";
import axios from 'axios'

export default {
    name: "matchSignup",
    data() {
        return {
            token: util.local.get(Setting.tokenKey),
            id: this.$route.query.id,
            keyword: "",
            listData: [],
            multipleSelection: [],
            page: 1,
            pageSize: 10,
            totals: 0
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.getData();
            }, 500);
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            this.$post(this.api.queryApplicantByCondition, {
              pageNum: this.page,
              pageSize: this.pageSize,
              contestId: this.id,
              keyWord: this.keyword,
            }).then(({ data }) => {
                this.listData = data.records;
                this.totals = data.total;
                this.$refs.table.clearSelection();
            }).catch(res => {
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        onSearch() {
            this.page = 1;
            this.getData();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
        switchOff(val, row, index) {
            this.$put(`${this.api.disableApplicant}/${row.id}/${val}`)
                .then(res => {
                })
                .catch(err => {
                });
        },
        disalbeAllData() {
            if (this.multipleSelection.length != "") {
                let newArr = this.multipleSelection;
                let delList = newArr.map(item => {
                    return item.id;
                });

                this.$confirm("确定要禁用吗？", "提示", {
                    type: "warning"
                })
                    .then(() => {
                        this.$put(`${this.api.disableContests}?ids=${delList.join(",")}`).then(res => {
                            this.multipleSelection = [];
                            util.successMsg("禁用成功");
                            this.getData();
                        }).catch(res => {
                        });
                    })
                    .catch(() => {
                    });
            } else {
                util.errorMsg("请先选择数据 ！");
            }
        },
        exportAll() {
          const data = this.multipleSelection
          if (data.length) {
            data.map((e, i) => e.id = i + 1)
            axios.post(this.api.exportDataInBatches, data, {
              headers: {
                token: this.token
              },
              responseType: 'blob'
            }).then((res) => {
              util.downloadFileDirect(`报名人员.xls`, new Blob([res.data]))
            }).catch(res => {})
          } else {
            location.href = `${this.api.excelExport}?contestId=${this.id}`
          }
        }
    }
};
</script>

<style scoped>

</style>