Browse Source

`文件切换查看`

wenhongquan 1 year ago
parent
commit
09a2793a08
3 changed files with 38 additions and 15 deletions
  1. 5 2
      src/components/pdfview/index.vue
  2. 18 8
      src/views/file/list/index.vue
  3. 15 5
      src/views/project/list/index.vue

+ 5 - 2
src/components/pdfview/index.vue

@@ -1,7 +1,7 @@
 <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>
+      <div v-loading="true"></div>
     </VuePDF>
   </div>
 </template>
@@ -14,9 +14,12 @@ 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");
+  currentPdf.value = props.src;
+
+  // currentPdf.value = props.src.replaceAll("https://njdnyjsfilesystem.s3.cn-east-1.qiniucs.com","http://sdrqczwd3.hd-bkt.clouddn.com");
 })
 
 

+ 18 - 8
src/views/file/list/index.vue

@@ -52,8 +52,8 @@
         :row-class-name="tableRowClassName"
       >
 
-        <el-table-column prop="originalName" label="文件名称" width="280">
-<template #default="scope">
+        <el-table-column prop="originalName" label="文件名称" >
+          <template #default="scope">
             <div style="display: flex;">
                <img style="width: 25px;height:25px" :src="gettypeicon(scope.row.fileSuffix)"/>
                <div>{{ scope.row.originalName }}</div>
@@ -120,16 +120,16 @@
     <el-dialog v-model="pdfviewshow" :title="`文件预览`" width="60vw" >
 
 
-        <div style="position: relative;">
+        <div style="position: relative;min-height: 80vh;">
            <el-affix :offset="400" style="width: 100%;">
               <div style="position: absolute;">
-                 <el-button type="primary" icon="DArrowLeft"></el-button>
+                 <el-button type="primary" icon="DArrowLeft" :disabled="ccindex<=0" @click="fileindexlook(ccindex-1)"></el-button>
               </div>
               <div style="float: right;">
-                 <el-button type="primary" icon="DArrowRight"></el-button>
+                 <el-button type="primary" icon="DArrowRight" :disabled="ccindex+1>=tableData.length" @click="fileindexlook(ccindex+1)"></el-button>
               </div>
            </el-affix>
-            <pdfview :src="currentfile.url"></pdfview>
+            <pdfview :src="currentfile.url" ></pdfview>
 
 
 
@@ -154,6 +154,7 @@
 <script lang="ts" setup>
 import { ref,onMounted } from "vue";
 import {
+  listByIds,
   listArchivesFileList,
 
 } from "@/api/system/oss/index";
@@ -202,10 +203,19 @@ const tableRowClassName = ({ row, rowIndex }: { row: any; rowIndex: number }) =>
 
 const pdfviewshow = ref(false);
 const currentfile = ref();
-
+const ccindex = ref(0);
+const fileindexlook = (index) => {
+  var item = tableData.value[index]
+  filepreview(item);
+}
 const filepreview = (file) => {
+  ccindex.value = tableData.value.indexOf(file)
   currentfile.value = file;
-  pdfviewshow.value = true;
+  listByIds(file.ossId).then((res) => {
+    currentfile.value.url = res.data[0].url;
+    pdfviewshow.value = true;
+  });
+
 }
 const downloadfile = (file) => {
 

+ 15 - 5
src/views/project/list/index.vue

@@ -209,11 +209,11 @@
 
         <div style="position: relative;">
            <el-affix :offset="400" style="width: 100%;">
-              <div style="position: absolute;">
-                 <el-button type="primary" icon="DArrowLeft"></el-button>
+               <div style="position: absolute;">
+                 <el-button type="primary" icon="DArrowLeft" :disabled="ccindex<=0" @click="fileindexlook(ccindex-1)"></el-button>
               </div>
               <div style="float: right;">
-                 <el-button type="primary" icon="DArrowRight"></el-button>
+                 <el-button type="primary" icon="DArrowRight" :disabled="ccindex+1>=filelist.length" @click="fileindexlook(ccindex+1)"></el-button>
               </div>
            </el-affix>
             <pdfview :src="currentfile.url"></pdfview>
@@ -373,7 +373,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from "vue";
-import { delOss } from "@/api/system/oss";
+import { listByIds,delOss } from "@/api/system/oss";
 import {
   listArchives,
   addArchives,
@@ -541,6 +541,7 @@ const deleteitem = (id: any) => {
   });
 };
 
+
 const lookfiles = (item) => {
   currentitem.value = item;
   drawer.value = true;
@@ -594,10 +595,19 @@ const handleClose = (done) => {
 };
 
 const currentfile = ref();
+const ccindex = ref(0);
+const fileindexlook = (index) => {
+  var item = filelist.value[index]
+  filepreview(item);
+}
 
 const filepreview = (file) => {
+  ccindex.value = filelist.value.indexOf(file)
   currentfile.value = file;
-  pdfviewshow.value = true;
+   listByIds(file.ossId).then((res) => {
+    currentfile.value.url = res.data[0].url;
+    pdfviewshow.value = true;
+  });
 }
 const downloadfile = (file) => {