integrated_traffic_vue/src/views/archives_management/semester/archives.vue

<template>
  <layout-card>
    <div class="tr mb">
      <el-button type="primary" @click="fnExport">导出</el-button>
    </div>
    <layout-table
      ref="tableRef"
      row-key="TYPE"
      :data="
        TRAINTYPE === 'bd2a3b7767db49968e26cfccc3c2b4a4'
          ? data.listTraffic
          : data.list
      "
      :show-pagination="false"
    >
      <el-table-column reserve-selection type="selection" width="55" />
      <el-table-column prop="NAME" label="目录" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button type="primary" text link @click="fnView(row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </layout-table>
    <component
      :is="data.component"
      v-if="data.component"
      v-model:type="data.type"
      :title="data.title"
      :clazz-id="CLASS_ID"
      :corp-info-id="CORPINFO_ID"
      :corp-name="CORP_NAME"
    />
    <setting v-model:visible="data.settingDialogVisible" @submit="fnSubmit" />
  </layout-card>
</template>

<script setup>
import TrainingSchedule from "./components/training_schedule.vue";
import Training from "./components/training.vue";
import Image from "./components/image.vue";
import Report from "./components/report.vue";
import Results from "./components/results.vue";
import Achievement from "./components/achievement.vue";
import SignatureForm from "./components/signature_form.vue";
import SignatureFormTraffic from "./components/signature_form_traffic.vue";
import { markRaw, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  getClassPapers,
  downloadArchiveDirectory,
} from "@/request/training_archive_management.js";
import Setting from "./components/setting.vue";

const router = useRouter();
const route = useRoute();
const { CLASS_ID, CORP_NAME, CLASS_NAME, CORPINFO_ID, TRAINTYPE } = route.query;
const tableRef = ref(null);
const data = reactive({
  list: [
    {
      NAME: "安全培训教材会审表",
      TYPE: 100,
      component: "",
      url: "/archives_management/semester/archives/review_list",
    },
    {
      NAME: "培训日程安排通知/也可称为培训计划",
      TYPE: 101,
      component: markRaw(TrainingSchedule),
    },
    {
      NAME: "安全培训教材或课程讲义",
      TYPE: 106,
      component: "",
      url: "/archives_management/semester/archives/handout_list",
    },
    {
      NAME: "安全培训教育记录及签字表",
      TYPE: 102,
      component: markRaw(SignatureForm),
    },
    { NAME: "培训影像资料", TYPE: 107, component: markRaw(Image) },
    {
      NAME: "培训考核试卷",
      TYPE: 103,
      component: "",
      url: "/archives_management/semester/archives/paper_list",
    },
    { NAME: "学员考核成绩统计表", TYPE: 104, component: markRaw(Results) },
    { NAME: "本期综合考评报告", TYPE: 105, component: markRaw(Report) },
  ],
  listTraffic: [
    {
      NAME: "教育培训记录",
      TYPE: 110,
      component: markRaw(Training),
    },
    {
      NAME: "安全培训教材或课程讲义",
      TYPE: 106,
      component: "",
      url: "/archives_management/semester/archives/handout_list",
    },
    {
      NAME: "安全知识培训签到表",
      TYPE: 112,
      component: markRaw(SignatureFormTraffic),
    },
    { NAME: "培训影像资料", TYPE: 107, component: markRaw(Image) },
    { NAME: "安全知识培训成绩表", TYPE: 113, component: markRaw(Achievement) },
  ],
  type: 0,
  title: "",
  component: "",
  settingDialogVisible: false,
});
const fnView = ({ TYPE, NAME, component, url }) => {
  if (!component && url) {
    router.push({
      path: url,
      query: {
        ...route.query,
      },
    });
  } else {
    data.type = TYPE;
    data.title = NAME;
    data.component = component;
  }
};
const fnExport = async () => {
  const selectionData = tableRef.value.getSelectionRows();
  if (selectionData.length === 0) {
    ElMessage.warning("请选中要导出的项");
    return;
  }
  const TYPE = selectionData.map((item) => item.TYPE);
  if (TYPE.includes(101)) {
    await ElMessageBox.confirm("导出前，请设置培训计划表中的编制日期", {
      type: "warning",
    });
    data.settingDialogVisible = true;
  } else {
    await fnSubmit();
  }
};
const fnSubmit = async (UPDATE_DATE) => {
  const selectionData = tableRef.value.getSelectionRows();
  if (
    selectionData.length === 1 &&
    JSON.stringify(selectionData[0].TYPE) === "103"
  ) {
    const resData = await getClassPapers({ CLASS_ID });
    if (resData.varList.length === 0) {
      ElMessage.error("培训考核试卷没有数据！");
    } else {
      await recordDownLoad(selectionData, UPDATE_DATE);
    }
  } else {
    await recordDownLoad(selectionData, UPDATE_DATE);
  }
};
const recordDownLoad = async (selectionData, UPDATE_DATE) => {
  const archiveDirectory = [];
  for (let i = 0; i < selectionData.length; i++) {
    archiveDirectory.push({
      NAME: selectionData[i].NAME,
      TYPE: selectionData[i].TYPE,
    });
  }
  await ElMessageBox.confirm("确认要导出吗？", { type: "warning" });
  await downloadArchiveDirectory({
    CLASS_NAME,
    CLASS_ID,
    CORPINFO_ID,
    typeList: JSON.stringify(archiveDirectory),
    UPDATE_DATE,
  });
  await ElMessageBox.confirm("导出后请前往档案下载中下载该档案！", "温馨提示", {
    type: "info",
  });
  tableRef.value.clearSelection();
};
</script>

<style scoped></style>