integrated_traffic_vue/src/views/enterprise_management/user_practitioner/details.vue

<template>
  <layout-card>
    <el-divider content-position="left">基本信息</el-divider>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="姓名">
        {{ data.info.NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="人员类型">
        {{ data.info.PERSONNEL_TYPE_NAME }}
      </el-descriptions-item>
      <el-descriptions-item v-if="data.info.CORPINFO_ID" label="部门">
        {{ data.info.DEPARTMENT_NAME }}
      </el-descriptions-item>
      <el-descriptions-item v-if="data.info.CORPINFO_ID" label="岗位">
        {{ data.info.POST_NAME }}
      </el-descriptions-item>
      <el-descriptions-item v-if="data.info.CORPINFO_ID" label="职务">
        {{ data.info.DUTIES_NAME }}
      </el-descriptions-item>
      <el-descriptions-item v-if="data.info.CORPINFO_ID" label="职称">
        {{ data.info.TITLE_NAME }}
      </el-descriptions-item>
      <el-descriptions-item v-if="data.info.CORPINFO_ID" label="入职时间">
        {{ data.info.ENTRY_DATE }}
      </el-descriptions-item>
      <el-descriptions-item label="生日">
        {{ data.info.DATE_OF_BIRTH }}
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        {{ data.info.SEX ? (data.info.SEX === "1" ? "男" : "女") : "" }}
      </el-descriptions-item>
      <el-descriptions-item label="民族">
        {{ data.info.NATION_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="文化程度">
        {{ data.info.DEGREE_OF_EDUCATION_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="政治面貌">
        {{ data.info.POLITICAL_OUTLOOK_NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="参加工作时间">
        {{ data.info.WORKING_DATE }}
      </el-descriptions-item>
    </el-descriptions>
    <div v-for="(item, index) in data.certificateList" :key="index">
      <el-divider content-position="left">
        {{
          item.CERTIFICATE_CATEGORY === "1"
            ? "身份证"
            : item.CERTIFICATE_CATEGORY === "2"
            ? "驾驶证"
            : "道路运输从业资格证"
        }}
      </el-divider>
      <el-descriptions :column="2" border>
        <template>
          <el-descriptions-item
            :label="
              item.CERTIFICATE_CATEGORY === '1'
                ? '身份证（正面）'
                : item.CERTIFICATE_CATEGORY === '2'
                ? '驾驶证'
                : '道路运输从业资格证'
            "
            :span="item.CERTIFICATE_CATEGORY === '1' ? 1 : 2"
          >
            <img
              v-viewer
              :src="item.ID_PHOTO_FRONT"
              width="100"
              height="100"
              class="ml-10"
            />
          </el-descriptions-item>
          <el-descriptions-item
            v-if="item.CERTIFICATE_CATEGORY === '1'"
            label="身份证（背面）"
          >
            <img
              v-viewer
              :src="item.ID_PHOTO_BACK"
              width="100"
              height="100"
              class="ml-10"
            />
          </el-descriptions-item>
        </template>
        <el-descriptions-item
          v-if="item.CERTIFICATE_CATEGORY === '1'"
          label="住址"
          :span="2"
        >
          {{ item.ID_ADDRESS }}
        </el-descriptions-item>
        <el-descriptions-item label="证件号码">
          {{ item.ID_NO }}
        </el-descriptions-item>
        <el-descriptions-item
          v-if="item.CERTIFICATE_CATEGORY !== '1'"
          :label="
            item.CERTIFICATE_CATEGORY === '2' ? '准驾车型' : '从业资格类别'
          "
        >
          {{ item.ALLOW_QUALIFICATION }}
        </el-descriptions-item>
        <el-descriptions-item label="签发机关">
          {{ item.ID_ORGAN }}
        </el-descriptions-item>
        <el-descriptions-item label="有效期" :span="2">
          {{ item.ID_VALIDITY_START + "至" + item.ID_VALIDITY_END }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="tc mt-10">
      <el-button
        type="primary"
        @click="router.back"
      >
        返回
      </el-button>
    </div>
  </layout-card>
</template>

<script setup>
import { getPractitionerInfo } from "@/request/user_practitioner.js";
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
const FILE_URL = import.meta.env.VITE_FILE_URL;
const route = useRoute();
const router = useRouter();
const { USER_ID } = route.query;
const data = reactive({
  info: {},
  certificateList: [],
});
const fnGetData = async () => {
  if (!USER_ID) return;
  const resData = await getPractitionerInfo({ USER_ID });
  data.info = resData.pd;
  resData.certificateList.forEach((item) => {
    item.ID_PHOTO_FRONT = FILE_URL + item.ID_PHOTO_FRONT;
    if (item.ID_PHOTO_BACK) {
      item.ID_PHOTO_BACK = FILE_URL + item.ID_PHOTO_BACK;
    }
  });
  data.certificateList = resData.certificateList;
  console.log(data.certificateList);
};
fnGetData();
</script>

<style scoped lang="scss"></style>