FE_preschoolEdu_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-select v-model="form.isDisable"
                     clearable
                     @change="initData">
            <el-option v-for="(item, i) in isDisable"
                       :key="i"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </li>
        <li>
          <label>组织类型</label>
          <el-select v-model="form.platformId"
                     clearable
                     @change="initData">
            <el-option v-for="(item, i) in platformId"
                       :key="i"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </li>
      </ul>
    </div>
    <div class="tool">
      <ul class="filter">
        <li>
          <label>签到情况：</label>
          <el-select v-model="form.signInStatus"
                     clearable
                     @change="initData">
            <el-option v-for="(item, i) in signInStatus"
                       :key="i"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </li>
        <li>
          <label>搜索：</label>
          <el-input placeholder="请输入姓名、姓名进行查询"
                    prefix-icon="el-icon-search"
                    v-model="form.keyWord"
                    clearable
                    size="mini"
                    style="width: 250px"></el-input>
        </li>
      </ul>
      <div>
        <!-- <el-button type="primary"
                   @click="add">新增</el-button> -->
        <el-button @click="exportAll">批量导出</el-button>
      </div>
    </div>

    <el-table ref="table"
              :data="list"
              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="username"
                       label="姓名">
      </el-table-column>
      <el-table-column prop="organizationName"
                       label="组织名称"
                       sortable="custom">
      </el-table-column>
      <el-table-column prop="platformId"
                       label="组织类型"></el-table-column>
      <el-table-column prop="createTime"
                       label="报名时间">
      </el-table-column>
      <el-table-column prop="signInStatus"
                       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-button type="text"
                     @click="delData(scope.row)">删除</el-button> -->
          <el-switch v-model="scope.row.isDisable"
                     :active-text="scope.row.isDisable ? '关' : '开'"
                     :active-value="0"
                     :inactive-value="1"
                     style="margin-left: 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,
      teamId: this.$route.query.teamId,
      form: {
        isDisable: '',
        platformId: '',
        signInStatus: '',
        keyWord: '',
      },
      isDisable: [
        {
          id: '',
          name: '不限'
        },
        {
          id: 1,
          name: '已禁用'
        },
        {
          id: 0,
          name: '未禁用'
        },
      ],
      platformId: [
        {
          id: '',
          name: '不限'
        },
        {
          id: 7,
          name: '无组织'
        },
        {
          id: 6,
          name: '供应商'
        },
        {
          id: 5,
          name: '幼儿园'
        },
      ],
      signInStatus: [
        {
          id: '',
          name: '不限'
        },
        {
          id: 1,
          name: '已签到'
        },
        {
          id: 0,
          name: '未签到'
        },
      ],
      keyword: "",
      list: [],
      multipleSelection: [],
      page: 1,
      pageSize: 10,
      total: 0,
    };
  },
  watch: {
    'form.keyWord': function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    getData () {
      this.$post(this.api.queryRegistrationByCondition, {
        pageNum: this.page,
        pageSize: this.pageSize,
        competitionId: this.id,
        ...this.form
      }).then(({ data }) => {
        this.list = data.records;
        this.total = 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.disableRegistration}?competitionRegistrationId=${row.id}&isDisable=${val}`).then(res => { }).catch(err => { });
    },
    delData (row) {
      this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$post(`${this.api.delActivityApplicant}?id=${row.id}`).then(res => {
            util.successMsg("删除成功");
            this.getData();
          }).catch(res => {
          });
        })
        .catch(() => {
        });
    },
    // 排序回调
    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.exportDataInBatchesCom, data, {
          headers: {
            token: this.token
          },
          responseType: 'blob'
        }).then((res) => {
          util.downloadFileDirect(`报名人员.xls`, new Blob([res.data]))
        }).catch(res => { })
      } else {
        axios.get(`${this.api.excelExportCom}?competitionId=${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>