ba_web/src/views/Training/securityNjgl/components/detailForm.vue

<template>
  <div class="dialog" v-if="dialogForm">
    <div class="head_box">
      <span>详情</span>
      <div><el-button size="small" @click="close">关闭</el-button></div>
    </div>
    <div class="cntinfo">
      <!-- 标签 -->
      <ul class="tag-box">
        <li class="tag_item">驳回</li>
        <li class="tag_item">通过</li>
        <li class="tag_item">待审核</li>
      </ul>
      <!-- 内容描述 -->
      <el-descriptions class="desc" :column="3" border label-width="200px">
        <el-descriptions-item label="保安公司名称">{{ detail.companyName }}</el-descriptions-item>
        <el-descriptions-item label="年审年份">{{ detail.reviewYear }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ detail.xm }}</el-descriptions-item>

        <el-descriptions-item label="身份证号码">{{ detail.sfzh }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ detail.phone }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ detail.sexText }}</el-descriptions-item>

        <el-descriptions-item label="民族">{{ detail.nationText }}</el-descriptions-item>
        <el-descriptions-item label="籍贯">{{ detail.nativePlace }}</el-descriptions-item>
        <el-descriptions-item label="文化程度">{{ detail.education }}</el-descriptions-item>

        <el-descriptions-item label="证书编号">{{ detail.certificateNo }}</el-descriptions-item>
        <el-descriptions-item label="上岗证号码">{{ detail.workCardNo }}</el-descriptions-item>
        <el-descriptions-item label="服务行业">{{ detail.serviceIndustry }}</el-descriptions-item>

        <el-descriptions-item label="服务行业名称">{{ detail.serviceIndustryName }}</el-descriptions-item>
        <el-descriptions-item label="入职时间">{{ detail.entryDate }}</el-descriptions-item>
        <el-descriptions-item label="政治面貌">{{ detail.politicalStatus }}</el-descriptions-item>

        <el-descriptions-item label="无犯罪记录证明">
          <div class="img-grid one">
            <el-image
              v-for="(src, idx) in noCrimeUrls"
              :key="idx"
              :src="src"
              fit="cover"
              :preview-src-list="noCrimeUrls"
              preview-teleported
              class="img"
            />
            <div v-if="noCrimeUrls.length === 0" class="img-placeholder"></div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="体检报告">
          <div class="img-grid one">
            <el-image
              v-for="(src, idx) in medicalUrls"
              :key="idx"
              :src="src"
              fit="cover"
              :preview-src-list="medicalUrls"
              preview-teleported
              class="img"
            />
            <div v-if="medicalUrls.length === 0" class="img-placeholder"></div>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="身份证正反面">
          <div class="img-grid two">
            <el-image
              v-for="(src, idx) in idCardUrls"
              :key="idx"
              :src="src"
              fit="cover"
              :preview-src-list="idCardUrls"
              preview-teleported
              class="img"
            />
            <template v-if="idCardUrls.length === 0">
              <div class="img-placeholder"></div>
              <div class="img-placeholder"></div>
            </template>
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="审核时间">{{ detail.auditTime }}</el-descriptions-item>
        <el-descriptions-item label="发证机关">{{ detail.issuingAuthority }}</el-descriptions-item>
        <el-descriptions-item label="发证日期">{{ detail.issueDate }}</el-descriptions-item>

        <el-descriptions-item label="驳回原因" :span="3">{{ detail.rejectReason }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, defineEmits, getCurrentInstance } from 'vue';
const emit = defineEmits(["refresh"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  dict: {
    default: [[]], //二维数组
    type: Array
  }
})
const dialogForm = ref(false);
const listQuery = ref({});

