You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
382 lines
11 KiB
382 lines
11 KiB
<template>
|
|
<div class="emailUI" :style="isWarningLineShow ? 'padding-top: 42px' : ''">
|
|
<!-- <h1>This is an Email page</h1> -->
|
|
|
|
<!-- 郵件的菜單部分 -->
|
|
<div v-if="!isMailSyncing && isWarningLineShow" class="emailUI-warning-line flex-center">
|
|
電子郵件賬號{{ currentSyncMail.user }}已中斷連接。
|
|
<a>重新連接</a>或<a @click="gotoMailSetting">開啟設定</a>。
|
|
<!-- //todo: 重新連接 、開啟設定的實現。 -->
|
|
<!-- //todo: 點擊關閉後，該行應該一直關閉,參考pipedrive，思考實現方式，或許cookie存儲 -->
|
|
<a-icon type="close" class="emailUI-warning-line-icon" @click="isWarningLineShow = false"/>
|
|
</div>
|
|
|
|
<div class="emailUI-left">
|
|
<template v-for="(item,index) in mailMenus">
|
|
<div :class="{ 'mailMenu-item text-center' : true, 'mailMenu-item--active' : currentMailPath == item.path }"
|
|
@click="clickMail(item.path)">{{ item.title }}</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- 郵件功能區 -->
|
|
<div class="emailUI-right flex-1">
|
|
<transition name="fade-transform" mode="out-in">
|
|
<keep-alive>
|
|
<router-view />
|
|
</keep-alive>
|
|
</transition>
|
|
</div>
|
|
<!-- </div> -->
|
|
|
|
<!-- fix:// 修复全部居中显示 -->
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
const columns = [
|
|
{
|
|
title: "標題",
|
|
dataIndex: "title",
|
|
key: "title",
|
|
width: "20%",
|
|
scopedSlots: { customRender: "title" },
|
|
},
|
|
{
|
|
title: "內文",
|
|
dataIndex: "txt_data",
|
|
key: "txt_data",
|
|
width: "50%",
|
|
},
|
|
{
|
|
title: "分享",
|
|
dataIndex: "share",
|
|
//使用插槽
|
|
scopedSlots: { customRender: "action" },
|
|
width: "10%",
|
|
},
|
|
{
|
|
title: "日期",
|
|
dataIndex: "date",
|
|
key: "date",
|
|
},
|
|
];
|
|
|
|
const data = [
|
|
{
|
|
key: 1,
|
|
title: "Google Maps Timeline",
|
|
txt_data: "iicynthia，這是你的時間軸最新動態",
|
|
share: "分享",
|
|
date: "2021-01-01",
|
|
// children: [
|
|
// {
|
|
// key: 11,
|
|
// name: 'John Brown',
|
|
// age: 42,
|
|
// address: 'New York No. 2 Lake Park',
|
|
// },
|
|
// {
|
|
// key: 12,
|
|
// name: 'John Brown jr.',
|
|
// age: 30,
|
|
// address: 'New York No. 3 Lake Park',
|
|
// children: [
|
|
// {
|
|
// key: 121,
|
|
// name: 'Jimmy Brown',
|
|
// age: 16,
|
|
// address: 'New York No. 3 Lake Park',
|
|
// },
|
|
// ],
|
|
// },
|
|
// {
|
|
// key: 13,
|
|
// name: 'Jim Green sr.',
|
|
// age: 72,
|
|
// address: 'London No. 1 Lake Park',
|
|
// children: [
|
|
// {
|
|
// key: 131,
|
|
// name: 'Jim Green',
|
|
// age: 42,
|
|
// address: 'London No. 2 Lake Park',
|
|
// children: [
|
|
// {
|
|
// key: 1311,
|
|
// name: 'Jim Green jr.',
|
|
// age: 25,
|
|
// address: 'London No. 3 Lake Park',
|
|
// },
|
|
// {
|
|
// key: 1312,
|
|
// name: 'Jimmy Green sr.',
|
|
// age: 18,
|
|
// address: 'London No. 4 Lake Park',
|
|
// },
|
|
// ],
|
|
// },
|
|
// ],
|
|
// },
|
|
// ],
|
|
},
|
|
{
|
|
key: 2,
|
|
title: "Quora Digest",
|
|
txt_data: "Why are UX designers paid so high compare to programmers",
|
|
share: "分享",
|
|
date: "2021-10-20",
|
|
},
|
|
{
|
|
key: 3,
|
|
title: "標題",
|
|
txt_data: "內文",
|
|
share: "分享",
|
|
date: "2021-01-01",
|
|
},
|
|
];
|
|
|
|
const rowSelection = {
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
console.log(
|
|
`selectedRowKeys: ${selectedRowKeys}`,
|
|
"selectedRows: ",
|
|
selectedRows
|
|
);
|
|
},
|
|
onSelect: (record, selected, selectedRows) => {
|
|
console.log(record, selected, selectedRows);
|
|
},
|
|
onSelectAll: (selected, selectedRows, changeRows) => {
|
|
console.log(selected, selectedRows, changeRows);
|
|
},
|
|
};
|
|
//table end
|
|
export default {
|
|
name: "emailUI",
|
|
components: {
|
|
// Email,
|
|
// EditEmail,
|
|
},
|
|
data() {
|
|
return {
|
|
//table satrt
|
|
data,
|
|
columns,
|
|
rowSelection,
|
|
expandedRowKeys: [],
|
|
//table end
|
|
showClickEmail:'',
|
|
mailMenus: [{ title: '收件夾', path: '/mail/inbox' },
|
|
{ title: '寫郵件', path: '/mail/compose' },
|
|
{ title: '草稿箱', path: '/mail/drafts' },//fix: 仿照Pipedrive完成邮件部分 路由、组件的命名规范。
|
|
{ title: '寄件夾', path: '/mail/outbox' },//info: compose撰写、inbox收件箱、drafts草稿箱
|
|
{ title: '寄件備份', path: '/mail/sent' },//info: outbox发件箱、sent已发送（寄件备份）、archive档案
|
|
{ title: '檔案庫', path: '/mail/archive' }],
|
|
// currentMailPath: 'inbox',//當前郵箱菜單 组件
|
|
folderList: [],
|
|
currentSyncMail: {},
|
|
isWarningLineShow: false
|
|
};
|
|
},
|
|
created () {
|
|
// NOTE: 45min refresh policy is what google recommends
|
|
window.setInterval(this.$gapi.refreshToken().catch(() => {}), 2.7e6); //每45分钟自动更新一次token
|
|
},
|
|
mounted () {
|
|
//進入mail組件，獲取同步郵件列表
|
|
// this.$store.dispatch('mail/getMailAccountList').then(res => {
|
|
// if (!res) return this.$message.error('獲取綁定郵件列表失敗!');
|
|
// //進入郵件功能後，獲取郵件文件夾列表
|
|
// this.$store.dispatch('mail/getFolderList', {
|
|
// "mailAccountId": this.$store.state.mail.currentSyncMailId,
|
|
// "page": {
|
|
// "current": 0,
|
|
// "size": 10
|
|
// }
|
|
// }).then(res => {
|
|
// if (!res) return this.$message.error('獲取郵件文件夹列表失敗!');
|
|
// let params = {
|
|
// folderId: res.find(item => item.folderType == 1).id,
|
|
// page: {
|
|
// current: 0,
|
|
// size: 13
|
|
// }
|
|
// };
|
|
// this.$store.dispatch('mail/getMessageList', [ params, 1]).then(res => {
|
|
// if (!res) return this.$message.error('拉取收件夾數據失敗！');
|
|
// })
|
|
// })
|
|
// });
|
|
|
|
// this.$api.mail.getFolderList({
|
|
// "mailAccountId": this.$store.state.mail.currentSyncMailId,
|
|
// "page": {
|
|
// "current": 0,
|
|
// "size": 10
|
|
// }
|
|
// }).then(res => {
|
|
// console.log('getFolderList请求回来的数据为：', res);
|
|
// if (res.code != 0) return this.$message.error('请求邮件列表失败');
|
|
// this.$message.success('请求成功');
|
|
// this.folderList = res.data.data;
|
|
|
|
// })
|
|
},
|
|
computed: {
|
|
currentMailPath () {
|
|
console.log(this.$route.path);
|
|
if (this.$route.path == '/mail/compose') {
|
|
this.isWarningLineShow = false;
|
|
} else {
|
|
// isWarningLineShow = !this.$store.state.mail.isMailSyncing;
|
|
if (~this.$route.path.indexOf('/detail/')) {
|
|
let fromPath = this.$store.state.mail.fromData.from;
|
|
if (fromPath != '') {
|
|
return `/mail/${fromPath}`
|
|
} else {
|
|
return '/mail/inbox'
|
|
};
|
|
}
|
|
};
|
|
return this.$route.path
|
|
},
|
|
isMailSyncing () {//計算當前賬戶是否有郵件為同步狀態
|
|
let result = this.$store.state.mail.isMailSyncing;
|
|
if (result) {
|
|
this.currentSyncMail = this.$store.state.mail.currentSyncMail;
|
|
}
|
|
this.isWarningLineShow = !result;
|
|
return result;
|
|
},
|
|
},
|
|
watch: {
|
|
isMailSyncing: {
|
|
immediate: true,
|
|
deep: true,
|
|
handler(newValue, oldValue) {
|
|
if (oldValue != newValue && newValue && this.$store.state.mail.currentSyncMailId != -1) {
|
|
this.initMail()
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
initMail () {
|
|
this.$store.dispatch('mail/getFolderList', {
|
|
"mailAccountId": this.$store.state.mail.currentSyncMailId,
|
|
"page": {
|
|
"current": 0,
|
|
"size": 10
|
|
}
|
|
}).then(res => {
|
|
if (!res) return this.$message.error('獲取郵件文件夹列表失敗!');
|
|
let params = {
|
|
folderId: res.find(item => item.folderType == 1).id,
|
|
page: {
|
|
current: 0,
|
|
size: 13
|
|
}
|
|
};
|
|
this.$store.dispatch('mail/getMessageList', [ params, 1]).then(res => {
|
|
if (!res) return this.$message.error('拉取收件夾數據失敗！');
|
|
})
|
|
})
|
|
},
|
|
gotoMailSetting () {
|
|
this.$router.push('/settings/email-sync');
|
|
},
|
|
edit (text, record, index) {
|
|
this.visibleDrawer = true;
|
|
console.log(text);
|
|
console.log(record);
|
|
console.log(index);
|
|
},
|
|
clickMail (val) {
|
|
// console.log("val--",val);
|
|
// console.log("this--",this);
|
|
// this.showClickEmail = val;
|
|
// this.currentMailPath = val;
|
|
// this.$router.push(`mail/${val}`);
|
|
this.$router.push(val);
|
|
|
|
// if(val == "edit"){
|
|
// this.hideEmail = true;
|
|
// this.hideEditEmail = false;
|
|
// }else if(val == "mailList"){
|
|
// this.hideEmail = false;
|
|
// this.hideEditEmail = true;
|
|
// }else{
|
|
// this.hideEmail = false;
|
|
// }
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.emailUI {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.emailUI-left {
|
|
padding-top: 20px;
|
|
width: 120px;
|
|
min-width: 120px;
|
|
height: 100%;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.emailUI-right {
|
|
padding: 20px;
|
|
overflow: scroll;
|
|
/* min-width: 960px; */
|
|
/* background: red; */
|
|
}
|
|
|
|
.mailMenu-item {
|
|
font-size: 16px;
|
|
line-height: 36px;
|
|
width: 100px;
|
|
margin: auto;
|
|
margin-bottom: 10px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
/* padding: 5px 8px; */
|
|
}
|
|
|
|
.mailMenu-item:hover , .mailMenu-item--active {
|
|
background: #F6F6FC;
|
|
color: #F86F54;
|
|
}
|
|
|
|
.emailUI-warning-line {
|
|
border: rgba(38,41,44,.12);
|
|
background-color: #fff7d6;
|
|
padding: 12px 16px;
|
|
font-weight: 500;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.emailUI-warning-line a {
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
color: #317ae2 !important;
|
|
}
|
|
|
|
.emailUI-warning-line-icon {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 15px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|