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" 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="add" v-auth="'/match:管理:报名人员:新增'">新增</el-button>
                <el-button type="primary" round @click="exportAll" v-auth="'/match:管理:报名人员:导出'">批量导出</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="school" label="学校" sortable="custom">
            </el-table-column>
            <el-table-column prop="teamName" 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-button type="text" @click="edit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="info(scope.row)">参赛信息与成绩</el-button>
                    <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>

        
        <el-dialog :title="(form.accountId ? '编辑' : '新增') + '参赛人员'" :visible.sync="addVisible" width="400px" class="dialog" :close-on-click-modal="false" @close="closeAdd">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" style='margin-right: 10px;'>
                <el-form-item prop="schoolId" label="院校">
                  <el-select v-model="form.schoolId" filterable style="width: 100%">
                    <el-option v-for="(item, i) in clients" :key="i" :label="item.customerName" :value="item.schoolId"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="workNumber" label="学生学号">
                    <el-input v-model="form.workNumber" placeholder="请输入学生学号" @change="workNumberChange"></el-input>
                </el-form-item>
                <el-form-item prop="userName" label="学生姓名">
                    <el-input v-model="form.userName" placeholder="请输入学生姓名" :disabled="isAdd"></el-input>
                </el-form-item>
                <el-form-item label="账号角色">
                  学生
                </el-form-item>
                <el-form-item prop="teamId" label="所属团队">
                  <div style="display: flex;align-items: center">
                    <el-select v-model="form.teamId" :disabled="formEnable && isAdd" filterable style="width: 240px;margin-right: 10px">
                      <el-option v-for="(item, i) in teams" :key="i" :label="item.teamName" :value="item.teamId"></el-option>
                    </el-select>
                    <el-button v-if="isAdd && !formEnable" type="text" @click="createTeam">创建团队</el-button>
                  </div>
                </el-form-item>
                <el-form-item prop="phone" label="手机号">
                    <el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" :disabled="isAdd"></el-input>
                </el-form-item>
                <el-form-item prop="email" label="邮箱">
                    <el-input v-model="form.email" placeholder="请输入邮箱" :disabled="isAdd"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </span>
        </el-dialog>
        
        <el-dialog title="创建团队" :visible.sync="teamVisible" :close-on-click-modal="false" width="300px">
          <el-form class="dia-form">
            <el-form-item>
              <el-input placeholder="请输入团队名称" maxlength="10" v-model="teamForm.teamName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="请设置团队邀请码" maxlength="6" v-model="teamForm.invitationCode"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="teamSubmit">确定并报名</el-button>
            <el-button size="small" @click="teamVisible = false">取消</el-button>
          </span>
        </el-dialog>
    </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,
            schoolOrder: '',
            teamOrder: '',
            clients: [],
            addVisible: false,
            formEnable: true,
            isAdd: false,
            form: {
              captain: 0,
              competitionId: this.$route.query.id,
              userName: '',
              workNumber: '',
              schoolId: '',
              teamId: '',
              whetherSignUp: 0,
              phone: '',
              email: '',
              identification: 1,
              uniqueIdentification: Date.now(),
              password: Setting.initialPassword
            },
            rules: {
              schoolId: [
                { required: true, message: "请选择所属院校", trigger: "change" }
              ],
              workNumber: [
                { required: true, message: "请输入学号", trigger: "blur" }
              ],
              teamId: [
                { required: true, message: "请选择所属团队", trigger: "change" }
              ]
            },
            submiting: false,

            
            teamVisible: false,
            teams: [],
            teamNameRepeat: false,
            teamForm: {
              competitionId: this.$route.query.id,
              registrationInvitationCode: '',
              teamName: '',
              invitationCode: '',
              whetherSignUp: 1,
              identification: 1
            },
            originForm: {}
        };
    },
    watch: {
        keyword: function(val) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.initData();
            }, 500);
        }
    },
    mounted() {
        this.initData()
        this.getClient()
        this.getTeam()
    },
    methods: {
        getData() {
            this.$post(this.api.queryRegistrationByCondition, {
              pageNum: this.page,
              pageSize: this.pageSize,
              competitionId: this.id,
              keyWord: this.keyword,
              isDisable: this.isDisable,
              schoolOrder: this.schoolOrder,
              teamOrder: this.teamOrder,
            }).then(({ data }) => {
                this.listData = data.records;
                this.total = data.total;
                this.$refs.table.clearSelection();
            }).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 => {});
        },
        // 排序回调
        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()
        },
        // 新增
        add() {
          this.isAdd = true
          this.addVisible = true
        },
        // 编辑
        edit(row) {
          this.isAdd = false
          this.addVisible = true
          row.userName = row.username
          row.id = row.accountId
          this.originForm = JSON.parse(JSON.stringify(row))
          this.form = JSON.parse(JSON.stringify(row))
        },
        // 学号输入完回调。学校和学号都输入完后，调这个接口查询是否有存在的学生，如果有，才能继续输入，如果不能，不让添加
        workNumberChange() {
          const { form } = this
          form.schoolId && form.schoolId && this.$get(`${this.api.enquireAboutSchoolStudents}?schoolId=${form.schoolId}&workNumber=${form.workNumber}`).then(({ account }) => {
            if (account) {
              account
              this.form = account
            }
            this.formEnable = !account
          }).catch(res => {})
        },
        // 新增编辑人员
        submitForm() {
          const { form } = this
          if (!this.isAdd) { // 编辑
            this.$post(this.api.updateUser, {
              hrUserAccount: {
                ...form,
                id: form.id,
              },
              hrUserInfo: {
                userId: form.userId,
                schoolId: form.schoolId,
                email: form.email
              }
            }).then(res => {
              // 团队有更换，则调加入团队的接口
              if (this.originForm.teamId !== form.teamId) {
                this.$post(this.api.joinCompetitionTeam, {
                  accountId: form.id,
                  competitionId: this.id,
                  teamId: form.teamId,
                  identification: 1,
                  whetherSignUp: 1
                }).then(res => {
                  this.addVisible = false
                  this.getData()
                  this.submiting = false
                  util.successMsg('编辑成功！')
                }).catch(res => {
                  this.submiting = false
                })
              } else {
                this.addVisible = false
                this.getData()
                this.submiting = false
                util.successMsg('编辑成功！')
              }
            }).catch(res => {
              this.submiting = false
            })
          } else {
            // 新增人员后再调加入团队的接口
            this.$post(this.api.joinCompetitionTeam, {
              accountId: form.id,
              competitionId: this.id,
              teamId: this.form.teamId,
              identification: 1,
              whetherSignUp: 1
            }).then(res => {
              this.addVisible = false
              this.getData()
              this.submiting = false
              util.successMsg('报名成功！')
            }).catch(res => {
              this.submiting = false
            })
          }
        },
        // 新增人员
        submit() {
          this.$refs.form.validate((valid) => {
            if (valid) {
              if (this.submiting) return false
              this.submiting = true
              const { form } = this
              const team = this.teams.find(e => e.teamId == form.teamId)
              if (team && team.invitationCode) form.invitationCode = team.invitationCode
              // 平台id-端id-schoolId-workNumber组成账号
              form.account = `${Setting.platformId}-0-${form.schoolId}-${form.workNumber}`
              const { phone } = form
              if (phone && !/^1[3456789]\d{9}$/.test(phone)) {
                return util.errorMsg("请输入正确的手机号/邮箱")
              } else {
                this.submitForm()
              }
            }
          })
        },
        // 关闭新增员工对话框
        closeAdd() {
          this.form = {
            captain: 0,
            competitionId: this.id,
            userName: '',
            workNumber: '',
            schoolId: '',
            teamId: '',
            whetherSignUp: 0,
            phone: '',
            email: '',
            identification: 1,
            uniqueIdentification: Date.now(),
            password: Setting.initialPassword
          }
        },
        // 创建团队
        createTeam() {
          this.teamForm = {
            competitionId: this.id,
            registrationInvitationCode: '',
            teamName: '',
            invitationCode: '',
            whetherSignUp: 1,
            identification: 1
          }
          this.teamVisible = true
        },
        // 获取客户
        getClient() {
            this.$post(this.api.queryCustomer,{
                page: 1,
                size: 1000,
                supplierId: ''
            }).then(res => {
                this.clients = res.message.list
            }).catch(res => {})
        },
        // 获取团队列表
        getTeam() {
          this.$get(this.api.searchTeam, {
            teamName: '',
            competitionId: this.id
          }).then(({ teamList }) => {
            this.teams = teamList
          }).catch(res => {})
        },
        // 团队提交
        teamSubmit() {
          const form = this.teamForm
          if (!form.teamName) return util.errorMsg('请输入团队名称')
          if (form.invitationCode.length !== 6) return util.errorMsg('请输入6位数团队邀请码')
          form.accountId = this.form.id
          this.$post(this.api.addCompetitionTeam, form).then(res => {
            this.teamVisible = false
            this.addVisible = false
            this.getData()
            util.successMsg('报名成功！')
          }).catch(res => {})
        },
        // 参赛信息
        info(row) {
          this.$router.push(`/matchInfo?id=${this.id}&accountId=${row.accountId}`)
        },
        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 {
            axios.get(`${this.api.excelExport}?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>