integrated_traffic_vue/src/views/security_commitment/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 LayoutPdf from "@/components/pdf/index.vue"; // 确保已经正确导入LayoutPdf组件
import { infoCommitmentView } from "@/request/traffic_safety_commitment.js";

const VITE_FILE_URL = import.meta.env.VITE_FILE_URL;
const route = useRoute();
const SECURITYCOMMITMENT_ID = route.query.SECURITYCOMMITMENT_ID;
const loading = ref(true); // 用于指示文件是否正在加载
const pdfDialog = ref({ visible: false, src: "" }); // 控制PDF预览对话框的显示和PDF源地址

onMounted(async () => {
  const response = await infoCommitmentView({ SECURITYCOMMITMENT_ID });
  if (response.pd && response.pd.ATTACHMENT_ROUTE) {
    pdfDialog.value.src = VITE_FILE_URL + response.pd.ATTACHMENT_ROUTE; // 设置PDF文件的路径
    pdfDialog.value.visible = true; // 显示PDF预览对话框
  }
  loading.value = false; // 加载完成
});
</script>

<style scoped></style>