lingling
/
welfare-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/mycourse/index.js
View File

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

14
src/config/router.config.js
View File

@ -1,5 +1,5 @@
// eslint-disable-next-line
import { UserLayout, BasicLayout, RouteView } from '@/layouts'
import { UserLayout, BasicLayout, RouteView } from '@/layouts';
import { bxAnaalyse } from '@/core/icons'
export const asyncRouterMap = [
@ -16,20 +16,26 @@ export const asyncRouterMap = [
name: 'dashboard',
redirect: '/dashboard/workplace',
component: RouteView,
meta: { title: '仪表盘', keepAlive: true, icon: bxAnaalyse /* permission: [ 'dashboard' ] */ },
meta: {
title: '仪表盘',
keepAlive: true,
icon: bxAnaalyse /* permission: [ 'dashboard' ] */
},
children: [
{
path: 'workplace',
name: '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
}
]

64
src/views/mycourse/mycourseList/CentralizedTraining.vue
View File

@ -1,28 +1,39 @@
<template>
<a-card
:bordered="false"
:loading="loading"
>
<a-card :bordered="false" :loading="loading">
<a-table
ref="table"
:pageSize="5"
:columns="columns"
:showPagination="false"
: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">
{{ record.trainSdate }}至{{ record.trainEdate }}
</template>
<span slot="status" slot-scope="text, record">
<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-if="record.status === 3" color="blue">进行中</a-tag>
<a-tag v-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 === 2" color="orange">未开始</a-tag>
<a-tag v-else-if="record.status === 3" color="blue">进行中</a-tag>
<a-tag v-else-if="record.status === 4" color="green">已结束</a-tag>
<a-tag v-else-if="record.status === 5" color="red">已中止</a-tag>
<template v-else>-</template>
</span>
<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>
</a-table>
<CentralizedTrainingDetail ref="centralizedTrainingDetail"></CentralizedTrainingDetail>
@ -30,7 +41,7 @@
</template>
<script>
import { reqCourseCenterList } from '@/api/mycourse/index'
import { reqCourseCenterList, reqCenterJoin } from '@/api/mycourse/index'
import CentralizedTrainingDetail from './CentralizedTrainingDetail.vue'
export default {
components: {
@ -44,7 +55,8 @@ export default {
columns: [
{
title: '培训名称',
dataIndex: 'trainName'
dataIndex: 'trainName',
scopedSlots: { customRender: 'trainName' }
},
{
title: '培训时间',
@ -57,7 +69,9 @@ export default {
},
{
title: '培训状态',
dataIndex: 'status'
dataIndex: 'status',
scopedSlots: { customRender: 'status' }
},
{
title: '操作',
@ -77,15 +91,29 @@ export default {
}
},
mounted () {
setTimeout(() => {
this.loading = false
}, 800)
// 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.aycourseDetail.getDetail(row)
this.$refs.aycourseDetail.visible = true
this.$refs.centralizedTrainingDetail.getDetail(row)
this.$refs.centralizedTrainingDetail.visible = true
},
// 报名
handlerJoin (row) {
reqCenterJoin(row).then(() => {
this.$message.success('报名成功!')
this.getJzpxList()
})
}
}
}

24
src/views/mycourse/mycourseList/CentralizedTrainingDetail.vue
View File

@ -1,5 +1,11 @@
<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-item label="培训名称">
{{ data.trainName }}
@ -16,21 +22,19 @@
<a-descriptions-item label="学习内容">
{{ data.learningContent }}
</a-descriptions-item>
<a-descriptions-item label="联系人">
{{ data.contact }}({{ data.phone }})
</a-descriptions-item>
<a-descriptions-item label="联系人">{{ data.contact }}({{ data.phone }})</a-descriptions-item>
<a-descriptions-item label="备注">
{{ data.remark }}
</a-descriptions-item>
</a-descriptions>
<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>
</a-modal>
</template>
<script>
import { reqCourseCenterDetail } from '@/api/mycourse/index'
import { reqCourseCenterDetail, reqCenterJoin } from '@/api/mycourse/index'
export default {
data () {
return {
@ -41,12 +45,16 @@ export default {
},
methods: {
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
})
},
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>

3
src/views/notice/NoticeDetail.vue
View File

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