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" :class="detail.shzt == 0 ? 'dsh_item' : detail.shzt == 1 ? 'tgg_item' : 'jtb_item'">
          <!-- 0-待审核 1-通过 2-驳回 -->
          {{ detail.shzt == 0 ? '待审核' : detail.shzt == 1 ? '通过' : '驳回' }}
        </li>
      </ul>
      <!-- 内容描述 -->
      <el-descriptions class="desc" :column="3" border label-width="200px">
        <el-descriptions-item label="保安公司名称">{{ detail.ssbakk }}</el-descriptions-item>
        <el-descriptions-item label="年审年份">{{ detail.njnf }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ detail.xm }}</el-descriptions-item>

        <el-descriptions-item label="身份证号码">{{ detail.sfzhm }}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ detail.dh }}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <DictTag :value="detail.xb" :tag="false" :options="props.dic.D_BZ_XB" />
        </el-descriptions-item>
        <el-descriptions-item label="民族">
          <DictTag :value="detail.mz" :tag="false" :options="props.dic.D_BZ_MZ" />
        </el-descriptions-item>
        <el-descriptions-item label="籍贯">{{ detail.jg }}</el-descriptions-item>
        <el-descriptions-item label="文化程度">
          <DictTag :value="detail.whcd" :tag="false" :options="props.dic.D_BZ_WHCD" />
        </el-descriptions-item>

        <el-descriptions-item label="证书编号">{{ detail.zsbh }}</el-descriptions-item>
        <el-descriptions-item label="上岗证号码">{{ detail.sgxkhm }}</el-descriptions-item>
        <el-descriptions-item label="服务行业">
          <DictTag :value="detail.fwxy" :tag="false" :options="props.dic.D_BAXX_SSHY" />
        </el-descriptions-item>

        <el-descriptions-item label="服务行业名称">{{ detail.fwxymc }}</el-descriptions-item>
        <el-descriptions-item label="入职时间">{{ detail.rzsj }}</el-descriptions-item>
        <el-descriptions-item label="政治面貌">
          <DictTag :value="detail.zzmm" :tag="false" :options="props.dic.D_BZ_ZZMM" />
        </el-descriptions-item>

        <el-descriptions-item label="无犯罪记录证明">
          <div class="img-grid one">
            <el-image
              :src="baseUrl + detail.wfbjlzm"
              fit="cover"
              :preview-src-list='[baseUrl + detail.wfbjlzm]'
              preview-teleported
              class="img"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="体检报告">
          <div class="img-grid one">
            <el-image
              :src="baseUrl + detail.tjbg"
              fit="cover"
              :preview-src-list='[baseUrl + detail.tjbg]'
              preview-teleported
              class="img"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="身份证正反面">
          <div class="img-grid two">
            <el-image
              :src="baseUrl + detail.sfzzm"
              fit="cover"
              :preview-src-list='[baseUrl + detail.sfzzm]'
              preview-teleported
              class="img"
            />
            <el-image
              :src="baseUrl + detail.sfzfm"
              fit="cover"
              :preview-src-list='[baseUrl + detail.sfzfm]'
              preview-teleported
              class="img"
            />
          </div>
        </el-descriptions-item>

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

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

<script setup>
import { ref, computed, defineEmits, getCurrentInstance,defineProps } from 'vue';
import { qcckPost } from "@/api/qcckApi.js";
const emit = defineEmits(["refresh"]);
const { proxy } = getCurrentInstance();
const baseUrl = '/bagl/mosty-base/minio/image/download'
const props = defineProps({
  dic: {
    default: [[]], //二维数组
    type: Array
  }
})

const dialogForm = ref(false);
const listQuery = ref({});
const detail = ref({})

// 初始化数据
const init = (type, row,) => {
  dialogForm.value = true;
  qcckPost({},'/mosty-base/bans/njxx/getInfo/'+row.id).then(res => {
    let zj = res.sfzzfmj.split(',');
    res.sfzzm = [zj[0]];
    res.sfzfm = [zj[1]];
    detail.value = res || {};
  })
};

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

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;
    z-index: 99999;
    .tag_item{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      line-height: 65px;
      text-align: center;
      font-size: 16px;
      margin-bottom: 20px;
    }
    .jtb_item{
      border: 5px solid #FA3758;
      color: #FA3758;
      background: rgba(250,55,88,0.2);
    }
    .tgg_item{
      color: #28EEBF;
      background: rgba(40,238,191,0.2);
      border: 5px solid #28EEBF;
    }
    .dsh_item{
      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>