FE_occupationlab_server/src/pages/activity/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" style="width: 250px"></el-input>
                </li>
                <li>
                    <label>报名人员状态：</label>
                    <el-select v-model="isDisable" @change="initData">
                      <el-option v-for="(item, i) in statusList" :key="i" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </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" @sort-change="sortChange">
            <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="schoolName" label="学校" sortable="custom">
            </el-table-column>
            <el-table-column prop="username" label="学生姓名">
            </el-table-column>
            <el-table-column prop="workNumber" label="学号">
            </el-table-column>
            <el-table-column prop="phone" label="手机号">
            </el-table-column>
            <el-table-column label="操作" align="center" width="320">
                <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.isDisable"
                      :active-text="scope.row.isDisable ? '关' : '开'"
                      :active-value="0"
                      :inactive-value="1"
                      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="total" @current-change="handleCurrentChange" :current-page="page">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import util from "@/libs/util";
import axios from 'axios'
import Setting from "@/setting";
export default {
    name: "matchSignup",
    data() {
        return {
            token: util.local.get(Setting.tokenKey),
            id: +this.$route.query.id,
            isDisable: '',
            statusList: [
              {
                id: '',
                name: '不限'
              },
              {
                id: 1,
                name: '已禁用'
              },
              {
                id: 0,
                name: '未禁用'
              }
            ],
            keyword: "",
            listData: [],
            multipleSelection: [],
            page: 1,
            pageSize: 10,
            total: 0,
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.initData();
            }, 500);
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        getData() {
            this.$post(this.api.ApplicantsList, {
              pageNum: this.page,
              pageSize: this.pageSize,
              activityId: this.id,
              keyWords: this.keyword,
              isDisable: this.isDisable,
            }).then(({ data }) => {
                this.listData = data.data.records;
                this.total = data.data.total;
            }).catch(res => {
            });
        },
        initData() {
          this.page = 1
          this.getData()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
        switchOff(val, row, index) {
            this.$put(`${this.api.disableActivityApplicant}?competitionRegistrationId=${row.id}&isDisable=${val}`).then(res => {}).catch(err => {});
        },
        // 排序回调
        sortChange(column) {
          // 1上2下
          if (column.prop === 'school') this.schoolOrder = column.order ? column.order === 'ascending' ? 2 : 1 : ''
          if (column.prop === 'teamName') this.teamOrder = column.order ? column.order === 'ascending' ? 2 : 1 : ''
          this.getData()
        },
        exportAll() {
          const data = this.multipleSelection
          if (data.length) {
            data.map((e, i) => e.id = i + 1)
            axios.post(this.api.exportDataInBatchesApplicant, data, {
              headers: {
                token: this.token
              },
              responseType: 'blob'
            }).then((res) => {
              util.downloadFileDirect(`报名人员.xls`, new Blob([res.data]))
            }).catch(res => {})
          } else {
            axios.get(`${this.api.excelExportApplicant}?activityId=${this.id}`, {
              headers: {
                token: this.token
              },
              responseType: 'blob'
            }).then((res) => {
              util.downloadFileDirect(`报名人员.xls`, new Blob([res.data]))
            }).catch(res => {})
          }
        }
    }
};
</script>

<style lang="scss" scoped>
/deep/.dia-form {
  .w-100 {
    width: 100%;
  }
  .tips {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>