394 lines
11 KiB
Vue
394 lines
11 KiB
Vue
<template>
|
||
<BasicModal
|
||
v-bind="$attrs"
|
||
@register="registerModal"
|
||
title="查看详情"
|
||
:width="800"
|
||
:minHeight="600"
|
||
:showCancelBtn="false"
|
||
:showOkBtn="false"
|
||
:height="88"
|
||
:destroyOnClose="true"
|
||
@visible-change="handleVisibleChange"
|
||
>
|
||
<template #title>
|
||
<span class="basic-title">查看详情</span>
|
||
<div class="print-btn" @click="onPrinter">
|
||
<Icon icon="ant-design:printer-filled" />
|
||
<span class="print-text">打印</span>
|
||
</div>
|
||
</template>
|
||
<a-card class="daily-article">
|
||
<a-card-meta :title="content.titile">
|
||
<template #description>
|
||
<div class="article-desc">
|
||
<span>发布人：{{ content.sender }}</span>
|
||
<span>发布时间：{{ content.sendTime }}</span>
|
||
<span v-if="content.visitsNum">
|
||
<a-tooltip placement="top" title="访问次数" :autoAdjustOverflow="true">
|
||
<eye-outlined class="item-icon" /> {{ content.visitsNum }}
|
||
</a-tooltip>
|
||
</span>
|
||
</div>
|
||
</template>
|
||
</a-card-meta>
|
||
<a-divider />
|
||
<div v-html="content.msgContent" class="article-content"></div>
|
||
<div>
|
||
<a-button v-if="hasHref" @click="jumpToHandlePage">前往办理<ArrowRightOutlined /></a-button>
|
||
</div>
|
||
</a-card>
|
||
<template v-if="noticeFiles && noticeFiles.length > 0">
|
||
<div class="files-title">相关附件：</div>
|
||
<template v-for="(file, index) in noticeFiles" :key="index">
|
||
<div class="files-area">
|
||
<div class="files-area-text">
|
||
<span>
|
||
<paper-clip-outlined />
|
||
<a
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
:title="file.fileName"
|
||
:href="getFileAccessHttpUrl(file.filePath)"
|
||
class="ant-upload-list-item-name"
|
||
>{{ file.fileName }}</a
|
||
>
|
||
</span>
|
||
</div>
|
||
<div class="files-area-operate">
|
||
<download-outlined class="item-icon" @click="handleDownloadFile(file.filePath)" />
|
||
<eye-outlined class="item-icon" @click="handleViewFile(file.filePath)" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<a v-if="noticeFiles.length > 1" :href="downLoadFiles + '?id=' + content.id + '&token=' + getToken()" target="_blank" style="margin: 15px 6px; color: #5ac0fa">
|
||
<download-outlined class="item-icon" style="margin-right: 5px" /><span>批量下载所有附件</span>
|
||
</a>
|
||
</template>
|
||
</BasicModal>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||
import { ArrowRightOutlined, PaperClipOutlined, DownloadOutlined, EyeOutlined } from '@ant-design/icons-vue';
|
||
import { addVisitsNum } from '@/views/system/notice/notice.api';
|
||
import { useRouter } from 'vue-router';
|
||
import xss from 'xss';
|
||
import { options } from './XssWhiteList';
|
||
import { ref, unref } from 'vue';
|
||
import { getElectronFileUrl, getFileAccessHttpUrl } from '@/utils/common/compUtils';
|
||
import { useGlobSetting } from '@/hooks/setting';
|
||
import { encryptByBase64 } from '@/utils/cipher';
|
||
import { getToken } from '@/utils/auth';
|
||
import {defHttp} from "@/utils/http/axios";
|
||
import {$electron} from "@/electron";
|
||
const router = useRouter();
|
||
const glob = useGlobSetting();
|
||
const isUpdate = ref(true);
|
||
const content = ref<any>({});
|
||
const noticeFiles = ref([]);
|
||
/**
|
||
* 下载文件路径
|
||
*/
|
||
const downLoadFiles = `${glob.domainUrl}/sys/annountCement/downLoadFiles`;
|
||
const emit = defineEmits(['close', 'register']);
|
||
//表单赋值
|
||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||
isUpdate.value = !!data?.isUpdate;
|
||
noticeFiles.value = [];
|
||
if (unref(isUpdate)) {
|
||
//data.record.msgContent = '<p>2323</p><input onmouseover=alert(1)>xss test';
|
||
// 代码逻辑说明: VUEN-1702 【禁止问题】sql注入漏洞
|
||
if (data.record.msgContent) {
|
||
// 代码逻辑说明: 【QQYUN-7049】3.6.0版本 通知公告中发布的富文本消息，在我的消息中查看没有样式---
|
||
data.record.msgContent = xss(data.record.msgContent, options);
|
||
}
|
||
|
||
// 代码逻辑说明: [QQYUN-12521]通知公告消息增加访问量
|
||
if (!data.record?.busId) {
|
||
await addVisitsNum({ id: data.record.id });
|
||
}
|
||
|
||
content.value = data.record;
|
||
if(content.value.sender){
|
||
const userInfo = await defHttp.get({ url: '/sys/user/queryUserComponentData?isMultiTranslate=true', params: { username: content.value.sender } });
|
||
content.value.sender = userInfo && userInfo?.records && userInfo?.records.length>0
|
||
?userInfo.records.find((item) => item.username === content.value.sender)?.realname : content.value.sender;
|
||
}
|
||
console.log('data---------->>>', data);
|
||
if (data.record?.files && data.record?.files.length > 0) {
|
||
noticeFiles.value = data.record.files.split(',').map((item) => {
|
||
return {
|
||
fileName: item.split('/').pop(),
|
||
filePath: item,
|
||
};
|
||
});
|
||
}
|
||
showHrefButton();
|
||
}
|
||
});
|
||
|
||
const hasHref = ref(false);
|
||
//查看消息详情可以跳转
|
||
function showHrefButton() {
|
||
if (content.value.busId) {
|
||
hasHref.value = true;
|
||
}
|
||
}
|
||
//跳转至办理页面
|
||
function jumpToHandlePage() {
|
||
let temp: any = content.value;
|
||
if (temp.busId) {
|
||
//这个busId是 任务ID
|
||
let jsonStr = temp.msgAbstract;
|
||
let query = {};
|
||
try {
|
||
if (jsonStr) {
|
||
let temp = JSON.parse(jsonStr);
|
||
if (temp) {
|
||
Object.keys(temp).map((k) => {
|
||
query[k] = temp[k];
|
||
});
|
||
}
|
||
}
|
||
} catch (e) {
|
||
console.log('参数解析异常', e);
|
||
}
|
||
|
||
console.log('query', query, jsonStr);
|
||
console.log('busId', temp.busId);
|
||
|
||
if (Object.keys(query).length > 0) {
|
||
// taskId taskDefKey procInsId
|
||
router.push({ path: '/task/handle/' + temp.busId, query: query });
|
||
} else {
|
||
router.push({ path: '/task/handle/' + temp.busId });
|
||
}
|
||
}
|
||
closeModal();
|
||
}
|
||
//打印
|
||
function onPrinter() {
|
||
// 获取要打印的内容
|
||
const printContent = document.querySelector('.daily-article');
|
||
|
||
if (!printContent) return;
|
||
|
||
// 创建一个iframe来处理打印
|
||
const printFrame = document.createElement('iframe');
|
||
printFrame.style.position = 'absolute';
|
||
printFrame.style.width = '0';
|
||
printFrame.style.height = '0';
|
||
printFrame.style.border = 'none';
|
||
printFrame.style.left = '-9999px';
|
||
|
||
printFrame.onload = function () {
|
||
const frameDoc = printFrame.contentDocument || printFrame.contentWindow?.document;
|
||
if (!frameDoc) return;
|
||
|
||
// 复制内容到iframe
|
||
const clone = printContent.cloneNode(true);
|
||
frameDoc.body.appendChild(clone);
|
||
|
||
// 添加打印样式
|
||
const style = frameDoc.createElement('style');
|
||
style.innerHTML = `
|
||
body {
|
||
margin: 0;
|
||
padding: 15px;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
@page {
|
||
size: auto;
|
||
margin: 15mm;
|
||
}
|
||
@media print {
|
||
body {
|
||
padding: 0;
|
||
}
|
||
}
|
||
.ant-card-meta-detail {
|
||
display: flex !important ;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
flex-direction: column !important;
|
||
}
|
||
.ant-card-meta-title {
|
||
font-size: 22px !important;
|
||
color: rgba(51, 51, 51, 0.88);
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.ant-card .ant-card-meta-description {
|
||
color: rgba(51, 51, 51, 0.45);
|
||
}
|
||
`;
|
||
frameDoc.head.appendChild(style);
|
||
|
||
// 确保图片加载完成
|
||
const images = frameDoc.getElementsByTagName('img');
|
||
let imagesToLoad = images.length;
|
||
|
||
const printWhenReady = () => {
|
||
if (imagesToLoad === 0) {
|
||
setTimeout(() => {
|
||
printFrame.contentWindow?.focus();
|
||
printFrame.contentWindow?.print();
|
||
document.body.removeChild(printFrame);
|
||
}, 300);
|
||
}
|
||
};
|
||
|
||
if (imagesToLoad === 0) {
|
||
printWhenReady();
|
||
} else {
|
||
Array.from(images).forEach((img) => {
|
||
img.onload = () => {
|
||
imagesToLoad--;
|
||
printWhenReady();
|
||
};
|
||
// 处理可能已经缓存的图片
|
||
if (img.complete && img.naturalWidth !== 0) {
|
||
imagesToLoad--;
|
||
printWhenReady();
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
document.body.appendChild(printFrame);
|
||
}
|
||
|
||
/**
|
||
* 下载文件
|
||
* @param filePath
|
||
*/
|
||
function handleDownloadFile(filePath) {
|
||
window.open(getFileAccessHttpUrl(filePath), '_blank');
|
||
}
|
||
/**
|
||
* 预览文件
|
||
* @param filePath
|
||
*/
|
||
function handleViewFile(filePath) {
|
||
if (filePath) {
|
||
console.log('glob.onlineUrl', glob.viewUrl);
|
||
let url = encodeURIComponent(encryptByBase64(filePath));
|
||
let previewUrl = `${glob.viewUrl}?url=` + url;
|
||
//update-begin-author:liusq---date:2025-12-16--for: JHHB-1139桌面端 文件预览统一修改
|
||
if($electron.isElectron()){
|
||
previewUrl = getElectronFileUrl(filePath);
|
||
}
|
||
//update-end-author:liusq---date:2025-12-16--for: JHHB-1139桌面端 文件预览统一修改
|
||
window.open(previewUrl, '_blank');
|
||
}
|
||
}
|
||
|
||
function handleVisibleChange(visible: boolean) {
|
||
if (!visible) {
|
||
emit('close');
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.daily-article {
|
||
:deep(.ant-card-meta-detail) {
|
||
display: flex !important;
|
||
justify-content: center !important;
|
||
align-items: center !important;
|
||
flex-direction: column !important;
|
||
}
|
||
:deep(.ant-card-meta-detail .ant-card-meta-title) {
|
||
font-size: 22px !important;
|
||
}
|
||
}
|
||
|
||
.print-btn {
|
||
position: absolute;
|
||
right: 100px;
|
||
top: 20px;
|
||
cursor: pointer;
|
||
color: #a3a3a5;
|
||
z-index: 999;
|
||
.print-text {
|
||
margin-left: 5px;
|
||
font-size: 14px;
|
||
}
|
||
&:hover {
|
||
color: #40a9ff;
|
||
}
|
||
}
|
||
.detail-iframe {
|
||
border: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 600px;
|
||
}
|
||
.files-title {
|
||
font-size: 16px;
|
||
margin: 10px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
.files-area {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
margin: 6px;
|
||
&:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
.files-area-text {
|
||
display: flex;
|
||
.ant-upload-list-item-name {
|
||
margin: 0 6px;
|
||
color: #56befa;
|
||
}
|
||
}
|
||
.files-area-operate {
|
||
display: flex;
|
||
margin-left: 10px;
|
||
.item-icon {
|
||
cursor: pointer;
|
||
margin: 0 6px;
|
||
&:hover {
|
||
color: #56befa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-desc {
|
||
display: flex;
|
||
align-items: center;
|
||
span:not(:first-child) {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
/* 确保打印内容中的图片有最大宽度限制 */
|
||
.article-content img {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
.basic-title{
|
||
position: relative;
|
||
display: flex;
|
||
padding-left: 7px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 24px;
|
||
color: rgba(0,0,0,0.88);
|
||
cursor: move;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
user-select: none;
|
||
}
|
||
</style>
|