CRM系统前端
查看 | 历史 | 提交 | 提交对比
huangyinfeng
4 天以前 db42d08c39ae6129e2b95cd24c0d57c6769282e5
提交 | 用户 | 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>