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

<template>
  <div v-show="route.name === 'ImageCheck'" class="page-box">
    <a-table
      :columns="columns"
      :row-key="(record) => record.subjectCode"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      bordered
    >
      <template #bodyCell="{ column, index }">
        <template v-if="column.dataIndex === 'operation'">
          <qm-button type="link" @click="onViewFailed(index)"
            >查看异常</qm-button
          >
        </template>
      </template>
    </a-table>
  </div>

  <router-view />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { TableProps } from "ant-design-vue";

import { ImageCheckListItem } from "@/ap/types/imageCheck";
import { imageCheckList } from "@/ap/imageCheck";

import { useUserStore } from "@/store";

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

const userStore = useUserStore();

const router = useRouter();
const route = useRoute();

const columns: TableProps["columns"] = [
  {
    title: "科目代码",
    dataIndex: "subjectCode",
  },
  {
    title: "科目名称",
    dataIndex: "subjectName",
  },
  {
    title: "异常数量",
    dataIndex: "failedCount",
    width: "180px",
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: "100px",
    customCell: () => {
      return {
        class: "operation-cell",
      };
    },
  },
];
const loading = ref(false);
const dataList = ref<ImageCheckListItem[]>([]);

async function getData() {
  const res = await imageCheckList({ examId: userStore.curExam.id });
  dataList.value = res || [];
}

function onViewFailed(index: number) {
  const record = dataList.value[index];
  router.push({
    name: "ImageFailed",
    params: {
      examId: userStore.curExam.id,
      subjectCode: record.subjectCode,
    },
  });
}

onMounted(() => {
  getData();
});
</script>