feat: 学员端首页

This commit is contained in:
cgd_mac 2022-02-24 16:49:31 +08:00
parent eabac82e45
commit 5199b00cf4
6 changed files with 370 additions and 42 deletions

View File

@ -4,7 +4,9 @@ const mycourseApi = {
mycourseList: 'myCourse/getMyCourseList', // 我的课程列表,课程搜索 mycourseList: 'myCourse/getMyCourseList', // 我的课程列表,课程搜索
addMyCourse: 'myCourse/addMyCourse', // 添加课程 addMyCourse: 'myCourse/addMyCourse', // 添加课程
centerList: 'focused/training/list', // 集中培训列表 centerList: 'focused/training/list', // 集中培训列表
centerDetail: 'focused/training/list', // 集中培训详情 centerDetail: 'focusTrain/getDetail', // 集中培训详情
centerJoin: 'project/terminalTrain/enroll', // 集中培训报名
centerSign: 'project/terminalTrain/sign', // 集中培训签到
recommendList: 'sys/recommend/listPage', // 系统推荐课程列表 recommendList: 'sys/recommend/listPage', // 系统推荐课程列表
recommendDetail: 'sys/recommend/detail', // 系统课程推荐详情 recommendDetail: 'sys/recommend/detail', // 系统课程推荐详情
getCourseDetail: 'myCourse/getCourseDetail', // 我的课程详情 getCourseDetail: 'myCourse/getCourseDetail', // 我的课程详情
@ -18,6 +20,14 @@ const mycourseApi = {
getMyCourseList: 'studyStatistics/getMyCourseList' // 课程学习统计 getMyCourseList: 'studyStatistics/getMyCourseList' // 课程学习统计
} }
export function reqCenterJoin (data) {
return request({
url: mycourseApi.centerJoin,
method: 'POST',
data: data
})
}
export function reqMycourseCount (params) { export function reqMycourseCount (params) {
return request({ return request({
url: mycourseApi.getMyCourseList, url: mycourseApi.getMyCourseList,

View File

@ -1,5 +1,5 @@
// eslint-disable-next-line // eslint-disable-next-line
import { UserLayout, BasicLayout, RouteView } from '@/layouts' import { UserLayout, BasicLayout, RouteView } from '@/layouts';
import { bxAnaalyse } from '@/core/icons' import { bxAnaalyse } from '@/core/icons'
export const asyncRouterMap = [ export const asyncRouterMap = [
@ -16,20 +16,26 @@ export const asyncRouterMap = [
name: 'dashboard', name: 'dashboard',
redirect: '/dashboard/workplace', redirect: '/dashboard/workplace',
component: RouteView, component: RouteView,
meta: { title: '仪表盘', keepAlive: true, icon: bxAnaalyse /* permission: [ 'dashboard' ] */ }, meta: {
title: '仪表盘',
keepAlive: true,
icon: bxAnaalyse /* permission: [ 'dashboard' ] */
},
children: [ children: [
{ {
path: 'workplace', path: 'workplace',
name: 'Workplace', name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'), component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', keepAlive: false/*, permission: [ 'dashboard' ] */ } meta: { title: '工作台', keepAlive: false /*, permission: [ 'dashboard' ] */ }
} }
] ]
} }
] ]
}, },
{ {
path: '*', redirect: '/404', hidden: true path: '*',
redirect: '/404',
hidden: true
} }
] ]

View File

