client-admin/src/render/views/DataCheck/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"
            @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 && recogList.length"
        :key="dataCheckStore.curPage.kid"
        :img-src="dataCheckStore.curPage.sheetUri"
        :recog-data="recogList"
        @prev="onPrevPage"
        @next="onNextPage"
        @recog-block-modified="onRecogEditConfirm"
      />
      <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 { DataCheckListFilter, DataCheckListItem } from "@/ap/types/dataCheck";
import { dataCheckList } from "@/ap/dataCheck";
import { StudentPage } from "./types";
import { useDataCheckStore } from "@/store";

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

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

const dataCheckStore = useDataCheckStore();

let searchModel = {} as DataCheckListFilter;
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 dataCheckList(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 = [];

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

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: DataCheckListFilter) {
  searchModel = { ...datas };
  pageNumber.value = 1;
  await getList();
  selectPage(0);
}

// page
const curStudentInfo = ref({
  examNumber: "",
  name: "",
  examSite: "",
  seatNumber: "",
  paperType: "",
});
const curPageQuestions = ref<string[]>([]);

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>