integrated_traffic_vue/src/views/enterprise_management/industry_qualifications/view.vue

<template>
  <layout-card>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="证书名称">
        {{ data.info.NAME }}
      </el-descriptions-item>
      <el-descriptions-item label="证书有效期">
        {{ data.info.VALIDITYTIME }}
      </el-descriptions-item>
      <el-descriptions-item label="证书编号">
        {{ data.info.NUMBER }}
      </el-descriptions-item>
      <el-descriptions-item label="备注">
        {{ data.info.DESCR }}
      </el-descriptions-item>
      <el-descriptions-item label="证书图片">
        <img
          v-viewer
          v-for="item in data.info.file"
          :key="item.FILEPATH"
          :src="item.url"
          width="100"
          height="100"
          class="ml"
        />
      </el-descriptions-item>
    </el-descriptions>
  </layout-card>
</template>

<script setup>
import LayoutCard from "@/components/card/index.vue";
import { getIndustryQualificationsView } from "@/request/enterprise_management.js";
import { reactive } from "vue";
import { useRoute } from "vue-router";
import { addingPrefixToFile } from "@/assets/js/utils.js";

const route = useRoute();
const { QUALIFICATIONS_ID } = route.query;
const data = reactive({
  info: {},
});
const fnGetData = async () => {
  const resData = await getIndustryQualificationsView({ QUALIFICATIONS_ID });
  data.info = resData.pd;
  data.info.file = addingPrefixToFile(resData.hImgs);
};
fnGetData();
</script>

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