classroom-instruments/src/views/classList/classDetail.tsx

import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane } from 'naive-ui';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
import CBreadcrumb from '@/components/CBreadcrumb';
import ClassStudent from './components/classStudent';
import AfterWork from './components/afterWork';
import ClassRecord from './components/classRecord';
import TestRecode from './components/testRecode';
import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
import { classGroupDetail } from './api';
export default defineComponent({
  name: 'base-setting',
  setup() {
    const classDetailTabs = sessionStorage.getItem('classDetailTabs');
    const activeTab = ref(classDetailTabs || 'afterWork');
    sessionStorage.removeItem('classDetailTabs');
    const route = useRoute();
    const routerList = ref([
      { name: '班级管理', path: '/classList' },
      { name: route.query.name, path: '/classDetail' }
    ] as any);

    getTabsCache((val: any) => {
      if (val.form.tabName) {
        activeTab.value = val.form.tabName;
      }
    });
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route);
    };
    const upgradeFlag = ref();
    const getClassGroupDetail = async () => {
      try {
        const id = route.query.id;
        const { data } = await classGroupDetail({ id });
        upgradeFlag.value = data.upgradeFlag ? 1 : 0; // 是否为历史班
      } catch {
        //
      }
    };
    getClassGroupDetail();
    onMounted(() => {
      if (classDetailTabs) {
        activeTab.value = classDetailTabs;
      }
    });

    onBeforeRouteUpdate(() => {
      const classDetailTabs = sessionStorage.getItem('classDetailTabs');
      if (classDetailTabs) {
        activeTab.value = classDetailTabs;
      }
    });
    return () => (
      <div>
        <CBreadcrumb list={routerList.value}></CBreadcrumb>
        <div class={[styles.listWrap, styles.infoListWrap]}>
          <NTabs
            class={styles.customTabs}
            v-model:value={activeTab.value}
            onUpdate:value={(val: any) => setTabs(val)}
            size="large"
            animated={false}
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
            <NTabPane name="afterWork" tab="课后作业">
              <AfterWork upgradeFlag={upgradeFlag.value}></AfterWork>
            </NTabPane>
            <NTabPane name="practice" tab="学练记录">
              <TestRecode></TestRecode>
            </NTabPane>
            <NTabPane name="attendclass" tab="上课记录">
              <ClassRecord />
            </NTabPane>
            <NTabPane name="student" tab="学员名单">
              <ClassStudent upgradeFlag={upgradeFlag.value}></ClassStudent>
            </NTabPane>
          </NTabs>
        </div>
      </div>
    );
  }
});