parent
e8672494e4
commit
f0e037809e
7 changed files with 194 additions and 134 deletions
@ -1,109 +1,141 @@ |
||||
<template> |
||||
<!-- 报名人员 --> |
||||
<div class="page-content" style="padding: 24px"> |
||||
<el-collapse v-model="curStep"> |
||||
<el-collapse-item v-for="(item, i) in list" :key="i" :title="item.stageName" :name="item.stageId"> |
||||
<div class="line"> |
||||
<span>比赛方式：{{ item.methodName }}</span> |
||||
<span>比赛形式：{{ item.competitionType ? '团队赛' : '个人赛' }}</span> |
||||
<span>赛制：{{ item.ruleName }}</span> |
||||
<span>状态：{{ item.status }}</span> |
||||
<span>竞赛起止时间：{{ item.startTime + ' ~ ' + item.endTime }}</span> |
||||
<div> |
||||
<el-button type="primary" @click="toRank(item, i)">排名</el-button> |
||||
<el-button @click="toArch(item)">成绩管理</el-button> |
||||
</div> |
||||
</div> |
||||
</el-collapse-item> |
||||
</el-collapse> |
||||
</div> |
||||
<!-- 报名人员 --> |
||||
<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="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)">成绩管理</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: [], |
||||
}; |
||||
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 => { }) |
||||
}, |
||||
mounted() { |
||||
this.$once('hook:beforeDestroy', function() { |
||||
clearInterval(this.timer) |
||||
}) |
||||
this.getData() |
||||
getArch () { |
||||
this.$post(this.api.detailsOfCompetitionStage, { |
||||
pageNum: 1, |
||||
pageSize: 100, |
||||
contestId: this.id, |
||||
}).then(({ page, applicantSize }) => { |
||||
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 => { }); |
||||
}, |
||||
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, applicantSize }) => { |
||||
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', '已完成') |
||||
} |
||||
// 报名时间、比赛时间、状态处理 |
||||
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', '已完成') |
||||
} |
||||
}) |
||||
console.log("🚀 ~ file: matchArch.vue:87 ~ handleStatus ~ this.status", this.list) |
||||
}, |
||||
// 排名 |
||||
toRank(row, i) { |
||||
this.$router.push(`/matchRank?id=${this.id}&stageId=${row.stageId}&index=${i}&method=${row.method}&competitionType=${row.competitionType}&rule=${row.rule}`) |
||||
}, |
||||
// 成绩管理 |
||||
toArch(row) { |
||||
this.$router.push(`/matchArchList?id=${this.id}&stageId=${row.stageId}&method=${row.method}&competitionType=${row.competitionType}`) |
||||
} |
||||
} |
||||
}) |
||||
console.log("🚀 ~ file: matchArch.vue:87 ~ handleStatus ~ this.status", this.list) |
||||
}, |
||||
// 排名 |
||||
toRank (row, i) { |
||||
this.$router.push(`/matchRank?id=${this.id}&stageId=${row.stageId}&index=${i}&method=${row.method}&competitionType=${row.competitionType}&rule=${row.rule}`) |
||||
}, |
||||
// 成绩管理 |
||||
toArch (row) { |
||||
this.$router.push(`/matchArchList?id=${this.id}&stageId=${row.stageId}&method=${row.method}&competitionType=${row.competitionType}`) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/.el-collapse-item__header { |
||||
font-size: 16px; |
||||
color: #333; |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
.line { |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
span { |
||||
margin-right: 30px; |
||||
} |
||||
display: flex; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
span { |
||||
margin-right: 30px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue