文件预览

This commit is contained in:
朱浩 2024-09-09 16:54:04 +08:00
parent 78ac6e5ca6
commit ed7a8a124e
3 changed files with 44 additions and 17 deletions

View File

@ -1,5 +1,5 @@
<template> <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%"> size="50%">
<div class="flex drawer-header"> <div class="flex drawer-header">
<div> <div>
@ -16,19 +16,23 @@
</div> </div>
<div class="drawer-content"> <div class="drawer-content">
<!-- <iframe src="./aaa.pdf" width="600px" height="600px"></iframe> --> <!-- <iframe src="./aaa.pdf" width="600px" height="600px"></iframe> -->
<!-- <div ref="playerRef" class="video-box"></div> --> <!--<div ref="playerRef" class="video-box"></div> -->
<!-- <video src="" controls autoplay></video> --> <video v-if="showPrev(row) === 'video'" :src="row.fileFullPath" controls autoplay></video>
<el-image style="width: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" /> <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> </div>
</el-drawer> </el-drawer>
</template> </template>
<script setup> <script setup>
import { watch, ref, nextTick } from 'vue' import { watch, ref, nextTick, onMounted } from 'vue'
import Player from 'xgplayer' import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css' import 'xgplayer/dist/index.min.css'
import FileImage from '@/components/file-image/index.vue' import FileImage from '@/components/file-image/index.vue'
const model = defineModel() const model = defineModel()
const props = defineProps({ const props = defineProps({
row: { row: {
@ -42,11 +46,26 @@ const playerRef = ref();
const handleClose = () => { const handleClose = () => {
} }
onMounted(()=>{
})
// //
const onClose = () => { const onClose = () => {
model.value = false 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 = () => { const init = () => {
nextTick(() => { nextTick(() => {
// //
@ -63,7 +82,7 @@ const init = () => {
commonStyle:{ commonStyle:{
progressColor: '#cccccce6',// progressColor: '#cccccce6',//
}, },
}); });
}) })
} }
@ -121,4 +140,4 @@ watch(model, (newVal) => {
width: 100%; width: 100%;
height: 300px height: 300px
} }
</style> </style>

View File

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

View File

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