修改分布

src/components/pagination/index.tsx

@@ -1,177 +1,178 @@
-import { Searchs } from '@/utils/searchs';
-import { NPagination } from 'naive-ui';
-import {
-  PropType,
-  computed,
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  reactive,
-  ref,
-  watch
-} from 'vue';
-import { useRoute } from 'vue-router';
-import styles from './index.module.less';
-
-export default defineComponent({
-  name: 'table-container',
-  props: {
-    page: {
-      type: Number,
-      default: 1,
-      required: true
-    },
-    pageSize: {
-      type: Number,
-      default: 10
-    },
-    pageTotal: {
-      type: Number,
-      default: 0
-    },
-    saveKey: {
-      type: String,
-      default: ''
-    },
-    sync: {
-      type: Boolean,
-      default: false
-    },
-    checkedRowKeysRef: {
-      type: Object
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    pageSizes: {
-      type: Array as PropType<any>,
-      default: () => [10, 20, 30, 40]
-    }
-  },
-  emits: ['update:page', 'update:pageSize', 'list'],
-  setup(props, { emit }) {
-    const route = useRoute();
-    const state = reactive({
-      pageInformation: null as any
-    });
-
-    const pageCount = ref(0);
-
-    pageCount.value = Math.ceil(props.pageTotal / props.pageSize);
-
-    // 当前页发生改变时的回调函数
-    const onUpdatePage = (page: number) => {
-      emit('update:page', page);
-      emit('list');
-
-      syncStore();
-    };
-    // 当前分页大小发生改变时的回调函数
-    const onUpdatePageSize = (pageSize: number) => {
-      emit('update:pageSize', pageSize);
-      emit('list');
-
-      syncStore();
-    };
-
-    onMounted(() => {
-      if (props.sync) {
-        const searchs = new Searchs(props.saveKey || route.path);
-        const active = searchs.get(props.saveKey || route.path);
-        state.pageInformation = active;
-        if (active && active.page) {
-          for (const key in active.page) {
-            if (
-              // eslint-disable-next-line no-prototype-builtins
-              active.page.hasOwnProperty(key) &&
-              ['page', 'pageSize'].includes(key)
-            ) {
-              const item = active.page[key];
-              const tempKey = `update:${key}` as any;
-              emit(tempKey, item);
-            }
-          }
-        }
-        if (props.saveKey) {
-          searchs.update(route.path, undefined, 'bind');
-        }
-      }
-      window.addEventListener('watchStorage', watchStorage);
-    });
-
-    onUnmounted(() => {
-      window.removeEventListener('watchStorage', watchStorage);
-    });
-
-    watch(
-      () => props.pageSize,
-      () => {
-        pageCount.value = Math.ceil(props.pageTotal / props.pageSize);
-        syncStore();
-      }
-    );
-    watch(
-      () => props.page,
-      () => {
-        syncStore();
-      }
-    );
-    watch(
-      () => props.pageTotal,
-      () => {
-        pageCount.value = Math.ceil(props.pageTotal / props.pageSize);
-        syncStore();
-      }
-    );
-
-    const currentPage = computed({
-      get() {
-        return props.page;
-      },
-      set(val) {
-        emit('update:page', val);
-      }
-    });
-
-    const syncStore = () => {
-      if (props.sync) {
-        const searchs = new Searchs(props.saveKey || route.path);
-        searchs.update(
-          {
-            page: props.page,
-            pageCount: pageCount.value,
-            pageSize: props.pageSize,
-            saveKey: props.saveKey
-          },
-          undefined,
-          'page'
-        );
-      }
-    };
-
-    const watchStorage = () => {
-      const page =
-        state.pageInformation && state.pageInformation.page
-          ? state.pageInformation.page
-          : null;
-      currentPage.value = page && page.page ? page.page : 1;
-    };
-
-    return () => (
-      <NPagination
-        disabled={props.disabled}
-        class={styles.pagination}
-        v-model:page={props.page}
-        displayOrder={['quick-jumper', 'pages', 'size-picker']}
-        pageCount={pageCount.value}
-        showQuickJumper
-        showSizePicker
-        pageSize={props.pageSize}
-        prefix={() => `共 ${props.pageTotal} 条`}
-        pageSizes={props.pageSizes}
-        onUpdatePage={onUpdatePage}
-        onUpdatePageSize={onUpdatePageSize}></NPagination>
-    );
-  }
-});
+import { Searchs } from '@/utils/searchs';
+import { NPagination } from 'naive-ui';
+import {
+  PropType,
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import { useRoute } from 'vue-router';
+import styles from './index.module.less';
+
+export default defineComponent({
+  name: 'table-container',
+  props: {
+    page: {
+      type: Number,
+      default: 1,
+      required: true
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    pageTotal: {
+      type: Number,
+      default: 0
+    },
+    saveKey: {
+      type: String,
+      default: ''
+    },
+    sync: {
+      type: Boolean,
+      default: false
+    },
+    checkedRowKeysRef: {
+      type: Object
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    pageSizes: {
+      type: Array as PropType<any>,
+      default: () => [10, 20, 30, 40]
+    }
+  },
+  emits: ['update:page', 'update:pageSize', 'list'],
+  setup(props, { emit }) {
+    const route = useRoute();
+    const state = reactive({
+      pageInformation: null as any
+    });
+
+    const pageCount = ref(0);
+
+    pageCount.value = Math.ceil(props.pageTotal / props.pageSize);
+
+    // 当前页发生改变时的回调函数
+    const onUpdatePage = (page: number) => {
+      emit('update:page', page);
+      emit('list');
+
+      syncStore();
+    };
+    // 当前分页大小发生改变时的回调函数
+    const onUpdatePageSize = (pageSize: number) => {
+      emit('update:pageSize', pageSize);
+      emit('update:page', 1);
+      emit('list');
+
+      syncStore();
+    };
+
+    onMounted(() => {
+      if (props.sync) {
+        const searchs = new Searchs(props.saveKey || route.path);
+        const active = searchs.get(props.saveKey || route.path);
+        state.pageInformation = active;
+        if (active && active.page) {
+          for (const key in active.page) {
+            if (
+              // eslint-disable-next-line no-prototype-builtins
+              active.page.hasOwnProperty(key) &&
+              ['page', 'pageSize'].includes(key)
+            ) {
+              const item = active.page[key];
+              const tempKey = `update:${key}` as any;
+              emit(tempKey, item);
+            }
+          }
+        }
+        if (props.saveKey) {
+          searchs.update(route.path, undefined, 'bind');
+        }
+      }
+      window.addEventListener('watchStorage', watchStorage);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('watchStorage', watchStorage);
+    });
+
+    watch(
+      () => props.pageSize,
+      () => {
+        pageCount.value = Math.ceil(props.pageTotal / props.pageSize);
+        syncStore();
+      }
+    );
+    watch(
+      () => props.page,
+      () => {
+        syncStore();
+      }
+    );
+    watch(
+      () => props.pageTotal,
+      () => {
+        pageCount.value = Math.ceil(props.pageTotal / props.pageSize);
+        syncStore();
+      }
+    );
+
+    const currentPage = computed({
+      get() {
+        return props.page;
+      },
+      set(val) {
+        emit('update:page', val);
+      }
+    });
+
+    const syncStore = () => {
+      if (props.sync) {
+        const searchs = new Searchs(props.saveKey || route.path);
+        searchs.update(
+          {
+            page: props.page,
+            pageCount: pageCount.value,
+            pageSize: props.pageSize,
+            saveKey: props.saveKey
+          },
+          undefined,
+          'page'
+        );
+      }
+    };
+
+    const watchStorage = () => {
+      const page =
+        state.pageInformation && state.pageInformation.page
+          ? state.pageInformation.page
+          : null;
+      currentPage.value = page && page.page ? page.page : 1;
+    };
+
+    return () => (
+      <NPagination
+        disabled={props.disabled}
+        class={styles.pagination}
+        v-model:page={props.page}
+        displayOrder={['quick-jumper', 'pages', 'size-picker']}
+        pageCount={pageCount.value}
+        showQuickJumper
+        showSizePicker
+        pageSize={props.pageSize}
+        prefix={() => `共 ${props.pageTotal} 条`}
+        pageSizes={props.pageSizes}
+        onUpdatePage={onUpdatePage}
+        onUpdatePageSize={onUpdatePageSize}></NPagination>
+    );
+  }
+});

src/views/classList/index.tsx

@@ -1,721 +1,722 @@
-import { defineComponent, reactive, onMounted, ref } from 'vue';
-import styles from './index.module.less';
-import {
-  NButton,
-  NCascader,
-  NDataTable,
-  NForm,
-  NFormItem,
-  NImage,
-  NModal,
-  NSpace,
-  useMessage
-} from 'naive-ui';
-import SearchInput from '@/components/searchInput';
-import CSelect from '@/components/CSelect';
-import Pagination from '@/components/pagination';
-import { classGroupList, deleteClass, getSubject, addGroup } from './api';
-import CreateClass from './modals/createClass';
-import RestStudentBox from './modals/restStudentBox';
-import { getgradeNumList, classArray } from './contants';
-import add from '@/views/studentList/images/add.png';
-import ClassGuide from '@/custom-plugins/guide-page/class-guide';
-import { useRoute, useRouter } from 'vue-router';
-import TheEmpty from '/src/components/TheEmpty';
-import TheTooltip from '/src/components/TheTooltip';
-import PreviewWindow from '../preview-window';
-import ResetSubject from './modals/resetSubject';
-import UpdateSubject from './modals/updateSubject';
-import { getGradeLevelList, getGradeYearList } from '../home/api';
-import { initCache, setCache } from '/src/hooks/use-async';
-import AddStudentModel from '../studentList/modals/addStudentModel';
-import { useUserStore } from '/src/store/modules/users';
-import { useCatchStore } from '/src/store/modules/catchData';
-export default defineComponent({
-  name: 'class-classList',
-  setup() {
-    const catchData = useCatchStore();
-    const users = useUserStore();
-    const state = reactive({
-      searchForm: {
-        keyword: null as any,
-        currentClass: '',
-        currentGradeNum: '',
-        instrumentId: '',
-        gradeYear: '',
-        gradeLevel: ''
-      },
-      orchestraType: null,
-      courseTypeCode: null,
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 10,
-        pageTotal: 6
-      },
-      gradeNumList: [] as any,
-      tableList: [] as any,
-      studentVisible: false,
-      activeRow: null as any,
-      showaddClass: false,
-      goCourseVisiable: false,
-      removeVisiable: false,
-      removeRow: {} as any,
-      previewModal: false,
-      previewParams: {} as any,
-      lastCourse: null as any,
-      groupBtnLoading: false, // 按钮是否在请求中
-      // subjectList: [] as any,
-      showResetClass: false,
-      showSubjectClass: false,
-      groupVisiable: false,
-      popSelectYearList: [] as any,
-      popSelectLevelList: [] as any,
-      addStudentVisible: false
-    });
-    const formRef = ref();
-    const message = useMessage();
-    const router = useRouter();
-    const route = useRoute();
-    const search = () => {
-      state.pagination.page = 1;
-      getList();
-      setCache({ current: state.searchForm, saveKey: route.path });
-    };
-    const showGuide = ref(false);
-    state.gradeNumList = getgradeNumList();
-    const onReset = () => {
-      state.searchForm = {
-        keyword: null as any,
-        currentClass: '' as any,
-        currentGradeNum: '' as any,
-        instrumentId: '' as any,
-        gradeYear: '' as any,
-        gradeLevel: ''
-      };
-      if (state.popSelectYearList.length > 1) {
-        state.searchForm.gradeYear = state.popSelectYearList[1].id;
-      }
-      getList();
-      setCache({ current: state.searchForm, saveKey: route.path });
-    };
-
-    const removeClass = async () => {
-      try {
-        await deleteClass({ ids: state.removeRow.id });
-        getList();
-        message.success(`删除成功`);
-        state.removeVisiable = false;
-      } catch (e) {
-        console.log(e);
-      }
-    };
-    const getList = async () => {
-      // classGroupList
-      state.loading = true;
-      try {
-        const res = await classGroupList({
-          ...state.searchForm,
-          ...state.pagination
-        });
-        state.tableList = res.data.rows;
-        state.pagination.pageTotal = res.data.total;
-        state.loading = false;
-
-        setTimeout(() => {
-          if (state.tableList.length > 0) {
-            showGuide.value = true;
-          }
-        }, 500);
-      } catch (e) {
-        state.loading = false;
-        console.log(e);
-      }
-    };
-    // const getSubjectList = async () => {
-    //   const res = await getSubject({ page: 1, rows: 9999 });
-    //   state.subjectList = res.data.rows.map((item: any) => {
-    //     return {
-    //       value: item.id,
-    //       label: item.name
-    //     };
-    //   });
-    //   state.subjectList.unshift({ value: '', label: '全部声部' });
-    // };
-    const columns = () => {
-      return [
-        {
-          title: '班级名称',
-          key: 'name'
-        },
-        {
-          title: '学年',
-          key: 'gradeYear'
-        },
-        {
-          title: '学级',
-          key: 'gradeLevel',
-          render(row: any) {
-            return row.gradeLevel ? `${row.gradeLevel}级` : '';
-          }
-        },
-        {
-          title: '班级乐器',
-          key: 'instrumentName'
-        },
-        {
-          title: '学生人数',
-          key: 'preStudentNum'
-        },
-        {
-          title: '上次学习',
-          key: 'lastStudy',
-          width: '20%',
-          render(row: any) {
-            return row.lastStudy ? (
-              <TheTooltip
-                maxWidth={300}
-                showContentWidth={300}
-                content={row.lastStudy}
-              />
-            ) : (
-              '--'
-            );
-          }
-        },
-        {
-          title: '操作',
-          key: 'id',
-
-          render(row: any, index: number) {
-            return (
-              <div>
-                <NSpace>
-                  {index == 0 ? (
-                    <div id="class-0">
-                      <NButton
-                        type="primary"
-                        text
-                        onClick={() => {
-                          router.push({
-                            path: '/classDetail',
-                            query: {
-                              name: row.name,
-                              id: row.id,
-                              gradeYear: row.gradeYear,
-                              upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
-                            }
-                          });
-                        }}>
-                        详情
-                      </NButton>
-                    </div>
-                  ) : (
-                    <NButton
-                      type="primary"
-                      text
-                      onClick={() => {
-                        router.push({
-                          path: '/classDetail',
-                          query: {
-                            name: row.name,
-                            id: row.id,
-                            gradeYear: row.gradeYear,
-                            upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
-                          }
-                        });
-                      }}>
-                      详情
-                    </NButton>
-                  )}
-                  <NButton
-                    type="primary"
-                    disabled={!row.upgradeFlag || row.instrumentId}
-                    text
-                    onClick={() => resetClassSubject(row)}>
-                    修改乐器
-                  </NButton>
-                  {index == 0 ? (
-                    <NButton
-                      type="primary"
-                      disabled={!row.upgradeFlag}
-                      {...{ id: 'class-1' }}
-                      text
-                      onClick={() => {
-                        startResetStudent(row);
-                      }}>
-                      学生调整
-                    </NButton>
-                  ) : (
-                    <NButton
-                      type="primary"
-                      disabled={!row.upgradeFlag}
-                      text
-                      onClick={() => {
-                        startResetStudent(row);
-                      }}>
-                      学生调整
-                    </NButton>
-                  )}
-                  {index == 0 ? (
-                    <NButton
-                      {...{ id: 'class-2' }}
-                      disabled={!row.upgradeFlag}
-                      type="primary"
-                      text
-                      onClick={() => classesBegin(row)}>
-                      开始上课
-                    </NButton>
-                  ) : (
-                    <NButton
-                      disabled={!row.upgradeFlag}
-                      type="primary"
-                      text
-                      onClick={() => classesBegin(row)}>
-                      开始上课
-                    </NButton>
-                  )}
-
-                  {/* <p
-                      style={{ color: '#EA4132', cursor: 'pointer' }}
-                      onClick={() => {
-                        state.removeVisiable = true;
-                        state.removeRow = row;
-                      }}>
-                      删除
-                    </p> */}
-                  {!(row.preStudentNum > 0) ? (
-                    <NButton
-                      type="error"
-                      color="#EA4132"
-                      textColor="#EA4132"
-                      text
-                      onClick={() => {
-                        state.removeVisiable = true;
-                        state.removeRow = row;
-                      }}>
-                      删除
-                    </NButton>
-                  ) : null}
-                  {row.imGroupId ? null : (
-                    <NButton
-                      type="primary"
-                      disabled={!row.upgradeFlag}
-                      text
-                      onClick={() => {
-                        createImgroup(row);
-                      }}>
-                      创建群聊
-                    </NButton>
-                  )}
-                  <NButton
-                    type="primary"
-                    disabled={!row.upgradeFlag}
-                    text
-                    onClick={() => {
-                      const { schoolInfos } = users.getUserInfo;
-                      const schoolId =
-                        schoolInfos.length > 0 ? schoolInfos[0].id : null;
-                      if (schoolId) {
-                        state.addStudentVisible = true;
-                        state.activeRow = {
-                          id: schoolId,
-                          classId: row.id,
-                          currentGradeNum: row.currentGradeNum,
-                          currentClass: row.currentClass,
-                          gradeYear: row.gradeYear
-                        };
-                      }
-                    }}>
-                    邀请学生
-                  </NButton>
-                </NSpace>
-              </div>
-            );
-          }
-        }
-      ];
-    };
-
-    const startResetStudent = (row: any) => {
-      state.activeRow = row;
-      state.studentVisible = true;
-    };
-
-    const classesBegin = async (row: any) => {
-      try {
-        // 判断是否有声部
-        if (row.instrumentId) {
-          //
-          // 声部先取上次上课的声部，如果没有则取班级上面的声部
-          router.push({
-            path: '/prepare-lessons',
-            query: {
-              lastUseCoursewareId: row.lessonCoursewareId,
-              unit: row.lessonCoursewareKnowledgeDetailId,
-              instrumentId: row.instrumentId,
-              courseScheduleSubjectId: row.courseScheduleSubjectId,
-              preStudentNum: row.preStudentNum,
-              name: row.name, // 班级名称
-              classGroupId: row.id // 班级编号
-            }
-          });
-        } else {
-          state.showSubjectClass = true;
-          state.activeRow = row;
-        }
-      } catch (e) {
-        console.log(e);
-      }
-    };
-
-    const resetClassSubject = (row: any) => {
-      state.activeRow = row;
-      state.showResetClass = true;
-    };
-    const createImgroup = async (row: any) => {
-      state.activeRow = row;
-      state.groupVisiable = true;
-    };
-
-    const submitGroup = async () => {
-      console.log(state.activeRow, 'row');
-      state.groupBtnLoading = true;
-      try {
-        await addGroup({ classGroupId: state.activeRow.id });
-        message.success('创建成功');
-        state.groupVisiable = false;
-        await getList();
-      } catch (e) {
-        console.log(e);
-      }
-      state.groupBtnLoading = false;
-    };
-
-    // 获取学年
-    const getYearList = async () => {
-      try {
-        const { data } = await getGradeYearList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '学年';
-        });
-        // temp.unshift({
-        //   id: '',
-        //   name: '全部学年'
-        // });
-        state.popSelectYearList = temp || [];
-        if (temp.length > 1 && !state.searchForm.gradeYear) {
-          state.searchForm.gradeYear = temp[1].id;
-        }
-      } catch {
-        //
-      }
-    };
-    // 获取学级
-    const getLevelList = async () => {
-      try {
-        const { data } = await getGradeLevelList();
-        const temp = data || [];
-        temp.forEach((i: any) => {
-          i.name = i.name + '级';
-        });
-        temp.unshift({
-          id: '',
-          name: '全部学级'
-        });
-        state.popSelectLevelList = temp || [];
-        if (temp.length > 0 && !state.searchForm.gradeLevel) {
-          state.searchForm.gradeLevel = temp[0].id;
-        }
-      } catch {
-        //
-      }
-    };
-
-    initCache({
-      current: state.searchForm,
-      callBack: (active: any) => {
-        state.searchForm = active;
-      }
-    });
-
-    onMounted(async () => {
-      state.loading = true;
-      await catchData.getSubjects();
-
-      // getSubjectList();
-      await getYearList();
-      await getLevelList();
-      await getList();
-
-      state.loading = false;
-    });
-    return () => (
-      <div class={styles.listWrap}>
-        <div class={styles.searchList}>
-          <NForm label-placement="left" inline ref={formRef}>
-            <NFormItem>
-              <SearchInput
-                {...{ placeholder: '请输入班级名称' }}
-                class={styles.searchInput}
-                searchWord={state.searchForm.keyword}
-                onChangeValue={(val: string) =>
-                  (state.searchForm.keyword = val)
-                }></SearchInput>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.popSelectYearList,
-                  placeholder: '选择学年',
-                  clearable: false,
-                  inline: true,
-                  labelField: 'name',
-                  valueField: 'id'
-                } as any)}
-                v-model:value={state.searchForm.gradeYear}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.popSelectLevelList,
-                  placeholder: '选择学级',
-                  clearable: true,
-                  inline: true,
-                  labelField: 'name',
-                  valueField: 'id'
-                } as any)}
-                v-model:value={state.searchForm.gradeLevel}></CSelect>
-            </NFormItem>
-
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: state.gradeNumList,
-                  placeholder: '选择年级',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.currentGradeNum}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              <CSelect
-                {...({
-                  options: classArray,
-                  placeholder: '选择班级',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.currentClass}></CSelect>
-            </NFormItem>
-            <NFormItem>
-              {/* <CSelect
-                {...({
-                  options: [
-                    { value: '', label: '全部声部' },
-                    ...catchData.getSubjectList
-                  ],
-                  placeholder: '选择乐器',
-                  clearable: true,
-                  inline: true
-                } as any)}
-                v-model:value={state.searchForm.instrumentId}></CSelect> */}
-              <NCascader
-                to="body"
-                placeholder="选择乐器"
-                options={[
-                  { value: '', label: '全部乐器' },
-                  ...catchData.getSubjectList
-                ]}
-                childrenField="instruments"
-                checkStrategy="child"
-                expandTrigger="hover"
-                showPath={false}
-                v-model:value={state.searchForm.instrumentId}
-                onUpdate:value={(val: any, option: any, pathValues: any) => {
-                  console.log(val, option, pathValues);
-                }}
-              />
-            </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"
-          onClick={() => (state.showaddClass = true)}
-          v-slots={{
-            icon: () => (
-              <>
-                <NImage
-                  class={styles.addBtnIcon}
-                  previewDisabled
-                  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>
-        <NModal
-          v-model:show={state.studentVisible}
-          preset="card"
-          class={['modalTitle background', styles.studentVisible]}
-          title={'学生调整'}>
-          <RestStudentBox
-            activeRow={state.activeRow}
-            onClose={() => (state.studentVisible = false)}
-            onGetList={() => getList()}></RestStudentBox>
-        </NModal>
-        <NModal
-          v-model:show={state.showaddClass}
-          style={{ width: '500px' }}
-          display-directive="if"
-          preset="card"
-          class={['modalTitle background']}
-          title={'创建班级'}>
-          <CreateClass
-            gradeYearList={state.popSelectYearList}
-            gradeNumList={state.gradeNumList}
-            classArray={classArray}
-            onGetList={() => getList()}
-            onClose={() => (state.showaddClass = false)}
-          />
-        </NModal>
-        <NModal
-          v-model:show={state.showResetClass}
-          style={{ width: '500px' }}
-          display-directive="if"
-          preset="card"
-          class={['modalTitle background']}
-          title={'修改乐器'}>
-          <ResetSubject
-            activeRow={state.activeRow}
-            onGetList={() => getList()}
-            onClose={() => (state.showResetClass = false)}
-          />
-        </NModal>
-
-        <NModal
-          v-model:show={state.showSubjectClass}
-          style={{ width: '500px' }}
-          preset="card"
-          class={['modalTitle background']}
-          title={'修改乐器'}>
-          {state.showSubjectClass ? (
-            <UpdateSubject
-              activeRow={state.activeRow}
-              onGetList={() => getList()}
-              onConfirm={(item: any) => {
-                //
-                router.push({
-                  path: '/prepare-lessons',
-                  query: {
-                    ...item
-                  }
-                });
-              }}
-              onClose={() => (state.showSubjectClass = false)}
-            />
-          ) : null}
-        </NModal>
-
-        {/* 上课弹窗 */}
-        <PreviewWindow
-          v-model:show={state.previewModal}
-          type="attend"
-          params={state.previewParams}
-        />
-
-        <NModal
-          v-model:show={state.removeVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable]}
-          title={'删除班级'}>
-          <div class={styles.studentRemove}>
-            <p>
-              确定要删除班级么？
-              <span>删除班级信息将会清空</span>。
-            </p>
-
-            <NSpace class={styles.btnGroup} justify="center">
-              <NButton round type="primary" onClick={removeClass}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (state.removeVisiable = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-
-        <NModal
-          v-model:show={state.groupVisiable}
-          preset="card"
-          class={['modalTitle', styles.removeVisiable]}
-          title={'创建群聊'}>
-          <div class={styles.studentRemove}>
-            <p style={{ textAlign: 'center' }}>是否创建班级群聊</p>
-
-            <NSpace class={styles.btnGroup} justify="center">
-              <NButton
-                round
-                type="primary"
-                onClick={submitGroup}
-                loading={state.groupBtnLoading}
-                disabled={state.groupBtnLoading}>
-                确定
-              </NButton>
-              <NButton round onClick={() => (state.groupVisiable = false)}>
-                取消
-              </NButton>
-            </NSpace>
-          </div>
-        </NModal>
-        {showGuide.value ? <ClassGuide></ClassGuide> : null}
-
-        {state.addStudentVisible ? (
-          <div
-            v-model:show={state.addStudentVisible}
-            class={['n-modal-mask', styles.popBox]}>
-            <AddStudentModel
-              activeRow={state.activeRow}
-              onClose={() => {
-                state.addStudentVisible = false;
-              }}></AddStudentModel>
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-});
+import { defineComponent, reactive, onMounted, ref } from 'vue';
+import styles from './index.module.less';
+import {
+  NButton,
+  NCascader,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NImage,
+  NModal,
+  NSpace,
+  useMessage
+} from 'naive-ui';
+import SearchInput from '@/components/searchInput';
+import CSelect from '@/components/CSelect';
+import Pagination from '@/components/pagination';
+import { classGroupList, deleteClass, getSubject, addGroup } from './api';
+import CreateClass from './modals/createClass';
+import RestStudentBox from './modals/restStudentBox';
+import { getgradeNumList, classArray } from './contants';
+import add from '@/views/studentList/images/add.png';
+import ClassGuide from '@/custom-plugins/guide-page/class-guide';
+import { useRoute, useRouter } from 'vue-router';
+import TheEmpty from '/src/components/TheEmpty';
+import TheTooltip from '/src/components/TheTooltip';
+import PreviewWindow from '../preview-window';
+import ResetSubject from './modals/resetSubject';
+import UpdateSubject from './modals/updateSubject';
+import { getGradeLevelList, getGradeYearList } from '../home/api';
+import { initCache, setCache } from '/src/hooks/use-async';
+import AddStudentModel from '../studentList/modals/addStudentModel';
+import { useUserStore } from '/src/store/modules/users';
+import { useCatchStore } from '/src/store/modules/catchData';
+export default defineComponent({
+  name: 'class-classList',
+  setup() {
+    const catchData = useCatchStore();
+    const users = useUserStore();
+    const state = reactive({
+      searchForm: {
+        keyword: null as any,
+        currentClass: '',
+        currentGradeNum: '',
+        instrumentId: '',
+        gradeYear: '',
+        gradeLevel: ''
+      },
+      orchestraType: null,
+      courseTypeCode: null,
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 6
+      },
+      gradeNumList: [] as any,
+      tableList: [] as any,
+      studentVisible: false,
+      activeRow: null as any,
+      showaddClass: false,
+      goCourseVisiable: false,
+      removeVisiable: false,
+      removeRow: {} as any,
+      previewModal: false,
+      previewParams: {} as any,
+      lastCourse: null as any,
+      groupBtnLoading: false, // 按钮是否在请求中
+      // subjectList: [] as any,
+      showResetClass: false,
+      showSubjectClass: false,
+      groupVisiable: false,
+      popSelectYearList: [] as any,
+      popSelectLevelList: [] as any,
+      addStudentVisible: false
+    });
+    const formRef = ref();
+    const message = useMessage();
+    const router = useRouter();
+    const route = useRoute();
+    const search = () => {
+      state.pagination.page = 1;
+      getList();
+      setCache({ current: state.searchForm, saveKey: route.path });
+    };
+    const showGuide = ref(false);
+    state.gradeNumList = getgradeNumList();
+    const onReset = () => {
+      state.searchForm = {
+        keyword: null as any,
+        currentClass: '' as any,
+        currentGradeNum: '' as any,
+        instrumentId: '' as any,
+        gradeYear: '' as any,
+        gradeLevel: ''
+      };
+      if (state.popSelectYearList.length > 1) {
+        state.searchForm.gradeYear = state.popSelectYearList[1].id;
+      }
+      state.pagination.page = 1;
+      getList();
+      setCache({ current: state.searchForm, saveKey: route.path });
+    };
+
+    const removeClass = async () => {
+      try {
+        await deleteClass({ ids: state.removeRow.id });
+        getList();
+        message.success(`删除成功`);
+        state.removeVisiable = false;
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    const getList = async () => {
+      // classGroupList
+      state.loading = true;
+      try {
+        const res = await classGroupList({
+          ...state.searchForm,
+          ...state.pagination
+        });
+        state.tableList = res.data.rows;
+        state.pagination.pageTotal = res.data.total;
+        state.loading = false;
+
+        setTimeout(() => {
+          if (state.tableList.length > 0) {
+            showGuide.value = true;
+          }
+        }, 500);
+      } catch (e) {
+        state.loading = false;
+        console.log(e);
+      }
+    };
+    // const getSubjectList = async () => {
+    //   const res = await getSubject({ page: 1, rows: 9999 });
+    //   state.subjectList = res.data.rows.map((item: any) => {
+    //     return {
+    //       value: item.id,
+    //       label: item.name
+    //     };
+    //   });
+    //   state.subjectList.unshift({ value: '', label: '全部声部' });
+    // };
+    const columns = () => {
+      return [
+        {
+          title: '班级名称',
+          key: 'name'
+        },
+        {
+          title: '学年',
+          key: 'gradeYear'
+        },
+        {
+          title: '学级',
+          key: 'gradeLevel',
+          render(row: any) {
+            return row.gradeLevel ? `${row.gradeLevel}级` : '';
+          }
+        },
+        {
+          title: '班级乐器',
+          key: 'instrumentName'
+        },
+        {
+          title: '学生人数',
+          key: 'preStudentNum'
+        },
+        {
+          title: '上次学习',
+          key: 'lastStudy',
+          width: '20%',
+          render(row: any) {
+            return row.lastStudy ? (
+              <TheTooltip
+                maxWidth={300}
+                showContentWidth={300}
+                content={row.lastStudy}
+              />
+            ) : (
+              '--'
+            );
+          }
+        },
+        {
+          title: '操作',
+          key: 'id',
+
+          render(row: any, index: number) {
+            return (
+              <div>
+                <NSpace>
+                  {index == 0 ? (
+                    <div id="class-0">
+                      <NButton
+                        type="primary"
+                        text
+                        onClick={() => {
+                          router.push({
+                            path: '/classDetail',
+                            query: {
+                              name: row.name,
+                              id: row.id,
+                              gradeYear: row.gradeYear,
+                              upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
+                            }
+                          });
+                        }}>
+                        详情
+                      </NButton>
+                    </div>
+                  ) : (
+                    <NButton
+                      type="primary"
+                      text
+                      onClick={() => {
+                        router.push({
+                          path: '/classDetail',
+                          query: {
+                            name: row.name,
+                            id: row.id,
+                            gradeYear: row.gradeYear,
+                            upgradeFlag: row.upgradeFlag ? 1 : 0 // 是否为历史班
+                          }
+                        });
+                      }}>
+                      详情
+                    </NButton>
+                  )}
+                  <NButton
+                    type="primary"
+                    disabled={!row.upgradeFlag || row.instrumentId}
+                    text
+                    onClick={() => resetClassSubject(row)}>
+                    修改乐器
+                  </NButton>
+                  {index == 0 ? (
+                    <NButton
+                      type="primary"
+                      disabled={!row.upgradeFlag}
+                      {...{ id: 'class-1' }}
+                      text
+                      onClick={() => {
+                        startResetStudent(row);
+                      }}>
+                      学生调整
+                    </NButton>
+                  ) : (
+                    <NButton
+                      type="primary"
+                      disabled={!row.upgradeFlag}
+                      text
+                      onClick={() => {
+                        startResetStudent(row);
+                      }}>
+                      学生调整
+                    </NButton>
+                  )}
+                  {index == 0 ? (
+                    <NButton
+                      {...{ id: 'class-2' }}
+                      disabled={!row.upgradeFlag}
+                      type="primary"
+                      text
+                      onClick={() => classesBegin(row)}>
+                      开始上课
+                    </NButton>
+                  ) : (
+                    <NButton
+                      disabled={!row.upgradeFlag}
+                      type="primary"
+                      text
+                      onClick={() => classesBegin(row)}>
+                      开始上课
+                    </NButton>
+                  )}
+
+                  {/* <p
+                      style={{ color: '#EA4132', cursor: 'pointer' }}
+                      onClick={() => {
+                        state.removeVisiable = true;
+                        state.removeRow = row;
+                      }}>
+                      删除
+                    </p> */}
+                  {!(row.preStudentNum > 0) ? (
+                    <NButton
+                      type="error"
+                      color="#EA4132"
+                      textColor="#EA4132"
+                      text
+                      onClick={() => {
+                        state.removeVisiable = true;
+                        state.removeRow = row;
+                      }}>
+                      删除
+                    </NButton>
+                  ) : null}
+                  {row.imGroupId ? null : (
+                    <NButton
+                      type="primary"
+                      disabled={!row.upgradeFlag}
+                      text
+                      onClick={() => {
+                        createImgroup(row);
+                      }}>
+                      创建群聊
+                    </NButton>
+                  )}
+                  <NButton
+                    type="primary"
+                    disabled={!row.upgradeFlag}
+                    text
+                    onClick={() => {
+                      const { schoolInfos } = users.getUserInfo;
+                      const schoolId =
+                        schoolInfos.length > 0 ? schoolInfos[0].id : null;
+                      if (schoolId) {
+                        state.addStudentVisible = true;
+                        state.activeRow = {
+                          id: schoolId,
+                          classId: row.id,
+                          currentGradeNum: row.currentGradeNum,
+                          currentClass: row.currentClass,
+                          gradeYear: row.gradeYear
+                        };
+                      }
+                    }}>
+                    邀请学生
+                  </NButton>
+                </NSpace>
+              </div>
+            );
+          }
+        }
+      ];
+    };
+
+    const startResetStudent = (row: any) => {
+      state.activeRow = row;
+      state.studentVisible = true;
+    };
+
+    const classesBegin = async (row: any) => {
+      try {
+        // 判断是否有声部
+        if (row.instrumentId) {
+          //
+          // 声部先取上次上课的声部，如果没有则取班级上面的声部
+          router.push({
+            path: '/prepare-lessons',
+            query: {
+              lastUseCoursewareId: row.lessonCoursewareId,
+              unit: row.lessonCoursewareKnowledgeDetailId,
+              instrumentId: row.instrumentId,
+              courseScheduleSubjectId: row.courseScheduleSubjectId,
+              preStudentNum: row.preStudentNum,
+              name: row.name, // 班级名称
+              classGroupId: row.id // 班级编号
+            }
+          });
+        } else {
+          state.showSubjectClass = true;
+          state.activeRow = row;
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    };
+
+    const resetClassSubject = (row: any) => {
+      state.activeRow = row;
+      state.showResetClass = true;
+    };
+    const createImgroup = async (row: any) => {
+      state.activeRow = row;
+      state.groupVisiable = true;
+    };
+
+    const submitGroup = async () => {
+      console.log(state.activeRow, 'row');
+      state.groupBtnLoading = true;
+      try {
+        await addGroup({ classGroupId: state.activeRow.id });
+        message.success('创建成功');
+        state.groupVisiable = false;
+        await getList();
+      } catch (e) {
+        console.log(e);
+      }
+      state.groupBtnLoading = false;
+    };
+
+    // 获取学年
+    const getYearList = async () => {
+      try {
+        const { data } = await getGradeYearList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '学年';
+        });
+        // temp.unshift({
+        //   id: '',
+        //   name: '全部学年'
+        // });
+        state.popSelectYearList = temp || [];
+        if (temp.length > 1 && !state.searchForm.gradeYear) {
+          state.searchForm.gradeYear = temp[1].id;
+        }
+      } catch {
+        //
+      }
+    };
+    // 获取学级
+    const getLevelList = async () => {
+      try {
+        const { data } = await getGradeLevelList();
+        const temp = data || [];
+        temp.forEach((i: any) => {
+          i.name = i.name + '级';
+        });
+        temp.unshift({
+          id: '',
+          name: '全部学级'
+        });
+        state.popSelectLevelList = temp || [];
+        if (temp.length > 0 && !state.searchForm.gradeLevel) {
+          state.searchForm.gradeLevel = temp[0].id;
+        }
+      } catch {
+        //
+      }
+    };
+
+    initCache({
+      current: state.searchForm,
+      callBack: (active: any) => {
+        state.searchForm = active;
+      }
+    });
+
+    onMounted(async () => {
+      state.loading = true;
+      await catchData.getSubjects();
+
+      // getSubjectList();
+      await getYearList();
+      await getLevelList();
+      await getList();
+
+      state.loading = false;
+    });
+    return () => (
+      <div class={styles.listWrap}>
+        <div class={styles.searchList}>
+          <NForm label-placement="left" inline ref={formRef}>
+            <NFormItem>
+              <SearchInput
+                {...{ placeholder: '请输入班级名称' }}
+                class={styles.searchInput}
+                searchWord={state.searchForm.keyword}
+                onChangeValue={(val: string) =>
+                  (state.searchForm.keyword = val)
+                }></SearchInput>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.popSelectYearList,
+                  placeholder: '选择学年',
+                  clearable: false,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.gradeYear}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.popSelectLevelList,
+                  placeholder: '选择学级',
+                  clearable: true,
+                  inline: true,
+                  labelField: 'name',
+                  valueField: 'id'
+                } as any)}
+                v-model:value={state.searchForm.gradeLevel}></CSelect>
+            </NFormItem>
+
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: state.gradeNumList,
+                  placeholder: '选择年级',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.currentGradeNum}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              <CSelect
+                {...({
+                  options: classArray,
+                  placeholder: '选择班级',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.currentClass}></CSelect>
+            </NFormItem>
+            <NFormItem>
+              {/* <CSelect
+                {...({
+                  options: [
+                    { value: '', label: '全部声部' },
+                    ...catchData.getSubjectList
+                  ],
+                  placeholder: '选择乐器',
+                  clearable: true,
+                  inline: true
+                } as any)}
+                v-model:value={state.searchForm.instrumentId}></CSelect> */}
+              <NCascader
+                to="body"
+                placeholder="选择乐器"
+                options={[
+                  { value: '', label: '全部乐器' },
+                  ...catchData.getSubjectList
+                ]}
+                childrenField="instruments"
+                checkStrategy="child"
+                expandTrigger="hover"
+                showPath={false}
+                v-model:value={state.searchForm.instrumentId}
+                onUpdate:value={(val: any, option: any, pathValues: any) => {
+                  console.log(val, option, pathValues);
+                }}
+              />
+            </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"
+          onClick={() => (state.showaddClass = true)}
+          v-slots={{
+            icon: () => (
+              <>
+                <NImage
+                  class={styles.addBtnIcon}
+                  previewDisabled
+                  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>
+        <NModal
+          v-model:show={state.studentVisible}
+          preset="card"
+          class={['modalTitle background', styles.studentVisible]}
+          title={'学生调整'}>
+          <RestStudentBox
+            activeRow={state.activeRow}
+            onClose={() => (state.studentVisible = false)}
+            onGetList={() => getList()}></RestStudentBox>
+        </NModal>
+        <NModal
+          v-model:show={state.showaddClass}
+          style={{ width: '500px' }}
+          display-directive="if"
+          preset="card"
+          class={['modalTitle background']}
+          title={'创建班级'}>
+          <CreateClass
+            gradeYearList={state.popSelectYearList}
+            gradeNumList={state.gradeNumList}
+            classArray={classArray}
+            onGetList={() => getList()}
+            onClose={() => (state.showaddClass = false)}
+          />
+        </NModal>
+        <NModal
+          v-model:show={state.showResetClass}
+          style={{ width: '500px' }}
+          display-directive="if"
+          preset="card"
+          class={['modalTitle background']}
+          title={'修改乐器'}>
+          <ResetSubject
+            activeRow={state.activeRow}
+            onGetList={() => getList()}
+            onClose={() => (state.showResetClass = false)}
+          />
+        </NModal>
+
+        <NModal
+          v-model:show={state.showSubjectClass}
+          style={{ width: '500px' }}
+          preset="card"
+          class={['modalTitle background']}
+          title={'修改乐器'}>
+          {state.showSubjectClass ? (
+            <UpdateSubject
+              activeRow={state.activeRow}
+              onGetList={() => getList()}
+              onConfirm={(item: any) => {
+                //
+                router.push({
+                  path: '/prepare-lessons',
+                  query: {
+                    ...item
+                  }
+                });
+              }}
+              onClose={() => (state.showSubjectClass = false)}
+            />
+          ) : null}
+        </NModal>
+
+        {/* 上课弹窗 */}
+        <PreviewWindow
+          v-model:show={state.previewModal}
+          type="attend"
+          params={state.previewParams}
+        />
+
+        <NModal
+          v-model:show={state.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'删除班级'}>
+          <div class={styles.studentRemove}>
+            <p>
+              确定要删除班级么？
+              <span>删除班级信息将会清空</span>。
+            </p>
+
+            <NSpace class={styles.btnGroup} justify="center">
+              <NButton round type="primary" onClick={removeClass}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+
+        <NModal
+          v-model:show={state.groupVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'创建群聊'}>
+          <div class={styles.studentRemove}>
+            <p style={{ textAlign: 'center' }}>是否创建班级群聊</p>
+
+            <NSpace class={styles.btnGroup} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={submitGroup}
+                loading={state.groupBtnLoading}
+                disabled={state.groupBtnLoading}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.groupVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+        {showGuide.value ? <ClassGuide></ClassGuide> : null}
+
+        {state.addStudentVisible ? (
+          <div
+            v-model:show={state.addStudentVisible}
+            class={['n-modal-mask', styles.popBox]}>
+            <AddStudentModel
+              activeRow={state.activeRow}
+              onClose={() => {
+                state.addStudentVisible = false;
+              }}></AddStudentModel>
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+});

src/views/homework-record/index.tsx

@@ -90,6 +90,7 @@ export default defineComponent({
     const onReset = () => {
       state.searchForm = {
         keyword: null as any,
+        homeworkType: '',
         currentClass: '' as any,
         currentGradeNum: '' as any,
         subjectId: '' as any,
@@ -105,6 +106,7 @@ export default defineComponent({
       }
       //
       setCache({ current: state.searchForm, saveKey: route.path });
+      state.pagination.page = 1;
       getList();
     };
 

src/views/studentList/components/evaluationRecords.tsx

@@ -1,259 +1,260 @@
-import { Ref, defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from '../index.module.less';
-import {
-  NButton,
-  NDataTable,
-  NForm,
-  NFormItem,
-  NModal,
-  NNumberAnimation,
-  NSpace,
-  NTag
-} from 'naive-ui';
-import { useECharts } from '@/hooks/web/useECharts';
-import Pagination from '/src/components/pagination';
-import { getPracticeRecordList } from '../api';
-import {
-  getNowDateAndMonday,
-  getNowDateAndSunday,
-  getTimes
-} from '/src/utils/dateFormat';
-import { vaildMusicScoreUrl, vaildUrl } from '@/utils/urlUtils';
-import CDatePicker from '/src/components/CDatePicker';
-import { useUserStore } from '/src/store/modules/users';
-import TheEmpty from '/src/components/TheEmpty';
-import { initCache, setCache } from '/src/hooks/use-async';
-import { iframeDislableKeyboard } from '/src/utils';
-export default defineComponent({
-  name: 'student-practiceData',
-  props: {
-    studentId: {
-      type: String,
-      default: ''
-    },
-    classGroupId: {
-      type: String,
-      default: ''
-    }
-  },
-  setup(props) {
-    const userStore = useUserStore();
-    const chartRef = ref<HTMLDivElement | null>(null);
-    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-    const practiceFlag = ref(true);
-    const payForm = reactive({
-      height: '360px',
-      width: '100%',
-      practiceDurationAvg: 0,
-      practiceDays: 0,
-      practiceDurationTotal: 0,
-      dateList: [],
-      timeList: [],
-      detailVisiable: false
-    });
-    const reportSrc = ref('');
-    const state = reactive({
-      loading: false,
-      pagination: {
-        page: 1,
-        rows: 10,
-        pageTotal: 4
-      },
-      tableList: [] as any,
-      goCourseVisiable: false
-    });
-    const timer = ref<[number, number]>([
-      getNowDateAndMonday(new Date().getTime()),
-      getNowDateAndSunday(new Date().getTime())
-    ]);
-    const columns = () => {
-      return [
-        {
-          title: '时间',
-          key: 'createTime'
-        },
-        {
-          title: '评测曲目',
-          key: 'musicSheetName',
-          render(row: any) {
-            return <span>{row.musicSheetName}</span>;
-          }
-        },
-        // 入门：BEGINNER/进阶：ADVANCED/大师：PERFORMER"
-        {
-          title: '评测难度',
-          key: 'heardLevel',
-          render(row: any) {
-            return (
-              <>
-                {row.heardLevel == null ? <span>--</span> : null}
-                {row.heardLevel == 'BEGINNER' ? (
-                  <NTag type="info">入门级</NTag>
-                ) : null}
-                {row.heardLevel == 'ADVANCED' ? (
-                  <NTag type="warning">进阶级</NTag>
-                ) : null}
-                {row.heardLevel == 'PERFORMER' ? (
-                  <NTag type="error">大师级</NTag>
-                ) : null}
-              </>
-            );
-          }
-        },
-        {
-          title: '评测分数',
-          key: 'score',
-          render(row: any) {
-            return <span>{row.score}</span>;
-          }
-        },
-        {
-          title: '音准',
-          key: 'intonation',
-          render(row: any) {
-            return <span>{row.intonation}</span>;
-          }
-        },
-        {
-          title: '节奏',
-          key: 'cadence',
-          render(row: any) {
-            return <span>{row.cadence}</span>;
-          }
-        },
-        {
-          title: '完整度',
-          key: 'integrity',
-          render(row: any) {
-            return <span>{row.integrity}</span>;
-          }
-        },
-        {
-          title: '操作',
-          key: 'id',
-          render(row: any) {
-            return (
-              <NButton
-                text
-                type="primary"
-                onClick={() => {
-                  gotoRecode(row);
-                }}>
-                评测报告
-              </NButton>
-            );
-          }
-        }
-      ];
-    };
-    const getList = async () => {
-      const res = await getPracticeRecordList({
-        userId: props.studentId,
-        ...state.pagination,
-        classGroupId: props.classGroupId,
-        feature: 'EVALUATION',
-        ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
-      });
-      state.tableList = res.data.rows;
-      state.pagination.pageTotal = res.data.total;
-    };
-    const gotoRecode = (row: any) => {
-      console.log(row.id, 'gotoRecode');
-      const tockn = userStore.getToken;
-      reportSrc.value =
-        vaildMusicScoreUrl() +
-        `/instrument/?v=${+new Date()}#/evaluat-report?v=${+new Date()}&id=${
-          row.id
-        }&platform=webTeacher&Authorization=${tockn}`;
-      payForm.detailVisiable = true;
-    };
-    const search = () => {
-      getList();
-      setCache({
-        current: { timer: timer.value },
-        saveKey: 'classStudentRecordEvaluationRecords'
-      });
-    };
-    const onReset = () => {
-      timer.value = [
-        getNowDateAndMonday(new Date().getTime()),
-        getNowDateAndSunday(new Date().getTime())
-      ];
-      search();
-      setCache({
-        current: { timer: timer.value },
-        saveKey: 'classStudentRecordEvaluationRecords'
-      });
-    };
-    initCache({
-      current: { timer: timer.value },
-      saveKey: 'classStudentRecordEvaluationRecords',
-      callBack: (active: any) => {
-        timer.value = active.timer;
-      }
-    });
-    const iframeRef = ref();
-    onMounted(() => {
-      getList();
-      console.log(props.studentId);
-    });
-    return () => (
-      <>
-        <NForm label-placement="left" inline>
-          <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 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>
-        <NModal
-          v-model:show={payForm.detailVisiable}
-          preset="card"
-          class={['modalTitle background', styles.reportModel]}
-          title={'评测报告'}>
-          <div class={styles.reportContainer} style={{ lineHeight: 0 }}>
-            <iframe
-              width={'100%'}
-              height={'450px'}
-              ref={iframeRef}
-              frameborder="0"
-              onLoad={(val: any) => {
-                iframeDislableKeyboard(val.target);
-              }}
-              src={reportSrc.value}></iframe>
-          </div>
-        </NModal>
-      </>
-    );
-  }
-});
+import { Ref, defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from '../index.module.less';
+import {
+  NButton,
+  NDataTable,
+  NForm,
+  NFormItem,
+  NModal,
+  NNumberAnimation,
+  NSpace,
+  NTag
+} from 'naive-ui';
+import { useECharts } from '@/hooks/web/useECharts';
+import Pagination from '/src/components/pagination';
+import { getPracticeRecordList } from '../api';
+import {
+  getNowDateAndMonday,
+  getNowDateAndSunday,
+  getTimes
+} from '/src/utils/dateFormat';
+import { vaildMusicScoreUrl, vaildUrl } from '@/utils/urlUtils';
+import CDatePicker from '/src/components/CDatePicker';
+import { useUserStore } from '/src/store/modules/users';
+import TheEmpty from '/src/components/TheEmpty';
+import { initCache, setCache } from '/src/hooks/use-async';
+import { iframeDislableKeyboard } from '/src/utils';
+export default defineComponent({
+  name: 'student-practiceData',
+  props: {
+    studentId: {
+      type: String,
+      default: ''
+    },
+    classGroupId: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const userStore = useUserStore();
+    const chartRef = ref<HTMLDivElement | null>(null);
+    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    const practiceFlag = ref(true);
+    const payForm = reactive({
+      height: '360px',
+      width: '100%',
+      practiceDurationAvg: 0,
+      practiceDays: 0,
+      practiceDurationTotal: 0,
+      dateList: [],
+      timeList: [],
+      detailVisiable: false
+    });
+    const reportSrc = ref('');
+    const state = reactive({
+      loading: false,
+      pagination: {
+        page: 1,
+        rows: 10,
+        pageTotal: 4
+      },
+      tableList: [] as any,
+      goCourseVisiable: false
+    });
+    const timer = ref<[number, number]>([
+      getNowDateAndMonday(new Date().getTime()),
+      getNowDateAndSunday(new Date().getTime())
+    ]);
+    const columns = () => {
+      return [
+        {
+          title: '时间',
+          key: 'createTime'
+        },
+        {
+          title: '评测曲目',
+          key: 'musicSheetName',
+          render(row: any) {
+            return <span>{row.musicSheetName}</span>;
+          }
+        },
+        // 入门：BEGINNER/进阶：ADVANCED/大师：PERFORMER"
+        {
+          title: '评测难度',
+          key: 'heardLevel',
+          render(row: any) {
+            return (
+              <>
+                {row.heardLevel == null ? <span>--</span> : null}
+                {row.heardLevel == 'BEGINNER' ? (
+                  <NTag type="info">入门级</NTag>
+                ) : null}
+                {row.heardLevel == 'ADVANCED' ? (
+                  <NTag type="warning">进阶级</NTag>
+                ) : null}
+                {row.heardLevel == 'PERFORMER' ? (
+                  <NTag type="error">大师级</NTag>
+                ) : null}
+              </>
+            );
+          }
+        },
+        {
+          title: '评测分数',
+          key: 'score',
+          render(row: any) {
+            return <span>{row.score}</span>;
+          }
+        },
+        {
+          title: '音准',
+          key: 'intonation',
+          render(row: any) {
+            return <span>{row.intonation}</span>;
+          }
+        },
+        {
+          title: '节奏',
+          key: 'cadence',
+          render(row: any) {
+            return <span>{row.cadence}</span>;
+          }
+        },
+        {
+          title: '完整度',
+          key: 'integrity',
+          render(row: any) {
+            return <span>{row.integrity}</span>;
+          }
+        },
+        {
+          title: '操作',
+          key: 'id',
+          render(row: any) {
+            return (
+              <NButton
+                text
+                type="primary"
+                onClick={() => {
+                  gotoRecode(row);
+                }}>
+                评测报告
+              </NButton>
+            );
+          }
+        }
+      ];
+    };
+    const getList = async () => {
+      const res = await getPracticeRecordList({
+        userId: props.studentId,
+        ...state.pagination,
+        classGroupId: props.classGroupId,
+        feature: 'EVALUATION',
+        ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
+      });
+      state.tableList = res.data.rows;
+      state.pagination.pageTotal = res.data.total;
+    };
+    const gotoRecode = (row: any) => {
+      console.log(row.id, 'gotoRecode');
+      const tockn = userStore.getToken;
+      reportSrc.value =
+        vaildMusicScoreUrl() +
+        `/instrument/?v=${+new Date()}#/evaluat-report?v=${+new Date()}&id=${
+          row.id
+        }&platform=webTeacher&Authorization=${tockn}`;
+      payForm.detailVisiable = true;
+    };
+    const search = () => {
+      state.pagination.page = 1;
+      getList();
+      setCache({
+        current: { timer: timer.value },
+        saveKey: 'classStudentRecordEvaluationRecords'
+      });
+    };
+    const onReset = () => {
+      timer.value = [
+        getNowDateAndMonday(new Date().getTime()),
+        getNowDateAndSunday(new Date().getTime())
+      ];
+      search();
+      setCache({
+        current: { timer: timer.value },
+        saveKey: 'classStudentRecordEvaluationRecords'
+      });
+    };
+    initCache({
+      current: { timer: timer.value },
+      saveKey: 'classStudentRecordEvaluationRecords',
+      callBack: (active: any) => {
+        timer.value = active.timer;
+      }
+    });
+    const iframeRef = ref();
+    onMounted(() => {
+      getList();
+      console.log(props.studentId);
+    });
+    return () => (
+      <>
+        <NForm label-placement="left" inline>
+          <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 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>
+        <NModal
+          v-model:show={payForm.detailVisiable}
+          preset="card"
+          class={['modalTitle background', styles.reportModel]}
+          title={'评测报告'}>
+          <div class={styles.reportContainer} style={{ lineHeight: 0 }}>
+            <iframe
+              width={'100%'}
+              height={'450px'}
+              ref={iframeRef}
+              frameborder="0"
+              onLoad={(val: any) => {
+                iframeDislableKeyboard(val.target);
+              }}
+              src={reportSrc.value}></iframe>
+          </div>
+        </NModal>
+      </>
+    );
+  }
+});