feat: 学员端首页

2022-02-24 16:49:31 +08:00 · 2022-02-24 16:49:31 +08:00 · 5199b00cf4
parent eabac82e45
commit 5199b00cf4
6 changed files with 370 additions and 42 deletions
--- a/src/api/mycourse/index.js
+++ b/src/api/mycourse/index.js
@ -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,
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@ -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,7 +16,11 @@ 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',
@ -29,7 +33,9 @@ export const asyncRouterMap = [
    ]
  },
  {
-    path: '*', redirect: '/404', hidden: true
+    path: '*',
+    redirect: '/404',
+    hidden: true
  }
 ]

--- a/src/views/mycourse/mycourseList/CentralizedTraining.vue
+++ b/src/views/mycourse/mycourseList/CentralizedTraining.vue
@ -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()
+      })
    }
  }
 }
--- a/src/views/mycourse/mycourseList/CentralizedTrainingDetail.vue
+++ b/src/views/mycourse/mycourseList/CentralizedTrainingDetail.vue
@ -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)
+      })
    }
  }
 }
--- a/src/views/myhome/index.vue
+++ b/src/views/myhome/index.vue
@ -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>
--- a/src/views/notice/NoticeDetail.vue
+++ b/src/views/notice/NoticeDetail.vue
@ -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 => {