From 5790e87a850857c2854afd4422d7c031f1bf5ba5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=9D=A8?= <666>
Date: Fri, 25 Oct 2024 13:56:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=AC=AC=E4=B8=89=E6=96=B9=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/thirdFile-preview/index.vue    | 35 ++++++++++++++++++
 .../views/resource/container/third-list.vue   | 37 ++++---------------
 2 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 src/renderer/src/components/thirdFile-preview/index.vue

diff --git a/src/renderer/src/components/thirdFile-preview/index.vue b/src/renderer/src/components/thirdFile-preview/index.vue
new file mode 100644
index 0000000..391ddd6
--- /dev/null
+++ b/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>
+  
+  
\ No newline at end of file
diff --git a/src/renderer/src/views/resource/container/third-list.vue b/src/renderer/src/views/resource/container/third-list.vue
index 7021b61..0039e24 100644
--- a/src/renderer/src/views/resource/container/third-list.vue
+++ b/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>