src/renderer/src/components/thirdFile-preview/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <el-drawer v-model="model" class="preview-drawer" :modal="true" :destroy-on-close="true" :with-header="false" :append-to-body="true"
+      size="50%">
+      <div class="drawer-content">
+        <el-image v-for="(url,index) in srcList" :key="index" :src="url" lazy />
+      </div>
+    </el-drawer>
+  </template>
+<script setup>
+import {ref} from 'vue'
+import {getImgPath} from "@/api/file/third";
+  
+  const model = defineModel()
+  //显示图片的路径
+    const srcList = ref([])
+  const init = (id) => {
+    srcList.value = []
+    getImgPath({itemId:id}).then(res => {
+        if(res.code === 200){
+        res.data.forEach(item => {
+            item.subsets.forEach(previewItem => {
+            previewItem.previewFiles.forEach(fileItem => {
+                srcList.value.push(fileItem.fileUrl)
+            })
+            })
+        })
+        }
+    })
+  }
+  defineExpose({
+    init
+  })
+</script>
+  
+  

src/renderer/src/views/resource/container/third-list.vue

@@ -7,12 +7,11 @@
           v-for="item in sourceStore.thirdResult.list"
           :key="item.itemId"
           class="list-item"
-          @click="handleRow"
+          @click="handleRow(item)"
         >
           <div class="item-left flex">
-            <div style="position: relative" @click="clickImg(item.itemId)">
+            <div style="position: relative">
               <FileImage :file-name="item.fileType" :size="50" />
-              <el-icon style="position: absolute;top: 1px;right: 5px"><Search /></el-icon>
             </div>
             <div class="flex item-left-content">
               <div class="name flex" :title="item.title">
@@ -66,14 +65,7 @@
         @current-change="handleCurrentChange"
       />
     </div>
-    <el-dialog v-model="isViewImg" width="80%" :modal-append-to-body="false" :append-to-body="false">
-      <div class="demo-image__lazy">
-        <el-image v-for="(url,index) in srcList" :key="index" :src="url" lazy />
-      </div>
-    </el-dialog>
-<!--    <video width="550" controls autoplay loop>-->
-<!--       <source src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4" type="video/mp4" />-->
-<!--      </video>-->
+    <FilePreview ref="thirdPreview" v-model="isViewImg"></FilePreview>
   </div>
 </template>
 
@@ -82,10 +74,9 @@ import { ref } from 'vue'
 // import { ElMessage, ElMessageBox } from 'element-plus'
 import { Clock,View,Folder,Search } from '@element-plus/icons-vue'
 import FileImage from '@/components/file-image/index.vue'
-import { getFileSuffix } from '@/utils/ruoyi'
+import FilePreview from '@/components/thirdFile-preview/index.vue'
 import useUserStore from '@/store/modules/user'
 import useResoureStore from '../store'
-import {getImgPath} from "@/api/file/third";
 
 const userstore = useUserStore()
 const sourceStore = useResoureStore()
@@ -93,8 +84,7 @@ const sourceStore = useResoureStore()
 // const userInfo = userstore.user
 //判断是否预览图片
 const isViewImg = ref(false)
-//显示图片的路径
-const srcList = ref([])
+const thirdPreview = ref()
 
 // 分页change
 const handleSizeChange = (limit) => {
@@ -120,20 +110,9 @@ function timestampToDate(timestamp) {
   return `${year}-${month}-${day}`;
 }
 //获取图片的路径
-const clickImg = (id) => {
-  srcList.value = []
-  getImgPath({itemId:id}).then(res => {
-    if(res.code === 200){
-      isViewImg.value = true
-      res.data.forEach(item => {
-        item.subsets.forEach(previewItem => {
-          previewItem.previewFiles.forEach(fileItem => {
-            srcList.value.push(fileItem.fileUrl)
-          })
-        })
-      })
-    }
-  })
+const handleRow = (item) => {
+  isViewImg.value = true
+  thirdPreview.value.init(item.itemId)
 }
 </script>