148 lines
3.8 KiB
Vue
148 lines
3.8 KiB
Vue
<template>
|
||
<div v-loading="loading" class="article-detail">
|
||
<el-form :model="formData">
|
||
<h2 class="article-title">{{ formData.articleTitle }}</h2>
|
||
<div class="article-title">
|
||
<Tag dictType="article_type" :value="formData.articleType"/>
|
||
<span>{{ formData.articleTime }}</span>
|
||
<span>发文单位：{{ formData.remarks }}</span>
|
||
</div>
|
||
<el-row gutter="20">
|
||
<el-col :span="24">
|
||
<div style="display: flex;flex-direction: column">
|
||
<div v-for="(item,index) in formData.fileList" style="display: flex;align-items: center;margin-bottom: 5px">
|
||
附件{{ index + 1 }}： <a :href="item.url" style="color: #409eff;" class="a-style" target="_blank">{{ item.originalFileName }}</a>
|
||
<el-button type="primary" link @click="handleDownload(item)" style="font-size: 16px;margin-left: 10px">下载</el-button>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ElLoading, ElNotification} from "element-plus";
|
||
import {getArticleDetail} from "@/api/article";
|
||
import {downloadFile} from "@/api/project-demand";
|
||
|
||
const loading = ref(false)
|
||
const formData = ref({})
|
||
const route = useRoute()
|
||
const clickHandle = (e) => {
|
||
if (e.target.nodeName == "A") {
|
||
e.preventDefault()
|
||
let url = e.target.href.split('?')[0];
|
||
const searchParams = new URLSearchParams(e.target.href.split('?')[1])
|
||
const fileId = searchParams.get('fileId');
|
||
const fileName = searchParams.get('fileName');
|
||
// if(localStorage.getItem("fileUrlList")){
|
||
// let fileUrlList=JSON.parse(localStorage.getItem("fileUrlList"));
|
||
// fileUrlList.forEach(item=>{
|
||
// if(item.url == e.target.href){
|
||
// console.info("🚀 ~method:item -----", item)
|
||
let item = {
|
||
url,
|
||
fileName
|
||
}
|
||
// handleDownload(fileId,fileName)
|
||
// download(item)
|
||
// }else {
|
||
// e.preventDefault()
|
||
// }
|
||
// })
|
||
// }
|
||
}
|
||
}
|
||
// const handleDownload = (fileId,fileName) => {
|
||
// const loading = ElLoading.service({fullscreen: true})
|
||
// downloadFile(fileId).then(res => {
|
||
// const blob = new Blob([res])
|
||
// let a = document.createElement('a')
|
||
// a.href = URL.createObjectURL(blob)
|
||
// nextTick(() => {
|
||
// a.download = fileName
|
||
// a.click()
|
||
// loading.close()
|
||
// })
|
||
// })
|
||
// }
|
||
const handleDownload = (row) => {
|
||
downloadFile(row.fileId).then(res => {
|
||
const blob = new Blob([res])
|
||
let a = document.createElement('a')
|
||
a.href = URL.createObjectURL(blob)
|
||
a.download = row.originalFileName
|
||
a.click()
|
||
})
|
||
}
|
||
const download = (row) => {
|
||
const x = new window.XMLHttpRequest();
|
||
x.open('GET', row.url, true);
|
||
x.responseType = 'blob';
|
||
x.onload = () => {
|
||
const url = window.URL.createObjectURL(x.response);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = row.fileName;
|
||
a.click();
|
||
window.open(row.url,'_blank')
|
||
};
|
||
x.send();
|
||
}
|
||
const getDetailInfo = async () => {
|
||
loading.value = true
|
||
getArticleDetail(route.query.id).then(res => {
|
||
if (res.code === 1000) {
|
||
formData.value = res.data
|
||
loading.value = false
|
||
} else {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
onMounted(async () => {
|
||
if (route.query.id) {
|
||
await getDetailInfo()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.article-a {
|
||
a {
|
||
color: #409eff !important;
|
||
|
||
&:hover {
|
||
text-decoration: underline !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.a-style:hover{
|
||
text-decoration: underline !important;
|
||
}
|
||
.article-detail {
|
||
padding: 0 30px;
|
||
padding-top: 15px;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.article-title {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
> span:nth-child(2) {
|
||
margin: 15px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|