// 初始化数据
const init = (type, row,) => {
  dialogForm.value = true;
  const raw = row || {};
  listQuery.value = {
    ...raw,
    companyName: raw.companyName || raw.dwmc || raw.gsmc || raw.bagsmc,
    reviewYear: raw.reviewYear || raw.njnd || raw.njYear || raw.nf || raw.year,
    phone: raw.phone || raw.lxdh || raw.dh || raw.sjhm || raw.xssbrdh,
    sexText: raw.sexText || raw.xbText || raw.xb || raw.sex,
    nationText: raw.nationText || raw.mzText || raw.mz,
    nativePlace: raw.nativePlace || raw.jg || raw.jgText,
    education: raw.education || raw.whcd || raw.whcdText,
    certificateNo: raw.certificateNo || raw.zsbh || raw.zsbhm || raw.zjbh,
    workCardNo: raw.workCardNo || raw.sgzh || raw.sgzNumber,
    serviceIndustry: raw.serviceIndustry || raw.fwhy || raw.fwhyText || raw.hy,
    serviceIndustryName: raw.serviceIndustryName || raw.fwhymc || raw.hyName,
    entryDate: raw.entryDate || raw.rzsj || raw.rzrq,
    politicalStatus: raw.politicalStatus || raw.zzmm || raw.zzmmText,
    auditTime: raw.auditTime || raw.shsj || raw.njsj,
    rejectReason: raw.rejectReason || raw.bhyy || raw.bhReason || raw.reason,
    issuingAuthority: raw.issuingAuthority || raw.fzjg,
    issueDate: raw.issueDate || raw.fzrq,
    noCrimeProof: raw.noCrimeProof || raw.wffzjlzm || raw.wffzjlzmId,
    medicalReport: raw.medicalReport || raw.tjbg || raw.tjbgId,
    idCardImages: raw.idCardImages || raw.sfzzf || raw.sfzImgs || raw.sfzzm,
  };
};

const close = () => {
  dialogForm.value = false;
  listQuery.value = {};
};;

const detail = computed(() => listQuery.value || {});

const toIdList = (val, limit) => {
  const v = val ?? [];
  const arr = Array.isArray(v) ? v : [v];
  const ids = arr
    .map((el) => {
      if (!el) return null;
      if (typeof el === 'string' || typeof el === 'number') return String(el);
      if (typeof el === 'object') return el.id ? String(el.id) : null;
      return null;
    })
    .filter(Boolean);
  return typeof limit === 'number' ? ids.slice(0, limit) : ids;
};

const toUrls = (val, limit) => {
  return toIdList(val, limit).map((id) => `/bagl/mosty-base/minio/image/download/${id}`);
};

const noCrimeUrls = computed(() => toUrls(detail.value.noCrimeProof, 1));
const medicalUrls = computed(() => toUrls(detail.value.medicalReport, 1));
const idCardUrls = computed(() => toUrls(detail.value.idCardImages, 2));

defineExpose({ init })
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";

.mapBox {
  width: calc(100% - 24rem);
  height: 500px;
  overflow: hidden;
  margin: 0 12rem;
}
.cntinfo{
  position: relative;
  padding: 10px 20px;
  box-sizing: border-box;
  .tag-box{
    position: absolute;
    top: 20px;
    right: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .tag_item{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      line-height: 65px;
      text-align: center;
      font-size: 16px;
      margin-bottom: 20px;
    }
    .tag_item:nth-child(1){
      border: 5px solid #FA3758;
      color: #FA3758;
      background: rgba(250,55,88,0.2);
    }
    .tag_item:nth-child(2){
      color: #28EEBF;
      background: rgba(40,238,191,0.2);
      border: 5px solid #28EEBF;
    }
    .tag_item:nth-child(3){
      background: rgba(0,114,255,0.2);
       color: #0072FF;
      border: 5px solid #0072FF;
    }
  } 
}

.desc {
  width: 100%;
}

.img-grid {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 70px;
}

.img-grid.one .img,
.img-grid.one .img-placeholder {
  width: 64px;
  height: 64px;
}

.img-grid.two .img,
.img-grid.two .img-placeholder {
  width: 64px;
  height: 64px;
}

.img-placeholder {
  background: #d9d9d9;
  border-radius: 2px;
}
::v-deep .el-descriptions__label.el-descriptions__cell.is-bordered-label{
  background: #F6FAFF;
}
</style>