图纸资料修改。新增pdf预览组件。

src/components/PDFDrawerView/index.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import VuePdfApp from "vue3-pdf-app";
+// import this to use default icons for buttons
+import "vue3-pdf-app/dist/icons/main.css";
+
+const pdfSource = ref("");
+
+const visible = ref(false);
+
+const showPdf = (url) => {
+  localStorage.setItem("pdfjs.history", "");
+
+  visible.value = true;
+  nextTick(() => {
+    pdfSource.value = url;
+  });
+};
+
+const onDrawerClose = () => {
+  pdfSource.value = "";
+  // console.log(pdfSource.value, "aaa");
+  // localStorage.setItem("pdfjs.history", "");
+};
+
+defineExpose({
+  showPdf,
+});
+
+// 工具栏配置项
+const config = ref({
+  // 右侧其他区工具
+  sidebar: {
+    viewThumbnail: true, //启用缩略图视图
+    viewOutline: true, //启用大纲视图
+    viewAttachments: false, //启用附件视图
+  },
+  secondaryToolbar: {
+    secondaryPresentationMode: true, //启用演示模式
+    secondaryOpenFile: true, //启用打开文件功能
+    secondaryPrint: true, //启用打印功能
+    secondaryDownload: true, //启用下载功能
+    secondaryViewBookmark: true, //启用书签视图
+    firstPage: false, //启用跳转到第一页
+    lastPage: false, //启用跳转到最后一页
+    pageRotateCw: true, //启用顺时针旋转页面
+    pageRotateCcw: true, //启用逆时针旋转页面
+    cursorSelectTool: false, //启用选择工具
+    cursorHandTool: false, //启用手形工具
+    scrollVertical: false, //启用垂直滚动
+    scrollHorizontal: false, //启用水平滚动
+    scrollWrapped: false, //启用包裹滚动
+    spreadNone: false, //启用无跨页模式
+    spreadOdd: false, // 启用奇数页跨页模式
+    spreadEven: false, //启用偶数页跨页模式
+    documentProperties: false, //启用文档属性查看
+  },
+  // 配置左侧工具栏
+  toolbar: {
+    toolbarViewerLeft: {
+      findbar: false, //启用查找条
+      previous: true, // 启用上一页按钮
+      next: true, //启用下一页按钮
+      pageNumber: true, // 启用页码显示
+    },
+    //  配置右侧工具栏
+    toolbarViewerRight: {
+      presentationMode: true, //启用演示模式
+      openFile: false, //启用打开文件功能
+      print: true, //启用打印功能
+      download: true, // 启用下载功能
+      viewBookmark: false, // 启用书签视图
+    },
+    // 配置中间工具栏
+    toolbarViewerMiddle: {
+      zoomOut: true, // 启用缩小功能
+      zoomIn: true, //启用放大功能。
+      scaleSelectContainer: true, //启用缩放选择容器功能
+    },
+  },
+  errorWrapper: true, //启用错误包装，这可能用于显示错误信息或处理错误情况。
+});
+</script>
+
+<template>
+  <el-drawer
+    v-model="visible"
+    :footer="false"
+    :header="false"
+    :show-close="false"
+    destroy-on-close
+    direction="rtl"
+    :append-to-body="true"
+    @closed="onDrawerClose"
+    size="80%"
+  >
+    <VuePdfApp
+      v-if="pdfSource"
+      class="mid-pdf-box"
+      :pdf="pdfSource"
+      page-scale="page-fit"
+      :page-number="1"
+      :config="config"
+    ></VuePdfApp>
+  </el-drawer>
+</template>
+
+<style scoped lang="scss">
+.mid-pdf-box {
+  width: 100%;
+  min-height: calc(100vh - 100px);
+  height: 100%;
+}
+</style>

src/components/PDFView/index.vue

@@ -43,11 +43,11 @@
 <script lang="ts" setup>
 import VuePdfEmbed from "vue-pdf-embed";
 // essential styles
-import "vue-pdf-embed/dist/style/index.css";
-
-// optional styles
-import "vue-pdf-embed/dist/style/annotationLayer.css";
-import "vue-pdf-embed/dist/style/textLayer.css";
+// import "vue-pdf-embed/dist/style/index.css";
+//
+// // optional styles
+// import "vue-pdf-embed/dist/style/annotationLayer.css";
+// import "vue-pdf-embed/dist/style/textLayer.css";
 
 // either URL, Base64, binary, or document proxy
 const props = defineProps({

src/views/base/information/index.vue

@@ -41,12 +41,9 @@
         />
       </template>
       <template #menu="{ row, index, type }">
-        <PDFView
-          :need-to-show-pdf="true"
-          content-type="button"
-          :is-link="true"
-          :pdf-source="filePath + row.pdfPath"
-        />
+        <el-button link type="primary" @click="toShowPDF(row)">
+          预览
+        </el-button>
         <el-button
           @click="deleteRecord(row, index, done)"
           text
@@ -58,6 +55,7 @@
     </avue-crud>
 
     <ExcelUpload ref="uploadRef" @finished="uploadFinished" />
+    <PDFDrawerView ref="PDFDrawerViewRef"></PDFDrawerView>
   </div>
   <CommonTable
     ref="ctableRef"
@@ -152,6 +150,12 @@ const uploadFinished = () => {
   dataEditList();
 };
 
+const PDFDrawerViewRef = ref(null);
+const toShowPDF = (row) => {
+  let url = import.meta.env.VITE_APP_UPLOAD_URL + row.pdfPath;
+  PDFDrawerViewRef.value && PDFDrawerViewRef.value.showPdf(url);
+};
+
 // 设置表格列或者其他自定义的option
 option.value = Object.assign(option.value, {
   selection: false,