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>
                <el-button type="primary" round @click="exportBatch">批量导出</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" :selectable="row => row.isDisable!=0" 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 + (pageNo - 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="pageNo">
            </el-pagination>
        </div>
    </div>
</template>

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

export default {
    name: "matchSignup",
    data() {
        return {
            token: util.local.get(Setting.tokenKey),
            id: this.$route.query.id,
            keyword: "",
            listData: [],
            multipleSelection: [],
            pageNo: 1,
            pageSize: 10,
            totals: 0
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.getData();
            }, 500);
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            let data = {
                contestId: this.id
            };
            if (this.keyword) data.name = this.keyword;
            this.$get(`${this.api.queryApplicantByCondition}/${this.pageNo}/${this.pageSize}`, data).then(res => {
                this.listData = res.applicantList;
                this.totals = res.total;
                this.$refs.table.clearSelection();
            }).catch(res => {
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        onSearch() {
            this.pageNo = 1;
            this.getData();
        },
        handleCurrentChange(val) {
            this.pageNo = 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() {
            location.href = `${this.api.excelExport}?contestId=${this.id}`;
        },
        exportBatch() {
            if (this.multipleSelection.length != "") {
                let newArr = this.multipleSelection;
                let data = newArr.map(item => {
                    return item.id;
                });
                location.href = `${this.api.batchExport}?ids=${data.join(",")}`;
            } else {
                util.errorMsg("请先选择数据 ！");
            }

        }
    }
};
</script>

<style scoped>

</style>