307 lines
9.3 KiB
Vue
307 lines
9.3 KiB
Vue
<template>
|
||
<div class="dataCenterDetail">
|
||
<div class="contentTitle">
|
||
<div class="back" title="返回" @click="back">
|
||
<i class="el-icon-back"></i>
|
||
</div>
|
||
<div class="title">
|
||
{{ detailInfoForm.dataTitle + '-详情' }}
|
||
</div>
|
||
</div>
|
||
<transition name="el-zoom-in-top">
|
||
<div class="transition-box">
|
||
<p class="transition-box-p">
|
||
<label class="transition-box-label">类型：</label>
|
||
<span class="transition-box-span">
|
||
{{ detailInfoForm.dataType }}
|
||
</span>
|
||
</p>
|
||
<p class="transition-box-p">
|
||
<label class="transition-box-label">资料标题：</label>
|
||
<span class="transition-box-span">{{ detailInfoForm.dataTitle }}</span>
|
||
</p>
|
||
<div class="transition-box-p">
|
||
<label class="transition-box-label">附件：</label>
|
||
<div class="file-box" v-if="fileList.length > 0">
|
||
<p v-for="item in fileList"
|
||
:key="item.id">
|
||
<a @click="openFileInPdf(item.id, item.name)" target="_blank">{{ item.name }}</a>
|
||
<i
|
||
title="下载"
|
||
@click="downloadFile(item.id)"
|
||
class="icon-download"
|
||
v-btn-permission="''"
|
||
/>
|
||
<!-- <i-->
|
||
<!-- title="下载带水印"-->
|
||
<!-- @click="downloadFileByWater(item.id,item.name)"-->
|
||
<!-- class="icon-download2"-->
|
||
<!-- v-btn-permission="''"-->
|
||
<!-- />-->
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "dataCenterDetail",
|
||
data() {
|
||
return {
|
||
detailInfoForm: {},
|
||
detailInfoId: '',
|
||
fileList: []
|
||
}
|
||
},
|
||
methods: {
|
||
openFileInPdf(attId, oldFileName) {
|
||
// 判断是否是图片格式，图片格式不预览，直接下载
|
||
let index1 = oldFileName.lastIndexOf('.')
|
||
let index2 = oldFileName.length
|
||
let fileSuffix = oldFileName.substring(index1, index2)
|
||
//把后缀转大写
|
||
if (fileSuffix !== undefined && fileSuffix !== null) {
|
||
fileSuffix = fileSuffix.toUpperCase()
|
||
}
|
||
// 判断上传文件格式
|
||
if (fileSuffix === '.PNG' || fileSuffix === '.JPG' || fileSuffix === '.JPEG') {
|
||
this.downloadFile(attId)
|
||
return true
|
||
}
|
||
|
||
// 缺少文件
|
||
if (fileSuffix === '.PDG' || fileSuffix === '.pdg') {
|
||
this.getBusStandFileByAttId(attId)
|
||
.then(res => {
|
||
if (res) {
|
||
const editFileInfo = res
|
||
console.log(editFileInfo)
|
||
if (editFileInfo.fileSuffix === 'pdg' || editFileInfo.fileSuffix === 'PDG') {
|
||
window.open('book://ssreader/e0?url=' + editFileInfo.downLoadUrl)
|
||
} else {
|
||
const nowTime = new Date().getTime()
|
||
// window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(editFileInfo.downLoadUrl)));
|
||
// window.open(onlyOfficeUrl+'/onlyOffice?oldFileName=' + editFileInfo.oldFileName + '&fileType=' + editFileInfo.fileSuffix + '&attId=' + editFileInfo.id + '&fileUrl=' + editFileInfo.downLoadUrl + '&key=' + editFileInfo.id + nowTime+'&filePath='+editFileInfo.filePath+'&fileName='+editFileInfo.fileName)
|
||
}
|
||
// window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent('/api/att/attFile/getFileInfo?fileId=' + editFileInfo.id))
|
||
}
|
||
// switch (res.convertState) {
|
||
// case 'ERROR':
|
||
// this.$message.warning('文档转换失败')
|
||
// break
|
||
// case 'LODING':
|
||
// this.$message.info('文档转换中，请稍后查看')
|
||
// break
|
||
// case 'SUCCESS':
|
||
// const { convertFileInfo } = res
|
||
// window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent('/api/att/attFile/getFileInfo?fileId=' + convertFileInfo.id))
|
||
// break
|
||
// }
|
||
}).catch(e => {
|
||
console.log(e)
|
||
this.$message.warning('文件不存在,预览失败')
|
||
})
|
||
} else {
|
||
this.$http.get('lawss/sarStandFile/queryConvertAtt', {
|
||
attId: attId
|
||
}, {
|
||
_this: this
|
||
}, res => {
|
||
|
||
console.log("res.data", res.data);
|
||
if (res.data) {
|
||
let fileObj = {}
|
||
fileObj.fileId = res.data.attId
|
||
fileObj.fileName = oldFileName
|
||
let fileList = []
|
||
let repeatData = 0
|
||
if (sessionStorage.getItem('fileInfo')) {
|
||
fileList = JSON.parse(sessionStorage.getItem('fileInfo'))
|
||
if (fileList != null && fileList.length > 0) {
|
||
for (let i = 0; i < fileList.length; i++) {
|
||
if (fileList[i].fileId === res.data.attId) {
|
||
repeatData = 1
|
||
break
|
||
}
|
||
}
|
||
if (repeatData === 0) {
|
||
fileList.push(fileObj)
|
||
fileList = JSON.stringify(fileList)
|
||
sessionStorage.setItem('fileInfo', fileList)
|
||
}
|
||
}
|
||
} else {
|
||
fileList.push(fileObj)
|
||
fileList = JSON.stringify(fileList)
|
||
sessionStorage.setItem('fileInfo', fileList)
|
||
}
|
||
window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent('/api/att/attFile/getFileInfo?fileId=' + res.data.attId))
|
||
} else {
|
||
this.$message.error('文档未转换成功或本地读取不到该文档')
|
||
}
|
||
}, e => {
|
||
this.$message.error('文档未转换成功或本地读取不到该文档')
|
||
})
|
||
}
|
||
},
|
||
back() {
|
||
this.$router.push({name: "dataCenter"});
|
||
},
|
||
/**
|
||
* @Description: 点击下载
|
||
* @author zmf
|
||
* @date 2021/3/16
|
||
*/
|
||
downloadFile(attId) {
|
||
if (attId != null && attId !== "") {
|
||
window.location.href = "/api/att/attFile/downloadFileForSar?fileId=" + attId;
|
||
} else {
|
||
this.$message.error("请选择要下载的文件");
|
||
}
|
||
},
|
||
downloadFileByWater(attId, fileSuffix) {
|
||
let fileExtension = fileSuffix.substring(fileSuffix.lastIndexOf(".") + 1);
|
||
if (fileExtension !== "pdf" && fileExtension !== "PDF") {
|
||
this.$message.error("水印下载仅支持PDF,pdf格式文件");
|
||
} else {
|
||
if (attId != null && attId !== "") {
|
||
window.location.href = "/api/att/attFile/downloadFileForSarWaterMark?fileId=" + attId;
|
||
} else {
|
||
this.$message.error("请选择要下载的文件");
|
||
}
|
||
}
|
||
},
|
||
// 请求上传的文件信息
|
||
getFile(fileId) {
|
||
this.$http.get("att/attFile/getMultiFileInfos", {
|
||
fileIds: fileId
|
||
}, {
|
||
_this: this
|
||
}, res => {
|
||
console.log('64', res)
|
||
this.$nextTick(() => {
|
||
res.data.map(item => {
|
||
// 赋值要回显的上传文件内容
|
||
this.fileList.push({
|
||
name: item.oldFileName,
|
||
uid: item.uid,
|
||
status: item.status,
|
||
id: item.id
|
||
});
|
||
});
|
||
});
|
||
}, e => {
|
||
});
|
||
},
|
||
|
||
},
|
||
created() {
|
||
this.detailInfoId = this.$route.params.id
|
||
console.log('13', this.$route.params.id)
|
||
},
|
||
mounted() {
|
||
let fileId
|
||
this.$http.get('fileMaterialCenter/file-material', {id: this.detailInfoId}, {
|
||
_this: this
|
||
}, res => {
|
||
this.detailInfoForm = res.data.records[0]
|
||
fileId = this.detailInfoForm.attachFileId
|
||
this.getFile(fileId)
|
||
}, e => {
|
||
})
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.dataCenterDetail {
|
||
height: 100%;
|
||
background-color: white;
|
||
.contentTitle {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
height: 50px;
|
||
background: #ffffff;
|
||
|
||
.title {
|
||
flex: 1;
|
||
font-weight: bold;
|
||
font-size: 20px;
|
||
margin-left: 15px;
|
||
|
||
.el-icon-s-order {
|
||
font-size: 22px;
|
||
color: #4498F0;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.transition-box {
|
||
padding: 0 10px;
|
||
background: #ffffff;
|
||
font-size: 14px;
|
||
|
||
.transition-box-p {
|
||
line-height: 35px;
|
||
|
||
.transition-box-label {
|
||
display: inline-block;
|
||
width: 100px;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.transition-box-span {
|
||
display: inline-block;
|
||
width: calc(~'100% - 100px');
|
||
}
|
||
|
||
.file-box {
|
||
display: inline-block;
|
||
width: calc(~'100% - 100px');
|
||
|
||
.transition-box-span {
|
||
display: inline;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
color: #4498f0;
|
||
}
|
||
|
||
p {
|
||
& > a {
|
||
cursor: pointer;
|
||
}
|
||
|
||
& > i {
|
||
display: inline-block;
|
||
margin-left: 3px;
|
||
width: 18px;
|
||
height: 16px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
background-position: center center;
|
||
vertical-align: sub;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.icon-download {
|
||
background-image: url("~assets/images/shangqi/img/download.png");
|
||
}
|
||
|
||
.icon-download2 {
|
||
background-image: url("~assets/images/shangqi/img/download2.png");
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|