feat:新增学员学习进度页面

src/modules/teacher/data/course/api.js

@@ -29,3 +29,18 @@ export function getClassList(params) {
 export function getStuList(params) {
   return httpRequest.get(`/api/zy/v3-teacher/course/students/${params.course_id}`, { params })
 }
+/**
+ * 导出班级统计数据
+ */
+export function exportClass(params) {
+  return httpRequest.get(`/api/zy/v3-teacher/course/classes-export/${params}`, {
+    params,
+    responseType: 'blob'
+  })
+}
+/**
+ * 获取学员详情
+ */
+export function getStudentDetail(params) {
+  return httpRequest.get('/api/zy/v3-school/student/view', { params })
+}

src/modules/teacher/data/course/index.js

@@ -6,7 +6,8 @@ const routes = [
       { path: '/teacher/data/course', component: () => import('./views/List.vue') },
       { path: '/teacher/data/course/classDatas', component: () => import('./views/ClassList.vue') },
       { path: '/teacher/data/course/personal', component: () => import('./views/PersonalList.vue') },
-      { path: '/teacher/data/course/detail', component: () => import('./views/CourseProcessList.vue') }
+      { path: '/teacher/data/course/detail', component: () => import('./views/Process.vue') },
+      { path: '/teacher/data/course/processDetail', component: () => import('./views/ProcessDetail.vue') }
     ]
   }
 ]

src/modules/teacher/data/course/views/ClassLIst.vue

@@ -2,14 +2,16 @@
   <app-container>
     <app-list v-bind="tableOptions" ref="list">
       <template #header-aside>
-        <el-button type="text">导出</el-button>
+        <el-button type="text" @click="exportClass">导出</el-button>
       </template>
     </app-list>
   </app-container>
 </template>
 
 <script>
-import { getClassList } from '../api'
+import { getClassList, exportClass } from '../api'
+// import queryString from 'query-string'
+
 export default {
   computed: {
     id() {
@@ -21,9 +23,7 @@ export default {
         remote: {
           httpRequest: getClassList,
           params: {
-            course_id: this.id,
-            class_name: '',
-            id: ''
+            course_id: this.id
           }
         },
         filters: [{ type: 'input', prop: 'class_name', placeholder: '班级名称', label: '班级名称' }],
@@ -37,6 +37,25 @@ export default {
         ]
       }
     }
+  },
+  methods: {
+    exportClass() {
+      const params = this.id
+      exportClass(params).then(r => {
+        const content = r
+        const blob = new Blob([content], { type: 'application/vnd.ms-excel' })
+        if ('download' in document.createElement('a')) {
+          const elink = document.createElement('a')
+          elink.download = '班级数据.xlsx'
+          elink.style.display = 'none'
+          elink.href = URL.createObjectURL(blob)
+          document.body.appendChild(elink)
+          elink.click()
+          URL.revokeObjectURL(elink.href)
+          document.body.removeChild(elink)
+        }
+      })
+    }
   }
 }
 </script>

src/modules/teacher/data/course/views/Process.vue

+<template>
+  <app-card>
+    <app-list v-bind="tableOptions" ref="list">
+      <template v-slot:course_picture="{ row }">
+        <el-image :src="row.course_picture"></el-image>
+      </template>
+      <template v-slot:progress="{ row }">
+        <el-progress :percentage="row.progress"></el-progress>
+      </template>
+      <template v-slot:table-x="{ row }">
+        <el-button type="primary" size="mini" plain @click="toDetail(row)">查看详情</el-button>
+      </template>
+    </app-list>
+  </app-card>
+</template>
+
+<script>
+// 接口
+import { getStudentDetail } from '../api'
+
+export default {
+  data() {
+    return {
+      list: [],
+      data: []
+    }
+  },
+  computed: {
+    id() {
+      return this.$route.query.id
+    },
+    // 列表配置
+    tableOptions() {
+      return {
+        data: this.list,
+        columns: [
+          { label: '课程ID', align: 'center', prop: 'id' },
+          { label: '课程名称', align: 'center', prop: 'course_name' },
+          { label: '课程图片', align: 'center', prop: 'course_picture', slots: 'course_picture' },
+          { label: '总进度', align: 'center', prop: 'progress', slots: 'progress' },
+          { label: '总时长', align: 'center', prop: 'max_length' },
+          { label: '操作', slots: 'table-x', align: 'center', fixed: 'right' }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.getDetail()
+  },
+  methods: {
+    getDetail() {
+      getStudentDetail({ id: this.id }).then(res => {
+        this.list = res.data.courses
+      })
+    },
+    toDetail(row) {
+      // console.log(row)
+      this.$router.push({
+        path: '/teacher/data/course/processDetail',
+        query: {
+          row: row.data
+        }
+      })
+    }
+  }
+}
+</script>

src/modules/teacher/data/course/views/CourseProcessList.vue → src/modules/teacher/data/course/views/processDetail.vue

 <template>
-  <app-container>
+  <app-card>
     <app-list v-bind="tableOptions" ref="list">
       <template v-slot:progress="{ row }">
         <el-progress :percentage="row.progress"></el-progress>
       </template>
     </app-list>
-  </app-container>
+  </app-card>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-    }
-  },
   computed: {
     // 列表配置
     tableOptions() {
       return {
-        remote: {
-        },
+        data: this.$route.query.row,
         columns: [
-          { label: '章节名称', prop: 'paper_title', align: 'center' },
-          { label: '章节类型', prop: 'class_name', align: 'center' },
-          { label: '学习进度', prop: 'progress', align: 'center', slots: 'progress' },
-          { label: '是否标记完成', prop: 'hfsdhf', align: 'center' },
-          { label: '最大学习时点', prop: 'saferg', align: 'center' },
-          { label: '最后学习时点', prop: 'greghe', align: 'center' },
-          { label: '累计学习时长', prop: 'ehrth', align: 'center' }
-        ],
-        data: [
-          { paper_title: 'ewfwf', progress: 90 }
+          { label: '章节名称', align: 'center', prop: 'name' },
+          { label: '章节类型', align: 'center', prop: 'type' },
+          { label: '学习进度', align: 'center', prop: 'progress', slots: 'progress' },
+          { label: '是否标记完成', align: 'center', prop: 'sign' },
+          { label: '最大学习时点', align: 'center', prop: 'mpt' },
+          { label: '最后学习时点', align: 'center', prop: 'cpt' },
+          { label: '累计学习时长', align: 'center', prop: 'pt' }
         ]
       }
     }
-  },
-  methods: {
-
   }
 }
 </script>