资料中心
This commit is contained in:
yanyizhou
@@ -0,0 +1,306 @@
|
||||
<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('/static/onlyOffice/onlinePreview.html?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>
|
||||
Reference in New Issue
Block a user