fix:第三方资源图片预览修改;
This commit is contained in:
parent
4b6a7918a9
commit
5790e87a85
|
@ -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>
|
||||
|
||||
|
|
@ -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){
|
||||
const handleRow = (item) => {
|
||||
isViewImg.value = true
|
||||
res.data.forEach(item => {
|
||||
item.subsets.forEach(previewItem => {
|
||||
previewItem.previewFiles.forEach(fileItem => {
|
||||
srcList.value.push(fileItem.fileUrl)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
thirdPreview.value.init(item.itemId)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in New Issue