client-admin/src/render/views/AbsentCheck/index.vue

<template>
  <div class="data-check">
    <div class="check-menu">
      <div class="check-menu-body">
        <ul>
          <li
            v-for="item in studentList"
            :key="item.id"
            :class="{ 'is-active': dataCheckStore.curStudent?.id === item.id }"
            @click="onSelectStudent(item)"
          >
            {{ item.examNumber }}
          </li>
        </ul>
      </div>
      <div class="check-menu-page">
        <SimplePagination
          :total="total"
          :page-size="pageSize"
          @change="onChangeListPage"
        />
      </div>
    </div>
    <div class="check-body">
      <ScanImage
        v-if="dataCheckStore.curPage && isOriginImage"
        :key="dataCheckStore.curPage.kid"
        @prev="onPrevPage"
        @next="onNextPage"
      />
      <SliceImage v-if="dataCheckStore.curPage && !isOriginImage" />
    </div>

    <CheckAction @search="onSearch" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { message } from "ant-design-vue";
import { CaretLeftOutlined, CaretRightOutlined } from "@ant-design/icons-vue";

import { AbsentCheckListFilter } from "@/ap/types/absentCheck";
import { DataCheckListItem } from "@/ap/types/dataCheck";
import { absentCheckList } from "@/ap/absentCheck";
import { StudentPage } from "../DataCheck/types";
import { useDataCheckStore, useUserStore } from "@/store";

import SimplePagination from "@/components/SimplePagination/index.vue";
import ScanImage from "../DataCheck/ScanImage/index.vue";
import SliceImage from "../DataCheck/SliceImage/index.vue";
import CheckAction from "./CheckAction.vue";

defineOptions({
  name: "AbsentCheck",
});

const dataCheckStore = useDataCheckStore();
const userStore = useUserStore();

let searchModel = {} as AbsentCheckListFilter;
const pageNumber = ref(1);
const pageSize = ref(20);
const total = ref(0);
const studentList = ref<DataCheckListItem[]>([]);
const dataList = ref<StudentPage[]>([]);
const loading = ref(false);

async function getList() {
  loading.value = true;
  const datas = {
    ...searchModel,
    pageNumber: pageNumber.value,
    pageSize: pageSize.value,
  };
  const res = await absentCheckList(datas).catch(() => null);
  loading.value = false;
  if (!res) return;

  total.value = res.totalCount;
  studentList.value = res.result;

  parseStudentPageList(res.result);
}

function parseStudentPageList(students: DataCheckListItem[]) {
  dataList.value = [] as StudentPage[];

  students.forEach((student, studentIndex) => {
    student.papers.forEach((paper, paperIndex) => {
      if (!paper.pages) return;
      paper.pages.forEach((page, pageIndex) => {
        const row: StudentPage = {
          ...page,
          paperId: paper.id,
          paperIndex,
          paperNumber: paper.number,
          pageIndex,
          studentIndex,
          studentId: student.id,
          examId: searchModel.examId,
          kid: `${student.id}-${studentIndex}-${paperIndex}-${pageIndex}`,
        };
        dataList.value.push(row);
      });
    });
  });
}

function onSelectStudent(record: DataCheckListItem) {
  const pageIndex = dataList.value.findIndex(
    (item) => item.studentId === record.id
  );
  if (pageIndex === -1) return;

  selectPage(pageIndex);
}

// imageType
const isOriginImage = computed(() => {
  return dataCheckStore.imageType === "ORIGIN";
});

// table
async function onChangeListPage(index: number) {
  pageNumber.value = index;
  await getList();
  selectPage(0);
}
async function onSearch(datas: AbsentCheckListFilter) {
  searchModel = { ...datas };
  pageNumber.value = 1;
  await getList();
  selectPage(0);
}
onSearch({ examId: userStore.curExam.id } as AbsentCheckListFilter);

// page
function selectPage(index: number) {
  dataCheckStore.setInfo({
    curPage: dataList.value[index],
    curPageIndex: index,
  });

  if (!dataCheckStore.curPage) return;

  const curStudent = studentList.value[
    dataCheckStore.curPage.studentIndex
  ] as DataCheckListItem;
  dataCheckStore.setInfo({ curStudent });
}

async function onPrevPage() {
  if (dataCheckStore.curPageIndex <= 0) {
    if (pageNumber.value === 1) {
      message.error("没有上一张了");
      return;
    }

    pageNumber.value--;
    await getList();
    selectPage(dataList.value.length - 1);
    return;
  }

  selectPage(dataCheckStore.curPageIndex - 1);
}

async function onNextPage() {
  if (dataCheckStore.curPageIndex >= dataList.value.length - 1) {
    if (pageNumber.value >= total.value) {
      message.error("没有下一张了");
      return;
    }

    pageNumber.value++;
    await getList();
    selectPage(0);
    return;
  }

  selectPage(dataCheckStore.curPageIndex + 1);
}
</script>