|
@@ -1,107 +1,142 @@
|
|
|
<template>
|
|
|
- <div v-loading="loading" class="box">
|
|
|
- <div style="
|
|
|
+ <div style="display:flex" ref="outerDom" v-loading="loading">
|
|
|
+ <div style="overflow:auto" :style="{width:boxWidth+'px',height:boxHeight+'px'}">
|
|
|
+ <div class="box">
|
|
|
+ <div style="
|
|
|
margin-bottom: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
">
|
|
|
- <el-button :disabled="currentMailIndex === 0" @click="handleChangeEail('10')">上一封</el-button>
|
|
|
- <el-button :disabled="currentMailIndex === allLength - 1" @click="handleChangeEail('20')">下一封</el-button>
|
|
|
- <el-button type="primary" @click="handleReply('10')">回复</el-button>
|
|
|
- <el-button type="primary" @click="handleReply('30')">全部回复</el-button>
|
|
|
- <el-button type="warning" @click="handleReply('20')">转发</el-button>
|
|
|
- <el-button @click="handleReply('40')">再次编辑</el-button>
|
|
|
- <el-button @click="handleMove">移动</el-button>
|
|
|
- <el-button @click="handleRemove">删除</el-button>
|
|
|
- <div style="
|
|
|
+ <el-button :disabled="currentMailIndex === 0" @click="handleChangeEail('10')">上一封</el-button>
|
|
|
+ <el-button :disabled="currentMailIndex === allLength - 1" @click="handleChangeEail('20')">下一封</el-button>
|
|
|
+ <el-button type="primary" @click="handleReply('10')">回复</el-button>
|
|
|
+ <el-button type="primary" @click="handleReply('30')">全部回复</el-button>
|
|
|
+ <el-button type="warning" @click="handleReply('20')">转发</el-button>
|
|
|
+ <el-button @click="handleReply('40')">再次编辑</el-button>
|
|
|
+ <el-button @click="handleMove">移动</el-button>
|
|
|
+ <el-button @click="handleRemove">删除</el-button>
|
|
|
+ <div style="
|
|
|
background-color: #eff6ff;
|
|
|
padding: 6px;
|
|
|
margin-left: 10px;
|
|
|
cursor: pointer;
|
|
|
border-radius: 2px 2px 2px 2px;
|
|
|
" @click="handleAddTag">
|
|
|
- <span class="iconfont icon-icon_biaoqian2" style="color: #0084ff; font-size: 20px"></span>
|
|
|
- </div>
|
|
|
- <!-- <el-tag
|
|
|
+ <span class="iconfont icon-icon_biaoqian2" style="color: #0084ff; font-size: 20px"></span>
|
|
|
+ </div>
|
|
|
+ <!-- <el-tag
|
|
|
style="margin-left: 8px; cursor: pointer"
|
|
|
type="success"
|
|
|
@click="handleAddTag"
|
|
|
>
|
|
|
+
|
|
|
</el-tag> -->
|
|
|
- </div>
|
|
|
- <div class="top">
|
|
|
- <div class="top-row">
|
|
|
- <div class="subject">
|
|
|
- {{ subject }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="top-row" v-if="mailTagList && mailTagList.length > 0">
|
|
|
- <el-tag style="margin-left: 8px" type="success" closable v-for="(tag, index) in mailTagList" :key="index" @close="tagClose(tag)">
|
|
|
- {{ tag.name }}
|
|
|
- </el-tag>
|
|
|
- </div>
|
|
|
- <div class="top-row">
|
|
|
- <div class="label">发 件 人:</div>
|
|
|
- <div class="value">
|
|
|
- <span v-for="item in replyTo" :key="item.id" style="margin-right: 10px">
|
|
|
- {{ item.email || item.personalName }}</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="top-row">
|
|
|
- <div class="label">收 件 人:</div>
|
|
|
- <div class="value">
|
|
|
- <span v-for="item in to" :key="item.id" style="margin-right: 10px">{{
|
|
|
+ <div class="top">
|
|
|
+ <div class="top-row">
|
|
|
+ <div class="subject">
|
|
|
+ {{ subject }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-row" v-if="mailTagList && mailTagList.length > 0">
|
|
|
+ <el-tag style="margin-left: 8px" type="success" closable v-for="(tag, index) in mailTagList" :key="index" @close="tagClose(tag)">
|
|
|
+ {{ tag.name }}
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ <div class="top-row">
|
|
|
+ <div class="label">发 件 人:</div>
|
|
|
+ <div class="value">
|
|
|
+ <span v-for="item in replyTo" :key="item.id" style="margin-right: 10px">
|
|
|
+ {{ item.email || item.personalName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-row">
|
|
|
+ <div class="label">收 件 人:</div>
|
|
|
+ <div class="value">
|
|
|
+ <span v-for="item in to" :key="item.id" style="margin-right: 10px">{{
|
|
|
item.email || item.personalName
|
|
|
}}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="top-row" v-if="cc && cc.length > 0">
|
|
|
- <div class="label">抄 送 人:</div>
|
|
|
- <div class="value">
|
|
|
- <span v-for="item in cc" :key="item.id" style="margin-right: 10px">
|
|
|
- {{ item.email || item.personalName }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="top-row" v-if="bcc && bcc.length > 0">
|
|
|
- <div class="label">密 送 人:</div>
|
|
|
- <div class="value">
|
|
|
- <span v-for="item in bcc" :key="item.id" style="margin-right: 10px">
|
|
|
- {{ item.email || item.personalName }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="top-row">
|
|
|
- <div class="label">时 间:</div>
|
|
|
- <div class="value">
|
|
|
- {{ time }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="top-row" v-if="fileList && fileList.length > 0">
|
|
|
- <div class="label">附 件:</div>
|
|
|
- <div class="value">
|
|
|
- <div v-for="(item, index) in fileList" style="margin-right: 20px; display: flex; align-items: center" :key="index">
|
|
|
- <span style="cursor: pointer" @click="handleClickFile(item)">{{
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-row" v-if="cc && cc.length > 0">
|
|
|
+ <div class="label">抄 送 人:</div>
|
|
|
+ <div class="value">
|
|
|
+ <span v-for="item in cc" :key="item.id" style="margin-right: 10px">
|
|
|
+ {{ item.email || item.personalName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-row" v-if="bcc && bcc.length > 0">
|
|
|
+ <div class="label">密 送 人:</div>
|
|
|
+ <div class="value">
|
|
|
+ <span v-for="item in bcc" :key="item.id" style="margin-right: 10px">
|
|
|
+ {{ item.email || item.personalName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-row">
|
|
|
+ <div class="label">时 间:</div>
|
|
|
+ <div class="value">
|
|
|
+ {{ time }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-row" v-if="fileList && fileList.length > 0">
|
|
|
+ <div class="label">附 件:</div>
|
|
|
+ <div class="value">
|
|
|
+ <div v-for="(item, index) in fileList" style="margin-right: 20px; display: flex; align-items: center" :key="index">
|
|
|
+ <span style="cursor: pointer" @click="handleClickFile(item)">{{
|
|
|
item.name
|
|
|
}}</span>
|
|
|
- <span style="margin-left: 8px; cursor: pointer" @click="handleClickDownload(item)"><el-icon color="#0084FF">
|
|
|
- <Download />
|
|
|
- </el-icon></span>
|
|
|
+ <span style="margin-left: 8px; cursor: pointer" @click="handleClickDownload(item)"><el-icon color="#0084FF">
|
|
|
+ <Download />
|
|
|
+ </el-icon></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="body">
|
|
|
- <iframe frameborder="0" allowTransparency="true" style="
|
|
|
+ <div class="body">
|
|
|
+ <iframe frameborder="0" allowTransparency="true" style="
|
|
|
width: 99% !important;
|
|
|
overflow-x: scroll;
|
|
|
padding-top: 10px;
|
|
|
- height: 500px;
|
|
|
" :srcdoc="showBodyText(detailsData.data.content)" :ref="'iframeText_' + mailStore.currentId" :id="'iframeText_' + mailStore.currentId">
|
|
|
- </iframe>
|
|
|
+ </iframe>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div style="width:210px;margin-left:10px;overflow:auto" :style="{height:boxHeight+'px'}" v-if="isShowCommunication">
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs" type="card" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="往来附件" name="first"></el-tab-pane>
|
|
|
+ <el-tab-pane label="往来邮件" name="second"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="communication">
|
|
|
+ <div class="list" v-show="activeName=='first'">
|
|
|
+ <div class="item" v-for="(item,index) in communicationAtt" :key="item.id" @click="handleRowClick(item)">
|
|
|
+ <div>
|
|
|
+ 发件时间: {{item.sendDate}}
|
|
|
+ </div>
|
|
|
+ <div style="margin:5px 0">
|
|
|
+ 主题: {{item.subject}}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 附件: aa.png
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list" v-show="activeName=='second'">
|
|
|
+ <div class="item" v-for="(item,index) in communicationMail" :key="item.id" @click="handleRowClick(item)">
|
|
|
+ <div>
|
|
|
+ 发件时间: {{item.sendDate}}
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:5px">
|
|
|
+ 主题: {{item.subject}}
|
|
|
+ </div>
|
|
|
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<el-dialog title="移动邮件" v-model="myFolderDialog" width="300px" destroy-on-close v-loading="submitLoading">
|
|
|
<byForm :formConfig="myFolderFormConfig" :formOption="formOption" v-model="formData.myFolderData" :rules="rules" ref="myFolderForm">
|
|
|
</byForm>
|
|
@@ -124,6 +159,7 @@
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -131,7 +167,19 @@ import useMailStore from "@/store/modules/mail";
|
|
|
import useUserStore from "@/store/modules/user";
|
|
|
import byForm from "@/components/byForm/index";
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+import { nextTick } from "vue";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
+const outerDom = ref(null);
|
|
|
+const boxHeight = ref(0);
|
|
|
+const boxWidth = ref(700);
|
|
|
+const getTableHeight = () => {
|
|
|
+ boxHeight.value = window.innerHeight - 180;
|
|
|
+};
|
|
|
+getTableHeight();
|
|
|
+window.addEventListener("resize", () => {
|
|
|
+ getTableHeight();
|
|
|
+});
|
|
|
+const isShowCommunication = ref(true);
|
|
|
const mailStore = useMailStore();
|
|
|
let loading = ref(false);
|
|
|
const detailsData = reactive({
|
|
@@ -344,7 +392,22 @@ const getDetails = (messageId) => {
|
|
|
if (mailStore.currentMenu.subject) {
|
|
|
subject.value = mailStore.currentMenu.subject;
|
|
|
}
|
|
|
-
|
|
|
+ if (mailStore.currentMenu.fromEmail) {
|
|
|
+ // 如果发件人是自己的话就不显示往来邮件
|
|
|
+ let flag =
|
|
|
+ mailStore.currentMenu.fromEmail == mailStore.selectMail.mailUser;
|
|
|
+ if (flag) {
|
|
|
+ isShowCommunication.value = false;
|
|
|
+ nextTick(() => {
|
|
|
+ boxWidth.value = outerDom.value.offsetWidth;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ getCommunicationData();
|
|
|
+ nextTick(() => {
|
|
|
+ boxWidth.value = outerDom.value.offsetWidth - 220;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
detailsData.data = res;
|
|
|
to.value = res.messageAddressList.filter((x) => x.type === 1);
|
|
|
cc.value = res.messageAddressList.filter((x) => x.type === 2);
|
|
@@ -464,10 +527,49 @@ const handleClickDownload = (file) => {
|
|
|
};
|
|
|
};
|
|
|
|
|
|
-// onMounted(() => {
|
|
|
-// getMyFolderTree(true);
|
|
|
-// getAllTagData();
|
|
|
-// });
|
|
|
+onMounted(() => {
|
|
|
+ // getMyFolderTree(true);
|
|
|
+ // getAllTagData();
|
|
|
+ // iframe动态高度
|
|
|
+ const iframe = proxy.$refs["iframeText_" + mailStore.currentId];
|
|
|
+ iframe.addEventListener("load", () => {
|
|
|
+ iframe.style.height =
|
|
|
+ iframe.contentWindow.document.body.scrollHeight + 30 + "px";
|
|
|
+ });
|
|
|
+});
|
|
|
+const communicationMail = ref([]);
|
|
|
+const communicationAtt = ref([]);
|
|
|
+const getCommunicationData = () => {
|
|
|
+ let data = {
|
|
|
+ folderId: "",
|
|
|
+ type: mailStore.selectMail.type,
|
|
|
+ mailboxId: mailStore.selectMail.id,
|
|
|
+ dealingsEmail: mailStore.currentMenu.fromEmail,
|
|
|
+ };
|
|
|
+ proxy.post("/mailService/getMessagePage", data).then((res) => {
|
|
|
+ communicationMail.value = res.rows.filter((x) => !x.isAttachments);
|
|
|
+ communicationAtt.value = res.rows.filter((x) => x.isAttachments == 1);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const handleRowClick = (row) => {
|
|
|
+ const menu = {
|
|
|
+ title: row.subject.slice(0, 4) + "...",
|
|
|
+ type: mailStore.selectMail.type,
|
|
|
+ messageId: row.id,
|
|
|
+ id: "detail" + "," + row.id,
|
|
|
+ time: row.sendDate,
|
|
|
+ subject: row.subject,
|
|
|
+ fromEmail: row.fromEmail,
|
|
|
+ row: { ...row },
|
|
|
+ };
|
|
|
+ const menuItem = mailStore.mailMenuList.find((x) => x.id === menu.id);
|
|
|
+ if (menuItem === undefined) {
|
|
|
+ mailStore.mailMenuList.push(menu);
|
|
|
+ }
|
|
|
+ mailStore.currentMenu = menu;
|
|
|
+ mailStore.currentId = menu.id;
|
|
|
+};
|
|
|
|
|
|
const init = () => {
|
|
|
//实时更换索引
|
|
@@ -482,6 +584,7 @@ const init = () => {
|
|
|
getAllTagData();
|
|
|
};
|
|
|
|
|
|
+const activeName = ref("first");
|
|
|
defineExpose({
|
|
|
initFn: init,
|
|
|
});
|
|
@@ -521,10 +624,19 @@ defineExpose({
|
|
|
background: #ffffff;
|
|
|
color: #0084ff;
|
|
|
}
|
|
|
-
|
|
|
.el-tag.el-tag--success {
|
|
|
color: #0084ff;
|
|
|
}
|
|
|
+:deep(.el-tabs__item) {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+:deep(.el-tabs__header) {
|
|
|
+ margin: 8px 0;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.top-row {
|
|
@@ -536,4 +648,18 @@ defineExpose({
|
|
|
background: #0084ff !important ;
|
|
|
}
|
|
|
}
|
|
|
+.communication {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 0 10px;
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .item {
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|