文件预览

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

@@ -1,5 +1,5 @@
 <template>
-  <el-drawer v-model="model" class="preview-drawer" title="title" :modal="false" :with-header="false" append-to-body
+  <el-drawer v-model="model" class="preview-drawer" title="title" :modal="true" :destroy-on-close="true" :with-header="false" :append-to-body="true"
     size="50%">
     <div class="flex drawer-header">
       <div>
@@ -16,19 +16,23 @@
     </div>
     <div class="drawer-content">
       <!-- <iframe src="./aaa.pdf" width="600px" height="600px"></iframe> -->
-      <!-- <div ref="playerRef" class="video-box"></div> -->
-       <!-- <video src="" controls autoplay></video> -->
-       <el-image style="width: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />  
+      <!--<div ref="playerRef" class="video-box"></div> -->
+      <video v-if="showPrev(row) === 'video'" :src="row.fileFullPath" controls autoplay></video>
+      <el-image v-if="showPrev(row) === 'img'" style="width: 100%;" :src="row.fileFullPath" />
+      <template v-if="showPrev(row) === 'office'">
+        <template v-for="item in row.prevImgList">
+          <el-image :key="item.targetFileId" v-if="item.targetFileType === '预览图'" style="width: 100%;" :src="item.targetFilePath" />
+        </template>
+      </template>
     </div>
   </el-drawer>
 </template>
 <script setup>
-import { watch, ref, nextTick } from 'vue'
+import { watch, ref, nextTick, onMounted } from 'vue'
 import Player from 'xgplayer'
 import 'xgplayer/dist/index.min.css'
 import FileImage from '@/components/file-image/index.vue'
 
-
 const model = defineModel()
 const props = defineProps({
   row: {
@@ -42,11 +46,26 @@ const playerRef = ref();
 const handleClose = () => {
 
 }
+
+onMounted(()=>{
+})
 // 关闭
 const onClose = () => {
   model.value = false
 }
 
+const showPrev = (row)=>{
+  if(row.fileSuffix === 'mp4' || row.fileSuffix === 'mp3'){
+    return 'video'
+  }else if(row.fileType.indexOf('image') !== -1){
+    return 'img'
+  }else if(row.fileSuffix === 'doc' || row.fileSuffix === 'docx'|| row.fileSuffix === 'ppt'|| row.fileSuffix === 'pptx'|| row.fileSuffix === 'xls'|| row.fileSuffix === 'xlsx'){
+    return 'office'
+  }else {
+    return 'other'
+  }
+}
+
 const init = () => {
   nextTick(() => {
     // 播放器 基础用法
@@ -63,7 +82,7 @@ const init = () => {
       commonStyle:{
           progressColor: '#cccccce6',//进度条底色
       },
-     
+
     });
   })
 }
@@ -121,4 +140,4 @@ watch(model, (newVal) => {
   width: 100%;
   height: 300px
 }
-</style>
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="sourceStore.loading" class="resource-list">
+  <div v-loading="loading" class="resource-list">
     <el-scrollbar>
       <el-empty v-if="!sourceStore.result.list.length" description="暂无数据" />
       <ul>
@@ -7,7 +7,7 @@
           v-for="item in sourceStore.result.list"
           :key="item.id"
           class="list-item"
-          @click="handleRow"
+          @click="handleRow(item)"
         >
           <div class="item-left flex">
             <FileImage :file-name="item.fileShowName" :size="50" />
@@ -91,10 +91,11 @@
       />
     </div>
   </div>
+  <FilePreview v-model="isShow" :row="curRow"></FilePreview>
 </template>
 
 <script setup>
-import { toRaw } from 'vue'
+import { toRaw, ref, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import FileImage from '@/components/file-image/index.vue'
 import { deleteSmarttalk, updateSmarttalk } from '@/api/file'
@@ -102,13 +103,14 @@ import { addFileToPrepare } from '@/api/subject'
 import { getFileSuffix } from '@/utils/ruoyi'
 import useUserStore from '@/store/modules/user'
 import useResoureStore from '../store'
-
+import FilePreview from '@/components/file-preview/index.vue'
 const { ipcRenderer } = window.electron || {}
 const userstore = useUserStore()
 const sourceStore = useResoureStore()
-
+const loading = computed(() => sourceStore.loading)
 const userInfo = userstore.user
-
+const isShow = ref(false)
+const curRow = ref({})
 // 分页change
 const handleSizeChange = (limit) => {
   sourceStore.query.pageSize = limit
@@ -182,8 +184,12 @@ const addLesson = ({ id }) => {
   }
 }
 //
-const handleRow = () => {
-  ElMessage.warning('请先加入备课，在备课里面进行预览！')
+const handleRow = (item) => {
+  item.prevImgList.sort((a,b)=>{
+    return a.targetPrevIndex - b.targetPrevIndex
+  })
+  curRow.value = item
+  isShow.value = true
 }
 </script>
 

src/renderer/src/views/resource/store.js

@@ -94,6 +94,7 @@ export default defineStore('resource', {
           getSmarttalkPage(data).then((res) => {
             this.result.total = res.total
             this.result.list = res.rows
+            this.loading = false
           })
         }else{
           let data = JSON.parse(JSON.stringify(this.thirdQuery))
@@ -107,12 +108,13 @@ export default defineStore('resource', {
               if(res.data.code === 0){
                 this.thirdResult.total = res.data.page.totalCount
                 this.thirdResult.list = [...res.data.data]
+                this.loading = false
               }
             }
           })
         }
       } finally {
-        this.loading = false
+        // this.loading = false
       }
     },
     changeTab(val) {