291 lines
10 KiB
Vue
291 lines
10 KiB
Vue
<!-- 作者：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 style="width: 100px;display: inline-block;">添加课程</a>
|
||
</a-popconfirm>
|
||
<a v-if="item.status === 2" slot="actions" @click="handlerContinue(item)" style="width: 100px;display: inline-block;">
|
||
继续学习
|
||
</a>
|
||
<a v-if="item.status === 3" slot="actions" style="width: 100px;display: inline-block;">已完成学习</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">
|
||
<div slot="actions">
|
||
<a-tag v-if="item.state === 1" color="blue">进行中</a-tag>
|
||
<a-tag v-if="item.state === 2" color="red">已过期</a-tag>
|
||
</div>
|
||
<!-- <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>
|
||
<template slot="title">
|
||
<a-button @click="handlerCourseDetail(item)" type="link" style="padding: 0;">{{ item.name }}</a-button>
|
||
</template>
|
||
</a-list-item-meta>
|
||
<div style="width: 200px;">
|
||
{{ item.startDate | dateFormat }}
|
||
</div>
|
||
<div style="width: 200px;">{{ item.year }}</div>
|
||
<div style="width: 200px;">{{ item.orgName }}</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 v-if="sysList && sysList.length > 0" :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-empty v-else :image="$emptyImg"></a-empty>
|
||
</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.signStatus === 1 && item.status === 2"
|
||
slot="actions"
|
||
:title="`确定要报名参加${item.trainName}吗?`"
|
||
ok-text="添加"
|
||
cancel-text="取消"
|
||
@confirm="handlerJoin(item)"
|
||
>
|
||
<a>报名参加</a>
|
||
</a-popconfirm>
|
||
<a v-if="item.signStatus === 2" slot="actions" href="javascript:void(0);">已报名</a>
|
||
<a v-if="item.signStatus === 3" 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>
|
||
<CourseListByPlanDialogVue ref="planDialog" :planId="planId"></CourseListByPlanDialogVue>
|
||
</a-row>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from 'moment'
|
||
import {
|
||
reqMyCourseList,
|
||
reqAddMyCourse,
|
||
reqCourseCenterList,
|
||
reqRecommendList,
|
||
reqCenterJoin,
|
||
reqMyTrainPlanList
|
||
} 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'
|
||
import CourseListByPlanDialogVue from '../mycourse/mycourseList/CourseListByPlanDialog.vue'
|
||
|
||
export default {
|
||
props: {},
|
||
components: { CentralizedTrainingDetail, CourseListByPlanDialogVue },
|
||
data () {
|
||
return {
|
||
planId: '', // 培训计划选中的id
|
||
courseList: [],
|
||
pxjhList: [],
|
||
sysList: [],
|
||
jzpxList: [],
|
||
noticeList: [],
|
||
countData: {}
|
||
}
|
||
},
|
||
filters: {
|
||
dateFormat: function (value) {
|
||
if (!value) return '-'
|
||
return moment(value).format('YYYY-MM-DD')
|
||
}
|
||
},
|
||
mounted () {
|
||
this.initData()
|
||
},
|
||
methods: {
|
||
// 打开培训计划明细弹出框
|
||
handlerCourseDetail (data) {
|
||
this.planId = data.id
|
||
this.$refs.planDialog.open()
|
||
},
|
||
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
|
||
reqMyTrainPlanList({ personId: person.id, type: 3, pageSize: 2, pageNum: 1 }).then(res => {
|
||
this.pxjhList = res.rows
|
||
})
|
||
},
|
||
// 集中培训
|
||
getJzpxList () {
|
||
const { person } = this.$store.state.user
|
||
reqCourseCenterList({ personId: person.id, pageSize: 5, 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.getCourseList()
|
||
this.getPxjhList()
|
||
}
|
||
})
|
||
},
|
||
// 继续学习
|
||
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>
|