From db42d08c39ae6129e2b95cd24c0d57c6769282e5 Mon Sep 17 00:00:00 2001
From: huangyinfeng <1244041895@qq.com>
Date: 星期日, 29 九月 2024 15:32:51 +0800
Subject: [PATCH] 邮件右键菜单
---
src/views/email/components/ListPage/drawerDetail.vue | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 111 insertions(+), 1 deletions(-)
diff --git a/src/views/email/components/ListPage/drawerDetail.vue b/src/views/email/components/ListPage/drawerDetail.vue
index 862ff7c..e4a020f 100644
--- a/src/views/email/components/ListPage/drawerDetail.vue
+++ b/src/views/email/components/ListPage/drawerDetail.vue
@@ -53,9 +53,19 @@
<span style="margin-right: 10px; font-size: 16px">
<PushpinOutlined />
</span>
+ <a-tag
+ v-if="tableRowData.attachmentPath?.length > 0"
+ style="margin-right: 10px; font-size: 12px"
+ >
+ <PaperClipOutlined style="margin-right: 4px; color: #ffac00" />{{
+ tableRowData.attachmentPath?.length
+ }}
+ </a-tag>
</div>
<div class="right">
- <div class="tate">{{ formatToDateDay(tableRowData.receiveTime || tableRowData.updateTime) }}</div>
+ <div class="tate">{{
+ formatToDateDay(tableRowData.receiveTime || tableRowData.updateTime)
+ }}</div>
<div>
<a-dropdown-button>
<div v-if="!isDrafts">
@@ -142,6 +152,28 @@
<span>鏆傛湭鏌ヨ鍒拌瀹㈡埛鐨勫綋鍦版椂闂�</span>
<!-- <span>2024-06-08 22:22</span> -->
</div>
+
+ <div v-if="tableRowData.attachmentPath?.length>0" class="p-2 f-z-14" style="margin-top: 10px">
+ <div style="display: flex; align-items: center">
+ <span style="margin-right: 10px">{{
+ `闄勪欢(${tableRowData.attachmentPath?.length})`
+ }}</span>
+ <a type="link" @click="fnAllDownload">鍏ㄩ儴涓嬭浇</a>
+ </div>
+ <div class="my-d-f" style="width: 100%; margin-top: 10px">
+ <div
+ class="file-item my-d-f"
+ v-for="item in tableRowData.attachmentPath"
+ :key="item"
+ >
+ <div class="icon"><FileExcelOutlined /></div>
+ <div class="name" @click="fnPreview(item)">{{ item.name }}</div>
+ <div class="size"> {{ item.size + 'k' }} </div>
+ <div class="download" @click="fnDownload(item)"><CloudDownloadOutlined /></div>
+ <!-- <div class="delete">鍒犻櫎</div> -->
+ </div>
+ </div>
+ </div>
<div class="ct">
<div v-if="tableRowData.content">
<TinymcePw ref="TinymcePwRef" v-model="tableRowData.content" />
@@ -177,6 +209,9 @@
CopyOutlined,
UserOutlined,
RollbackOutlined,
+ FileExcelOutlined,
+ CloudDownloadOutlined,
+ PaperClipOutlined,
} from '@ant-design/icons-vue';
import pageHeadLeft from './pageHeadLeft.vue';
import UserTips from '@/views/email/components/userTips/index.vue';
@@ -322,6 +357,40 @@
function replyEmail(row, type) {
router.push({ path: '/email/edit', query: { docCode: row.docCode, type: type } });
}
+
+ const fnPreview = (item) => {
+ if (!item) {
+ console.error('Invalid file or response');
+ return;
+ }
+
+ // // 鑾峰彇鏂囦欢绫诲瀷锛堥�氳繃鏂囦欢鎵╁睍鍚嶆垨 MIME 绫诲瀷锛�
+ const fileExt = item.fileType; // 鑾峰彇鏂囦欢鎵╁睍鍚�
+ const isImage = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(fileExt); // 鍒ゆ柇鏄惁涓哄浘鐗�
+
+ if (isImage) {
+ // 鐩存帴鎵撳紑鍥剧墖
+ window.open(item.url, '_blank');
+ } else {
+ const iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${item.url}`;
+ window.open(iframeSrc, '_blank');
+ }
+ };
+
+ const fnDownload = (item) => {
+ const link = document.createElement('a');
+ link.href = item.url;
+ link.download = item.name; // 鎻愬彇鏂囦欢鍚�
+ document.body.appendChild(link); // 灏嗛摼鎺ユ坊鍔犲埌 DOM
+ link.click(); // 妯℃嫙鐐瑰嚮涓嬭浇
+ document.body.removeChild(link); // 涓嬭浇鍚庣Щ闄ら摼鎺�
+ };
+
+ const fnAllDownload = () => {
+ const urls = tableRowData.value.attachmentPath.map((item) => item.url);
+ const url = urls.join(',');
+ fnDownload(url);
+ };
</script>
<style scoped lang="less">
@@ -445,4 +514,45 @@
.f-z-14 {
font-size: 12px;
}
+
+ .file-item {
+ width: 240px;
+ margin-right: 10px;
+ padding: 10px;
+ border-radius: 4px;
+ background-color: #f0f0f0;
+
+ & .icon {
+ width: 20px;
+ margin-right: 5px;
+ }
+
+ & .name {
+ flex: 1;
+ margin-right: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ & .download {
+ display: none;
+ width: 20px;
+ }
+ }
+
+ .file-item:hover .name {
+ transition: 0.3s;
+ color: #0960bd;
+ }
+
+ .file-item:hover .size {
+ display: none;
+ transition: 0.3s;
+ }
+
+ .file-item:hover .download {
+ display: block;
+ transition: 0.3s;
+ }
</style>
--
Gitblit v1.8.0