zjugis_OA/client/src/views/OaSystem/officeCenter/noticeAndLearn/detail.vue

<template>
  <div class="lookDetailBox">
    <div>
      <h2>{{ detailForm.title }}</h2>
      <div class="descBox">
        <p>
          <span>发布时间：{{ detailForm.createTime }}</span>
          <span style="margin: 0px 50px">阅读次数：{{ detailForm.readNum }}</span>
        </p>
        <div>
          <span class="title">附件：</span>
          <ul class="prviewFile">
            <li v-for="(item, index) in fileUrls" :key="index">
              <span>
                <a href="javascript:void(0);" @click="previewFile(item)">{{ item['name'] }}</a>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div v-html="detailForm.content"></div>
      <PreView :src="currentUrl" v-if="preVisiable" @close="closeHandler" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import request from '@/config/axios'
import PreView from '@/components/PreView/index.vue'
import { useFiles } from './mixins.ts'

const detailForm = ref<{
  title: string
  createTime: any
  readNum: number
  content: string
}>({
  title: '',
  createTime: '',
  readNum: 0,
  content: ''
})
const preVisiable = ref<boolean>(false)
const currentUrl = ref<string>()
function isImage(file) {
  return /^image\//i.test(file.type)
}

const previewFile = (item) => {
  if (isImage(item)) {
    preVisiable.value = true
    currentUrl.value = item['url']
  } else {
    window.open(item['url'])
  }
}
const closeHandler = () => {
  preVisiable.value = false
}
const { fileUrls, queryFiles } = useFiles(request)

/***
 * 禁用右键菜单
 */
document.addEventListener('contextmenu', function (e) {
  e.preventDefault()
})
async function queryDetailById(idStr: any): Promise<void> {
  const urlApi = `/adm/noticeAndLearn/query/detailById`
  const params = {
    id: idStr
  }
  const result = await request.get({ url: urlApi, params })
  if (result) {
    detailForm.value = result
    queryFiles(result.files)
  }
}
function addReadNum(idStr: any) {
  const urlApi = `/adm/noticeAndLearn/readNum/add`
  const params = {
    id: idStr
  }
  request.get({ url: urlApi, params })
}
function updateRead(idStr: any) {
  const urlApi = `/adm/noticeAndLearn/read/update`
  const params = {
    id: idStr
  }
  request.get({ url: urlApi, params })
}
const route = useRoute()
const query = route.query
if (query.id) {
  queryDetailById(query.id)
  addReadNum(query.id)
  updateRead(query.id)
}
</script>

<style lang="scss" scoped>
.lookDetailBox {
  margin-top: 20px;
  height: calc(100% - 20px);
  background-color: #fff;
  border-radius: 20px;
  padding: 40px 0px;
  position: relative;
  overflow-y: auto;
  > div {
    width: 60vw;
    margin: auto;
    > h2 {
      text-align: center;
      font-size: 36px;
      font-weight: bold;
    }
    > .descBox {
      border-bottom: solid 1px #d8d8d8;
      margin-bottom: 30px;
      > p {
        text-align: center;
        padding: 30px;
        color: #444452;
        > .copy_line {
          color: #409eff;
          cursor: pointer;
        }
      }
      > div {
        margin-bottom: 10px;
        display: flex;
        > .title {
          color: #999;
          margin-right: 10px;
        }
        > .prviewFile {
          display: flex;
          > li {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>
./mixins.js