classroom-instruments/src/views/classList/components/afterWork.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 { getTrainingList } from '../api';
import add from './images/add.png';
import { useRoute, useRouter } from 'vue-router';
import CDatePicker from '/src/components/CDatePicker';
import ClassTrainingDetails from '../modals/classTrainingDetails';
import {
  getNowDateAndMonday,
  getNowDateAndSunday,
  getTimes
} from '@/utils/dateFormat';
import dayjs from 'dayjs';
import TrainSettings from '../../attend-class/model/train-settings';
import { use } from 'echarts';
import TheEmpty from '/src/components/TheEmpty';
export default defineComponent({
  name: 'afterWork',
  setup(props, { emit }) {
    const timer = ref<[number, number]>([
      getNowDateAndMonday(new Date().getTime()),
      getNowDateAndSunday(new Date().getTime())
    ]);
    const state = reactive({
      searchForm: {
        status: null as any
      },
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      tableList: [] as any,
      addWorkVisible: false,
      activeRow: null as any,
      detailVisiable: false
    });
    const router = useRouter();
    const route = useRoute();
    const search = () => {
      state.pagination.page = 1;
      getList();
    };

    const onReset = () => {
      timer.value = [
        getNowDateAndMonday(new Date().getTime()),
        getNowDateAndSunday(new Date().getTime())
      ];
      state.searchForm = {
        status: null as any
      };
      search();
    };
    const getList = async () => {
      state.loading = true;

      try {
        const res = await getTrainingList({
          classGroupId: route.query.id,
          ...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);
      }
    };
    onMounted(() => {
      getList();
    });
    const columns = () => {
      return [
        {
          title: '布置老师',
          key: 'teacherName'
        },
        {
          title: '布置时间',
          key: 'createTime',
          render(row: any) {
            return <>{row.createTime}</>;
          }
        },
        {
          title: '截止时间',
          key: 'expireDate',
          render(row: any) {
            return <>{row.expireDate}</>;
          }
        },
        {
          title: '训练状态',
          key: 'status',
          render(row: any) {
            return row.status == 0 ? (
              <div class={styles.indDot}>
                {' '}
                <span></span> 进行中
              </div>
            ) : (
              <div class={styles.endDot}>
                <span></span>已结束
              </div>
            );
          }
        },
        {
          title: '布置人数',
          key: 'expectNum'
        },
        {
          title: '提交人数',
          key: 'trainingNum'
        },
        {
          title: '合格人数',
          key: 'standardNum'
        },
        {
          title: '提交率',
          key: 'trainingRate',
          render(row: any) {
            return <>{row.trainingRate}%</>;
          }
        },
        {
          title: '合格率',
          key: 'qualifiedRate',
          render(row: any) {
            return <>{row.qualifiedRate}%</>;
          }
        },
        // {
        //   title: '',
        //   key: 'sex',
        //   render(row: any) {
        //     return <>{row.sex == '0' ? '女' : '男'}</>;
        //   }
        // },
        {
          title: '操作',
          key: 'id',
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  text
                  type="primary"
                  onClick={() => gotoWorkDetail(row)}>
                  详情
                </NButton>
                <NButton
                  text
                  type="primary"
                  onClick={() => lookWorkDetail(row)}>
                  训练详情
                </NButton>
              </NSpace>
            );
          }
        }
      ];
    };
    const gotoWorkDetail = (row: any) => {
      console.log(row);
      router.push({
        path: '/afterWorkDetail',
        query: {
          ...route.query,
          teacherName: row.teacherName,
          trainingId: row.id
        }
      });
    };

    const lookWorkDetail = (row: any) => {
      state.activeRow = row;
      state.detailVisiable = true;
    };
    return () => (
      <div>
        <div class={styles.searchList}>
          <NForm label-placement="left" inline>
            <NFormItem>
              <CDatePicker
                v-model:value={timer.value}
                separator={'至'}
                type="daterange"
                timerValue={timer.value}></CDatePicker>
            </NFormItem>

            <NFormItem>
              <CSelect
                {...({
                  options: [
                    {
                      label: '训练状态',
                      value: null
                    },
                    {
                      label: '已结束',
                      value: 1
                    },
                    {
                      label: '进行中',
                      value: 0
                    }
                  ],
                  placeholder: '训练状态',
                  clearable: true,
                  inline: true
                } as any)}
                v-model:value={state.searchForm.status}></CSelect>
            </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"
          onClick={() => (state.addWorkVisible = true)}>
          布置作业
        </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>
        <NModal
          v-model:show={state.addWorkVisible}
          preset="card"
          class={[styles.attendClassModal, styles.trainClassModal]}
          title={'训练设置'}>
          <TrainSettings
            classGroupId={route.query.id as string}
            onClose={() => {
              getList();
              state.addWorkVisible = false;
            }}
          />
        </NModal>
        <NModal
          v-model:show={state.detailVisiable}
          preset="card"
          class={['modalTitle background', styles.wordDetailModel]}
          title={'训练详情'}>
          <ClassTrainingDetails
            onClose={() => (state.detailVisiable = false)}
            activeRow={state.activeRow}></ClassTrainingDetails>
        </NModal>
      </div>
    );
  }
});