fix: 修复班级课程列表、教师列表、学员列表没有分页的问题；数据总览代码错误的问题；

src/components/base/AppList.vue

@@ -13,19 +13,9 @@
                 <!-- input -->
                 <el-input v-model="params[item.prop]" v-bind="item" clearable v-if="item.type === 'input'" />
                 <!-- select -->
-                <el-select
-                  v-model="params[item.prop]"
-                  clearable
-                  v-bind="item"
-                  v-if="item.type === 'select'"
-                  @change="search"
-                >
+                <el-select v-model="params[item.prop]" clearable v-bind="item" v-if="item.type === 'select'" @change="search">
                   <template v-for="(option, index) in item.options">
-                    <el-option
-                      :label="option[item.labelKey] || option.label"
-                      :value="option[item.valueKey] || option.value"
-                      :key="index"
-                    ></el-option>
+                    <el-option :label="option[item.labelKey] || option.label" :value="option[item.valueKey] || option.value" :key="index"></el-option>
                   </template>
                 </el-select>
               </template>
@@ -44,14 +34,7 @@
     <!-- 主体 -->
     <div class="table-list-bd">
       <slot name="body" v-bind="{ data: dataList }">
-        <el-table
-          :data="dataList"
-          v-loading="loading"
-          v-bind="$attrs"
-          v-on="$listeners"
-          style="height: 100%"
-          ref="table"
-        >
+        <el-table :data="dataList" v-loading="loading" v-bind="$attrs" v-on="$listeners" style="height: 100%" ref="table">
           <template v-for="item in columns">
             <el-table-column v-bind="item" :key="item.prop" v-if="visible(item)">
               <template v-slot:default="scope" v-if="item.slots || item.computed">
@@ -96,19 +79,9 @@
                   <!-- input -->
                   <el-input v-model="params[item.prop]" v-bind="item" clearable v-if="item.type === 'input'" />
                   <!-- select -->
-                  <el-select
-                    v-model="params[item.prop]"
-                    clearable
-                    v-bind="item"
-                    v-if="item.type === 'select'"
-                    style="width: 100%"
-                  >
+                  <el-select v-model="params[item.prop]" clearable v-bind="item" v-if="item.type === 'select'" style="width: 100%">
                     <template v-for="(option, index) in item.options">
-                      <el-option
-                        :label="option[item.labelKey] || option.label"
-                        :value="option[item.valueKey] || option.value"
-                        :key="index"
-                      ></el-option>
+                      <el-option :label="option[item.labelKey] || option.label" :value="option[item.valueKey] || option.value" :key="index"></el-option>
                     </template>
                   </el-select>
                 </template>
