fix : 修复实施图片
This commit is contained in:
@@ -1,152 +1,152 @@
|
||||
<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">
|
||||
<el-form-item>
|
||||
<div class="article-a" v-html="formData.articleContent" @click="clickHandle"></div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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>
|
||||
<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">
|
||||
<el-form-item>
|
||||
<div class="article-a" v-html="formData.articleContent" @click="clickHandle"></div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user