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 === 'scannedText'">
          {{ record[column.dataIndex] }}
        </template>
        <template v-if="column.dataIndex === 'subjectName'">
          {{ record.subjectCode + "-" + record.subjectName }}
        </template>
        <template v-if="column.dataIndex === 'examSite'">
          {{ getExamSiteName(record.examSite) }}
        </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,
  getProvince,
  getExamRoom,
} 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);
const { data: provinceOptions, run: runProvince } = useRequest(getProvince);
const { data: examRoomOptions, run: runExamRoom } = useRequest(getExamRoom);
runSite({ examId: userStore.curExam?.id });
runCampus({ examId: userStore.curExam?.id });
runProvince({ examId: userStore.curExam?.id });
runExamRoom({ 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,
  false
);
const fields = computed(() => {
  return [
    {
      cell: "subjectCode",
      type: "select",
      colSpan: 3,
      label: "科目",
    },
    {
      prop: "province",
      type: "select",
      colSpan: 3,
      label: "省份",
      attrs: {
        options: (Array.isArray(provinceOptions.value)
          ? provinceOptions.value
          : []
        ).map((item: any) => ({
          value: item,
          label: item,
        })),
        // fieldNames: { label: "name", value: "code" },
        allowClear: true,
      },
    },
    {
      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: "考场号",
      attrs: {
        options: (Array.isArray(examRoomOptions.value)
          ? examRoomOptions.value
          : []
        ).map((item: any) => ({
          value: item,
          label: item,
        })),
        // fieldNames: { label: "name", value: "code" },
        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: "查询",
          onClick: () => {
            toPage(1);
          },
        },
        {
          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: "scannedText",
  },
];
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;
    });
};

const getExamSiteName = (code: string) => {
  let find = ((examSiteOptions.value as any) || []).find((item: any) => {
    return item.code == code;
  });
  return find?.name || "";
};
</script>
<style lang="less" scoped>
.scan-check-miss {
  padding: 20px;
}
</style>