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

import { defineComponent, ref } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane } from 'naive-ui';
import { useRoute } 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';
export default defineComponent({
  name: 'base-setting',
  setup() {
    const activeTab = ref('student');
    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);
    };
    return () => (
      <div>
        <CBreadcrumb list={routerList.value}></CBreadcrumb>
        <div class={styles.listWrap}>
          <NTabs
            onUpdate:value={(val: any) => setTabs(val)}
            class={styles.customTabs}
            v-model:value={activeTab.value}
            size="large"
            animated
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
            <NTabPane name="student" tab="学员名单">
              <ClassStudent></ClassStudent>
            </NTabPane>
            <NTabPane name="afterWork" tab="课后训练">
              <AfterWork></AfterWork>
            </NTabPane>
            <NTabPane name="practice" tab="练习记录">
              <TestRecode></TestRecode>
            </NTabPane>
            <NTabPane name="attendclass" tab="上课记录">
              <ClassRecord />
            </NTabPane>
          </NTabs>
        </div>
      </div>
    );
  }
});