integrated_traffic_vue/src/views/archives_management/semester/components/image.vue

<template>
  <el-dialog
    :title="title"
    :model-value="type === 107"
    width="1100px"
    @close="fnClose"
  >
    <div class="tr mb">
      <el-button type="primary" @click="fnExport">导出</el-button>
    </div>
    <div class="flex mb">
      <p>班级名称:{{ info.NAME }}</p>
    </div>
    <table class="print_table">
      <tr>
        <td width="5%">序号</td>
        <td width="10%">学员姓名</td>
        <td width="15%">身份证号</td>
        <td width="10%">手机</td>
        <td width="10%">头像</td>
        <td colspan="5">认证照片</td>
      </tr>
      <template v-for="(item, index) in list" :key="index">
        <tr style="height: 75px">
          <td width="5%">{{ index + 1 }}</td>
          <td width="10%">{{ item.NAME }}</td>
          <td width="15%">{{ item.USER_ID_CARD }}</td>
          <td width="10%">{{ item.PHONE }}</td>
          <td width="10%">
            <viewer v-if="item.PORTRAIT">
              <img
                :src="FILE_URL + item.PORTRAIT"
                style="width: 50px; height: 50px"
              />
            </viewer>
          </td>
          <td width="10%">
            <viewer v-if="item.FACES[0]">
              <img
                :src="FILE_URL + item.FACES[0]"
                style="width: 50px; height: 50px"
              />
            </viewer>
          </td>
          <td width="10%">
            <viewer v-if="item.FACES[1]">
              <img
                :src="FILE_URL + item.FACES[1]"
                style="width: 50px; height: 50px"
              />
            </viewer>
          </td>
          <td width="10%">
            <viewer v-if="item.FACES[2]">
              <img
                :src="FILE_URL + item.FACES[2]"
                style="width: 50px; height: 50px"
              />
            </viewer>
          </td>
          <td width="10%">
            <viewer v-if="item.FACES[3]">
              <img
                :src="FILE_URL + item.FACES[3]"
                style="width: 50px; height: 50px"
              />
            </viewer>
          </td>
          <td width="10%">
            <viewer v-if="item.FACES[4]">
              <img
                :src="FILE_URL + item.FACES[4]"
                style="width: 50px; height: 50px"
              />
            </viewer>
          </td>
        </tr>
      </template>
    </table>
    <div class="mt">备注：仅限用于线上学习证明材料，其他使用无效</div>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import { ElMessageBox } from "element-plus";
import {
  getClassGoEdit,
  getStudentFaces,
  downloadImagedata,
} 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,
  },
  clazzId: {
    type: String,
    required: true,
  },
});
const info = ref({});
const emits = defineEmits(["update:type"]);
const FILE_URL = import.meta.env.VITE_FILE_URL;
const fnGetData = async () => {
  const resData = await getClassGoEdit({
    TYPE: props.type,
    CLASS_ID: props.clazzId,
  });
  info.value = resData.pd;
};
const { list, fnGetData: fnStudentFaces } = useListData(getStudentFaces, {
  usePagination: false,
  immediate: false,
  key: "studentList",
  callbackFn: (list) => {
    list.forEach((item) => {
      if (item.FACES) item.FACES = item.FACES.split(",");
      else item.FACES = [];
    });
  },
});
watchEffect(() => {
  if (props.type === 107) {
    fnGetData();
    fnStudentFaces({
      CLASS_ID: props.clazzId,
    });
  }
});
const fnExport = async () => {
  await ElMessageBox.confirm("确定要导出吗？", { type: "warning" });
  await downloadImagedata({
    CLASS_ID: props.clazzId,
  });
  await ElMessageBox.confirm("导出后请前往档案下载中下载该档案！", "温馨提示", {
    type: "info",
  });
};
const fnClose = () => {
  emits("update:type", 0);
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>