fix pdf预览`

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.1.0",
+    "@tato30/vue-pdf": "^1.10.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "9.5.0",
     "animate.css": "4.1.1",

src/components/pdfview/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div v-for="page in pages" :key="page" style="width: 100%;">
+    <VuePDF :pdf="pdf" fit-parent :watermark-text="watermarkText" :watermark-options="watermarkOptions" :page="page">
+      <div>加载中...</div>
+    </VuePDF>
+  </div>
+</template>
+<script lang="ts" setup>
+import {ref, onMounted, watchEffect} from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import { propTypes } from '@/utils/propTypes';
+
+const props = defineProps({
+  src: propTypes.string.def(''),
+});
+
+const currentPdf = ref(props.src)
+watchEffect(() => {
+  currentPdf.value = props.src.replaceAll("https://njdnyjsfilesystem.s3.cn-east-1.qiniucs.com","http://sdrqczwd3.hd-bkt.clouddn.com");
+})
+
+
+
+const { pdf, pages } = usePDF(currentPdf)
+
+const watermarkOptions = ref({
+   columns: 4,
+  rows: 10,
+  color: 'rgba(211, 210, 211, 0.8)',
+  rotation: 45,
+  fontSize: 18,
+});
+const watermarkText = ref('sample')
+</script>
+
+<style lang="scss" scoped></style>

src/views/project/list/index.vue

@@ -204,6 +204,36 @@
         />
       </div>
     </div>
+    <el-dialog v-model="pdfviewshow" :title="`文件预览`" width="60vw" >
+
+
+        <div style="position: relative;">
+           <el-affix :offset="400" style="width: 100%;">
+              <div style="position: absolute;">
+                 <el-button type="primary" icon="DArrowLeft"></el-button>
+              </div>
+              <div style="float: right;">
+                 <el-button type="primary" icon="DArrowRight"></el-button>
+              </div>
+           </el-affix>
+            <pdfview :src="currentfile.url"></pdfview>
+
+
+
+        </div>
+        <!-- <div><el-affix :offset="120" position="bottom"><el-button type="text" icon="DArrowRight"></el-button></el-affix></div>
+      </div> -->
+
+     <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="pdfviewshow = false">关闭</el-button>
+
+          <el-button type="primary" @click="downloadfile">
+            下载
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
 
     <el-dialog v-model="shvisable" :title="`项目审核`" width="40vw">
       <el-input
@@ -309,7 +339,7 @@
           <template #default="scope">
              <div style="display: flex;gap:5px">
                <div> <el-button type="text" >删除</el-button></div>
-               <div> <el-button type="text" >预览</el-button></div>
+               <div> <el-button type="text" @click="filepreview(scope.row)" >预览</el-button></div>
                <div> <el-button type="text" >下载</el-button></div>
              </div>
 
@@ -321,7 +351,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref,onMounted } from "vue";
 import {
   listArchives,
   addArchives,
@@ -337,6 +367,7 @@ const { sys_area, sys_project_status } = toRefs<any>(
 );
 const drawer = ref(false)
 const shvisable = ref(false);
+const pdfviewshow = ref(false);
 
 const searchForm = ref({
   area: "",
@@ -371,7 +402,10 @@ const getnextdata = (page: number) => {
     totalnum.value = res.total;
   });
 };
-getnextdata(1);
+onMounted(() => {
+  getnextdata(1);
+})
+
 
 const dialogVisible = ref(false);
 const currenttype = ref(1);
@@ -502,6 +536,18 @@ const handleClose = (done) => {
     })
 };
 
+const currentfile = ref();
+
+const filepreview = (file) => {
+  currentfile.value = file;
+  pdfviewshow.value = true;
+}
+const downloadfile = (file) => {
+
+ }
+
+
+
 import txticon from '@/assets/icons/svg/txt.svg'
 import picicon from '@/assets/icons/svg/pic.svg'
 import pdficon from '@/assets/icons/svg/pdf1.svg'

src/views/system/oss/index.vue

@@ -118,7 +118,7 @@
     <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
       <el-form ref="ossFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="文件名">
-          <fileUpload v-model="form.file" v-if="type === 0" />
+          <fileUpload :fileSize="1000" v-model="form.file"  v-if="type === 0" />
           <imageUpload v-model="form.file" v-if="type === 1" />
         </el-form-item>
       </el-form>

vite.config.ts

@@ -56,6 +56,7 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
     },
     // 预编译
     optimizeDeps: {
+      esbuildOptions: { target: 'esnext'},
       include: [
         'vue',
         'vue-router',