parent
121b50bc31
commit
edacc49466
15 changed files with 508 additions and 136 deletions
@ -0,0 +1,53 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="modal"> |
||||
<el-steps :space="200" :active="4" finish-status="success"> |
||||
<el-step title="大赛信息填写"></el-step> |
||||
<el-step title="赛程与规则设置"></el-step> |
||||
<el-step title="比赛内容设置"></el-step> |
||||
<el-step title="发布"></el-step> |
||||
</el-steps> |
||||
<h1>大赛已发布！</h1> |
||||
<div class="btns"> |
||||
<el-button type="primary" @click="back">确定</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
}; |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
back() { |
||||
this.$router.push(`/match?page=${this.$store.state.matchPage}`) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.wrap { |
||||
height: calc(100vh - 300px); |
||||
background-color: #fefefe; |
||||
} |
||||
.modal { |
||||
width: 500px; |
||||
padding-top: 150px; |
||||
margin: 0 auto ; |
||||
h1 { |
||||
margin: 20px; |
||||
text-align: center; |
||||
} |
||||
.btns { |
||||
text-align: center; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,118 @@ |
||||
<template> |
||||
<!-- 报名人员 --> |
||||
<div class="page-content" style="padding: 24px"> |
||||
<el-collapse v-model="curStep" accordion> |
||||
<el-collapse-item title="一致性 Consistency" :name="1"> |
||||
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div> |
||||
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="反馈 Feedback" :name="2"> |
||||
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div> |
||||
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div> |
||||
</el-collapse-item> |
||||
<el-collapse-item title="效率 Efficiency" :name="3"> |
||||
<div>简化流程：设计简洁直观的操作流程；</div> |
||||
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div> |
||||
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div> |
||||
</el-collapse-item> |
||||
</el-collapse> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from "@/libs/util"; |
||||
import axios from 'axios' |
||||
|
||||
export default { |
||||
name: "matchArch", |
||||
data() { |
||||
return { |
||||
curStep: 1 |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.getData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted() { |
||||
// this.getData(); |
||||
}, |
||||
methods: { |
||||
getData() { |
||||
this.$post(this.api.queryApplicantByCondition, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
contestId: this.id, |
||||
keyWord: this.keyword, |
||||
}).then(({ data }) => { |
||||
this.listData = data.records; |
||||
this.totals = data.total; |
||||
this.$refs.table.clearSelection(); |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val; |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val; |
||||
this.getData(); |
||||
}, |
||||
switchOff(val, row, index) { |
||||
this.$put(`${this.api.disableApplicant}/${row.id}/${val}`) |
||||
.then(res => { |
||||
}) |
||||
.catch(err => { |
||||
}); |
||||
}, |
||||
disalbeAllData() { |
||||
if (this.multipleSelection.length != "") { |
||||
let newArr = this.multipleSelection; |
||||
let delList = newArr.map(item => { |
||||
return item.id; |
||||
}); |
||||
|
||||
this.$confirm("确定要禁用吗？", "提示", { |
||||
type: "warning" |
||||
}) |
||||
.then(() => { |
||||
this.$put(`${this.api.disableContests}?ids=${delList.join(",")}`).then(res => { |
||||
this.multipleSelection = []; |
||||
util.successMsg("禁用成功"); |
||||
this.getData(); |
||||
}).catch(res => { |
||||
}); |
||||
}) |
||||
.catch(() => { |
||||
}); |
||||
} else { |
||||
util.errorMsg("请先选择数据 ！"); |
||||
} |
||||
}, |
||||
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 { |
||||
location.href = `${this.api.excelExport}?contestId=${this.id}` |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue