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

<template>
  <a-card class="image-fialed" :bordered="false">
    <template #title>
      <a-button @click="goback">
        <template #icon><SwapLeftOutlined /> </template>后退
      </a-button>
      <a-divider type="vertical" />
      <a-button type="primary" :loading="downloading" @click="onExport">
        <template #icon><ExportOutlined /></template>导出
      </a-button>
    </template>
    <a-table
      :columns="columns"
      :row-key="(record) => record.subjectCode"
      :data-source="dataList"
      :pagination="pagination"
      :loading="loading"
      size="middle"
      bordered
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'failed'">
          <span :class="text ? 'color-danger' : 'color-gray'">{{
            text ? "是" : "否"
          }}</span>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import type { TableProps } from "ant-design-vue";
import { message } from "ant-design-vue";
import { SwapLeftOutlined, ExportOutlined } from "@ant-design/icons-vue";

import useTable from "@/hooks/useTable";
import { ImageCheckFailedListItem } from "@/ap/types/imageCheck";
import { imageCheckFailedList, imageCheckFailedExport } from "@/ap/imageCheck";
// import { downloadByApi } from "@/utils/download";
import useLoading from "@/hooks/useLoading";

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

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

const columns: TableProps["columns"] = [
  {
    title: "科目代码",
    dataIndex: "subjectCode",
    width: "140px",
  },
  {
    title: "考点",
    dataIndex: "examSiteName",
  },
  {
    title: "校区",
    dataIndex: "campusName",
    width: "",
  },
  {
    title: "考场号",
    dataIndex: "examRoom",
    width: "",
  },
  {
    title: "有图片异常",
    dataIndex: "failed",
    width: "100px",
  },
];

const searchModel = reactive({
  examId: Number(route.params.examId),
  subjectCode: route.params.subjectCode,
});

const { dataList, pagination, loading } = useTable<ImageCheckFailedListItem>(
  imageCheckFailedList,
  searchModel,
  true
);

const { loading: downloading, setLoading } = useLoading();
async function onExport() {
  if (downloading.value) return;

  setLoading(true);
  const res = await imageCheckFailedExport(searchModel).catch((e: Error) => {
    message.error(e.message || "下载失败，请重新尝试！");
  });
  setLoading(false);

  if (!res) return;
  message.success("下载成功！");
}

function goback() {
  router.back();
}

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

<style lang="less" scoped>
.image-fialed {
  box-shadow: none !important;
}
</style>