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

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from '../index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NModal,
  NSelect,
  NSpace
} from 'naive-ui';
import SearchInput from '@/components/searchInput';
import CSelect from '@/components/CSelect';
import Pagination from '@/components/pagination';
import { getWorkDetail, getTrainingStudentList } from '../api';
import add from './images/add.png';
import { useRoute } from 'vue-router';
import CBreadcrumb from '/src/components/CBreadcrumb';
import CDatePicker from '/src/components/CDatePicker';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import {
  getNowDateAndMonday,
  getNowDateAndSunday,
  getTimes
} from '/src/utils/dateFormat';
import { trainingStatusArray } from '@/utils/searchArray';
import TrainingDetails from '../modals/TrainingDetails';
import dayjs from 'dayjs';
import { lookup } from 'dns';
import TheEmpty from '/src/components/TheEmpty';
export default defineComponent({
  name: 'student-studentList',
  setup(props, { emit }) {
    const state = reactive({
      searchForm: { keyword: '', trainingStatus: '' as any },
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [] as any,
      workInfo: {
        createTime: '',
        expireDate: '',
        teacherAvatar: '',
        teacherName: ''
      },
      detailVisiable: false,
      activeRow: null as any,
      index: 0
    });
    const timer = ref<[number, number]>([
      getNowDateAndMonday(new Date().getTime()),
      getNowDateAndSunday(new Date().getTime())
    ]);
    const TrainingDetailsRef = ref();
    const route = useRoute();
    const routerList = ref([
      { name: '班级管理', path: '/classList' },
      { name: route.query.name, path: '/classDetail' },
      { name: route.query.teacherName, path: '/afterWorkDetail' }
    ] as any);

    const search = () => {
      state.pagination.page = 1;
      getList();
      console.log('search', state);
    };

    const onReset = () => {
      state.searchForm = { keyword: '', trainingStatus: '' as any };
      timer.value = [
        getNowDateAndMonday(new Date().getTime()),
        getNowDateAndSunday(new Date().getTime())
      ];
      search();
    };
    const getList = async () => {
      state.loading = true;
      try {
        console.log(route.query, 'route.query');
        const res = await getTrainingStudentList({
          classGroupId: route.query.classGroupId || '',
          trainingId: route.query.trainingId,
          ...state.searchForm,
          ...state.pagination
          // ...getTimes(timer.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);
      }
    };
    const getWorkInfo = async () => {
      try {
        const res = await getWorkDetail({ trainingId: route.query.trainingId });
        state.workInfo = { ...res.data };
      } catch (e) {
        console.log(e);
      }
    };

    const lookDetail = (row: any, index: number) => {
      console.log(index, 'index');
      state.index = index + 1;
      state.activeRow = row;
      state.detailVisiable = true;
    };
    onMounted(() => {
      getWorkInfo();
      getList();
    });
    const columns = () => {
      return [
        {
          title: '学生姓名',
          key: 'studentName'
        },
        {
          title: '最后提交时间',
          key: 'submitTime',
          render(row: any) {
            return row.submitTime
              ? dayjs(row.submitTime).format('YYYY-MM-DD')
              : '--';
          }
        },
        {
          title: '作业状态',
          key: 'sex',
          render(row: any) {
            return (
              <div>
                {row.trainingStatus == 'UNSUBMITTED' ? (
                  <p class={styles.nosub}>未提交</p>
                ) : null}
                {row.trainingStatus == 'SUBMITTED' ? (
                  <p class={styles.ison}>不合格</p>
                ) : null}
                {row.trainingStatus == 'TARGET' ? (
                  <p class={styles.isok}>合格</p>
                ) : null}
              </div>
            );
          }
        },
        {
          title: '操作',
          key: 'id',
          render(row: any, index: number) {
            return (
              <NButton
                text
                type="primary"
                onClick={() => {
                  lookDetail(row, index);
                }}>
                详情
              </NButton>
            );
          }
        }
      ];
    };

    const goToNext = () => {
      ++state.index;

      state.activeRow = state.tableList[state.index - 1];

      TrainingDetailsRef.value.getTrainingDetail(
        state.activeRow.studentLessonTrainingId
      );
    };
    const gotoPre = () => {
      --state.index;
      state.activeRow = state.tableList[state.index - 1];
      TrainingDetailsRef.value.getTrainingDetail(
        state.activeRow.studentLessonTrainingId
      );
    };
    return () => (
      <div>
        <CBreadcrumb list={routerList.value}></CBreadcrumb>
        <div class={styles.listWrap}>
          <div class={styles.teacherList}>
            <div class={styles.teacherHeader}>
              <div class={styles.teacherHeaderBorder}>
                <NImage
                  class={styles.teacherHeaderImg}
                  src={
                    state.workInfo.teacherAvatar
                      ? state.workInfo.teacherAvatar
                      : defultHeade
                  }
                  previewDisabled></NImage>
              </div>
            </div>
            <div class={styles.workafterInfo}>
              <h4>{state.workInfo.teacherName}</h4>
              <p>
                布置时间：
                {state.workInfo.createTime
                  ? dayjs(state.workInfo.createTime).format('YYYY-MM-DD')
                  : '--'}{' '}
                |{' '}
                <span>
                  截止时间：
                  {state.workInfo.expireDate
                    ? dayjs(state.workInfo.expireDate).format('YYYY-MM-DD')
                    : '--'}
                </span>
              </p>
            </div>
          </div>
          <div class={styles.searchList}>
            <NForm label-placement="left" inline>
              <NFormItem>
                <SearchInput
                  {...{ placeholder: '请输入学生姓名' }}
                  class={styles.searchInput}
                  searchWord={state.searchForm.keyword}
                  onChangeValue={(val: string) =>
                    (state.searchForm.keyword = val)
                  }></SearchInput>
              </NFormItem>

              <NFormItem>
                <CSelect
                  {...({
                    options: [
                      {
                        label: '全部状态',
                        value: ''
                      },
                      ...trainingStatusArray
                    ],
                    placeholder: '作业状态',
                    clearable: true,
                    inline: true
                  } as any)}
                  v-model:value={state.searchForm.trainingStatus}></CSelect>
              </NFormItem>
              {/* <NFormItem>
                <CDatePicker
                  v-model:value={timer.value}
                  separator={'至'}
                  type="daterange"
                  timerValue={timer.value}></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>
          {/* <NButton
          class={styles.addBtn}
          type="primary"
          v-slots={{
            icon: () => (
              <>
                <NImage class={styles.addBtnIcon} src={add}></NImage>
              </>
            )
          }}>
          新增学生
        </NButton> */}
          <div class={styles.tableWrap}>
            <NDataTable
              v-slots={{
                empty: () => <TheEmpty></TheEmpty>
              }}
              class={styles.classTable}
              loading={state.loading}
              columns={columns()}
              data={state.tableList}></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>
        <NModal
          v-model:show={state.detailVisiable}
          preset="card"
          class={['modalTitle background', styles.wordDetailModel]}
          title={'作业详情'}>
          <TrainingDetails
            onNext={() => goToNext()}
            onPre={() => gotoPre()}
            ref={TrainingDetailsRef}
            onClose={() => (state.detailVisiable = false)}
            total={state.tableList.length}
            current={state.index}
            activeRow={state.activeRow}></TrainingDetails>
        </NModal>
      </div>
    );
  }
});