client-admin/src/render/views/ScanManage/ScanCheckMiss.vue

<template>
  <div class="scan-check-miss h-full">
    <qm-low-form :params="params" :fields="fields" :label-width="80">
      <template #subjectCode>
        <SelectSubject
          v-model="params.subjectCode"
          :exam-id="userStore.curExam?.id as number"
        ></SelectSubject>
      </template>
    </qm-low-form>
    <a-table
      :data-source="dataList"
      :columns="columns"
      size="middle"
      bordered
      :loading="loading"
      :pagination="pagination"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'scanned'">
          {{ record[column.dataIndex] }}
        </template>
      </template>
    </a-table>
  </div>
</template>
<script name="ScanCheckMiss" lang="ts" setup>
import { ref, reactive, computed } from "vue";
import SelectSubject from "@/components/SelectSubject/index.vue";
import { useUserStore } from "@/store";
import { useRequest } from "vue-request";
import useTable from "@/hooks/useTable";

import {
  getSiteList,
  getCampusList,
  getScannedList,
  exportScanned,
} from "@/ap/scanManage";
import type { TableColumnsType } from "@qmth/ui";
const userStore = useUserStore();

//考点下拉
const { data: examSiteOptions, run: runSite } = useRequest(getSiteList);
const { data: examCampusOptions, run: runCampus } = useRequest(getCampusList);
runSite({ examId: userStore.curExam?.id });
runCampus({ examId: userStore.curExam?.id });

const params = reactive({
  subjectCode: "",
  province: "",
  examSite: "",
  campusCode: "",
  examRoom: "",
  scanned: null,
});
const transParams = computed(() => {
  return { ...params, examId: userStore.curExam?.id };
});
const { dataList, pagination, loading, getList, toPage } = useTable(
  getScannedList,
  transParams,
  true
);
const fields = computed(() => {
  return [
    {
      cell: "subjectCode",
      type: "select",
      colSpan: 3,
      label: "科目",
    },
    {
      prop: "province",
      type: "select",
      colSpan: 3,
      label: "省份",
    },
    {
      prop: "examSite",
      type: "select",
      colSpan: 3,
      label: "考点",
      attrs: {
        options: examSiteOptions.value || [],
        fieldNames: { label: "name", value: "code" },
        allowClear: true,
      },
    },
    {
      prop: "campusCode",
      type: "select",
      colSpan: 3,
      label: "校区",
      attrs: {
        options: examCampusOptions.value || [],
        fieldNames: { label: "name", value: "code" },
        allowClear: true,
      },
    },
    {
      prop: "examRoom",
      type: "select",
      colSpan: 3,
      label: "考场号",
      allowClear: true,
    },
    {
      prop: "scanned",
      type: "select",
      colSpan: 3,
      label: "扫描状态",
      attrs: {
        options: [
          { value: true, label: "已扫描" },
          { value: false, label: "未扫描" },
        ],
        allowClear: true,
      },
    },
    {
      type: "buttons",
      colSpan: 5,
      children: [
        {
          text: "查询",
        },
        {
          text: "导出",
          attrs: {
            type: "default",
            loading: exportLoading.value,
          },
          onClick: () => {
            exportFile();
          },
        },
      ],
    },
  ];
});

const columns: TableColumnsType = [
  {
    title: "科目",
    dataIndex: "subjectName",
  },
  {
    title: "考点",
    dataIndex: "examSite",
  },
  {
    title: "校区",
    dataIndex: "campusCode",
  },
  {
    title: "考场号",
    dataIndex: "examRoom",
  },
  {
    title: "扫描状态",
    dataIndex: "scanned",
  },
];
const exportLoading = ref(false);
const exportFile = async () => {
  if (exportLoading.value) return;
  exportLoading.value = true;

  exportScanned(transParams.value)
    .then(() => {
      window.$message.success("导出成功！");
    })
    .finally(() => {
      exportLoading.value = false;
    });
};
</script>
<style lang="less" scoped>
.scan-check-miss {
  padding: 20px;
}
</style>