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

@@ -1,35 +0,0 @@
-<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,11 +7,12 @@
           v-for="item in sourceStore.thirdResult.list"
           :key="item.itemId"
           class="list-item"
-          @click="handleRow(item)"
+          @click="handleRow"
         >
           <div class="item-left flex">
-            <div style="position: relative">
+            <div style="position: relative" @click="clickImg(item.itemId)">
               <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">
@@ -65,7 +66,14 @@
         @current-change="handleCurrentChange"
       />
     </div>
-    <FilePreview ref="thirdPreview" v-model="isViewImg"></FilePreview>
+    <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>-->
   </div>
 </template>
 
@@ -74,9 +82,10 @@ 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 FilePreview from '@/components/thirdFile-preview/index.vue'
+import { getFileSuffix } from '@/utils/ruoyi'
 import useUserStore from '@/store/modules/user'
 import useResoureStore from '../store'
+import {getImgPath} from "@/api/file/third";
 
 const userstore = useUserStore()
 const sourceStore = useResoureStore()
@@ -84,7 +93,8 @@ const sourceStore = useResoureStore()
 // const userInfo = userstore.user
 //判断是否预览图片
 const isViewImg = ref(false)
-const thirdPreview = ref()
+//显示图片的路径
+const srcList = ref([])
 
 // 分页change
 const handleSizeChange = (limit) => {
@@ -110,9 +120,20 @@ function timestampToDate(timestamp) {
   return `${year}-${month}-${day}`;
 }
 //获取图片的路径
-const handleRow = (item) => {
-  isViewImg.value = true
-  thirdPreview.value.init(item.itemId)
+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)
+          })
+        })
+      })
+    }
+  })
 }
 </script>