添加上一名

dev-dist/sw.js

@@ -67,7 +67,7 @@ if (!self.define) {
     });
   };
 }
-define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
+define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
 
   self.skipWaiting();
   workbox.clientsClaim();
@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.37gnmgfpud8"
+    "revision": "0.q5ukm3ve3dg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

public/version.json

@@ -1 +1 @@
-{"version":1714574615459}
+{"version":1714989706079}

src/views/classList/components/afterWorkDetail.tsx

@@ -1,324 +1,341 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from '../index.module.less';
-import {
-  NButton,
-  NDataTable,
-  NForm,
-  NFormItem,
-  NImage,
-  NModal,
-  NSelect,
-  NSpace
-} from 'naive-ui';
-import SearchInput from '@/components/searchInput';
-import CSelect from '@/components/CSelect';
-import Pagination from '@/components/pagination';
-import { getWorkDetail, getTrainingStudentList } from '../api';
-import add from './images/add.png';
-import { useRoute } from 'vue-router';
-import CBreadcrumb from '/src/components/CBreadcrumb';
-import CDatePicker from '/src/components/CDatePicker';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import {
-  getNowDateAndMonday,
-  getNowDateAndSunday,
-  getTimes
-} from '/src/utils/dateFormat';
-import { trainingStatusArray } from '@/utils/searchArray';
-import TrainingDetails from '../modals/TrainingDetails';
-import dayjs from 'dayjs';
-import { lookup } from 'dns';
-import TheEmpty from '/src/components/TheEmpty';
-export default defineComponent({
-  name: 'student-studentList',
-  setup(props, { emit }) {
-    const state = reactive({
-      searchForm: { keyword: '', trainingStatus: '' as any },
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 10,
-        pageTotal: 4
-      },
-      tableList: [] as any,
-      workInfo: {
-        createTime: '',
-        expireDate: '',
-        teacherAvatar: '',
-        teacherName: ''
-      },
-      detailVisiable: false,
-      activeRow: null as any,
-      index: 0
-    });
-    const timer = ref<[number, number]>([
-      getNowDateAndMonday(new Date().getTime()),
-      getNowDateAndSunday(new Date().getTime())
-    ]);
-    const TrainingDetailsRef = ref();
-    const route = useRoute();
-    const routerList = ref([
-      { name: '班级管理', path: '/classList' },
-      { name: route.query.name, path: '/classDetail' },
-      { name: route.query.teacherName, path: '/afterWorkDetail' }
-    ] as any);
-
-    const search = () => {
-      state.pagination.page = 1;
-      getList();
-      console.log('search', state);
-    };
-
-    const onReset = () => {
-      state.searchForm = { keyword: '', trainingStatus: '' as any };
-      timer.value = [
-        getNowDateAndMonday(new Date().getTime()),
-        getNowDateAndSunday(new Date().getTime())
-      ];
-      search();
-    };
-    const getList = async () => {
-      state.loading = true;
-      try {
-        console.log(route.query, 'route.query');
-        const res = await getTrainingStudentList({
-          classGroupId: route.query.classGroupId || '',
-          trainingId: route.query.trainingId,
-          ...state.searchForm,
-          ...state.pagination
-          // ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
-        });
-
-        state.tableList = res.data.rows;
-
-        state.pagination.pageTotal = res.data.total;
-        state.loading = false;
-      } catch (e) {
-        state.loading = false;
-        console.log(e);
-      }
-    };
-    const getWorkInfo = async () => {
-      try {
-        const res = await getWorkDetail({ trainingId: route.query.trainingId });
-        state.workInfo = { ...res.data };
-      } catch (e) {
-        console.log(e);
-      }
-    };
-
-    const lookDetail = (row: any, index: number) => {
-      console.log(index, 'index');
-      state.index = index + 1;
-      state.activeRow = row;
-      state.detailVisiable = true;
-    };
-    onMounted(() => {
-      getWorkInfo();
-      getList();
-    });
-    const columns = () => {
-      return [
-        {
-          title: '学生姓名',
-          key: 'studentName'
-        },
-        {
-          title: '最后提交时间',
-          key: 'submitTime',
-          render(row: any) {
-            return row.submitTime
-              ? dayjs(row.submitTime).format('YYYY-MM-DD')
-              : '--';
-          }
-        },
-        {
-          title: '作业状态',
-          key: 'sex',
-          render(row: any) {
-            return (
-              <div>
-                {row.trainingStatus == 'UNSUBMITTED' ? (
-                  <p class={styles.nosub}>未提交</p>
-                ) : null}
-                {row.trainingStatus == 'SUBMITTED' ? (
-                  <p class={styles.ison}>不合格</p>
-                ) : null}
-                {row.trainingStatus == 'TARGET' ? (
-                  <p class={styles.isok}>合格</p>
-                ) : null}
-              </div>
-            );
-          }
-        },
-        {
-          title: '操作',
-          key: 'id',
-          render(row: any, index: number) {
-            return (
-              <NButton
-                text
-                type="primary"
-                onClick={() => {
-                  lookDetail(row, index);
-                }}>
-                详情
-              </NButton>
-            );
-          }
-        }
-      ];
-    };
-
-    const goToNext = () => {
-      ++state.index;
-
-      state.activeRow = state.tableList[state.index - 1];
-
-      TrainingDetailsRef.value.getTrainingDetail(
-        state.activeRow.studentLessonTrainingId
-      );
-    };
-    const gotoPre = () => {
-      --state.index;
-      state.activeRow = state.tableList[state.index - 1];
-      TrainingDetailsRef.value.getTrainingDetail(
-        state.activeRow.studentLessonTrainingId
-      );
-    };
-    return () => (
-      <div>
-        <CBreadcrumb list={routerList.value}></CBreadcrumb>
-        <div class={styles.listWrap}>
-          <div class={styles.teacherList}>
-            <div class={styles.teacherHeader}>
-              <div class={styles.teacherHeaderBorder}>
-                <NImage
-                  class={styles.teacherHeaderImg}
-                  src={
-                    state.workInfo.teacherAvatar
-                      ? state.workInfo.teacherAvatar
-                      : defultHeade
-                  }
-                  previewDisabled></NImage>
-              </div>
-            </div>
-            <div class={styles.workafterInfo}>
-              <h4>{state.workInfo.teacherName}</h4>
-              <p>
-                布置时间：
-                {state.workInfo.createTime
-                  ? dayjs(state.workInfo.createTime).format('YYYY-MM-DD HH:mm')
-                  : '--'}{' '}
-                |{' '}
-                <span>
-                  截止时间：
-                  {state.workInfo.expireDate
-                    ? dayjs(state.workInfo.expireDate).format(
-                        'YYYY-MM-DD HH:mm'
-                      )
-                    : '--'}
-                </span>
-              </p>
-            </div>
-          </div>
-          <div class={styles.searchList}>
-            <NForm label-placement="left" inline>
-              <NFormItem>
-                <SearchInput
-                  {...{ placeholder: '请输入学生姓名' }}
-                  class={styles.searchInput}
-                  searchWord={state.searchForm.keyword}
-                  onChangeValue={(val: string) =>
-                    (state.searchForm.keyword = val)
-                  }></SearchInput>
-              </NFormItem>
-
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label: '全部状态',
-                        value: ''
-                      },
-                      ...trainingStatusArray
-                    ],
-                    placeholder: '作业状态',
-                    clearable: true,
-                    inline: true
-                  } as any)}
-                  v-model:value={state.searchForm.trainingStatus}></CSelect>
-              </NFormItem>
-              {/* <NFormItem>
-                <CDatePicker
-                  v-model:value={timer.value}
-                  separator={'至'}
-                  type="daterange"
-                  timerValue={timer.value}></CDatePicker>
-              </NFormItem> */}
-
-              <NFormItem>
-                <NSpace justify="end">
-                  <NButton type="primary" class="searchBtn" onClick={search}>
-                    搜索
-                  </NButton>
-                  <NButton
-                    type="primary"
-                    ghost
-                    class="resetBtn"
-                    onClick={onReset}>
-                    重置
-                  </NButton>
-                </NSpace>
-              </NFormItem>
-            </NForm>
-          </div>
-          {/* <NButton
-          class={styles.addBtn}
-          type="primary"
-          v-slots={{
-            icon: () => (
-              <>
-                <NImage class={styles.addBtnIcon} src={add}></NImage>
-              </>
-            )
-          }}>
-          新增学生
-        </NButton> */}
-          <div class={styles.tableWrap}>
-            <NDataTable
-              v-slots={{
-                empty: () => <TheEmpty></TheEmpty>
-              }}
-              class={styles.classTable}
-              loading={state.loading}
-              columns={columns()}
-              data={state.tableList}></NDataTable>
-            <Pagination
-              v-model:page={state.pagination.page}
-              v-model:pageSize={state.pagination.rows}
-              v-model:pageTotal={state.pagination.pageTotal}
-              onList={getList}
-              sync
-            />
-          </div>
-        </div>
-        <NModal
-          v-model:show={state.detailVisiable}
-          preset="card"
-          class={['modalTitle background', styles.wordDetailModel]}
-          title={'作业详情'}>
-          <TrainingDetails
-            onNext={() => goToNext()}
-            onPre={() => gotoPre()}
-            ref={TrainingDetailsRef}
-            onClose={() => (state.detailVisiable = false)}
-            total={state.tableList.length}
-            current={state.index}
-            activeRow={state.activeRow}></TrainingDetails>
-        </NModal>
-      </div>
-    );
-  }
-});
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '../index.module.less';
+import {
+  NButton,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NImage,
+  NModal,
+  NSelect,
+  NSpace
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CSelect from '@/components/CSelect';
+import Pagination from '@/components/pagination';
+import { getWorkDetail, getTrainingStudentList } from '../api';
+import add from './images/add.png';
+import { useRoute } from 'vue-router';
+import CBreadcrumb from '/src/components/CBreadcrumb';
+import CDatePicker from '/src/components/CDatePicker';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import {
+  getNowDateAndMonday,
+  getNowDateAndSunday,
+  getTimes
+} from '/src/utils/dateFormat';
+import { trainingStatusArray } from '@/utils/searchArray';
+import TrainingDetails from '../modals/TrainingDetails';
+import dayjs from 'dayjs';
+import { lookup } from 'dns';
+import TheEmpty from '/src/components/TheEmpty';
+export default defineComponent({
+  name: 'student-studentList',
+  setup(props, { emit }) {
+    const state = reactive({
+      searchForm: { keyword: '', trainingStatus: '' as any },
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 4
+      },
+      tableList: [] as any,
+      workInfo: {
+        createTime: '',
+        expireDate: '',
+        teacherAvatar: '',
+        teacherName: ''
+      },
+      detailVisiable: false,
+      activeRow: null as any,
+      index: 0
+    });
+    const timer = ref<[number, number]>([
+      getNowDateAndMonday(new Date().getTime()),
+      getNowDateAndSunday(new Date().getTime())
+    ]);
+    const TrainingDetailsRef = ref();
+    const route = useRoute();
+    const routerList = ref([
+      { name: '班级管理', path: '/classList' },
+      { name: route.query.name, path: '/classDetail' },
+      { name: route.query.teacherName, path: '/afterWorkDetail' }
+    ] as any);
+
+    const search = () => {
+      state.pagination.page = 1;
+      getList();
+      console.log('search', state);
+    };
+
+    const onReset = () => {
+      state.searchForm = { keyword: '', trainingStatus: '' as any };
+      timer.value = [
+        getNowDateAndMonday(new Date().getTime()),
+        getNowDateAndSunday(new Date().getTime())
+      ];
+      search();
+    };
+    const getList = async (type?: string, page?: number) => {
+      state.loading = true;
+      try {
+        const res = await getTrainingStudentList({
+          classGroupId: route.query.classGroupId || '',
+          trainingId: route.query.trainingId,
+          ...state.searchForm,
+          ...state.pagination,
+          page: page || state.pagination.page
+          // ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
+        });
+
+        state.tableList = res.data.rows;
+        state.pagination.page = res.data.current;
+        state.pagination.pageTotal = res.data.total;
+        state.loading = false;
+
+        if (type === 'next') {
+          state.index = 0;
+          goToNext();
+        } else if (type === 'prev') {
+          state.index = state.tableList.length + 1;
+          gotoPre();
+        }
+      } catch (e) {
+        state.loading = false;
+        console.log(e);
+      }
+    };
+    const getWorkInfo = async () => {
+      try {
+        const res = await getWorkDetail({ trainingId: route.query.trainingId });
+        state.workInfo = { ...res.data };
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    const lookDetail = (row: any, index: number) => {
+      state.index = index + 1;
+      state.activeRow = row;
+      state.detailVisiable = true;
+    };
+    onMounted(() => {
+      getWorkInfo();
+      getList();
+    });
+    const columns = () => {
+      return [
+        {
+          title: '学生姓名',
+          key: 'studentName'
+        },
+        {
+          title: '最后提交时间',
+          key: 'submitTime',
+          render(row: any) {
+            return row.submitTime
+              ? dayjs(row.submitTime).format('YYYY-MM-DD')
+              : '--';
+          }
+        },
+        {
+          title: '作业状态',
+          key: 'sex',
+          render(row: any) {
+            return (
+              <div>
+                {row.trainingStatus == 'UNSUBMITTED' ? (
+                  <p class={styles.nosub}>未提交</p>
+                ) : null}
+                {row.trainingStatus == 'SUBMITTED' ? (
+                  <p class={styles.ison}>不合格</p>
+                ) : null}
+                {row.trainingStatus == 'TARGET' ? (
+                  <p class={styles.isok}>合格</p>
+                ) : null}
+              </div>
+            );
+          }
+        },
+        {
+          title: '操作',
+          key: 'id',
+          render(row: any, index: number) {
+            return (
+              <NButton
+                text
+                type="primary"
+                onClick={() => {
+                  lookDetail(row, index);
+                }}>
+                详情
+              </NButton>
+            );
+          }
+        }
+      ];
+    };
+
+    const goToNext = () => {
+      if (state.index >= state.tableList.length) {
+        getList('next', state.pagination.page + 1);
+      } else {
+        ++state.index;
+        state.activeRow = state.tableList[state.index - 1];
+        TrainingDetailsRef.value.getTrainingDetail(
+          state.activeRow.studentLessonTrainingId
+        );
+      }
+    };
+    const gotoPre = () => {
+      if (state.index === 1 && state.pagination.page !== 1) {
+        getList('prev', state.pagination.page - 1);
+      } else {
+        --state.index;
+        state.activeRow = state.tableList[state.index - 1];
+        TrainingDetailsRef.value.getTrainingDetail(
+          state.activeRow.studentLessonTrainingId
+        );
+      }
+    };
+
+    const currentStudentIndex = computed(() => {
+      return state.index + (state.pagination.page - 1) * state.pagination.rows;
+    });
+    return () => (
+      <div>
+        <CBreadcrumb list={routerList.value}></CBreadcrumb>
+        <div class={styles.listWrap}>
+          <div class={styles.teacherList}>
+            <div class={styles.teacherHeader}>
+              <div class={styles.teacherHeaderBorder}>
+                <NImage
+                  class={styles.teacherHeaderImg}
+                  src={
+                    state.workInfo.teacherAvatar
+                      ? state.workInfo.teacherAvatar
+                      : defultHeade
+                  }
+                  previewDisabled></NImage>
+              </div>
+            </div>
+            <div class={styles.workafterInfo}>
+              <h4>{state.workInfo.teacherName}</h4>
+              <p>
+                布置时间：
+                {state.workInfo.createTime
+                  ? dayjs(state.workInfo.createTime).format('YYYY-MM-DD HH:mm')
+                  : '--'}{' '}
+                |{' '}
+                <span>
+                  截止时间：
+                  {state.workInfo.expireDate
+                    ? dayjs(state.workInfo.expireDate).format(
+                        'YYYY-MM-DD HH:mm'
+                      )
+                    : '--'}
+                </span>
+              </p>
+            </div>
+          </div>
+          <div class={styles.searchList}>
+            <NForm label-placement="left" inline>
+              <NFormItem>
+                <SearchInput
+                  {...{ placeholder: '请输入学生姓名' }}
+                  class={styles.searchInput}
+                  searchWord={state.searchForm.keyword}
+                  onChangeValue={(val: string) =>
+                    (state.searchForm.keyword = val)
+                  }></SearchInput>
+              </NFormItem>
+
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label: '全部状态',
+                        value: ''
+                      },
+                      ...trainingStatusArray
+                    ],
+                    placeholder: '作业状态',
+                    clearable: true,
+                    inline: true
+                  } as any)}
+                  v-model:value={state.searchForm.trainingStatus}></CSelect>
+              </NFormItem>
+              {/* <NFormItem>
+                <CDatePicker
+                  v-model:value={timer.value}
+                  separator={'至'}
+                  type="daterange"
+                  timerValue={timer.value}></CDatePicker>
+              </NFormItem> */}
+
+              <NFormItem>
+                <NSpace justify="end">
+                  <NButton type="primary" class="searchBtn" onClick={search}>
+                    搜索
+                  </NButton>
+                  <NButton
+                    type="primary"
+                    ghost
+                    class="resetBtn"
+                    onClick={onReset}>
+                    重置
+                  </NButton>
+                </NSpace>
+              </NFormItem>
+            </NForm>
+          </div>
+          {/* <NButton
+          class={styles.addBtn}
+          type="primary"
+          v-slots={{
+            icon: () => (
+              <>
+                <NImage class={styles.addBtnIcon} src={add}></NImage>
+              </>
+            )
+          }}>
+          新增学生
+        </NButton> */}
+          <div class={styles.tableWrap}>
+            <NDataTable
+              v-slots={{
+                empty: () => <TheEmpty></TheEmpty>
+              }}
+              class={styles.classTable}
+              loading={state.loading}
+              columns={columns()}
+              data={state.tableList}></NDataTable>
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              sync
+            />
+          </div>
+        </div>
+        <NModal
+          v-model:show={state.detailVisiable}
+          preset="card"
+          class={['modalTitle background', styles.wordDetailModel]}
+          title={'作业详情'}>
+          <TrainingDetails
+            onNext={() => goToNext()}
+            onPre={() => gotoPre()}
+            ref={TrainingDetailsRef}
+            onClose={() => (state.detailVisiable = false)}
+            total={state.pagination.pageTotal}
+            current={currentStudentIndex.value}
+            activeRow={state.activeRow}></TrainingDetails>
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/homework-record/detail/index.tsx

@@ -1,431 +1,452 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NDataTable,
-  NForm,
-  NFormItem,
-  NImage,
-  NModal,
-  NProgress,
-  NSpace
-} from 'naive-ui';
-import SearchInput from '@/components/searchInput';
-import CSelect from '@/components/CSelect';
-import Pagination from '@/components/pagination';
-import { api_trainingDetail, api_trainingStudentList } from '../api';
-import { useRoute } from 'vue-router';
-import CBreadcrumb from '/src/components/CBreadcrumb';
-import defultHeade from '@/components/layout/images/teacherIcon.png';
-import { trainingStatusArray } from '@/utils/searchArray';
-import dayjs from 'dayjs';
-import TheEmpty from '/src/components/TheEmpty';
-import TrainingDetails from '../../classList/modals/TrainingDetails';
-export default defineComponent({
-  name: 'homewrok-record-detail',
-  setup() {
-    const route = useRoute();
-    const state = reactive({
-      searchForm: {
-        keyword: '',
-        trainingStatus: '' as any,
-        classGroupId: '' as any
-      },
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 10,
-        pageTotal: 4
-      },
-      studentClassList: [] as any,
-      tableList: [] as any,
-      workInfo: {} as any,
-      detailVisiable: false,
-      activeRow: null as any,
-      index: 0
-    });
-    const TrainingDetailsRef = ref();
-    const routerList = ref([
-      { name: '作业', path: '/homework-record' },
-      { name: route.query.name, path: '/homework-record-detail' }
-    ] as any);
-
-    const search = () => {
-      state.pagination.page = 1;
-      getList();
-    };
-
-    const onReset = () => {
-      state.searchForm = {
-        keyword: '',
-        trainingStatus: '' as any,
-        classGroupId: '' as any
-      };
-      search();
-    };
-    const getList = async () => {
-      state.loading = true;
-      try {
-        const res = await api_trainingStudentList({
-          trainingId: route.query.id,
-          ...state.searchForm,
-          ...state.pagination
-        });
-        state.tableList = res.data.rows;
-        state.pagination.pageTotal = res.data.total;
-        state.loading = false;
-      } catch (e) {
-        state.loading = false;
-        console.log(e);
-      }
-    };
-    const getWorkInfo = async () => {
-      try {
-        const res = await api_trainingDetail({ id: route.query.id });
-        const result = res.data || {};
-        // state.workInfo
-        let pTitle = '';
-        let eTitle = '';
-        if (
-          result.studentLessonTrainingDetails &&
-          result.studentLessonTrainingDetails.length > 0
-        ) {
-          result.studentLessonTrainingDetails.forEach((child: any) => {
-            // if (child.trainingType === 'PRACTICE' && child.musicName) {
-            //   pTitle += pTitle ? '、' + child.musicName : child.musicName;
-            // }
-            // if (child.trainingType === 'EVALUATION' && child.musicName) {
-            //   eTitle += eTitle ? '、' + child.musicName : child.musicName;
-            // }
-
-            if (child.trainingType === 'PRACTICE' && child.musicName) {
-              pTitle += pTitle
-                ? '、《' + child.musicName + '》'
-                : '练习曲目《' + child.musicName + '》';
-            }
-            if (child.trainingType === 'EVALUATION' && child.musicName) {
-              eTitle += eTitle
-                ? '、《' + child.musicName + '》'
-                : '评测曲目《' + child.musicName + '》';
-            }
-          });
-        }
-        result.pTitle = pTitle;
-        result.eTitle = eTitle;
-        state.workInfo = result;
-
-        // 班级列表
-        const classList = result.studentClassGroup || [];
-        classList.forEach((item: any) => {
-          state.studentClassList.push({
-            label: item.name,
-            value: item.id
-          });
-        });
-      } catch (e) {
-        console.log(e);
-      }
-    };
-
-    const lookDetail = (row: any, index: number) => {
-      console.log(index, 'index');
-      state.index = index + 1;
-      state.activeRow = row;
-      state.detailVisiable = true;
-    };
-    onMounted(() => {
-      getWorkInfo();
-      getList();
-    });
-    const columns = () => {
-      return [
-        {
-          title: '学生姓名',
-          key: 'studentName'
-        },
-        {
-          title: '最后提交时间',
-          key: 'submitTime',
-          render(row: any) {
-            return row.submitTime
-              ? dayjs(row.submitTime).format('YYYY-MM-DD')
-              : '--';
-          }
-        },
-        {
-          title: '所属班级',
-          key: 'classGroupName'
-        },
-        {
-          title: '作业状态',
-          key: 'sex',
-          render(row: any) {
-            return (
-              <div>
-                {row.trainingStatus == 'UNSUBMITTED' ? (
-                  <p class={styles.nosub}>未提交</p>
-                ) : null}
-                {row.trainingStatus == 'SUBMITTED' ? (
-                  <p class={styles.ison}>不合格</p>
-                ) : null}
-                {row.trainingStatus == 'TARGET' ? (
-                  <p class={styles.isok}>合格</p>
-                ) : null}
-              </div>
-            );
-          }
-        },
-        {
-          title: '操作',
-          key: 'id',
-          render(row: any, index: number) {
-            return (
-              <NButton
-                text
-                type="primary"
-                onClick={() => {
-                  lookDetail(row, index);
-                }}>
-                详情
-              </NButton>
-            );
-          }
-        }
-      ];
-    };
-
-    const goToNext = () => {
-      ++state.index;
-      state.activeRow = state.tableList[state.index - 1];
-      TrainingDetailsRef.value.getTrainingDetail(
-        state.activeRow.studentLessonTrainingId
-      );
-    };
-    const gotoPre = () => {
-      --state.index;
-      state.activeRow = state.tableList[state.index - 1];
-      TrainingDetailsRef.value.getTrainingDetail(
-        state.activeRow.studentLessonTrainingId
-      );
-    };
-
-    return () => (
-      <div>
-        <CBreadcrumb list={routerList.value}></CBreadcrumb>
-        <div class={styles.listWrap}>
-          <div class={styles.teacherSection}>
-            <div class={styles.teacherList}>
-              <div class={styles.tTemp}>
-                <div class={styles.teacherHeader}>
-                  <div class={styles.teacherHeaderBorder}>
-                    <NImage
-                      class={styles.teacherHeaderImg}
-                      src={state.workInfo.teacherAvatar || defultHeade}
-                      previewDisabled></NImage>
-                  </div>
-                </div>
-                <div class={styles.workafterInfo}>
-                  <h4>{state.workInfo.teacherName}</h4>
-                  {state.workInfo.createTime && (
-                    <p>
-                      布置时间：
-                      {state.workInfo.createTime &&
-                        dayjs(state.workInfo.createTime).format(
-                          'YYYY-MM-DD HH:mm'
-                        )}{' '}
-                      |{' '}
-                      <span>
-                        截止时间：
-                        {state.workInfo.expireDate &&
-                          dayjs(state.workInfo.expireDate).format(
-                            'YYYY-MM-DD HH:mm'
-                          )}
-                      </span>
-                    </p>
-                  )}
-                </div>
-              </div>
-              <div class={styles.infos}>
-                <div class={styles.homeTitle}>{state.workInfo.name}</div>
-                <div class={[styles.homeContent, styles.homeworkText]}>
-                  <div class={styles.pSection}>
-                    {state.workInfo.pTitle && (
-                      <p class={[styles.text, styles.p1]}>
-                        {state.workInfo.pTitle}
-                      </p>
-                    )}
-                    {state.workInfo.eTitle && (
-                      <p class={[styles.text, styles.p2]}>
-                        {state.workInfo.eTitle}
-                      </p>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div>
-              <div class={styles.stitcTitle}>作业完成情况</div>
-              <div class={styles.stitcConent}>
-                <NSpace size={[38, 0]}>
-                  <NProgress
-                    percentage={state.workInfo.trainingRate || 0}
-                    // percentage={20}
-                    offset-degree={180}
-                    type="circle"
-                    strokeWidth={6}
-                    rail-color={'EDEFFA'}
-                    color={'#64A5FF'}>
-                    <div class={styles.contentRect}>
-                      <div class={styles.nums}>
-                        {state.workInfo.trainingNum || 0}
-                        <i>/</i>
-                        {state.workInfo.expectNum || 0}
-                        <span>人</span>
-                      </div>
-                      <div class={styles.text}>已提交</div>
-                    </div>
-                  </NProgress>
-                  <NProgress
-                    percentage={state.workInfo.trainingRate || 0}
-                    offset-degree={180}
-                    strokeWidth={6}
-                    type="circle"
-                    rail-color={'EDEFFA'}
-                    color={'#64A5FF'}>
-                    <div class={styles.contentRect}>
-                      <div class={styles.nums}>
-                        {state.workInfo.trainingRate || 0}%
-                      </div>
-                      <div class={styles.text}>提交率</div>
-                    </div>
-                  </NProgress>
-                  <NProgress
-                    percentage={state.workInfo.qualifiedRate || 0}
-                    offset-degree={180}
-                    strokeWidth={6}
-                    type="circle"
-                    rail-color={'EDEFFA'}
-                    color={'#40CEAE'}>
-                    <div class={styles.contentRect}>
-                      <div class={styles.nums}>
-                        {state.workInfo.standardNum || 0}
-                        <span>人</span>
-                      </div>
-                      <div class={styles.text}>合格人数</div>
-                    </div>
-                  </NProgress>
-                  <NProgress
-                    percentage={state.workInfo.qualifiedRate || 0}
-                    offset-degree={180}
-                    strokeWidth={6}
-                    type="circle"
-                    rail-color={'EDEFFA'}
-                    color={'#40CEAE'}>
-                    <div class={styles.contentRect}>
-                      <div class={styles.nums}>
-                        {state.workInfo.qualifiedRate || 0}%
-                      </div>
-                      <div class={styles.text}>合格率</div>
-                    </div>
-                  </NProgress>
-                </NSpace>
-              </div>
-            </div>
-          </div>
-          <div class={styles.searchList}>
-            <NForm label-placement="left" inline>
-              <NFormItem>
-                <SearchInput
-                  {...{ placeholder: '请输入学生姓名' }}
-                  class={styles.searchInput}
-                  searchWord={state.searchForm.keyword}
-                  onChangeValue={(val: string) =>
-                    (state.searchForm.keyword = val)
-                  }></SearchInput>
-              </NFormItem>
-
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label: '全部班级',
-                        value: ''
-                      },
-                      ...state.studentClassList
-                    ],
-                    placeholder: '全部班级',
-                    clearable: true,
-                    inline: true
-                  } as any)}
-                  v-model:value={state.searchForm.classGroupId}></CSelect>
-              </NFormItem>
-              <NFormItem>
-                <CSelect
-                  {...({
-                    options: [
-                      {
-                        label: '全部状态',
-                        value: ''
-                      },
-                      ...trainingStatusArray
-                    ],
-                    placeholder: '作业状态',
-                    clearable: true,
-                    inline: true
-                  } as any)}
-                  v-model:value={state.searchForm.trainingStatus}></CSelect>
-              </NFormItem>
-
-              <NFormItem>
-                <NSpace justify="end">
-                  <NButton type="primary" class="searchBtn" onClick={search}>
-                    搜索
-                  </NButton>
-                  <NButton
-                    type="primary"
-                    ghost
-                    class="resetBtn"
-                    onClick={onReset}>
-                    重置
-                  </NButton>
-                </NSpace>
-              </NFormItem>
-            </NForm>
-          </div>
-          <div class={styles.tableWrap}>
-            <NDataTable
-              v-slots={{
-                empty: () => <TheEmpty></TheEmpty>
-              }}
-              class={styles.classTable}
-              loading={state.loading}
-              columns={columns()}
-              data={state.tableList}></NDataTable>
-            <Pagination
-              v-model:page={state.pagination.page}
-              v-model:pageSize={state.pagination.rows}
-              v-model:pageTotal={state.pagination.pageTotal}
-              onList={getList}
-              // sync
-            />
-          </div>
-        </div>
-        <NModal
-          v-model:show={state.detailVisiable}
-          preset="card"
-          class={['modalTitle background', styles.wordDetailModel]}
-          title={'作业详情'}>
-          <TrainingDetails
-            onNext={() => goToNext()}
-            onPre={() => gotoPre()}
-            ref={TrainingDetailsRef}
-            onClose={() => (state.detailVisiable = false)}
-            total={state.tableList.length}
-            current={state.index}
-            activeRow={state.activeRow}></TrainingDetails>
-        </NModal>
-      </div>
-    );
-  }
-});
+import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NImage,
+  NModal,
+  NProgress,
+  NSpace
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CSelect from '@/components/CSelect';
+import Pagination from '@/components/pagination';
+import { api_trainingDetail, api_trainingStudentList } from '../api';
+import { useRoute } from 'vue-router';
+import CBreadcrumb from '/src/components/CBreadcrumb';
+import defultHeade from '@/components/layout/images/teacherIcon.png';
+import { trainingStatusArray } from '@/utils/searchArray';
+import dayjs from 'dayjs';
+import TheEmpty from '/src/components/TheEmpty';
+import TrainingDetails from '../../classList/modals/TrainingDetails';
+export default defineComponent({
+  name: 'homewrok-record-detail',
+  setup() {
+    const route = useRoute();
+    const state = reactive({
+      searchForm: {
+        keyword: '',
+        trainingStatus: '' as any,
+        classGroupId: '' as any
+      },
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 4
+      },
+      studentClassList: [] as any,
+      tableList: [] as any,
+      workInfo: {} as any,
+      detailVisiable: false,
+      activeRow: null as any,
+      index: 0
+    });
+    const TrainingDetailsRef = ref();
+    const routerList = ref([
+      { name: '作业', path: '/homework-record' },
+      { name: route.query.name, path: '/homework-record-detail' }
+    ] as any);
+
+    const search = () => {
+      state.pagination.page = 1;
+      getList();
+    };
+
+    const onReset = () => {
+      state.searchForm = {
+        keyword: '',
+        trainingStatus: '' as any,
+        classGroupId: '' as any
+      };
+      search();
+    };
+    const getList = async (type?: string, page?: number) => {
+      state.loading = true;
+      try {
+        const res = await api_trainingStudentList({
+          trainingId: route.query.id,
+          ...state.searchForm,
+          ...state.pagination,
+          page: page || state.pagination.page
+        });
+        state.tableList = res.data.rows;
+        state.pagination.pageTotal = res.data.total;
+        state.pagination.page = res.data.current;
+        state.loading = false;
+        if (type === 'next') {
+          state.index = 0;
+          goToNext();
+        } else if (type === 'prev') {
+          state.index = state.tableList.length + 1;
+          gotoPre();
+        }
+      } catch (e) {
+        state.loading = false;
+        console.log(e);
+      }
+    };
+    const getWorkInfo = async () => {
+      try {
+        const res = await api_trainingDetail({ id: route.query.id });
+        const result = res.data || {};
+        // state.workInfo
+        let pTitle = '';
+        let eTitle = '';
+        if (
+          result.studentLessonTrainingDetails &&
+          result.studentLessonTrainingDetails.length > 0
+        ) {
+          result.studentLessonTrainingDetails.forEach((child: any) => {
+            // if (child.trainingType === 'PRACTICE' && child.musicName) {
+            //   pTitle += pTitle ? '、' + child.musicName : child.musicName;
+            // }
+            // if (child.trainingType === 'EVALUATION' && child.musicName) {
+            //   eTitle += eTitle ? '、' + child.musicName : child.musicName;
+            // }
+
+            if (child.trainingType === 'PRACTICE' && child.musicName) {
+              pTitle += pTitle
+                ? '、《' + child.musicName + '》'
+                : '练习曲目《' + child.musicName + '》';
+            }
+            if (child.trainingType === 'EVALUATION' && child.musicName) {
+              eTitle += eTitle
+                ? '、《' + child.musicName + '》'
+                : '评测曲目《' + child.musicName + '》';
+            }
+          });
+        }
+        result.pTitle = pTitle;
+        result.eTitle = eTitle;
+        state.workInfo = result;
+
+        // 班级列表
+        const classList = result.studentClassGroup || [];
+        classList.forEach((item: any) => {
+          state.studentClassList.push({
+            label: item.name,
+            value: item.id
+          });
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    const lookDetail = (row: any, index: number) => {
+      console.log(index, 'index');
+      state.index = index + 1;
+      state.activeRow = row;
+      state.detailVisiable = true;
+    };
+    onMounted(() => {
+      getWorkInfo();
+      getList();
+    });
+    const columns = () => {
+      return [
+        {
+          title: '学生姓名',
+          key: 'studentName'
+        },
+        {
+          title: '最后提交时间',
+          key: 'submitTime',
+          render(row: any) {
+            return row.submitTime
+              ? dayjs(row.submitTime).format('YYYY-MM-DD')
+              : '--';
+          }
+        },
+        {
+          title: '所属班级',
+          key: 'classGroupName'
+        },
+        {
+          title: '作业状态',
+          key: 'sex',
+          render(row: any) {
+            return (
+              <div>
+                {row.trainingStatus == 'UNSUBMITTED' ? (
+                  <p class={styles.nosub}>未提交</p>
+                ) : null}
+                {row.trainingStatus == 'SUBMITTED' ? (
+                  <p class={styles.ison}>不合格</p>
+                ) : null}
+                {row.trainingStatus == 'TARGET' ? (
+                  <p class={styles.isok}>合格</p>
+                ) : null}
+              </div>
+            );
+          }
+        },
+        {
+          title: '操作',
+          key: 'id',
+          render(row: any, index: number) {
+            return (
+              <NButton
+                text
+                type="primary"
+                onClick={() => {
+                  lookDetail(row, index);
+                }}>
+                详情
+              </NButton>
+            );
+          }
+        }
+      ];
+    };
+
+    const goToNext = () => {
+      if (state.index >= state.tableList.length) {
+        getList('next', state.pagination.page + 1);
+      } else {
+        ++state.index;
+        state.activeRow = state.tableList[state.index - 1];
+        TrainingDetailsRef.value.getTrainingDetail(
+          state.activeRow.studentLessonTrainingId
+        );
+      }
+    };
+    const gotoPre = () => {
+      if (state.index === 1 && state.pagination.page !== 1) {
+        getList('prev', state.pagination.page - 1);
+      } else {
+        --state.index;
+        state.activeRow = state.tableList[state.index - 1];
+        TrainingDetailsRef.value.getTrainingDetail(
+          state.activeRow.studentLessonTrainingId
+        );
+      }
+    };
+
+    const currentStudentIndex = computed(() => {
+      return state.index + (state.pagination.page - 1) * state.pagination.rows;
+    });
+
+    return () => (
+      <div>
+        <CBreadcrumb list={routerList.value}></CBreadcrumb>
+        <div class={styles.listWrap}>
+          <div class={styles.teacherSection}>
+            <div class={styles.teacherList}>
+              <div class={styles.tTemp}>
+                <div class={styles.teacherHeader}>
+                  <div class={styles.teacherHeaderBorder}>
+                    <NImage
+                      class={styles.teacherHeaderImg}
+                      src={state.workInfo.teacherAvatar || defultHeade}
+                      previewDisabled></NImage>
+                  </div>
+                </div>
+                <div class={styles.workafterInfo}>
+                  <h4>{state.workInfo.teacherName}</h4>
+                  {state.workInfo.createTime && (
+                    <p>
+                      布置时间：
+                      {state.workInfo.createTime &&
+                        dayjs(state.workInfo.createTime).format(
+                          'YYYY-MM-DD HH:mm'
+                        )}{' '}
+                      |{' '}
+                      <span>
+                        截止时间：
+                        {state.workInfo.expireDate &&
+                          dayjs(state.workInfo.expireDate).format(
+                            'YYYY-MM-DD HH:mm'
+                          )}
+                      </span>
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div class={styles.infos}>
+                <div class={styles.homeTitle}>{state.workInfo.name}</div>
+                <div class={[styles.homeContent, styles.homeworkText]}>
+                  <div class={styles.pSection}>
+                    {state.workInfo.pTitle && (
+                      <p class={[styles.text, styles.p1]}>
+                        {state.workInfo.pTitle}
+                      </p>
+                    )}
+                    {state.workInfo.eTitle && (
+                      <p class={[styles.text, styles.p2]}>
+                        {state.workInfo.eTitle}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div class={styles.stitcTitle}>作业完成情况</div>
+              <div class={styles.stitcConent}>
+                <NSpace size={[38, 0]}>
+                  <NProgress
+                    percentage={state.workInfo.trainingRate || 0}
+                    // percentage={20}
+                    offset-degree={180}
+                    type="circle"
+                    strokeWidth={6}
+                    rail-color={'EDEFFA'}
+                    color={'#64A5FF'}>
+                    <div class={styles.contentRect}>
+                      <div class={styles.nums}>
+                        {state.workInfo.trainingNum || 0}
+                        <i>/</i>
+                        {state.workInfo.expectNum || 0}
+                        <span>人</span>
+                      </div>
+                      <div class={styles.text}>已提交</div>
+                    </div>
+                  </NProgress>
+                  <NProgress
+                    percentage={state.workInfo.trainingRate || 0}
+                    offset-degree={180}
+                    strokeWidth={6}
+                    type="circle"
+                    rail-color={'EDEFFA'}
+                    color={'#64A5FF'}>
+                    <div class={styles.contentRect}>
+                      <div class={styles.nums}>
+                        {state.workInfo.trainingRate || 0}%
+                      </div>
+                      <div class={styles.text}>提交率</div>
+                    </div>
+                  </NProgress>
+                  <NProgress
+                    percentage={state.workInfo.qualifiedRate || 0}
+                    offset-degree={180}
+                    strokeWidth={6}
+                    type="circle"
+                    rail-color={'EDEFFA'}
+                    color={'#40CEAE'}>
+                    <div class={styles.contentRect}>
+                      <div class={styles.nums}>
+                        {state.workInfo.standardNum || 0}
+                        <span>人</span>
+                      </div>
+                      <div class={styles.text}>合格人数</div>
+                    </div>
+                  </NProgress>
+                  <NProgress
+                    percentage={state.workInfo.qualifiedRate || 0}
+                    offset-degree={180}
+                    strokeWidth={6}
+                    type="circle"
+                    rail-color={'EDEFFA'}
+                    color={'#40CEAE'}>
+                    <div class={styles.contentRect}>
+                      <div class={styles.nums}>
+                        {state.workInfo.qualifiedRate || 0}%
+                      </div>
+                      <div class={styles.text}>合格率</div>
+                    </div>
+                  </NProgress>
+                </NSpace>
+              </div>
+            </div>
+          </div>
+          <div class={styles.searchList}>
+            <NForm label-placement="left" inline>
+              <NFormItem>
+                <SearchInput
+                  {...{ placeholder: '请输入学生姓名' }}
+                  class={styles.searchInput}
+                  searchWord={state.searchForm.keyword}
+                  onChangeValue={(val: string) =>
+                    (state.searchForm.keyword = val)
+                  }></SearchInput>
+              </NFormItem>
+
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label: '全部班级',
+                        value: ''
+                      },
+                      ...state.studentClassList
+                    ],
+                    placeholder: '全部班级',
+                    clearable: true,
+                    inline: true
+                  } as any)}
+                  v-model:value={state.searchForm.classGroupId}></CSelect>
+              </NFormItem>
+              <NFormItem>
+                <CSelect
+                  {...({
+                    options: [
+                      {
+                        label: '全部状态',
+                        value: ''
+                      },
+                      ...trainingStatusArray
+                    ],
+                    placeholder: '作业状态',
+                    clearable: true,
+                    inline: true
+                  } as any)}
+                  v-model:value={state.searchForm.trainingStatus}></CSelect>
+              </NFormItem>
+
+              <NFormItem>
+                <NSpace justify="end">
+                  <NButton type="primary" class="searchBtn" onClick={search}>
+                    搜索
+                  </NButton>
+                  <NButton
+                    type="primary"
+                    ghost
+                    class="resetBtn"
+                    onClick={onReset}>
+                    重置
+                  </NButton>
+                </NSpace>
+              </NFormItem>
+            </NForm>
+          </div>
+          <div class={styles.tableWrap}>
+            <NDataTable
+              v-slots={{
+                empty: () => <TheEmpty></TheEmpty>
+              }}
+              class={styles.classTable}
+              loading={state.loading}
+              columns={columns()}
+              data={state.tableList}></NDataTable>
+            <Pagination
+              v-model:page={state.pagination.page}
+              v-model:pageSize={state.pagination.rows}
+              v-model:pageTotal={state.pagination.pageTotal}
+              onList={getList}
+              // sync
+            />
+          </div>
+        </div>
+        <NModal
+          v-model:show={state.detailVisiable}
+          preset="card"
+          class={['modalTitle background', styles.wordDetailModel]}
+          title={'作业详情'}>
+          <TrainingDetails
+            onNext={() => goToNext()}
+            onPre={() => gotoPre()}
+            ref={TrainingDetailsRef}
+            onClose={() => (state.detailVisiable = false)}
+            total={state.pagination.pageTotal}
+            current={currentStudentIndex.value}
+            activeRow={state.activeRow}></TrainingDetails>
+        </NModal>
+      </div>
+    );
+  }
+});

src/views/homework-record/index.tsx

@@ -573,7 +573,7 @@ export default defineComponent({
               v-model:pageSize={state.pagination.rows}
               v-model:pageTotal={state.pagination.pageTotal}
               onList={getList}
-              sync
+              // sync
             />
           )}
         </div>