client-admin/src/render/views/ResultExport/DbfExport.vue

<template>
  <div class="m-b-16px">
    <a-button type="primary" @click="onSetSiteCode">
      <template #icon><SettingOutlined /></template>设置扫描点代码
    </a-button>
    <a-tag
      v-if="siteCodeData.scanSite"
      class="m-l-12px ant-tag-big"
      color="blue"
      >扫描点代码：{{ siteCodeData.scanSite }}</a-tag
    >
  </div>
  <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="onExportAnswer(index)"
          >导出扫描答案DBF</qm-button
        >
        <qm-button type="link" @click="onExportPackage(index)"
          >导出打包DBF</qm-button
        >
      </template>
    </template>
  </a-table>

  <!-- ModifySiteCode -->
  <ModifySiteCode
    ref="modifySiteCodeRef"
    :row-data="siteCodeData"
    @modified="siteCodeModified"
  />
  <!-- TaskProgressDialog -->
  <TaskProgressDialog
    ref="taskProgressDialogRef"
    :task="curExportTask"
    :download-handle="downloadTaskFile"
  />
</template>

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

import { SubjectItem } from "@/ap/types/base";
import { getSubjectList } from "@/ap/base";
import {
  markSiteCodeInfo,
  dbfAnswerExport,
  dbfPackageExport,
  dbfExportTaskDownload,
} from "@/ap/resultExport";
import { markSiteSetParams } from "@/ap/types/resultExport";
import { useUserStore } from "@/store";

import ModifySiteCode from "./ModifySiteCode.vue";
import TaskProgressDialog from "./TaskProgressDialog.vue";

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

const userStore = useUserStore();

const loading = ref(false);
const dataList = ref<SubjectItem[]>([]);
const curExportTask = ref({ id: "", name: "" });

const columns: TableProps["columns"] = [
  {
    title: "科目代码",
    dataIndex: "code",
  },
  {
    title: "科目名称",
    dataIndex: "name",
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: "240px",
    customCell: () => {
      return {
        class: "operation-cell",
      };
    },
  },
];

const siteCodeData = ref({} as markSiteSetParams);
async function getScanSiteCode() {
  const res = await markSiteCodeInfo({ examId: userStore.curExam.id });
  siteCodeData.value = { scanSite: res, examId: userStore.curExam.id };
}

const modifySiteCodeRef = ref();
function onSetSiteCode() {
  modifySiteCodeRef.value?.open();
}
function siteCodeModified(data: markSiteSetParams) {
  siteCodeData.value = data;
}

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

const taskProgressDialogRef = ref();
async function onExportAnswer(index: number) {
  const record = dataList.value[index];
  const res = await dbfAnswerExport({
    examId: userStore.curExam.id,
    subjectCode: record.code,
  });
  curExportTask.value = {
    id: res.taskId,
    name: "扫描答案DBF",
  };
  taskProgressDialogRef.value?.open();
}

async function onExportPackage(index: number) {
  const record = dataList.value[index];
  const res = await dbfPackageExport({
    examId: userStore.curExam.id,
    subjectCode: record.code,
  });
  curExportTask.value = { id: res.taskId, name: "打包DBF" };
  taskProgressDialogRef.value?.open();
}

async function downloadTaskFile() {
  const res = await dbfExportTaskDownload(curExportTask.value.id).catch(
    () => false
  );
  if (!res) return;
  message.success("文件下载成功！");
}

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