搜索出来的文件可以预览

src/views/myfile/MyFile.vue

@@ -1512,7 +1512,7 @@ export default {
         //对mouseCli数组进行筛选，实现菜单的区分显示
         const filterMouseCli = () => {
             const canPreviewArray = ['.doc','.dps','.et', '.wps', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.epub', '.fodt', '.htm', '.html', '.mht', '.odt', '.ott', '.pdf', '.rtf', '.txt', '.djvu', '.xps', '.csv', '.fods', '.ods', '.ots', '.xls', '.xlsm', '.xlsx', '.xlt', '.xltm', '.xltx', '.fodp', '.odp', '.otp', '.pot', '.potm', '.potx', '.pps', '.ppsm', '.ppsx', '.ppt', '.pptm', '.pptx']
-            const typeArr = ['.png', '.jpg', '.jpeg', '.JPG', '.mp3', '.mp4']
+            const typeArr = ['.png', '.jpg', '.jpeg', '.JPG','.PNG', '.mp3', '.mp4']
             const imgTypeArr = ['.png', '.jpg', '.jpeg', '.JPG','.PNG']
             const canEditArr = ['.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.txt', '.djvu', '.xps', '.csv', '.fods', '.ods', '.ots', '.xls', '.xlsm', '.xlsx', '.xlt', '.xltm', '.xltx', '.fodp', '.odp', '.otp', '.doc', '.docm', '.docx', '.dot', '.dotm', '.dotx', '.epub', '.fodt', '.htm', '.html', '.mht', '.odt', '.ott', '.rtf', '.txt', '.djvu', '.xps', '.wps','.dps','.et', '.pptx']
             let arr = []

src/views/myfile/components/FileEdit.vue

@@ -81,7 +81,7 @@ export default {
             import.meta.env.VITE_APP_BASE_API
           }/api/access/${obj.docId}?uid=${uid}`;
           // option.value.url = `http://8.142.173.95:19527/api/access/${obj.docId}?uid=${uid}`;
-          //  console.log('option.value.url',option.value.url);
+           console.log('option.value.url',option.value.url);
           option.value.title = obj.fileName;
           option.value.key = obj.fileId;
           option.value.fileType = obj.fileType.replace(".", "");

src/views/search/index.vue

@@ -50,7 +50,7 @@
         <div v-if="isList" style="height: calc(98vh - 320px);overflow-y: auto;">
           <!-- 表格 -->
           <el-table :data="tableData" style="width: 100%;height:calc(98vh - 220px);" ref="container"
-            @scroll="handleScroll">
+            @scroll="handleScroll" @row-click="clickRow">
             <el-table-column label="名称" width="400">
               <template #default="scope">
                 <div class="flie_name">
@@ -92,6 +92,9 @@
       </div>
     </div>
   </div>
+  <ImgPreview :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
+    @closeImgPreview="closeImgPreview"></ImgPreview>
+      <div v-loading.fullscreen="loadingPreview" v-if="loadingPreview" class="lodingBox"></div>
 </template>
 
 <script setup>
@@ -100,7 +103,10 @@ import { search } from "@/api/search/search.js";
 import { flieSearch } from "@/api/search/search.js";
 import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
 import Pagination from "@/components/Pagination/index.vue";
-import { ElTable, ElTableColumn, ElInfiniteScroll } from 'element-plus';
+import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
+import { canPreviewFile, rightMenuRole } from "@/utils/index.js"
+import { preview } from "@/api/common/common.js";
+import { ElMessageBox, ElMessage } from "element-plus";
 //---------------导入图片--------------------------
 import file_DOC from "@/assets/images/fileType/file_DOC.png";
 import file_pdf from "@/assets/images/fileType/file_pdf.png";
@@ -133,8 +139,12 @@ const limit = ref(2); //pagesize
 const container = ref(null)
 const historyParams = history.state.params
 console.log('historyParams', historyParams);
-
+const loadingPreview = ref(false)
+const showPreview = ref(false)//控制图片预览组件显示
+const previewData = ref()
+const copyFileType = ref()
 const reload = inject("reload");
+const addFileTab = inject("addFileTab");
 
 const tableData = ref([]);
 // 切换搜索范围
@@ -228,6 +238,30 @@ const pagination = async (obj) => {
   tableData.value = res.rows;
   changeSearchFor(searchFor.value);
 };
+// 点击预览事件
+const clickRow =async (row)=>{
+  console.log('row',row);
+  const typeArr = ['.png', '.jpg', '.jpeg', '.JPG','.PNG', '.mp3', '.mp4']
+  // loadingPreview.value = true
+  const filePreview = canPreviewFile(row.fileType)
+   if (filePreview) {
+        loadingPreview.value = false
+        addFileTab(row, 0,0); 
+    } else if(typeArr.some(item=>item == row.fileType)) {
+        const res = await preview(row.docId)
+        copyFileType.value = row.fileType
+        showPreview.value = true
+        previewData.value = URL.createObjectURL(res)
+    }else{
+      ElMessage.error("该文件格式不支持预览！");
+    }
+    loadingPreview.value = false
+}
+//关闭图片预览事件
+const closeImgPreview = () => {
+    // console.log('close');
+    showPreview.value = false
+}
 // 设置图标
 const setIcon = (fileType) => {
   switch (fileType) {
@@ -357,7 +391,14 @@ onMounted(() => {
   border-radius: 4px;
   overflow: hidden;
 }
-
+.lodingBox {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vh;
+    height: 100vh;
+    z-index: 10000000;
+}
 .searchTitle {
   width: 100%;
   height: 40px;