classroom-instruments/src/views/studentList/studentDetail.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from '@/views/classList/index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NSelect,
  NSpace,
  NTabPane,
  NTabs
} from 'naive-ui';
import {
  getStudentDetail,
  getTrainingStudentList
} from '@/views/classList/api';
import { useRoute } from 'vue-router';
import CBreadcrumb from '/src/components/CBreadcrumb';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import femaleIcon from '@/views/setting/images/femaleIcon.png';
import maleIcon from '@/views/setting/images/maleIcon.png';
import PracticeData from '@/views/studentList/components/practiceData';
import EvaluationRecords from '@/views/studentList/components/evaluationRecords';
import BaseInfo from '@/views/studentList/components/baseInfo';
import StudentAfterWork from './components/studentAfterWork';
import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
import dayjs from 'dayjs';
export default defineComponent({
  name: 'studentDetail',
  setup(props, { emit }) {
    const state = reactive({
      studentInfo: {
        avatar: '',
        nickname: '',
        gender: null,
        subjectNames: '',
        classInstrumentName: '',
        classGroupName: ''
      }
    });
    const activeStudentTab = ref('baseInfo');
    const route = useRoute();
    console.log(route.meta.isClass);
    const routerList = ref(
      route.meta.isClass
        ? [
            { name: '班级管理', path: '/classList' },
            { name: route.query.name, path: '/classDetail' },
            { name: route.query.studentName, path: '/classStudentRecode' }
          ]
        : ([
            { name: '学生管理', path: '/studentList' },
            { name: route.query.studentName, path: '/classStudentRecode' }
          ] as any)
    );

    const getWorkInfo = async () => {
      console.log(route.query.studentId);
      try {
        const res = await getStudentDetail({
          id: route.query.studentId
        });
        state.studentInfo = { ...res.data };
      } catch (e) {
        console.log(e);
      }
    };
    onMounted(() => {
      getWorkInfo();
    });
    getTabsCache((val: any) => {
      if (val.form.tabName) {
        activeStudentTab.value = val.form.tabName;
      }
    });
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route);
    };
    return () => (
      <div>
        <CBreadcrumb list={routerList.value}></CBreadcrumb>
        <div class={[styles.listWrap, styles.infoListWrap]}>
          <div class={styles.teacherList}>
            <div class={styles.teacherHeader}>
              <div class={styles.teacherHeaderBorder}>
                <NImage
                  class={styles.teacherHeaderImg}
                  src={
                    state.studentInfo.avatar
                      ? state.studentInfo.avatar
                      : defultHeade
                  }
                  previewDisabled></NImage>
              </div>
            </div>
            <div class={styles.workafterInfo}>
              <h4 class={styles.studentGender}>
                {state.studentInfo.nickname}{' '}
                <NImage
                  previewDisabled
                  src={
                    state.studentInfo.gender ? maleIcon : femaleIcon
                  }></NImage>
              </h4>
              <p>
                {state.studentInfo.classGroupName}{' '}
                {state.studentInfo.classInstrumentName
                  ? '| ' + state.studentInfo.classInstrumentName
                  : ' '}
              </p>
            </div>
          </div>
          <NTabs
            onUpdate:value={(val: any) => setTabs(val)}
            class={styles.customTabs}
            v-model:value={activeStudentTab.value}
            size="large"
            animated={false}
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
            <NTabPane name="baseInfo" tab="基本信息">
              <BaseInfo studentInfo={state.studentInfo}></BaseInfo>
            </NTabPane>
            <NTabPane name="afterWork" tab="课后作业">
              <StudentAfterWork></StudentAfterWork>
            </NTabPane>
            <NTabPane name="textRcode" tab="练习记录">
              <PracticeData
                studentId={route.query.studentId as string}></PracticeData>
            </NTabPane>
            <NTabPane name="evaluatingRcode" tab="评测记录">
              <EvaluationRecords
                studentId={route.query.studentId as string}></EvaluationRecords>
            </NTabPane>
          </NTabs>
        </div>
      </div>
    );
  }
});