@@ -206,12 +179,13 @@ export default {
       this.loading = true
       httpRequest(params)
         .then(res => {
-          const { data = {} } = res || {}
-          this.page.total = parseInt(data.total || 0)
+          const data = res.data || {}
           if (Array.isArray(data)) {
             this.dataList = callback ? callback(data) : data
           } else {
-            this.dataList = callback ? callback(data) : data.list
+            const { list, total } = callback ? callback(data) : data
+            this.dataList = list
+            this.page.total = parseInt(total || 0)
           }
         })
         .catch(() => {

src/modules/dashboard/dataview/views/List.vue

@@ -141,7 +141,7 @@ export default {
             align: 'center',
             prop: 'expiration_time',
             computed({ row }) {
-              return row.expiration_time.slice(0, 10)
+              return row.expiration_time?.slice(0, 10)
             }
           },
           { label: '重修次数', align: 'center', prop: 'study_times' },

src/modules/school/class/components/CourseList.vue

@@ -13,43 +13,39 @@
       <!-- <el-button @click="onEdit(row)" type="primary" size="mini" plain>更新</el-button>
       <el-button @click="onRemove(row)" type="danger" size="mini" plain>删除</el-button> -->
     </template>
-    <AddCourse
-      v-if="isShowDialog"
-      :info="info"
-      :title="info ? '更新课程' : '添加课程'"
-      :visible.sync="isShowDialog"
-      @success="success"
-    />
+    <AddCourse v-if="isShowDialog" :info="info" :title="info ? '更新课程' : '添加课程'" :visible.sync="isShowDialog" @success="success" />
   </app-list>
 </template>
 
 <script>
-import { addCourse } from '../api'
+import { addCourse, getClassDetail } from '../api'
 import AddCourse from './AddCourse.vue'
 
 export default {
+  components: { AddCourse },
+  props: { id: { type: String } },
   data() {
     return {
       isShowDialog: false,
       info: {}
     }
   },
-  components: {
-    AddCourse
-  },
-  props: {
-    detail: {
-      type: Object
-    },
-    id: {
-      type: String
-    }
-  },
   computed: {
     // 列表配置
     tableOptions() {
       return {
-        data: this.detail.course.list,
+        remote: {
+          httpRequest: getClassDetail,
+          params: { id: this.id },
+          beforeRequest(params) {
+            params['course-page'] = params.page
+            params['course-per-page'] = params.page_size
+            return params
+          },
+          callback(data) {
+            return data.course
+          }
+        },
         columns: [
           { label: '课程图片', width: '140', slots: 'table-img' },
           { label: '课程名称', prop: 'course_name' },
@@ -60,10 +56,9 @@ export default {
       }
     }
   },
-  created() {},
   methods: {
     success() {
-      this.$parent.$parent.getDetail()
+      this.$refs.list.refetch(true)
       this.isShowDialog = false
     },
     handleAdd() {
@@ -96,7 +91,7 @@ export default {
       }
       addCourse(params).then(res => {
         if (res.code === 0) {
-          this.$parent.$parent.getDetail()
+          this.$refs.list.refetch(true)
           this.$message.success('删除成功')
         }
       })

src/modules/school/class/components/StudentList.vue

@@ -2,17 +2,8 @@
   <!-- 学员 -->
   <app-list v-bind="tableOptions" ref="list">
     <template #header-aside>
-      <el-button type="primary" icon="el-icon-plus" @click="addStudent" v-permission="'menu_class_add_student'"
-        >添加</el-button
-      >
-      <el-button
-        type="primary"
-        icon="el-icon-upload2"
-        style="margin-left: 20px"
-        @click="importStudent"
-        v-permission="'menu_class_import_student'"
-        >导入</el-button
-      >
+      <el-button type="primary" icon="el-icon-plus" @click="addStudent" v-permission="'menu_class_add_student'">添加</el-button>
+      <el-button type="primary" icon="el-icon-upload2" style="margin-left: 20px" @click="importStudent" v-permission="'menu_class_import_student'">导入</el-button>
     </template>
     <template v-slot:table-x="{ row }">
       <el-button @click="onRemove(row)" type="danger" size="mini" plain>删除</el-button>
@@ -22,30 +13,34 @@
 </template>
 
 <script>
-import { addStudents } from '../api'
+import { addStudents, getClassDetail } from '../api'
 import AddStudent from './AddStudent.vue'
 export default {
-  data() {
-    return {
-      isShowDialog: false
-    }
-  },
   components: {
     AddStudent
   },
-  props: {
-    id: {
-      type: String
-    },
-    detail: {
-      type: Object
+  props: { id: { type: String } },
+  data() {
+    return {
+      isShowDialog: false
     }
   },
   computed: {
     // 列表配置
     tableOptions() {
       return {
-        data: this.detail.student.list,
+        remote: {
+          httpRequest: getClassDetail,
+          params: { id: this.id },
+          beforeRequest(params) {
+            params['student-page'] = params.page
+            params['student-per-page'] = params.page_size
+            return params
+          },
+          callback(data) {
+            return data.student
+          }
+        },
         columns: [
           { label: '姓名', align: 'center', prop: 'personal_name' },
           { label: '学号', align: 'center', prop: 'sno' },
@@ -58,18 +53,13 @@ export default {
   },
   methods: {
     success() {
-      this.$parent.$parent.getDetail()
+      this.$refs.list.refetch(true)
     },
     addStudent() {
       this.isShowDialog = true
     },
     importStudent() {
-      this.$router.push({
-        name: 'ImportStudent',
-        query: {
-          id: this.id
-        }
-      })
+      this.$router.push({ name: 'ImportStudent', query: { id: this.id } })
     },
     // 删除
     onRemove(row) {
@@ -91,7 +81,7 @@ export default {
       // 删除学员
       addStudents(params).then(res => {
         if (res.code === 0) {
-          this.$parent.$parent.getDetail()
+          this.success()
           this.$message({ type: 'success', message: '删除成功' })
         }
       })

src/modules/school/class/components/TeachList.vue

 <template>
   <app-list v-bind="tableOptions" ref="list">
     <template #header-aside>
-      <el-button type="primary" icon="el-icon-plus" @click="addTeacher" v-permission="'menu_class_add_teacher'"
-        >添加</el-button
-      >
+      <el-button type="primary" icon="el-icon-plus" @click="addTeacher" v-permission="'menu_class_add_teacher'">添加</el-button>
     </template>
     <template v-slot:table-x="{ row }">
       <el-button @click="onRemove(row)" type="danger" size="mini" plain>删除</el-button>
@@ -13,31 +11,33 @@
 </template>
 
 <script>
-import { addTeachers } from '../api'
+import { addTeachers, getClassDetail } from '../api'
 import AddTeacher from './AddTeacher.vue'
 
 export default {
+  components: { AddTeacher },
+  props: { id: { type: String } },
   data() {
     return {
       isShowDialog: false
     }
   },
-  components: {
-    AddTeacher
-  },
-  props: {
-    detail: {
-      type: Object
-    },
-    id: {
-      type: String
-    }
-  },
   computed: {
     // 列表配置
     tableOptions() {
       return {
-        data: this.detail.staff.list,
+        remote: {
+          httpRequest: getClassDetail,
+          params: { id: this.id },
+          beforeRequest(params) {
+            params['staff-page'] = params.page
+            params['staff-per-page'] = params.page_size
+            return params
+          },
+          callback(data) {
+            return data.staff
+          }
+        },
         columns: [
           { label: '姓名', align: 'center', prop: 'personal_name' },
           { label: '手机号', align: 'center', prop: 'telephone' },
@@ -48,7 +48,7 @@ export default {
   },
   methods: {
     success() {
-      this.$parent.$parent.getDetail()
+      this.$refs.list.refetch(true)
     },
     addTeacher() {
       this.isShowDialog = true
@@ -72,7 +72,7 @@ export default {
       }
       addTeachers(params).then(res => {
         if (res.code === 0) {
-          this.$parent.$parent.getDetail()
+          this.success()
           this.$message.success('删除成功')
         }
       })

src/modules/school/class/views/Detail.vue

@@ -4,17 +4,17 @@
       <el-tab-pane label="班级信息">
         <ClassForm :detail="detail.info" />
       </el-tab-pane>
-      <el-tab-pane label="课程">
-        <CourseList :detail="detail" :id="id" />
+      <el-tab-pane label="课程" lazy>
+        <CourseList :id="id" />
       </el-tab-pane>
       <el-tab-pane label="考试">
-        <class-exam :detail="detail" @update="getDetail"></class-exam>
+        <ClassExam :detail="detail" @update="getDetail"></ClassExam>
       </el-tab-pane>
-      <el-tab-pane label="教师">
-        <TeachList :detail="detail" :id="id" />
+      <el-tab-pane label="教师" lazy>
+        <TeachList :id="id" />
       </el-tab-pane>
-      <el-tab-pane label="学员">
-        <StudentList :detail="detail" :id="id" />
+      <el-tab-pane label="学员" lazy>
+        <StudentList :id="id" />
       </el-tab-pane>
     </el-tabs>
     <!-- 班级 -->
@@ -26,7 +26,7 @@
       <CourseList :detail="detail" :id="id" />
     </app-card> -->
     <!-- 考试 -->
-    <!-- <class-exam :detail="detail" @update="getDetail"></class-exam> -->
+    <!-- <ClassExam :detail="detail" @update="getDetail"></ClassExam> -->
     <!-- 教务 -->
     <!-- <app-card title="教师">
       <TeachList :detail="detail" :id="id" />