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 v-if="info.releaseType">
          <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/list:管理:报名人员:新增'">新增</el-button>
        <el-button type="primary"
                   round
                   @click="exportAll"
                   v-auth="'/match/list:管理:报名人员:批量导出'">批量导出</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 v-if="info.completeCompetitionSetup.competitionType"
                       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 v-if="scope.row.identification"
                     type="text"
                     @click="edit(scope.row)"
                     v-auth="'/match/list:管理:报名人员:编辑'">编辑</el-button>
          <template v-if="info.releaseType">
            <el-button type="text"
                       @click="toInfo(scope.row)"
                       v-auth="'/match/list:管理:报名人员:参赛信息与成绩'">参赛信息与成绩</el-button>
            <el-switch v-auth="'/match/list:管理:报名人员:禁用'"
                       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>
        </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="(!isAdd ? '编辑' : '新增') + '参赛人员'"
               :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 v-if="!schoolDisable"
                      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.schoolName"
                       :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 v-if="info.completeCompetitionSetup.competitionType"
                      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,
      info: {
        completeCompetitionSetup: {}
      },
      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: {},
      exitMember: 0,
      notExit: 0,
      schoolDisable: false
    };
  },
  watch: {
    keyword: function (val) {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.initData();
      }, 500);
    }
  },
  mounted () {
    console.log(44, this.$store.state.user.schoolId)
    this.initData()
    this.getInfo()
    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 => {
      });
    },
    // 获取赛事信息
    getInfo () {
      this.$post(`${this.api.getCompetition}?competitionId=${this.id}`).then(({ competition }) => {
        this.info = competition
        // 非本校内则查询接口获取学校列表
        if (competition.competitionScope) {
          this.getClient()
        } else {
          this.schoolDisable = true
          this.form.schoolId = this.$store.state.user.schoolId
        }
      }).catch(err => { })
    },
    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.notExit = 0
      this.isAdd = true
      this.addVisible = true
    },
    // 编辑
    edit (row) {
      this.isAdd = false
      this.notExit = 0
      this.addVisible = true
      row.userName = row.username
      this.exitMember = 0
      row.id = row.accountId
      this.originForm = JSON.parse(JSON.stringify(row))
      this.form = JSON.parse(JSON.stringify(row))
    },
    // 学号输入完回调。学校和学号都输入完后，调这个接口查询是否有存在的学生，如果有，才能继续输入，如果不能，不让添加
    workNumberChange () {
      const { form } = this
      if (this.originForm.workNumber !== form.workNumber) {
        form.schoolId && form.workNumber && this.$get(`${this.api.enquireAboutSchoolStudents}?schoolId=${form.schoolId}&workNumber=${form.workNumber}${this.isAdd ? '' : '&applyFor=1'}`).then(({ account }) => {
          this.exitMember = 0
          if (account) {
            this.form = account
          }
          this.formEnable = !account
        }).catch(res => {
          if (res.message === '学生不存在') this.notExit = 1
          if (!this.isAdd) this.exitMember = 1
        })
      } else {
        this.exitMember = 0
      }
    },
    // 新增编辑人员
    submitForm () {
      if (this.notExit) {
        this.submiting = false
        return util.errorMsg('学生不存在，无法添加！')
      }
      if (this.exitMember) {
        this.submiting = false
        return util.errorMsg('学生已存在')
      }
      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[this.info.completeCompetitionSetup.competitionType ? 'joinCompetitionTeam' : 'addCompetitionRegistration'], {
          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}-3-${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: this.schoolDisable ? this.$store.state.user.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 () {
      if (this.info.competitionScope === 2) { // 指定范围
        this.$get(`${this.api.schoolsInCompetitionArea}?competitionId=${this.id}`).then(({ schools }) => {
          this.clients = schools
        }).catch(res => { })
      } else { // 本校内查询所有学校
        this.$get(this.api.querySchoolData).then(({ list }) => {
          this.clients = 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 => { })
    },
    // 参赛信息
    toInfo (row) {
      this.$router.push(`info?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>