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 dataList" :key="item.id">{{ item.examNumber }}</li>
        </ul>
      </div>
      <div class="check-menu-page">
        <SimplePagination
          :total="pagination.total"
          :page-size="pagination.pageSize"
          @change="toPage"
        />
      </div>
    </div>
    <div class="check-body">
      <ScanImage v-if="curRecogData.length" :recog-data="curRecogData" />
    </div>

    <CheckAction />
  </div>
</template>

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

import useTable from "@/hooks/useTable";

import { DataCheckListFilter, DataCheckListItem } from "@/ap/types/dataCheck";
import { dataCheckList } from "@/ap/dataCheck";
import { useUserStore } from "@/store";

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

import recogSampleData from "@/utils/recog/data.json";
import { parseDetailSize } from "@/utils/recog/recog";

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

const userStore = useUserStore();

const searchModel = reactive({
  examId: userStore.curExam.id,
});

const { dataList, loading, pagination, getList, toPage, setPageSize } =
  useTable<DataCheckListItem>(dataCheckList, searchModel, false);

setPageSize(30);

// page
function onPrevPage() {
  const { total, current } = pagination;
  if (current <= 1) {
    message.error("没有上一页了");
    return;
  }
  toPage(current);
}

function onNextPage() {
  const { total, current } = pagination;
  if (current >= total) {
    message.error("没有下一页了");
    return;
  }
  toPage(current);
}

const curRecogData = ref([]);
// 试题
let index = 0;
recogSampleData.question.forEach((gGroup) => {
  gGroup.fill_result.forEach((qRecog) => {
    qRecog.index = ++index;

    curRecogData.value.push(parseDetailSize(qRecog, "question", qRecog.index));
  });
});

// TODO: 测试数据
dataList.value = "#"
  .repeat(30)
  .split("")
  .map((item, index) => {
    return {
      id: index + 1,
      examNumber: `3600802404012${index}`,
      name: `考生名${index}`,
      studentCode: `36008${index}`,
      subjectCode: "科目代码",
      subjectName: "科目名称",
      seatNumber: "11",
    };
  });
</script>