@ -1,28 +1,39 @@
<template> <template>
<a-card <a-card :bordered="false" :loading="loading">
:bordered="false"
:loading="loading"
>
<a-table <a-table
ref="table" ref="table"
:pageSize="5" :pageSize="5"
:columns="columns" :columns="columns"
:showPagination="false" :showPagination="false"
:data-source="dataList" :data-source="dataList"
:rowKey="record => record.id"> :rowKey="record => record.id"
>
<template slot="trainName" slot-scope="text, record">
<a-button @click="handlerDetail(record)" type="link" style="padding: 0;">{{record.trainName}}</a-button>
</template>
<template slot="trainSdate" slot-scope="text, record"> <template slot="trainSdate" slot-scope="text, record">
{{ record.trainSdate }}{{ record.trainEdate }} {{ record.trainSdate }}{{ record.trainEdate }}
</template> </template>
<span slot="status" slot-scope="text, record"> <span slot="status" slot-scope="text, record">
<a-tag v-if="record.status === 1" color="orange">未发布</a-tag> <a-tag v-if="record.status === 1" color="orange">未发布</a-tag>
<a-tag v-if="record.status === 2" color="orange">未开始</a-tag> <a-tag v-else-if="record.status === 2" color="orange">未开始</a-tag>
<a-tag v-if="record.status === 3" color="blue">进行中</a-tag> <a-tag v-else-if="record.status === 3" color="blue">进行中</a-tag>
<a-tag v-if="record.status === 4" color="green">已结束</a-tag> <a-tag v-else-if="record.status === 4" color="green">已结束</a-tag>
<a-tag v-if="record.status === 5" color="red">已中止</a-tag> <a-tag v-else-if="record.status === 5" color="red">已中止</a-tag>
<template v-else>-</template> <template v-else>-</template>
</span> </span>
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a @click="handlerDetail(record)">培训详情</a> <a-popconfirm
v-if="record.status === 1"
slot="actions"
:title="`确定要报名参加${record.name}吗?`"
ok-text="添加"
cancel-text="取消"
@confirm="handlerJoin(record)"
>
<a>报名参加</a>
</a-popconfirm>
<a v-else slot="actions" href="javascript:void(0);">已报名</a>
</span> </span>
</a-table> </a-table>
<CentralizedTrainingDetail ref="centralizedTrainingDetail"></CentralizedTrainingDetail> <CentralizedTrainingDetail ref="centralizedTrainingDetail"></CentralizedTrainingDetail>
@ -30,21 +41,22 @@
</template> </template>
<script> <script>
import { reqCourseCenterList } from '@/api/mycourse/index' import { reqCourseCenterList, reqCenterJoin } from '@/api/mycourse/index'
import CentralizedTrainingDetail from './CentralizedTrainingDetail.vue' import CentralizedTrainingDetail from './CentralizedTrainingDetail.vue'
export default { export default {
components: { components: {
CentralizedTrainingDetail CentralizedTrainingDetail
}, },
data () { data () {
return { return {
dataList: [], dataList: [],
activeTab: '1', activeTab: '1',
loading: true, loading: true,
columns: [ columns: [
{ {
title: '培训名称', title: '培训名称',
dataIndex: 'trainName' dataIndex: 'trainName',
scopedSlots: { customRender: 'trainName' }
}, },
{ {
title: '培训时间', title: '培训时间',
@ -57,7 +69,9 @@ export default {
}, },
{ {
title: '培训状态', title: '培训状态',
dataIndex: 'status' dataIndex: 'status',
scopedSlots: { customRender: 'status' }
}, },
{ {
title: '操作', title: '操作',
@ -74,20 +88,34 @@ export default {
}, },
selectedRows: [], // selectedRows: [], //
options: {} options: {}
}
},
mounted () {
setTimeout(() => {
this.loading = false
}, 800)
},
methods: {
//
handlerDetail (row) {
this.$refs.aycourseDetail.getDetail(row)
this.$refs.aycourseDetail.visible = true
} }
} },
mounted () {
// setTimeout(() => {
// this.loading = false
// }, 800)
this.initData()
},
methods: {
initData () {
reqCourseCenterList({ pageNum: 1, pageSize: 5 }).then(res => {
this.loading = false
this.dataList = res.rows
})
},
//
handlerDetail (row) {
this.$refs.centralizedTrainingDetail.getDetail(row)
this.$refs.centralizedTrainingDetail.visible = true
},
//
handlerJoin (row) {
reqCenterJoin(row).then(() => {
this.$message.success('报名成功!')
this.getJzpxList()
})
}
}
} }
</script> </script>

View File

@ -1,5 +1,11 @@
<template> <template>
<a-modal title="集中培训详情" :width="800" v-model="visible" :confirmLoading="confirmLoading" :footer="null"> <a-modal
title="集中培训详情"
:width="800"
v-model="visible"
:confirmLoading="confirmLoading"
:footer="null"
>
<a-descriptions :column="1" title=""> <a-descriptions :column="1" title="">
<a-descriptions-item label="培训名称"> <a-descriptions-item label="培训名称">
{{ data.trainName }} {{ data.trainName }}
@ -16,21 +22,19 @@
<a-descriptions-item label="学习内容"> <a-descriptions-item label="学习内容">
{{ data.learningContent }} {{ data.learningContent }}
</a-descriptions-item> </a-descriptions-item>
<a-descriptions-item label="联系人"> <a-descriptions-item label="联系人">{{ data.contact }}({{ data.phone }})</a-descriptions-item>
{{ data.contact }}({{ data.phone }})
</a-descriptions-item>
<a-descriptions-item label="备注"> <a-descriptions-item label="备注">
{{ data.remark }} {{ data.remark }}
</a-descriptions-item> </a-descriptions-item>
</a-descriptions> </a-descriptions>
<div v-if="data.status === 3" class="flex-center"> <div v-if="data.status === 3" class="flex-center">
<a-button @click="handlerJoin" type="primary">报名参加</a-button> <a-button v-if="data.status === 1" @click="handlerJoin" type="primary">报名参加</a-button>
</div> </div>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { reqCourseCenterDetail } from '@/api/mycourse/index' import { reqCourseCenterDetail, reqCenterJoin } from '@/api/mycourse/index'
export default { export default {
data () { data () {
return { return {
@ -41,12 +45,16 @@ export default {
}, },
methods: { methods: {
getDetail (row) { getDetail (row) {
reqCourseCenterDetail({ projectId: row.id }).then(res => { const { person } = this.$store.state.user
reqCourseCenterDetail({ trainId: row.id, personId: person.id }).then(res => {
this.data = res.data this.data = res.data
}) })
}, },
handlerJoin () { handlerJoin () {
reqCenterJoin(this.data).then(() => {
this.$message.success('报名成功!')
this.getDetail(this.data)
})
} }
} }
} }

275
src/views/myhome/index.vue Normal file
View File

@ -0,0 +1,275 @@
<!-- 作者cgd 邮箱349008059@qq.com 时间2022年02月24日 14:51:14 -->
<template>
<a-row :gutter="24">
<a-col :span="12" :style="{ marginBottom: '24px' }">
<a-card :bordered="false" :style="{ height: '100%' }">
<div class="flex-center" style="justify-content: flex-start;" slot="title">
<h4 style="margin: 0;">学习时长{{ countData.sumClassHour }}小时</h4>
</div>
</a-card>
</a-col>
<a-col :span="12" :style="{ marginBottom: '24px' }">
<a-card :bordered="false" :style="{ height: '100%' }">
<div class="flex-center" style="justify-content: flex-start;" slot="title">
<h4 style="margin: 0;">
培训计划{{ countData.yearClassHour }}学时/{{ countData.planClassHour }}学时
</h4>
</div>
</a-card>
</a-col>
<!-- 课程进度 start -->
<a-col :span="24" :style="{ marginBottom: '24px' }">
<a-card :bordered="false" title="课程进度" :style="{ height: '100%' }">
<a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="courseList">
<a-list-item slot="renderItem" slot-scope="item">
<a-popconfirm
v-if="item.status === 1"
slot="actions"
:title="`确定要添加${item.name}课程吗?`"
ok-text="添加"
cancel-text="取消"
@confirm="handlerAddCourse(item)"
>
<a>添加课程</a>
</a-popconfirm>
<a v-if="item.status === 2" slot="actions" @click="handlerContinue(item)">
继续学习
</a>
<a v-if="item.status === 3" slot="actions">已完成学习</a>
<a-list-item-meta :title="item.name"></a-list-item-meta>
<div style="width: 200px;">
<a-progress :percent="item.schedule" />
</div>
</a-list-item>
</a-list>
</a-card>
</a-col>
<!-- 课程进度 end -->
<!-- 培训计划 start -->
<a-col :span="24" :style="{ marginBottom: '24px' }">
<a-card :bordered="false" title="培训计划" :style="{ height: '100%' }">
<a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="pxjhList">
<a-list-item slot="renderItem" slot-scope="item">
<a-popconfirm
v-if="item.status === 1"
slot="actions"
:title="`确定要添加${item.name}课程吗?`"
ok-text="添加"
cancel-text="取消"
@confirm="handlerAddCourse(item)"
>
<a>添加课程</a>
</a-popconfirm>
<a v-if="item.status === 2" slot="actions" @click="handlerContinue(item)">
继续学习
</a>
<a v-if="item.status === 3" slot="actions">已完成学习</a>
<a-list-item-meta :title="item.name"></a-list-item-meta>
<div style="width: 200px;">
{{ item.startDate | dateFormat }}
</div>
</a-list-item>
</a-list>
</a-card>
</a-col>
<!-- 培训计划 end -->
<!-- 系统推荐课程 start -->
<a-col :span="24" :style="{ marginBottom: '24px' }">
<a-card :bordered="false" title="系统推荐课程" :style="{ height: '100%' }">
<a-row :gutter="16">
<a-col :span="6" :md="4" :sm="6" v-for="(item, index) in sysList" :key="index">
<a-card
@click="handlerContinue(item)"
hoverable
style="width: 100%; margin-bottom: 15px;"
>
<img slot="cover" alt="example" :src="item.coverImage" />
<div>
<h4>{{ item.projectName }}</h4>
<div class="flex-center justify-between">
<div>课时: {{ item.totalCourseHours }}小时</div>
<div>{{ item.trainType === 1 ? '必修课' : '选修课' }}</div>
</div>
</div>
</a-card>
</a-col>
</a-row>
</a-card>
</a-col>
<!-- 系统推荐课程 end -->
<!-- 集中培训 start -->
<a-col :span="24" :style="{ marginBottom: '24px' }">
<a-card :bordered="false" title="集中培训" :style="{ height: '100%' }">
<a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="jzpxList">
<a-list-item slot="renderItem" slot-scope="item">
<a @click="handlerCenterDetail(item)" slot="actions" href="javascript:void(0);">培训详情</a>
<a-popconfirm
v-if="item.status === 1"
slot="actions"
:title="`确定要报名参加${item.name}吗?`"
ok-text="添加"
cancel-text="取消"
@confirm="handlerJoin(item)"
>
<a>报名参加</a>
</a-popconfirm>
<a v-else slot="actions" href="javascript:void(0);">已报名</a>
<a-list-item-meta :title="item.trainName"></a-list-item-meta>
<div style="width: 200px;">
{{ item.trainSdate }}
</div>
</a-list-item>
</a-list>
</a-card>
</a-col>
<!-- 集中培训 end -->
<!-- 公告 start -->
<a-col :span="24" :style="{ marginBottom: '24px' }">
<a-card :bordered="false" title="公告" :style="{ height: '100%' }">
<a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="noticeList">
<a-list-item slot="renderItem" slot-scope="item">
<a-list-item-meta>
<a-button
@click="
$router.push({
path: '/notice/detail',
query: {
id: item.id,
type: 2,
},
})
"
type="link"
slot="title"
style="padding-left: 0;"
>
{{ item.title }}
</a-button>
</a-list-item-meta>
<div style="width: 200px;">
{{ item.publishTime }}
</div>
</a-list-item>
</a-list>
</a-card>
</a-col>
<!-- 公告 end -->
<CentralizedTrainingDetail ref="centralizedTrainingDetail"></CentralizedTrainingDetail>
</a-row>
</template>
<script>
import moment from 'moment'
import {
reqMyCourseList,
reqAddMyCourse,
reqCourseCenterList,
reqRecommendList,
reqCenterJoin
} from '@/api/mycourse/index'
import { noticePage } from '@/api/notice/notice'
import { getMyexamCount } from '@/api/myexamCount/index.js'
import CentralizedTrainingDetail from '@/views/mycourse/mycourseList/CentralizedTrainingDetail.vue'
export default {
props: {},
components: { CentralizedTrainingDetail },
data () {
return {
courseList: [],
pxjhList: [],
sysList: [],
jzpxList: [],
noticeList: [],
countData: {}
}
},
filters: {
dateFormat: function (value) {
if (!value) return '-'
return moment(value).format('YYYY-MM-DD')
}
},
mounted () {
this.initData()
},
methods: {
initData () {
this.getCourseList()
this.getPxjhList()
this.getJzpxList()
this.getSysList()
this.getNoticeList()
this.getCountData()
},
getCountData () {
getMyexamCount().then(res => {
this.countData = res.data
})
},
//
getCourseList () {
const { person } = this.$store.state.user
reqMyCourseList({ personId: person.id, pageSize: 2, pageNum: 1 }).then(res => {
this.courseList = res.rows
})
},
//
getPxjhList () {
const { person } = this.$store.state.user
reqMyCourseList({ personId: person.id, type: 3, pageSize: 2, pageNum: 1 }).then(res => {
this.pxjhList = res.rows
})
},
//
getJzpxList () {
reqCourseCenterList({ pageSize: 2, pageNum: 1 }).then(res => {
this.jzpxList = res.rows
})
},
//
getSysList () {
const { person } = this.$store.state.user
reqRecommendList({ personId: person.id, pageSize: 2, pageNum: 1 }).then(res => {
this.sysList = res.rows
})
},
//
getNoticeList () {
noticePage({ noticeRange: 2, pageSize: 5, pageNum: 1 }).then(res => {
this.noticeList = res.rows
})
},
//
handlerAddCourse (row) {
const { person } = this.$store.state.user
reqAddMyCourse({ personId: person.id, projectId: row.id }).then(res => {
if (res.code === 200) {
this.$message.success('添加课程成功!')
this.reqMyCourseList()
}
})
},
//
handlerContinue (row) {
this.$router.push({
path: '/mycourse/courseLearn',
query: { courseId: row.id }
})
},
//
handlerJoin (row) {
reqCenterJoin(row).then(() => {
this.$message.success('报名成功!')
this.getJzpxList()
})
},
//
handlerCenterDetail (row) {
this.$refs.centralizedTrainingDetail.getDetail(row)
this.$refs.centralizedTrainingDetail.visible = true
}
}
}
</script>
<style lang="scss" scoped></style>

View File

@ -131,7 +131,8 @@ export default {
methods: { methods: {
// //
close () { close () {
this.$router.push({ path: '/notice/list', query: {} }) // this.$router.push({ path: '/notice/list', query: {} })
this.$router.go(-1)
}, },
getDetail (id) { getDetail (id) {
noticeGet({ id: id }).then(res => { noticeGet({ id: id }).then(res => {