client-admin/src/render/views/BaseDataConfig/StuImport.vue

<template>
  <div class="stu-import">
    <qm-low-form :fields="fields">
      <template #tip>
        <div class="tip">
          导入参数设置为：考试年度 - {{ year }}；考次 - {{ yearHalf }}
        </div>
      </template>
    </qm-low-form>
    <a-table :data-source="dataList" :columns="columns" size="middle" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'operation'">
          <qm-button type="link" @click="openImportDialog(record)"
            >导入</qm-button
          >
          <qm-button type="link" @click="clear(record)">清空</qm-button>
        </template>
      </template>
    </a-table>
    <SetImportParamsDialog
      v-model="showSetParamsDialog"
      v-if="showSetParamsDialog"
    ></SetImportParamsDialog>
    <StuImportFileDialog
      v-model="showStuImportFileDialog"
      v-if="showStuImportFileDialog"
    >
    </StuImportFileDialog>
  </div>
</template>
<script name="StuImport" lang="ts" setup>
import { ref } from "vue";
import SetImportParamsDialog from "./SetImportParamsDialog.vue";
import { getStuList } from "@/ap/baseDataConfig";
import { useUserStore } from "@/store";
import { getStuImportSet, clearStuData } from "@/ap/baseDataConfig";
import StuImportFileDialog from "./StuImportFileDialog.vue";
import type { TableColumnsType } from "@qmth/ui";

const userStore = useUserStore();
const showSetParamsDialog = ref(false);
const showStuImportFileDialog = ref(false);
const year = ref();
const yearHalf = ref();
const loading = ref(false);
const fullYear = (num: number) => {
  return String(num).length == 4 ? num : "20" + num;
};
const _getStuImportSet = () => {
  getStuImportSet({ examId: userStore.curExam?.id as number }).then(
    (res: any) => {
      year.value = res?.year ? fullYear(res.year) : "";
      yearHalf.value = res?.yearHalf;
    }
  );
};
_getStuImportSet();
const fields = ref([
  {
    type: "button",
    text: "设置导入参数",
    attrs: {
      onClick: () => {
        showSetParamsDialog.value = true;
      },
    },
  },
  {
    cell: "tip",
  },
]);
const columns: TableColumnsType = [
  {
    title: "序号",
    dataIndex: "index",
    key: "index",
    width: 100,
    customRender: ({ index }) => `${index + 1}`,
  },
  {
    title: "科目代码",
    dataIndex: "subjectCode",
  },
  {
    title: "科目名称",
    dataIndex: "subjectName",
  },
  {
    title: "已导入考生数",
    dataIndex: "studentCount",
  },
  {
    title: "操作",
    key: "operation",
    width: 300,
  },
];
const dataList = ref([]);
const search = () => {
  loading.value = true;
  getStuList({ examId: userStore.curExam?.id as number })
    .then((res: any) => {
      dataList.value = res || [];
    })
    .finally(() => {
      loading.value = false;
    });
};
search();
const clear = (row: any) => {
  window.$confirm({
    title: () => "系统通知",
    content: () => "请确认是否立即删除？",
    onOk() {
      clearStuData({
        examId: userStore.curExam?.id as number,
        subjectCode: row.subjectCode,
      }).then(() => {
        window.$message.success("操作成功");
        search();
      });
    },
  });
};
const curRow = ref(null);
const openImportDialog = (row: any) => {
  curRow.value = row;
  showStuImportFileDialog.value = true;
};
</script>
<style lang="less" scoped>
.stu-import {
  padding: 0 20px 20px 20px;
  .tip {
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    background: #e8f3ff;
    margin-left: 8px;
    padding: 0 12px;
    color: #165dff;
  }
}
</style>