classroom-instruments/src/views/homework-record/detail/index.tsx

import { computed, defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NImage,
  NModal,
  NProgress,
  NSpace
} from 'naive-ui';
import SearchInput from '@/components/searchInput';
import CSelect from '@/components/CSelect';
import Pagination from '@/components/pagination';
import { api_trainingDetail, api_trainingStudentList } from '../api';
import { useRoute } from 'vue-router';
import CBreadcrumb from '/src/components/CBreadcrumb';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import { trainingStatusArray } from '@/utils/searchArray';
import dayjs from 'dayjs';
import TheEmpty from '/src/components/TheEmpty';
import TrainingDetails from '../../classList/modals/TrainingDetails';
export default defineComponent({
  name: 'homewrok-record-detail',
  setup() {
    const route = useRoute();
    const state = reactive({
      searchForm: {
        keyword: '',
        vipFlag: null as any,
        trainingStatus: '' as any,
        classGroupId: '' as any
      },
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 4
      },
      studentClassList: [] as any,
      tableList: [] as any,
      workInfo: {} as any,
      detailVisiable: false,
      activeRow: null as any,
      index: 0
    });
    const TrainingDetailsRef = ref();
    const routerList = ref([
      { name: '作业', path: '/homework-record' },
      { name: route.query.name, path: '/homework-record-detail' }
    ] as any);

    const search = () => {
      state.pagination.page = 1;
      getList();
    };

    const onReset = () => {
      state.searchForm = {
        keyword: '',
        vipFlag: null,
        trainingStatus: '' as any,
        classGroupId: '' as any
      };
      search();
    };
    const getList = async (type?: string, page?: number) => {
      state.loading = true;
      try {
        const res = await api_trainingStudentList({
          trainingId: route.query.id,
          ...state.searchForm,
          ...state.pagination,
          page: page || state.pagination.page
        });
        state.tableList = res.data.rows;
        state.pagination.pageTotal = res.data.total;
        state.pagination.page = res.data.current;
        state.loading = false;
        if (type === 'next') {
          state.index = 0;
          goToNext();
        } else if (type === 'prev') {
          state.index = state.tableList.length + 1;
          gotoPre();
        }
      } catch (e) {
        state.loading = false;
        console.log(e);
      }
    };
    const getWorkInfo = async () => {
      try {
        const res = await api_trainingDetail({ id: route.query.id });
        const result = res.data || {};
        // state.workInfo
        let pTitle = '';
        let eTitle = '';
        if (
          result.studentLessonTrainingDetails &&
          result.studentLessonTrainingDetails.length > 0
        ) {
          result.studentLessonTrainingDetails.forEach((child: any) => {
            // if (child.trainingType === 'PRACTICE' && child.musicName) {
            //   pTitle += pTitle ? '、' + child.musicName : child.musicName;
            // }
            // if (child.trainingType === 'EVALUATION' && child.musicName) {
            //   eTitle += eTitle ? '、' + child.musicName : child.musicName;
            // }

            if (child.trainingType === 'PRACTICE' && child.musicName) {
              pTitle += pTitle
                ? '、《' + child.musicName + '》'
                : '练习曲目《' + child.musicName + '》';
            }
            if (child.trainingType === 'EVALUATION' && child.musicName) {
              eTitle += eTitle
                ? '、《' + child.musicName + '》'
                : '评测曲目《' + child.musicName + '》';
            }
          });
        }
        result.pTitle = pTitle;
        result.eTitle = eTitle;
        state.workInfo = result;

        // 班级列表
        const classList = result.studentClassGroup || [];
        classList.forEach((item: any) => {
          state.studentClassList.push({
            label: item.name,
            value: item.id
          });
        });
      } 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: 'classGroupName'
        },
        {
          title: '作业状态',
          key: 'trainingStatus',
          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: 'vipFlag',
          render(row: any) {
            return row.vipFlag ? '是' : '否';
          }
        },
        {
          title: '操作',
          key: 'id',
          render(row: any, index: number) {
            return (
              <NButton
                text
                type="primary"
                onClick={() => {
                  lookDetail(row, index);
                }}>
                详情
              </NButton>
            );
          }
        }
      ];
    };

    const goToNext = () => {
      if (state.index >= state.tableList.length) {
        getList('next', state.pagination.page + 1);
      } else {
        ++state.index;
        state.activeRow = state.tableList[state.index - 1];
        TrainingDetailsRef.value.getTrainingDetail(
          state.activeRow.studentLessonTrainingId
        );
      }
    };
    const gotoPre = () => {
      if (state.index === 1 && state.pagination.page !== 1) {
        getList('prev', state.pagination.page - 1);
      } else {
        --state.index;
        state.activeRow = state.tableList[state.index - 1];
        TrainingDetailsRef.value.getTrainingDetail(
          state.activeRow.studentLessonTrainingId
        );
      }
    };

    const currentStudentIndex = computed(() => {
      return state.index + (state.pagination.page - 1) * state.pagination.rows;
    });

    return () => (
      <div>
        <CBreadcrumb list={routerList.value}></CBreadcrumb>
        <div class={styles.listWrap}>
          <div class={styles.teacherSection}>
            <div class={styles.teacherList}>
              <div class={styles.tTemp}>
                <div class={styles.teacherHeader}>
                  <div class={styles.teacherHeaderBorder}>
                    <NImage
                      class={styles.teacherHeaderImg}
                      src={state.workInfo.teacherAvatar || defultHeade}
                      previewDisabled></NImage>
                  </div>
                </div>
                <div class={styles.workafterInfo}>
                  <h4>{state.workInfo.teacherName}</h4>
                  {state.workInfo.createTime && (
                    <p>
                      布置时间：
                      {state.workInfo.createTime &&
                        dayjs(state.workInfo.createTime).format(
                          'YYYY-MM-DD HH:mm'
                        )}{' '}
                      |{' '}
                      <span>
                        截止时间：
                        {state.workInfo.expireDate &&
                          dayjs(state.workInfo.expireDate).format(
                            'YYYY-MM-DD HH:mm'
                          )}
                      </span>
                    </p>
                  )}
                </div>
              </div>
              <div class={styles.infos}>
                <div class={styles.homeTitle}>{state.workInfo.name}</div>
                <div class={[styles.homeContent, styles.homeworkText]}>
                  <div class={styles.pSection}>
                    {state.workInfo.pTitle && (
                      <p class={[styles.text, styles.p1]}>
                        {state.workInfo.pTitle}
                      </p>
                    )}
                    {state.workInfo.eTitle && (
                      <p class={[styles.text, styles.p2]}>
                        {state.workInfo.eTitle}
                      </p>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class={styles.stitcTitle}>作业完成情况</div>
              <div class={styles.stitcConent}>
                <NSpace size={[38, 0]}>
                  <NProgress
                    percentage={state.workInfo.trainingRate || 0}
                    // percentage={20}
                    offset-degree={180}
                    type="circle"
                    strokeWidth={6}
                    rail-color={'EDEFFA'}
                    color={'#64A5FF'}>
                    <div class={styles.contentRect}>
                      <div class={styles.nums}>
                        {state.workInfo.trainingNum || 0}
                        <i>/</i>
                        {state.workInfo.expectNum || 0}
                        <span>人</span>
                      </div>
                      <div class={styles.text}>已提交</div>
                    </div>
                  </NProgress>
                  <NProgress
                    percentage={state.workInfo.trainingRate || 0}
                    offset-degree={180}
                    strokeWidth={6}
                    type="circle"
                    rail-color={'EDEFFA'}
                    color={'#64A5FF'}>
                    <div class={styles.contentRect}>
                      <div class={styles.nums}>
                        {state.workInfo.trainingRate || 0}%
                      </div>
                      <div class={styles.text}>提交率</div>
                    </div>
                  </NProgress>
                  <NProgress
                    percentage={state.workInfo.qualifiedRate || 0}
                    offset-degree={180}
                    strokeWidth={6}
                    type="circle"
                    rail-color={'EDEFFA'}
                    color={'#40CEAE'}>
                    <div class={styles.contentRect}>
                      <div class={styles.nums}>
                        {state.workInfo.standardNum || 0}
                        <span>人</span>
                      </div>
                      <div class={styles.text}>合格人数</div>
                    </div>
                  </NProgress>
                  <NProgress
                    percentage={state.workInfo.qualifiedRate || 0}
                    offset-degree={180}
                    strokeWidth={6}
                    type="circle"
                    rail-color={'EDEFFA'}
                    color={'#40CEAE'}>
                    <div class={styles.contentRect}>
                      <div class={styles.nums}>
                        {state.workInfo.qualifiedRate || 0}%
                      </div>
                      <div class={styles.text}>合格率</div>
                    </div>
                  </NProgress>
                </NSpace>
              </div>
            </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: ''
                      },
                      ...state.studentClassList
                    ],
                    placeholder: '全部班级',
                    clearable: true,
                    inline: true
                  } as any)}
                  v-model:value={state.searchForm.classGroupId}></CSelect>
              </NFormItem>
              <NFormItem>
                <CSelect
                  {...({
                    options: [
                      {
                        label: '全部状态',
                        value: ''
                      },
                      ...trainingStatusArray
                    ],
                    placeholder: '作业状态',
                    clearable: true,
                    inline: true
                  } as any)}
                  v-model:value={state.searchForm.trainingStatus}></CSelect>
              </NFormItem>

              <NFormItem>
                <CSelect
                  {...({
                    options: [
                      { label: '是', value: true },
                      { label: '否', value: false }
                    ],
                    placeholder: '是否会员',
                    clearable: true,
                    inline: true
                  } as any)}
                  v-model:value={state.searchForm.vipFlag}></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>
          <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.pagination.pageTotal}
            current={currentStudentIndex.value}
            activeRow={state.activeRow}></TrainingDetails>
        </NModal>
      </div>
    );
  }
});