classroom-instruments/src/views/home/components/practiceRanking.tsx

import { defineComponent, reactive } from 'vue';
import styles from '../index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NSelect,
  NSpace
} from 'naive-ui';
import SearchInput from '@/components/searchInput';
import CSelect from '@/components/CSelect';
import Pagination from '@/components/pagination';
import add from './images/add.png';
import { getMinutes, getSecend, getTimes } from '/src/utils/dateFormat';
import { getTestList } from '../../classList/api';
export default defineComponent({
  name: 'student-studentList',
  props: {
    timer: {
      type: Array,
      defaut: () => []
    }
  },
  setup(props, { emit, expose }) {
    const state = reactive({
      searchWord: '',
      orchestraType: null,
      courseTypeCode: null,
      subjectId: null,
      classId: null,
      studentType: null,
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [] as any
    });
    const search = () => {
      console.log('search', state);
    };

    const onReset = () => {
      console.log('search');
    };
    const getList = async () => {
      state.loading = true;
      try {
        const res = await getTestList({
          ...state.pagination,
          ...getTimes(props.timer, ['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);
      }
    };
    expose({ getList });
    const handleSorterChange = (sroter: any) => {
      if(!sroter){
        practiceDaysRef.sortOrder = false
        practiceDurationRef.sortOrder = false
        practiceDurationAvgRef.sortOrder = false
      }
      console.log(sroter, 'sroter');
      // getList()
    };

    const practiceDaysRef = reactive({
      title: '练习天数',
      key: 'practiceDays',
      sorter: true,
      sortOrder: false,
      render(row: any) {
        return <>{row.practiceDays ? row.practiceDays : 0}天</>;
      }
    });
    const practiceDurationRef = reactive({
      title: '练习总时长',
      key: 'practiceDuration',
      sorter: true,
      sortOrder: false,
      render(row: any) {
        return (
          <>
            {row.practiceDuration
              ? getMinutes(row.practiceDuration) > 0
                ? getMinutes(row.practiceDuration) +
                  '分' +
                  getSecend(row.practiceDuration) +
                  '秒'
                : getSecend(row.practiceDuration) + '秒'
              : 0}
          </>
        );
      }
    });
    const practiceDurationAvgRef = reactive({
      title: '平均练习时长',
      key: 'practiceDurationAvg',
      sorter: true,
      sortOrder: false,
      render(row: any) {
        return (
          <>
            {row.practiceDurationAvg
              ? getMinutes(row.practiceDurationAvg) > 0
                ? getMinutes(row.practiceDurationAvg) +
                  '分' +
                  getSecend(row.practiceDurationAvg) +
                  '秒'
                : getSecend(row.practiceDurationAvg) + '秒'
              : 0}
          </>
        );
      }
    });

    const columns = () => {
      return [
        {
          title: '姓名',
          key: 'studentName'
        },
        {
          title: '手机号',
          key: 'studentPhone'
        },
        practiceDaysRef,
        practiceDurationRef,
        practiceDurationAvgRef
      ];
    };
    return () => (
      <div class={styles.listWrap}>
        <div class={styles.tableWrap}>
          <NDataTable
            class={styles.classTable}
            loading={state.loading}
            columns={columns()}
            data={state.tableList}
            onUpdate:sorter={handleSorterChange}></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
            saveKey="orchestraRegistration-key"
          />
        </div>
      </div>
    );
  }
});