109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<template>
|
|
<!-- 父组件的文件id如果是异步获取的 需要加上v-if判断-->
|
|
<div style="display: inline-block">
|
|
<div v-for="(item) of fileList" :key="item.id">{{ item.name +' ' }}
|
|
<span class="m-l-4 color-blue" @click="handleDownLoad(item)">下载</span> <span class="m-l-4 color-blue" @click="handlePreview(item)">查看</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import {ACCESS_TOKEN} from '@/store/mutation-types'
|
|
import {getFileInfo} from '@/api/api'
|
|
import {downloadFile} from '@api/manage'
|
|
// eslint-disable-next-line
|
|
const Base64 = require('js-base64').Base64
|
|
|
|
|
|
export default {
|
|
name: 'PreviewFile',
|
|
props: {
|
|
/*
|
|
* 文件id
|
|
* */
|
|
fileId: {
|
|
type: String,
|
|
required: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
fileInfo: {},
|
|
fileList: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getFileInfo(this.fileId)
|
|
},
|
|
watch: {
|
|
fileId: {
|
|
immediate: true,
|
|
handler(val) {
|
|
this.initFileList(val)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
/*
|
|
* 通过文件id获取文件的相关信息
|
|
* */
|
|
getFileInfo(id) {
|
|
return new Promise(resolve => {
|
|
let result = {}
|
|
getFileInfo({id: id}).then(res => {
|
|
if (res.success) {
|
|
result = res.result
|
|
}
|
|
}).finally(() => {
|
|
resolve(result)
|
|
})
|
|
})
|
|
},
|
|
/*
|
|
* 获取文件信息
|
|
* */
|
|
async initFileList(fileIds) {
|
|
if(fileIds){
|
|
const fileList = []
|
|
let arr = fileIds.split(',')
|
|
for (let i = 0; i < arr.length; i++) {
|
|
let fileObj = {}
|
|
fileObj = await this.getFileInfo(arr[i])
|
|
const fileName = (fileObj || {}).fileName
|
|
const fileNameNotType = fileName.substring(0, fileName.lastIndexOf('.'))
|
|
const previewUrl = (fileObj || {}).url || ''
|
|
const previewName = previewUrl.substring(previewUrl.lastIndexOf(fileNameNotType))
|
|
fileList.push({id: fileObj.id, name: fileObj.fileName, previewName})
|
|
}
|
|
this.fileList = [...fileList]
|
|
}else {
|
|
this.fileList = []
|
|
}
|
|
},
|
|
handleDownLoad(file){
|
|
console.log(file)
|
|
downloadFile(`sys/common/download/${file.id}`, file.name)
|
|
},
|
|
handlePreview(file) {
|
|
if (file && file.id) {
|
|
const fileFullUrl = `${window._CONFIG['domianWebSocketURL']}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.previewName}`
|
|
let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
|
|
// let url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileFullUrl)}`
|
|
window.open(url)
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.color-blue {
|
|
color: #069f99 !important;
|
|
cursor: pointer;
|
|
}
|
|
.m-l-4 {
|
|
margin-left: 4px;
|
|
}
|
|
</style>
|