integrated_traffic_vue/src/views/archives_management/enterprise/components/edumanager.vue

<template>
  <el-dialog
    :title="title"
    :model-value="type === 104"
    width="1100px"
    @close="fnClose"
  >
    <div class="tr">
      <el-button type="primary" @click="fnExport">导出</el-button>
    </div>
    <div class="tc">
      <h3>{{ year }}年度安全培训教育管理台账</h3>
    </div>
    <p class="mb">单位名称:{{ corpName }}</p>
    <layout-table :data="list" :show-pagination="false">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="TRAINING_DATE" label="培训时间" />
      <el-table-column prop="TRAINING_OBJECT" label="培训对象" />
      <el-table-column prop="TRAINING_TYPE" label="培训类型">
        <template #default="{ row }">
          <span v-if="row.TRAINLEVEL_NAME"
            >{{ row.TRAINING_TYPE }}-{{ row.TRAINLEVEL_NAME }}</span
          >
          <span v-else>{{ row.TRAINING_TYPE }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="TRAINING_CONTENT" label="培训内容" />
      <el-table-column prop="PERSON_NUMBER" label="参加人数" />
      <el-table-column prop="CLASS_HOURS" label="培训学时" />
      <el-table-column prop="CORP_NAME" label="培训地点" />
      <el-table-column prop="TRAINING_TEACHERS" label="培训教师" />
      <el-table-column prop="ASSESSMENT_METHOD" label="考核方式">
        <span>线上考核</span>
      </el-table-column>
      <el-table-column prop="ASSESSMENT" label="汇总考核情况">
        <template #default="{ row }">
          <span>
            参与人数:{{ row.PERSON_NUMBER }},<br />
            通过人数:{{ row.GETPASS_NUMBER }},<br />
            通过率:{{
              !row.GETPASS_NUMBER
                ? 0
                : ((row.GETPASS_NUMBER / row.PERSON_NUMBER) * 100).toFixed(2)
            }}%
          </span>
        </template>
      </el-table-column>
    </layout-table>
    <div class="flex mt">
      <div>档案管理人员:</div>
      <div>更新日期:</div>
    </div>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { watchEffect } from "vue";
import { ElMessageBox } from "element-plus";
import { debounce } from "throttle-debounce";
import {
  getArchivesManagerList,
  downloadEdumanageword,
} from "@/request/training_archive_management.js";
import useListData from "@/assets/js/useListData.js";

const props = defineProps({
  type: {
    type: Number,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  corpName: {
    type: String,
    required: true,
  },
  year: {
    type: String,
    required: true,
  },
});
const emits = defineEmits(["update:type"]);
const { list, fnGetData } = useListData(getArchivesManagerList, {
  otherParams: {
    TYPE: props.type,
    YEAR: props.year,
  },
  usePagination: false,
  immediate: false,
});
watchEffect(() => {
  if (props.type === 104) fnGetData();
});
const fnExport = debounce(
  1000,
  async () => {
    await ElMessageBox.confirm("确定要导出吗？", { type: "warning" });
    await downloadEdumanageword({
      YEAR: props.year,
      NAME: props.corpName,
    });
    await ElMessageBox.confirm(
      "导出后请前往档案下载中下载该档案！",
      "温馨提示",
      { type: "info" }
    );
  },
  { atBegin: true }
);
const fnClose = () => {
  emits("update:type", 0);
};
</script>

<style scoped lang="scss">
.flex {
  width: 80%;
  display: flex;
  justify-content: space-between;
}
</style>