<template>
|
<PageWrapper dense contentFullHeight fixedHeight>
|
<div>
|
<div class="header-container">
|
<span class="button-group">
|
<a-button shape="circle" size="large">
|
<MailOutlined />
|
</a-button>
|
<a-button shape="circle" size="large">
|
<UserOutlined />
|
</a-button>
|
</span>
|
<a-button
|
class="write-button"
|
type="primary"
|
size="large"
|
shape="round"
|
@click="$router.push('/email/edit')"
|
>
|
写信
|
</a-button>
|
</div>
|
|
<div class="menu-container">
|
<a-menu
|
id="email-left-nav"
|
v-model:open-keys="openKeys"
|
v-model:selected-keys="selectedKeys"
|
mode="inline"
|
>
|
<template v-for="item in menuItems" :key="item.key">
|
<EmailMenuItem :item="item" @click="handleClick" />
|
</template>
|
</a-menu>
|
<a-divider />
|
<a-menu
|
id="email-left-nav2"
|
v-model:open-keys="openKeys2"
|
v-model:selected-keys="selectedKeys2"
|
mode="inline"
|
>
|
<template v-for="item in menuItems2" :key="item.key">
|
<template v-if="!item.children">
|
<a-menu-item :key="item.key" @click="$emit('click', item)">
|
<div class="my-display">
|
<span>{{ item.title }}</span>
|
<span v-if="item.total > 0" class="my-left">{{ item.total }}</span>
|
</div>
|
</a-menu-item>
|
</template>
|
<template v-else>
|
<MyMenu
|
:item="item"
|
@click.stop="handleClickMyMenu(item)"
|
@updateSelectedKeys="updateSelectedKeys"
|
/>
|
</template>
|
</template>
|
</a-menu>
|
</div>
|
</div>
|
</PageWrapper>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted } from 'vue';
|
import { PageWrapper } from '@/components/Page';
|
import { DingdingOutlined, MailOutlined, UserOutlined } from '@ant-design/icons-vue';
|
import { getEmailModuleApi, getEmailModuleBelowApi } from '@/api/email/userList';
|
import { useRouter } from 'vue-router';
|
import MyMenu from './MyMenu.vue';
|
import EmailMenuItem from './EmailMenuItem.vue';
|
|
const selectedKeys = ref<string[]>(['Index']);
|
const openKeys = ref<string[]>(['Inbox']);
|
const openKeys2 = ref(['0049LM']);
|
const selectedKeys2 = ref([]);
|
|
const menuItems = ref([]);
|
const menuItems2 = ref([]);
|
|
const fetchEmailModules = async () => {
|
try {
|
const [res, res2] = await Promise.all([getEmailModuleApi(), getEmailModuleBelowApi()]);
|
menuItems.value = convertRoutesToMenuItems(res.data);
|
menuItems2.value = convertRoutesToMenuItems2(res2.data);
|
console.log('menuItems:', menuItems2.value);
|
} catch (error) {
|
console.error('获取邮箱模块失败:', error);
|
}
|
};
|
|
const convertRoutesToMenuItems = (routes: any[]) => {
|
return routes
|
.map((route) => ({
|
key: route.key,
|
title: route.mailName,
|
total: route.total,
|
children: route.children ? convertRoutesToMenuItems(route.children) : undefined,
|
}))
|
.filter(Boolean);
|
};
|
|
const convertRoutesToMenuItems2 = (routes: any[], path) => {
|
return routes
|
.map((route) => ({
|
key: route.key,
|
title: route.name,
|
total: route.number,
|
path: path ? path : route.key,
|
children: route.list
|
? convertRoutesToMenuItems2(route.list, path ? path : route.key)
|
: undefined,
|
}))
|
.filter(Boolean);
|
};
|
|
onMounted(fetchEmailModules);
|
|
const routesConfig = {
|
InboxPage1: '/email/index',
|
receiver: '/email/Inbox/list',
|
sender: '/email/outbox/list',
|
IndexPage1: '/email/outbox',
|
moduleBelowA: '/email/index',
|
moduleBelowB: '/email/index',
|
moduleBelowC: '/email/index',
|
};
|
|
const router = useRouter();
|
// const handleClick = (item: any) => {
|
// selectedKeys2.value = [];
|
// debugger
|
// const routePath =
|
// routesConfig[item.key] || router.getRoutes().find((r) => r.name === item.key)?.path;
|
// if (routePath) {
|
|
// router.push(routePath);
|
// } else {
|
// console.warn(`Unknown key: ${item.key}`);
|
// }
|
// };
|
const handleClick = (e: any) => {
|
selectedKeys2.value = [];
|
|
let matched = false;
|
const route = router.getRoutes() || [];
|
route.forEach((item) => {
|
if (item.name === e.key) {
|
router.push(item.path);
|
matched = true;
|
return; // 跳出当前循环
|
}
|
|
if (!matched) {
|
switch (e.key) {
|
case 'InboxPage1':
|
router.push(routesConfig[e.key]);
|
matched = true;
|
return; // 跳出当前循环
|
case 'receiver':
|
router.push(`${routesConfig[e.key]}?${e.title}`);
|
matched = true;
|
return; // 跳出当前循环
|
case 'sender':
|
router.push(`${routesConfig[e.key]}?${e.title}`);
|
matched = true;
|
return; // 跳出当前循环
|
case 'IndexPage1':
|
router.push(`${routesConfig[e.key]}`);
|
matched = true;
|
return; // 跳出当前循环
|
default:
|
// 处理默认情况，例如记录日志或抛出警告
|
console.warn(`Unknown key: ${e.key}`);
|
}
|
}
|
});
|
};
|
|
const updateSelectedKeys = (keys) => {
|
openKeys2.value = findParentKeys(menuItems2.value[0], keys);
|
selectedKeys2.value = [keys];
|
};
|
|
function findParentKeys(data, targetKey, path = []) {
|
path.push(data.key);
|
if (data.key === targetKey) {
|
return path;
|
}
|
|
for (const item of data.children || []) {
|
const result = findParentKeys(item, targetKey, path.slice());
|
if (result) {
|
return result;
|
}
|
}
|
return null;
|
}
|
const handleClickMyMenu = (item: any) => {
|
selectedKeys.value = [];
|
// console.log('handleClickMyMenu:', item);
|
router.push({ path: '/email/folder' });
|
console.log('updateSelectedKeys111111112333:', openKeys2.value);
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.header-container {
|
height: 15vh;
|
padding: 20px 40px;
|
text-align: center;
|
}
|
|
.button-group {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.write-button {
|
width: 100%;
|
margin-top: 10px;
|
padding: 0 30px;
|
}
|
|
.menu-container {
|
height: 75vh;
|
overflow: auto;
|
}
|
|
.my-display {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.my-left {
|
margin-left: 5px;
|
}
|
</style>
|
