146 lines
4.4 KiB
Vue
146 lines
4.4 KiB
Vue
<template>
|
|
<a-card :bordered="false" :loading="loading">
|
|
<div class="table-page-search-wrapper">
|
|
<div class="flex-center justify-between">
|
|
<div style="flex: 1;">
|
|
<SearchCom
|
|
:form="queryParam"
|
|
:list="queryOptions"
|
|
@search="handleRefresh"
|
|
@reset="
|
|
() => {
|
|
queryParam = {}
|
|
handleRefresh()
|
|
}
|
|
"></SearchCom>
|
|
</div>
|
|
<div class="flex-center" style="flex: 0 0 300px;">
|
|
<a-button @click="handlerGoMycollection(1)" type="link">我的收藏</a-button>
|
|
<a-button @click="handlerGoMycollection(2)" type="link">错题集</a-button>
|
|
<a-button @click="handlerGoMycollection(3)" type="link">答题记录</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</br>
|
|
<template v-if="dataList && dataList.length>0">
|
|
<a-card v-for="(item, index) in dataList" :key="index" :bordered="false" :bodyStyle="{paddingLeft: '0px !important'}" :headStyle="{paddingLeft: '0px !important'}" >
|
|
<template slot="title">
|
|
<b>{{ item.title }}</b><span class="sub-txt">共{{ item.questionCount }}题</span>
|
|
</template>
|
|
<a-row :gutter="16">
|
|
<a-col
|
|
:span="6"
|
|
:lg="4"
|
|
:md="6"
|
|
:sm="8"
|
|
:xs="12"
|
|
v-for="(j, k) in item.list"
|
|
:key="`${index}-${k}`">
|
|
<a-card hoverable :bodyStyle="{height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }" style="width: 100%; margin-bottom: 15px;height: 100px;">
|
|
<div>
|
|
<div class="flex-center"><h4 class="text-cut-2">{{ j.courseName }}</h4></div>
|
|
<div class="flex-center">
|
|
<a-button @click="handlerStart(j)" type="primary" size="small" round>开始答题</a-button>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</a-card>
|
|
</template>
|
|
<a-empty v-else :image="$emptyImg" />
|
|
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'lodash'
|
|
import { SearchCom } from '@/components'
|
|
import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
|
|
import { dictToTree } from '@/utils/util'
|
|
import { practiceList } from '@/api/practice/practice'
|
|
|
|
export default {
|
|
components: { SearchCom },
|
|
data () {
|
|
return {
|
|
dataList: [],
|
|
loading: true,
|
|
queryParam: {
|
|
courseType: '' // 课程分类
|
|
},
|
|
queryOptions: [
|
|
{ type: 'select-dic-tree', width: '200', placeholder: '课程分类', key: 'courseType', options: [] }
|
|
]
|
|
}
|
|
},
|
|
mounted () {
|
|
this.dictionaryDropDown()
|
|
this.initList()
|
|
},
|
|
methods: {
|
|
async initList () {
|
|
const result = await practiceList({ type: this.queryParam.courseType })
|
|
let dataList = []
|
|
if (result.code === 200 && result.data) {
|
|
dataList = Object.keys(result.data).map(item => ({ title: item, list: result.data[item] }))
|
|
dataList = dataList.map(item => ({ ...item, questionCount: _.sumBy(item.list, 'questionCount') }))
|
|
}
|
|
this.dataList = dataList
|
|
},
|
|
handleRefresh () {
|
|
this.initList()
|
|
},
|
|
// 去我的收藏
|
|
handlerGoMycollection (type) {
|
|
console.log('12313')
|
|
this.$router.push({
|
|
path: '/mycollection',
|
|
query: { type: type }
|
|
})
|
|
},
|
|
// 开始答题
|
|
handlerStart (item) {
|
|
const _this = this
|
|
const goExamDetail = function () {
|
|
_this.$router.push({
|
|
path: '/myexamDetail',
|
|
query: { courseId: item.courseId, projectId: item.projectId, practiceType: 1, type: 'practice' }
|
|
})
|
|
}
|
|
if (item.type == 2) {
|
|
this.$confirm({
|
|
title: '提示',
|
|
content: '您上次的练习还未完成,是否继续上次答题?',
|
|
okText: '继续答题',
|
|
cancelText: '重新答题',
|
|
onOk () {
|
|
goExamDetail(2)
|
|
},
|
|
onCancel () {
|
|
goExamDetail(1)
|
|
}
|
|
})
|
|
} else {
|
|
goExamDetail(1)
|
|
}
|
|
},
|
|
dictionaryDropDown () {
|
|
dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
|
|
const result = dictToTree(res.data, [], 0)
|
|
this.queryOptions[0].options = result
|
|
this.loading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.sub-txt{
|
|
color: #666;
|
|
font-size: 12px;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|