integrated_traffic_vue/src/views/archives/semester/components/sign.vue

<template>
  <el-dialog
    v-if="type === 102"
    :model-value="type === 102"
    :title="title"
    :before-close="fnClose"
  >
    <el-space wrap>
      <el-button type="primary" v-print="'#printContent'">打印</el-button>
    </el-space>
    <div id="printContent">
      <div class="tc">
        <h3>安全培训教育记录及签字表</h3>
      </div>
      <div class="tc">
        (
        <el-checkbox>岗前三级培训</el-checkbox>
        <el-checkbox>专项培训</el-checkbox>
        <el-checkbox>再培训</el-checkbox>
        <el-checkbox>日常培训</el-checkbox>
        )
      </div>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="日期">
          {{ data.taskInfo.CREATTIME }}
        </el-descriptions-item>
        <el-descriptions-item label="培训地点"> </el-descriptions-item>
        <el-descriptions-item label="人数">
          {{ data.studentList.length }}
        </el-descriptions-item>
        <el-descriptions-item label="学时">
          {{ class_hours }}
        </el-descriptions-item>
        <el-descriptions-item label="培训对象" :span="2">
        </el-descriptions-item>
        <el-descriptions-item label="培训教师" :span="3">
          {{ teachers }}
        </el-descriptions-item>
        <el-descriptions-item label="培训内容:" :span="3">
          {{ coursewares }}
        </el-descriptions-item>
      </el-descriptions>

      <table class="print_use">
        <thead>
          <tr>
            <td colspan="2" class="tc" style="border: none">受培训人</td>
          </tr>
          <tr>
            <td class="title">姓名</td>
            <td class="title">部门</td>
          </tr>
        </thead>
        <tbody>
          <template v-if="data.studentList && data.studentList.length > 0">
            <tr v-for="(item, index) in data.studentList" :key="index">
              <td>
                {{ item.USER_NAME }}
              </td>
              <td>
                {{ item.DEPARTMENT_NAME }}
              </td>
            </tr>
          </template>
        </tbody>
      </table>

      <div class="print_no_use">
        <div class="tc">受培训人</div>
        <layout-table :data="data.studentList" :show-pagination="false">
          <el-table-column prop="USER_NAME" label="姓名" />
          <el-table-column prop="DEPARTMENT_NAME" label="部门" />
        </layout-table>
      </div>
    </div>
    <div v-html="PRINT_STYLE" />
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  getAllCourseware,
  getStudyTaskInfo,
  getStudentByTaskId,
} from "@/request/archives.js";
import { computed, reactive } from "vue";
import { useVModels } from "@vueuse/core";
import { PRINT_STYLE } from "@/assets/js/constant.js";

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: "",
  },
  year: {
    type: String,
    required: false,
    default: "",
  },
  type: {
    type: Number,
    required: true,
  },
  studyTaskId: {
    type: String,
    required: false,
    default: "",
  },
});
const { title, type, studyTaskId } = useVModels(props);

const data = reactive({
  taskInfo: {},
  coursewareList: [],
  studentList: [],
});

const class_hours = computed(() => {
  let result = 0;
  if (data.coursewareList && data.coursewareList.length > 0) {
    data.coursewareList.forEach((item) => {
      result += item.CLASSHOUR;
    });
  }
  return ((result || 0) / 45).toFixed(2);
});

const teachers = computed(() => {
  const result = [];
  if (data.coursewareList && data.coursewareList.length > 0) {
    data.coursewareList.forEach((item) => {
      result.push(item.SPEAKER);
    });
  }
  return result.length > 0 ? result.join(",") : "";
});

const coursewares = computed(() => {
  const result = [];
  if (data.coursewareList && data.coursewareList.length > 0) {
    data.coursewareList.forEach((item) => {
      result.push(item.COURSEWARENAME);
    });
  }
  return result.length > 0 ? result.join(",") : "";
});

const emits = defineEmits(["update:visible", "update:current"]);

const fnClose = () => {
  emits("update:current", undefined);
};

const fnGetStudyTaskInfo = async () => {
  if (studyTaskId && studyTaskId.value && studyTaskId.value.length > 0) {
    const resData = await getStudyTaskInfo({
      STUDYTASK_ID: studyTaskId.value,
    });
    if (resData && resData.pd) {
      data.taskInfo = resData.pd;
    }
  }
};
await fnGetStudyTaskInfo();

const fnGetAllCoursewareByHandout = async () => {
  if (studyTaskId && studyTaskId.value && studyTaskId.value.length > 0) {
    const resData = await getAllCourseware({
      STUDYTASK_ID: studyTaskId.value,
    });
    if (resData && resData.varList) {
      data.coursewareList = resData.varList;
    }
  }
};
await fnGetAllCoursewareByHandout();

const fnGetStudentByTaskId = async () => {
  if (studyTaskId && studyTaskId.value && studyTaskId.value.length > 0) {
    const resData = await getStudentByTaskId({
      STUDYTASK_ID: studyTaskId.value,
    });
    if (resData && resData.varList) {
      data.studentList = resData.varList;
    }
  }
};
await fnGetStudentByTaskId();
</script>

<style scoped lang="scss">
:deep {
  .el-descriptions__label {
    width: 100px;
  }
}
</style>