mosr-web/src/views/article-management/detail.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">
          <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>