classroom-instruments/src/views/classList/components/classRecord.tsx

import { defineComponent, onMounted, reactive } from 'vue';
import { NAvatar, NButton, NForm, NFormItem, NSpace, NTag } from 'naive-ui';
import Pagination from '@/components/pagination';
import { courseSchedulePage } from '../api';
import { useRoute } from 'vue-router';
import CDatePicker from '/src/components/CDatePicker';
import styles from './classRecord.module.less';
import teacherIcon from '@components/layout/images/teacherIcon.png';
import dayjs from 'dayjs';
import { getTimes } from '/src/utils';
export default defineComponent({
  name: 'class-record',
  setup() {
    const nowTime = dayjs().format('YYYY-MM-DD');
    const state = reactive({
      searchForm: {
        createTimer: [
          dayjs(nowTime).subtract(1, 'month').valueOf(),
          dayjs(nowTime).valueOf()
        ] as any
      },
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      tableList: [] as any
    });
    const route = useRoute();
    const search = () => {
      state.pagination.page = 1;
      getList();
    };

    const onReset = () => {
      state.searchForm = { createTimer: null as any };
      search();
    };
    const getList = async () => {
      state.loading = true;
      try {
        const res = await courseSchedulePage({
          classGroupId: route.query.id,
          ...getTimes(
            state.searchForm.createTimer,
            ['startTime', 'endTime'],
            'YYYY-MM-DD'
          ),
          ...state.pagination
        });
        state.tableList = res.data.rows;
        state.pagination.pageTotal = res.data.total;
        state.loading = false;
      } catch (e) {
        state.loading = false;
        console.log(e);
      }
    };
    onMounted(() => {
      getList();
    });
    return () => (
      <div>
        <div class={styles.searchList}>
          <NForm label-placement="left" inline>
            <NFormItem>
              <CDatePicker
                v-model:timerValue={state.searchForm.createTimer}
                separator={'-'}
                type="daterange"></CDatePicker>
            </NFormItem>

            <NFormItem>
              <NSpace justify="end">
                <NButton type="primary" class="searchBtn" onClick={search}>
                  搜索
                </NButton>
                <NButton
                  type="primary"
                  ghost
                  class="resetBtn"
                  onClick={onReset}>
                  重置
                </NButton>
              </NSpace>
            </NFormItem>
          </NForm>
        </div>
        <div class={styles.tableWrap}>
          <NSpace>
            {state.tableList.map((item: any) => (
              <div class={styles.tableContainer}>
                <div class={styles.header}>
                  <div class={styles.time}>
                    {dayjs(item.classDate).format('YYYY-MM-DD')}
                  </div>
                  <NTag type="primary" class={styles.ntag} strong>
                    三年二班
                  </NTag>
                </div>
                <div class={styles.content}>
                  <NAvatar
                    class={styles.navatar}
                    round
                    src={item.teacherAvatar || teacherIcon}
                  />
                  <div class={styles.userInfo}>
                    <h2>{item.teacherName}</h2>
                    <p>
                      人教版二年级上册 | 第二十一单元
                      |【歌表演】我和我的祖国一刻也不能分割
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </NSpace>

          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
            saveKey="classRecord-key"
          />
        </div>
      </div>
    );
  }
});