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>班级名称:{{ data.info.NAME }}</p>
    </div>
    <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 data.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 { reactive, watchEffect } from "vue";
import { ElMessageBox } from "element-plus";
import {
  getClassGoEdit,
  getStudentFaces,
  downloadImagedata,
} from "@/request/training_archive_management.js";

const props = defineProps({
  type: {
    type: Number,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  clazzId: {
    type: String,
    required: true,
  },
  postId: {
    type: String,
    required: true,
  },
  corpInfoId: {
    type: String,
    required: true,
  },
  corpName: {
    type: String,
    required: true,
  },
  postName: {
    type: String,
    required: true,
  },
});
const data = reactive({
  info: {},
  list: [],
});
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,
  });
  data.info = resData.pd;
};
const fnStudentFaces = async () => {
  const resData = await getStudentFaces({
    CLASS_ID: props.clazzId,
  });
  data.list = resData.studentList;
  data.list.forEach((item) => {
    if (item.FACES) {
      item.FACES = item.FACES.split(",");
    } else {
      item.FACES = [];
    }
  });
};
fnStudentFaces();
watchEffect(() => {
  if (props.type === 107) {
    fnGetData();
    fnStudentFaces();
  }
});
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;
}

table {
  border-collapse: collapse;
  width: 100%;

  td {
    border: 1px solid var(--el-border-color);
    padding: 8px;
    font-size: 14px;
    text-align: center;
  }
}
</style>