FE_occupationlab_server/src/pages/match/manage/matchArch.vue

<template>
  <!-- 报名人员 -->
  <div class="page-content"
       style="padding: 24px">
    <el-table ref="table"
              :data="list"
              class="table"
              stripe
              header-align="center"
              row-key="stageId">
      <el-table-column type="index"
                       width="60"
                       label="序号"
                       align="center">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="stageName"
                       label="阶段名称"
                       align="center"></el-table-column>
      <el-table-column prop="methodName"
                       label="比赛方式"
                       align="center"></el-table-column>
      <el-table-column prop="founderName"
                       label="比赛形式"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.competitionType ? '团队赛' : '个人赛' }}
        </template>
      </el-table-column>
      <el-table-column prop="ruleName"
                       label="赛制"
                       align="center"></el-table-column>
      <el-table-column prop="status"
                       label="状态"
                       align="center"></el-table-column>
      <el-table-column label="竞赛起止时间"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.startTime + ' ~ ' + scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="260">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="toRank(scope.row, scope.$index)">排名</el-button>
          <el-button @click="toArch(scope.row, scope.$index)">成绩管理</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import util from "@/libs/util";
import Const from '@/const/match'
export default {
  name: "matchArch",
  data () {
    return {
      id: +this.$route.query.id,
      list: [],
      form: {},
      timer: null,
      curStep: []
    };
  },
  mounted () {
    this.$once('hook:beforeDestroy', function () {
      clearInterval(this.timer)
    })
    this.getData()
  },
  methods: {
    getData () {
      this.$post(`${this.api.getCompetition}?competitionId=${this.id}`).then(({ competition }) => {
        this.form = competition
        this.timer = setInterval(this.handleStatus, 1000)
        this.getArch()
      }).catch(err => { })
    },
    getArch () {
      this.$post(this.api.detailsOfCompetitionStage, {
        pageNum: 1,
        pageSize: 100,
        contestId: this.id,
      }).then(({ page }) => {
        const list = page.records
        list.map(e => {
          e.methodName = Const.methods.find(n => n.id === e.method).name
          e.ruleName = Const.rules.find(n => n.id === e.rule).name
        })
        this.curStep = list.map(e => e.stageId)
        this.list = list
      }).catch(res => { });
    },
    // 报名时间、比赛时间、状态处理
    handleStatus () {
      const now = new Date()
      this.form.competitionStage.map(e => {
        const startTime = new Date(e.startTime)
        const endTime = new Date(e.endTime)
        const item = this.list.find(n => n.stageId == e.stageId)
        if (item) {
          if (now < startTime) {
            this.$set(item, 'status', '未开始')
          } else if (now >= startTime && now <= endTime) {
            this.$set(item, 'status', '比赛中')
          } else if (now > endTime) {
            this.$set(item, 'status', '已完成')
          }
        }
      })
    },
    // 排名
    toRank (row, i) {
      this.$router.push(`rank?id=${this.id}&stageId=${row.stageId}&index=${i}&method=${row.method}&competitionType=${row.competitionType}&rule=${row.rule}`)
    },
    toArch (row, i) {
      const cur = this.form.competitionStage[i]
      const showFile = !!(cur.method === 2 && cur.competitionStageContentSetting && cur.competitionStageContentSetting.whetherToUploadFiles)
      this.$router.push(`archList?id=${this.id}&stageId=${row.stageId}&method=${row.method}&competitionType=${row.competitionType}&showFile=${showFile}`)
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-collapse-item__header {
    font-size: 16px;
    color: #333;
}
.line {
    display: flex;
    justify-content: space-around;
    align-items: center;
    span {
        margin-right: 30px;
    }
}
</style>