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

import { defineComponent, reactive, onMounted, computed, nextTick } from 'vue';
import styles from '../index2.module.less';
import { NDataTable, NTooltip } from 'naive-ui';
import Pagination from '@/components/pagination';
import { getMinutes, getSecend, getTimes } from '/src/utils/dateFormat';
import { getTestList } from '../../classList/api';
import TheEmpty from '/src/components/TheEmpty';
import iconSortDefault from '@/common/images/icon-sort-default.png';
import iconSortDesc from '@/common/images/icon-sort-desc.png';
import iconSortAsc from '@/common/images/icon-sort-asc.png';
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 searchForm = reactive({
      ase: 0,
      sortType: 1
    });
    const currentTimer = computed(() => {
      console.log('ranking===>');
      return props.timer;
    });
    const search = () => {
      console.log('search', state);
    };

    const onReset = () => {
      console.log('search');
    };
    const getList = async () => {
      state.loading = true;
      try {
        const res = await getTestList({
          ...state.pagination,
          ...searchForm,
          ...getTimes(
            currentTimer.value,
            ['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 });
    onMounted(async () => {
      await getList();

      nextTick(() => {
        // 把默认的排序删除
        const dom = document.querySelectorAll('.n-data-table-sorter');
        dom.forEach((item: any) => {
          item.style.display = 'none';
        });
      });
    });

    const handleSorterChange = (sroter: any) => {
      console.log(sroter, '12');
      if (!sroter) {
        searchForm.ase = 0;
        searchForm.sortType = 1;
        practiceDaysRef.sortOrder = false;
        practiceDurationRef.sortOrder = false;
        practiceDurationAvgRef.sortOrder = false;
      } else {
        const list = {
          practiceDuration: 1,
          practiceDays: 2,
          practiceDurationAvg: 3
        };
        searchForm.sortType =
          list[
            sroter.columnKey as
              | 'practiceDuration'
              | 'practiceDays'
              | 'practiceDurationAvg'
          ];
        if (sroter.columnKey == 'practiceDuration') {
          practiceDurationRef.sortOrder = sroter.order;
          practiceDaysRef.sortOrder = false;
          practiceDurationAvgRef.sortOrder = false;
        }
        if (sroter.columnKey == 'practiceDays') {
          practiceDaysRef.sortOrder = sroter.order;
          practiceDurationRef.sortOrder = false;
          practiceDurationAvgRef.sortOrder = false;
        }
        if (sroter.columnKey == 'practiceDurationAvg') {
          practiceDurationAvgRef.sortOrder = sroter.order;
          practiceDaysRef.sortOrder = false;
          practiceDurationRef.sortOrder = false;
        }
        searchForm.ase = sroter.order == 'ascend' ? 1 : 0;
      }
      getList();
    };

    const practiceDaysRef = reactive({
      title() {
        return (
          <NTooltip showArrow={false} placement="top-start">
            {{
              trigger: () => (
                <div class={styles.cell}>
                  练习天数
                  <img
                    class={styles.sortIcon}
                    src={
                      practiceDaysRef.sortOrder === 'descend'
                        ? iconSortDesc
                        : practiceDaysRef.sortOrder === 'ascend'
                        ? iconSortAsc
                        : iconSortDefault
                    }
                  />
                </div>
              ),
              default:
                practiceDaysRef.sortOrder === 'descend'
                  ? '点击升序'
                  : practiceDaysRef.sortOrder === 'ascend'
                  ? '取消排序'
                  : '点击降序'
            }}
          </NTooltip>
        );
      },
      key: 'practiceDays',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return <>{row.practiceDays ? row.practiceDays : 0}天</>;
      }
    });
    const practiceDurationRef = reactive({
      // title: '练习总时长',
      title() {
        return (
          <NTooltip showArrow={false} placement="top-start">
            {{
              trigger: () => (
                <div class={styles.cell}>
                  练习总时长
                  <img
                    class={styles.sortIcon}
                    src={
                      practiceDurationRef.sortOrder === 'descend'
                        ? iconSortDesc
                        : practiceDurationRef.sortOrder === 'ascend'
                        ? iconSortAsc
                        : iconSortDefault
                    }
                  />
                </div>
              ),
              default:
                practiceDaysRef.sortOrder === 'descend'
                  ? '点击升序'
                  : practiceDaysRef.sortOrder === 'ascend'
                  ? '取消排序'
                  : '点击降序'
            }}
          </NTooltip>
        );
      },
      key: 'practiceDuration',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return (
          <>
            {row.practiceDuration
              ? getMinutes(row.practiceDuration) > 0
                ? getMinutes(row.practiceDuration) +
                  '分' +
                  getSecend(row.practiceDuration) +
                  '秒'
                : getSecend(row.practiceDuration) + '秒'
              : 0}
          </>
        );
      }
    });
    const practiceDurationAvgRef = reactive({
      // title: '平均练习时长',
      title() {
        return (
          <NTooltip showArrow={false} placement="top-start">
            {{
              trigger: () => (
                <div class={styles.cell}>
                  平均练习时长
                  <img
                    class={styles.sortIcon}
                    src={
                      practiceDurationAvgRef.sortOrder === 'descend'
                        ? iconSortDesc
                        : practiceDurationAvgRef.sortOrder === 'ascend'
                        ? iconSortAsc
                        : iconSortDefault
                    }
                  />
                </div>
              ),
              default:
                practiceDaysRef.sortOrder === 'descend'
                  ? '点击升序'
                  : practiceDaysRef.sortOrder === 'ascend'
                  ? '取消排序'
                  : '点击降序'
            }}
          </NTooltip>
        );
      },
      key: 'practiceDurationAvg',
      sorter: true,
      sortOrder: false as any,
      render(row: any) {
        return (
          <>
            {row.practiceDurationAvg
              ? getMinutes(row.practiceDurationAvg) > 0
                ? getMinutes(row.practiceDurationAvg) +
                  '分' +
                  getSecend(row.practiceDurationAvg) +
                  '秒'
                : getSecend(row.practiceDurationAvg) + '秒'
              : 0}
          </>
        );
      }
    });

    const columns: any = () => {
      return [
        {
          title: '姓名',
          key: 'studentName'
        },
        {
          title: '手机号',
          key: 'studentPhone'
        },
        practiceDaysRef as any,
        practiceDurationRef as any,
        practiceDurationAvgRef as any
      ];
    };
    return () => (
      <div class={styles.listWrap}>
        <div class={styles.tableWrap}>
          <NDataTable
            v-slots={{
              empty: () => <TheEmpty></TheEmpty>
            }}
            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
          />
        </div>
      </div>
    );
  }
});