feat: 我的考试UI

This commit is contained in:
cgd_mac 2022-01-13 21:00:56 +08:00
parent bb309c72af
commit 8a683ee257
1 changed files with 185 additions and 0 deletions

185
src/views/myexam/index.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<a-card :bordered="false" :loading="loading">
<div class="table-page-search-wrapper">
<SearchCom
:form="queryParam"
:list="queryOptions"
@search="handleRefresh"
@reset="
() => {
queryParam = {}
handleRefresh()
}
"></SearchCom>
</div>
</br>
<a-tabs :default-active-key="activeTab">
<a-tab-pane key="1" tab="预约考试">
<s-table
ref="examTable"
:pageSize="5"
:columns="examColumns"
:data="loadExamData"
:rowKey="record => record.id">
<span slot="index" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action" slot-scope="text, record, index">
<a v-if="index % 2 == 0" @click="handlerGoExam">进入考试</a>
<a v-if="index % 2 == 1" disabled>已预约</a>
</span>
</s-table>
</a-tab-pane>
<a-tab-pane key="2" tab="已参加考试">
<s-table
ref="examDoneTable"
:pageSize="5"
:columns="examDoneColumns"
:data="loadExamDoneData"
:rowKey="record => record.id">
<span slot="index" slot-scope="text, record, index">
{{ index + 1 }}
</span>
<span slot="action" slot-scope="text, record, index">
<a @click="handlerGoReport">查看详情</a>
</span>
</s-table>
</a-tab-pane>
</a-tabs>
</a-card>
</template>
<script>
import { STable, SearchCom } from '@/components'
import { getCourseList } from '@/api/course/course'
export default {
components: { STable, SearchCom },
data () {
return {
loading: false,
activeTab: '1',
queryParam: {
examType: '' //
},
queryOptions: [
{ type: 'select-dic-tree', placeholder: '考试分类', key: 'examType', options: [] }
],
examColumns: [
{
title: '序号',
width: '80px',
scopedSlots: { customRender: 'index' },
align: 'center'
},
{
title: '考试科目',
dataIndex: 'name'
},
{
title: '准考证号',
dataIndex: 'carId'
},
{
title: '考试形式',
dataIndex: 'type'
},
{
title: '考试时间',
dataIndex: 'date'
},
{
title: '考试时长',
dataIndex: 'length'
},
{
title: '考试资格',
dataIndex: 'zige'
},
{
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
],
examDoneColumns: [
{
title: '序号',
width: '80px',
scopedSlots: { customRender: 'index' },
align: 'center'
},
{
title: '考试科目',
dataIndex: 'name'
},
{
title: '准考证号',
dataIndex: 'carId'
},
{
title: '考试形式',
dataIndex: 'type'
},
{
title: '答卷时间',
dataIndex: 'date'
},
{
title: '考试时长',
dataIndex: 'length'
},
{
title: '考试成绩',
dataIndex: 'zige'
},
{
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
],
loadExamData: parameter => {
return getCourseList(Object.assign(parameter, this.queryParam)).then(res => {
return res
})
},
loadExamDoneData: parameter => {
return getCourseList(Object.assign(parameter, this.queryParam)).then(res => {
return res
})
}
}
},
mounted () {
this.getExamTypeList()
},
methods: {
//
handleRefresh () {
const { activeTab } = this
if (activeTab === '1') {
this.$refs.examTable.refresh()
} else {
this.$refs.examDoneColumns.refresh()
}
},
handlerGoExam () {
this.$router.push({ path: '/myexamDetail', query: { type: 'exam' } })
},
handlerGoReport () {
this.$router.push({ path: '/myreport', query: { type: 'exam' } })
},
//
getExamTypeList () {
}
}
}
</script>
<style lang="less" scoped>
</style>