新增学习记录功能

src/api/course.js

@@ -139,3 +139,13 @@ export function courseSave(data) {
 export function courseDelete(data) {
   return request.delete('/course/admin/course/delete?id=' + data.id, data)
 }
+
+// 分页
+export function userCoursePage(params, pageCurrent = 1, pageSize = 20) {
+  return request({url: '/course/admin/user/course/page', method: 'post', data: {pageCurrent: pageCurrent, pageSize: pageSize, ...params}})
+}
+
+// 分页
+export function userStudyePage(params, pageCurrent = 1, pageSize = 20) {
+  return request({url: '/course/admin/user/study/page', method: 'post', data: {pageCurrent: pageCurrent, pageSize: pageSize, ...params}})
+}

src/router/index.js

@@ -125,6 +125,13 @@ const asyncRouterMapList = [
         component: () => import('@/views/course/list/chapter/index.vue'),
         meta: {title: '章节管理'}
       },
+      {
+        path: 'record',
+        name: 'CourseRecord',
+        hidden: true,
+        component: () => import('@/views/course/list/record/index.vue'),
+        meta: {title: '学习管理'}
+      },
       {
         path: 'resource',
         name: 'CourseResource',

src/views/course/list/index.vue

@@ -51,8 +51,9 @@
           <span :class="{ 'c-danger': scope.row.statusId === 0 }">{{ statusIdEnums[scope.row.statusId] }}</span>
         </template>
       </el-table-column>
-      <el-table-column :width="200" fixed="right" label="操作" prop="address">
+      <el-table-column :width="280" fixed="right" label="操作" prop="address">
         <template #default="scope">
+          <el-button plain type="success" @click="courseRecord(scope.row)">数据</el-button>
           <el-button v-if="checkPermission('course:admin:course:edit')" plain type="success" @click="courseChapter(scope.row)">章节</el-button>
           <el-dropdown>
             <el-button> 更多操作<i class="el-icon-arrow-down"/></el-button>
@@ -132,16 +133,21 @@ export default defineComponent({
       });
     };
 
-    //章节跳转
+    //章节
     const courseChapter = function(row) {
       this.$router.push({path: '/course/chapter', query: {courseId: row.id}});
     }
 
+    //数据
+    const courseRecord = function(row) {
+      this.$router.push({path: '/course/record', query: {courseId: row.id}});
+    }
+
     return {
-      ...toRefs(state),
-      initData,
+      ...toRefs(state), initData,
       handleUpdateStatus,
-      courseChapter
+      courseChapter,
+      courseRecord
     };
   }
 });

src/views/course/list/record/index.vue

+<template>
+  <div class="app-container">
+    <div class="page_head">
+      <div class="search_bar clearfix">
+        <el-form :model="seekForm" inline label-width="80px">
+          <el-form-item>
+            <el-button @click="seek()" type="primary"> 查询</el-button>
+            <el-button @click="resetSeek()">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <el-table v-loading="tableData.loading" :data="tableData.list" border>
+      <el-table-column align="center" label="序号" type="index" width="60"/>
+      <el-table-column label="手机号码" prop="mobile" min-width="20"/>
+      <el-table-column label="用户昵称" prop="nickname" min-width="20"/>
+      <el-table-column label="观看进度" prop="courseProgress">
+        <template #default="scope">
+          <el-progress
+            :percentage="scope.row.courseProgress"
+            :stroke-width="25"
+            :text-inside="true"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="开始学习时间" prop="gmtCreate" min-width="30"/>
+      <el-table-column width="100" label="操作">
+        <template #default="scope">
+          <el-button plain type="primary" @click="studyRecord(scope.row)">明细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination :current-page="page.pageCurrent" :layout="page.layout" :page-size="page.pageSize" :page-sizes="[20, 50, 100, 200]" :total="page.totalCount" background @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
+    <study v-model="study.visible" :info="study.info" @close="studyCallback"/>
+  </div>
+</template>
+<script>
+import UseTable from '@/composables/UseTable.js';
+import {ElMessage} from 'element-plus';
+import {defineComponent, onMounted, reactive, toRefs} from 'vue';
+import {useStore} from 'vuex';
+import {userCoursePage, userStudyePage} from '@/api/course.js'
+import {useRoute} from 'vue-router/dist/vue-router';
+import Study from './study.vue';
+
+export default defineComponent({
+  components: {Study},
+  setup() {
+    const route = useRoute()
+    const apis = reactive({
+      getList: userCoursePage
+    })
+    const state = reactive({
+      ...UseTable(apis, {courseId: route.query.courseId}),
+      loginStatusEnums: {}
+    });
+    const store = useStore();
+    onMounted(() => {
+      store.dispatch('GetOpts', {enumName: 'LoginStatusEnum', type: 'obj'}).then((res) => {
+        state.loginStatusEnums = res;
+      });
+    });
+
+    let study = reactive({
+      visible: false,
+      info: {}
+    })
+    const studyRecord = (row) => {
+      userStudyePage({userId: row.userId, courseId: route.query.courseId}).then((res) => {
+        study.info = res
+      });
+      study.visible = true;
+    }
+    const studyCallback = () => {
+      study.visible = false
+    }
+
+    return {
+      ...toRefs(state),
+      study,
+      studyRecord,
+      studyCallback
+    };
+  }
+});
+</script>

src/views/course/list/record/study.vue

+<template>
+  <el-dialog v-model="visible" :append-to-body="true" :title="title" width="600px" @close="handleClose">
+    <el-table :data="info" :tree-props="{ children: 'userStudyPeriodPageRespList' }" default-expand-all>
+      <el-table-column label="章节名称" prop="chapterName">
+        <template #default="scope">
+          <span>{{ scope.row.chapterName }}</span>
+          <span>{{ scope.row.periodName }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-dialog>
+</template>
+<script>
+import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue';
+
+export default defineComponent({
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '学习记录'
+    },
+    info: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  setup() {
+    const state = reactive({});
+    const visible = ref(false);
+
+    const handleClose = () => {
+      visible.value = false;
+    };
+    return {
+      ...toRefs(state),
+      visible,
+      handleClose
+    };
+  }
+});
+</script>

vite.config.js

@@ -42,7 +42,8 @@ export default defineConfig({
     proxy: { // 代理
       '/gateway': {
         //target: 'http://localhost:8180',
-        target: 'http://dev-os.roncoos.com/gateway',
+        //target: 'http://dev-os.roncoos.com/gateway',
+        target: 'https://eduos.roncoo.net/gateway',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/gateway/, '')
       }