feat: 我的考试UI
This commit is contained in:
cgd_mac
parent
bb309c72af
commit
8a683ee257
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue