提交 | 用户 | age
|
a9a03d
|
1 |
<template> |
H |
2 |
<PageWrapper dense contentFullHeight fixedHeight> |
|
3 |
<div> |
|
4 |
<div class="header-container"> |
|
5 |
<span class="button-group"> |
|
6 |
<a-button shape="circle" size="large"> |
|
7 |
<MailOutlined /> |
|
8 |
</a-button> |
|
9 |
<a-button shape="circle" size="large"> |
|
10 |
<UserOutlined /> |
|
11 |
</a-button> |
|
12 |
</span> |
|
13 |
<a-button |
|
14 |
class="write-button" |
|
15 |
type="primary" |
|
16 |
size="large" |
|
17 |
shape="round" |
|
18 |
@click="$router.push('/email/edit')" |
|
19 |
> |
|
20 |
写信 |
|
21 |
</a-button> |
|
22 |
</div> |
|
23 |
|
|
24 |
<div class="menu-container"> |
|
25 |
<a-menu |
|
26 |
id="email-left-nav" |
|
27 |
v-model:open-keys="openKeys" |
|
28 |
v-model:selected-keys="selectedKeys" |
|
29 |
mode="inline" |
|
30 |
> |
|
31 |
<template v-for="item in menuItems" :key="item.key"> |
db42d0
|
32 |
<EmailMenuItem :item="item" @click="handleClick" /> |
a9a03d
|
33 |
</template> |
H |
34 |
</a-menu> |
|
35 |
<a-divider /> |
|
36 |
<a-menu |
|
37 |
id="email-left-nav2" |
db42d0
|
38 |
v-model:open-keys="openKeys2" |
H |
39 |
v-model:selected-keys="selectedKeys2" |
a9a03d
|
40 |
mode="inline" |
H |
41 |
> |
|
42 |
<template v-for="item in menuItems2" :key="item.key"> |
db42d0
|
43 |
<template v-if="!item.children"> |
H |
44 |
<a-menu-item :key="item.key" @click="$emit('click', item)"> |
|
45 |
<div class="my-display"> |
|
46 |
<span>{{ item.title }}</span> |
|
47 |
<span v-if="item.total > 0" class="my-left">{{ item.total }}</span> |
|
48 |
</div> |
|
49 |
</a-menu-item> |
|
50 |
</template> |
|
51 |
<template v-else> |
|
52 |
<MyMenu |
|
53 |
:item="item" |
|
54 |
@click.stop="handleClickMyMenu(item)" |
|
55 |
@updateSelectedKeys="updateSelectedKeys" |
|
56 |
/> |
|
57 |
</template> |
a9a03d
|
58 |
</template> |
H |
59 |
</a-menu> |
|
60 |
</div> |
|
61 |
</div> |
|
62 |
</PageWrapper> |
|
63 |
</template> |
|
64 |
|
|
65 |
<script lang="ts" setup> |
db42d0
|
66 |
import { ref, onMounted } from 'vue'; |
H |
67 |
import { PageWrapper } from '@/components/Page'; |
|
68 |
import { DingdingOutlined, MailOutlined, UserOutlined } from '@ant-design/icons-vue'; |
|
69 |
import { getEmailModuleApi, getEmailModuleBelowApi } from '@/api/email/userList'; |
|
70 |
import { useRouter } from 'vue-router'; |
|
71 |
import MyMenu from './MyMenu.vue'; |
|
72 |
import EmailMenuItem from './EmailMenuItem.vue'; |
a9a03d
|
73 |
|
db42d0
|
74 |
const selectedKeys = ref<string[]>(['Index']); |
H |
75 |
const openKeys = ref<string[]>(['Inbox']); |
|
76 |
const openKeys2 = ref(['0049LM']); |
|
77 |
const selectedKeys2 = ref([]); |
a9a03d
|
78 |
|
db42d0
|
79 |
const menuItems = ref([]); |
H |
80 |
const menuItems2 = ref([]); |
a9a03d
|
81 |
|
db42d0
|
82 |
const fetchEmailModules = async () => { |
H |
83 |
try { |
|
84 |
const [res, res2] = await Promise.all([getEmailModuleApi(), getEmailModuleBelowApi()]); |
|
85 |
menuItems.value = convertRoutesToMenuItems(res.data); |
|
86 |
menuItems2.value = convertRoutesToMenuItems2(res2.data); |
|
87 |
console.log('menuItems:', menuItems2.value); |
|
88 |
} catch (error) { |
|
89 |
console.error('获取邮箱模块失败:', error); |
|
90 |
} |
|
91 |
}; |
|
92 |
|
|
93 |
const convertRoutesToMenuItems = (routes: any[]) => { |
|
94 |
return routes |
|
95 |
.map((route) => ({ |
|
96 |
key: route.key, |
|
97 |
title: route.mailName, |
|
98 |
total: route.total, |
|
99 |
children: route.children ? convertRoutesToMenuItems(route.children) : undefined, |
|
100 |
})) |
|
101 |
.filter(Boolean); |
|
102 |
}; |
|
103 |
|
|
104 |
const convertRoutesToMenuItems2 = (routes: any[], path) => { |
|
105 |
return routes |
|
106 |
.map((route) => ({ |
|
107 |
key: route.key, |
|
108 |
title: route.name, |
|
109 |
total: route.number, |
|
110 |
path: path ? path : route.key, |
|
111 |
children: route.list |
|
112 |
? convertRoutesToMenuItems2(route.list, path ? path : route.key) |
|
113 |
: undefined, |
|
114 |
})) |
|
115 |
.filter(Boolean); |
|
116 |
}; |
|
117 |
|
|
118 |
onMounted(fetchEmailModules); |
|
119 |
|
|
120 |
const routesConfig = { |
|
121 |
InboxPage1: '/email/index', |
|
122 |
receiver: '/email/Inbox/list', |
|
123 |
sender: '/email/outbox/list', |
|
124 |
IndexPage1: '/email/outbox', |
|
125 |
moduleBelowA: '/email/index', |
|
126 |
moduleBelowB: '/email/index', |
|
127 |
moduleBelowC: '/email/index', |
|
128 |
}; |
|
129 |
|
|
130 |
const router = useRouter(); |
|
131 |
// const handleClick = (item: any) => { |
|
132 |
// selectedKeys2.value = []; |
|
133 |
// debugger |
|
134 |
// const routePath = |
|
135 |
// routesConfig[item.key] || router.getRoutes().find((r) => r.name === item.key)?.path; |
|
136 |
// if (routePath) { |
|
137 |
|
|
138 |
// router.push(routePath); |
|
139 |
// } else { |
|
140 |
// console.warn(`Unknown key: ${item.key}`); |
|
141 |
// } |
|
142 |
// }; |
|
143 |
const handleClick = (e: any) => { |
|
144 |
selectedKeys2.value = []; |
|
145 |
|
|
146 |
let matched = false; |
|
147 |
const route = router.getRoutes() || []; |
|
148 |
route.forEach((item) => { |
|
149 |
if (item.name === e.key) { |
|
150 |
router.push(item.path); |
|
151 |
matched = true; |
|
152 |
return; // 跳出当前循环 |
|
153 |
} |
|
154 |
|
|
155 |
if (!matched) { |
|
156 |
switch (e.key) { |
|
157 |
case 'InboxPage1': |
|
158 |
router.push(routesConfig[e.key]); |
|
159 |
matched = true; |
|
160 |
return; // 跳出当前循环 |
|
161 |
case 'receiver': |
|
162 |
router.push(`${routesConfig[e.key]}?${e.title}`); |
|
163 |
matched = true; |
|
164 |
return; // 跳出当前循环 |
|
165 |
case 'sender': |
|
166 |
router.push(`${routesConfig[e.key]}?${e.title}`); |
|
167 |
matched = true; |
|
168 |
return; // 跳出当前循环 |
|
169 |
case 'IndexPage1': |
|
170 |
router.push(`${routesConfig[e.key]}`); |
|
171 |
matched = true; |
|
172 |
return; // 跳出当前循环 |
|
173 |
default: |
|
174 |
// 处理默认情况,例如记录日志或抛出警告 |
|
175 |
console.warn(`Unknown key: ${e.key}`); |
|
176 |
} |
|
177 |
} |
|
178 |
}); |
|
179 |
}; |
|
180 |
|
|
181 |
const updateSelectedKeys = (keys) => { |
|
182 |
openKeys2.value = findParentKeys(menuItems2.value[0], keys); |
|
183 |
selectedKeys2.value = [keys]; |
|
184 |
}; |
|
185 |
|
|
186 |
function findParentKeys(data, targetKey, path = []) { |
|
187 |
path.push(data.key); |
|
188 |
if (data.key === targetKey) { |
|
189 |
return path; |
|
190 |
} |
|
191 |
|
|
192 |
for (const item of data.children || []) { |
|
193 |
const result = findParentKeys(item, targetKey, path.slice()); |
|
194 |
if (result) { |
|
195 |
return result; |
|
196 |
} |
|
197 |
} |
|
198 |
return null; |
a9a03d
|
199 |
} |
db42d0
|
200 |
const handleClickMyMenu = (item: any) => { |
H |
201 |
selectedKeys.value = []; |
|
202 |
// console.log('handleClickMyMenu:', item); |
|
203 |
router.push({ path: '/email/folder' }); |
|
204 |
console.log('updateSelectedKeys111111112333:', openKeys2.value); |
|
205 |
}; |
a9a03d
|
206 |
</script> |
H |
207 |
|
|
208 |
<style lang="less" scoped> |
db42d0
|
209 |
.header-container { |
H |
210 |
height: 15vh; |
|
211 |
padding: 20px 40px; |
|
212 |
text-align: center; |
|
213 |
} |
a9a03d
|
214 |
|
db42d0
|
215 |
.button-group { |
H |
216 |
display: flex; |
|
217 |
justify-content: space-around; |
|
218 |
} |
a9a03d
|
219 |
|
db42d0
|
220 |
.write-button { |
H |
221 |
width: 100%; |
|
222 |
margin-top: 10px; |
|
223 |
padding: 0 30px; |
|
224 |
} |
a9a03d
|
225 |
|
db42d0
|
226 |
.menu-container { |
H |
227 |
height: 75vh; |
|
228 |
overflow: auto; |
|
229 |
} |
a9a03d
|
230 |
|
db42d0
|
231 |
.my-display { |
H |
232 |
display: flex; |
|
233 |
align-items: center; |
|
234 |
justify-content: space-between; |
|
235 |
} |
a9a03d
|
236 |
|
db42d0
|
237 |
.my-left { |
H |
238 |
margin-left: 5px; |
|
239 |
} |
a9a03d
|
240 |
</style> |