134 lines
4.9 KiB
Vue
134 lines
4.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog title="查看文件" :visible="true" width="1200px" append-to-body :close-on-click-modal="false"
|
|
@close="handleClose()" :modal="false">
|
|
<div class="dialog-content dialog-file">
|
|
<div class="pt-8 flex-row flex-row-center m-16">
|
|
<div v-if="this.fileDialog.filelist.length > 1" class="previous-file text-center" @click="previousClick">
|
|
<span><i class="el-icon-arrow-left f48 f-weight600 "></i></span>
|
|
</div>
|
|
<div class="show-file">
|
|
<img v-if="fileType == 'image'" :src="`${fileObj.fullUrl}`" />
|
|
<video v-else-if="fileType == 'video'" width="100%" height="100%" :src="`${fileObj.fullUrl}`" preload="auto" autoplay="autoplay"
|
|
controls="" controlsList="nodownload noremote footbar"></video>
|
|
<iframe v-else :src="`${fileObj.fullUrl}`" frameborder="0" width="100%" height="100%"></iframe>
|
|
|
|
</div>
|
|
<div v-if="this.fileDialog.filelist.length > 1" class="next-file text-center" @click="nextClick">
|
|
<span><i class="el-icon-arrow-right f48 f-weight600"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose()">关闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import api from "@/services/caseManagement";
|
|
export default {
|
|
components: {
|
|
videoPreview: () => import('@/components/videoPreview.vue'),//查看视频文件
|
|
},
|
|
props: {
|
|
fileDialog: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
CurrentPosition:0,//当前位置
|
|
fileObj:{},
|
|
fileType:''
|
|
|
|
};
|
|
},
|
|
mounted () {
|
|
if(this.fileDialog.showfile.fullUrl == undefined){
|
|
this.fileDialog.showfile.fullUrl = this.fileDialog.showfile.url
|
|
}
|
|
this.fileObj = this.fileDialog.showfile
|
|
this.fileDialog.filelist.forEach((item,index) =>{
|
|
if(item.url == this.fileDialog.showfile.url){
|
|
this.CurrentPosition = index
|
|
}
|
|
})
|
|
this.getShowFileType(this.fileObj.url)
|
|
|
|
},
|
|
methods: {
|
|
getShowFileType(url){
|
|
if(this.$util.getFileType(url) === 'image') {
|
|
// 如果是图片，直接显示图片
|
|
this.fileType = 'image'
|
|
}
|
|
else if(this.$util.getFileType(url) === 'video') {
|
|
// 如果是图片，直接显示图片
|
|
this.fileType = 'video'
|
|
}
|
|
else if(this.$util.getFileType(url) === 'audio') {
|
|
// 如果是图片，直接显示图片
|
|
this.fileType = 'audio'
|
|
}
|
|
else
|
|
{
|
|
this.fileType = 'other'
|
|
}
|
|
},
|
|
previousClick(){
|
|
let nextCurrent = this.CurrentPosition-1;
|
|
if(this.fileDialog.filelist[nextCurrent]!=undefined)
|
|
{
|
|
this.fileObj = this.fileDialog.filelist[nextCurrent]
|
|
this.CurrentPosition = nextCurrent
|
|
|
|
this.getShowFileType(this.fileObj.url)
|
|
}
|
|
else
|
|
{
|
|
this.$message.warning(`已经是第一个了！`)
|
|
return
|
|
}
|
|
},
|
|
nextClick(){
|
|
let nextCurrent = this.CurrentPosition+1;
|
|
if(this.fileDialog.filelist[nextCurrent]!=undefined)
|
|
{
|
|
this.fileObj = this.fileDialog.filelist[nextCurrent]
|
|
this.CurrentPosition = nextCurrent
|
|
|
|
this.getShowFileType(this.fileObj.url)
|
|
}
|
|
else
|
|
{
|
|
this.$message.warning(`已经是最后一个了！`)
|
|
return
|
|
}
|
|
},
|
|
handleClose() {
|
|
this.$emit('update:fileDialog', null)
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dialog-file{
|
|
min-height: 500px;
|
|
.previous-file{width: 50px;margin-right: 10px; background-color: #F7F8FA;line-height: 650px;}
|
|
.next-file{width: 50px;margin-left: 10px; background-color: #F7F8FA;line-height: 650px;}
|
|
.show-file{
|
|
width: calc(100% - 120px);height: 700px;
|
|
text-align: center;
|
|
line-height: 650px;
|
|
img{max-height: 100%; max-width: 100%;}
|
|
}
|
|
|
|
}
|
|
</style> |