integrated_traffic_vue/src/views/occupational_hazards/details.vue

<template>
  <div>
    <layout-card>
      <div v-if="loading">加载中...</div>
      <div v-else>
        <layout-pdf
          v-model:visible="pdfDialog.visible"
          :src="pdfDialog.src"
          append-to-body
        ></layout-pdf>
      </div>
    </layout-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { infoOccupationalHazardsView } from "@/request/traffic_occupational_hazards.js";
import LayoutPdf from "@/components/pdf/index.vue";

const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const route = useRoute();
const OCCUPATIONALHAZARDS_ID = route.query.OCCUPATIONALHAZARDS_ID;
const loading = ref(true); // 用于指示文件是否正在加载
const pdfDialog = ref({ visible: false, src: "" });

onMounted(async () => {
  const response = await infoOccupationalHazardsView({
    OCCUPATIONALHAZARDS_ID,
  });

  if (response.pd && response.pd.ATTACHMENT_ROUTE) {
    pdfDialog.value.src = VITE_FILE_URL + response.pd.ATTACHMENT_ROUTE;
    pdfDialog.value.visible = true;
  }
  loading.value = false; // 加载完成
});
</script>

<style scoped></style>