From 12f7304fe9e2bb56ec328e4429a654a0653928a9 Mon Sep 17 00:00:00 2001
From: huangyinfeng <1244041895@qq.com>
Date: 星期五, 13 九月 2024 17:15:02 +0800
Subject: [PATCH] 邮件列表联调
---
src/views/email/components/LeftNav.vue | 188 +++++++++++++++++++++++++++++++++-------------
1 files changed, 135 insertions(+), 53 deletions(-)
diff --git a/src/views/email/components/LeftNav.vue b/src/views/email/components/LeftNav.vue
index bfe8c9c..34cc286 100644
--- a/src/views/email/components/LeftNav.vue
+++ b/src/views/email/components/LeftNav.vue
@@ -1,18 +1,13 @@
锘�<template>
- <!-- <ScrollContainer> -->
<PageWrapper dense contentFullHeight fixedHeight>
- <a-card style="height: 100vh; border-inline-end: 1px solid rgb(5 5 5 / 6%)">
+ <div style="height: 100vh; border-inline-end: 1px solid rgb(5 5 5 / 6%)">
<div style="height: 15vh; padding: 20px 40px; text-align: center">
<span style="display: flex; justify-content: space-around">
<a-button shape="circle" size="large">
- <template #icon>
- <MailOutlined />
- </template>
+ <MailOutlined />
</a-button>
<a-button shape="circle" size="large">
- <template #icon>
- <UserOutlined />
- </template>
+ <UserOutlined />
</a-button>
</span>
<a-button
@@ -21,69 +16,156 @@
size="large"
shape="round"
@click="$router.push('/email/edit')"
- >鍐欎俊</a-button
>
+ 鍐欎俊
+ </a-button>
</div>
- <a-menu
- id="email-left-nav"
- v-model:openKeys="openKeys"
- v-model:selectedKeys="selectedKeys"
- mode="inline"
- :items="items"
- @click="handleClick"
- >
- </a-menu>
- </a-card>
+
+ <div class="menu-container">
+ <a-menu
+ id="email-left-nav"
+ v-model:open-keys="openKeys"
+ v-model:selected-keys="selectedKeys"
+ mode="inline"
+ :popupClassName="popupClassName"
+ >
+ <template v-for="item in items" :key="item.key">
+ <a-sub-menu v-if="item.children" :key="item.key">
+ <template #title>
+ <div class="my-display">
+ <span>{{ item.title }}</span
+ ><span class="my-left" v-if="item.total > 0">{{ item.total }}</span>
+ </div>
+ </template>
+ <a-menu-item
+ style="display: flex; justify-content: space-between; padding-left: 28px"
+ v-for="(child, index) in item.children"
+ :key="index"
+ @click="handleClick(child)"
+ >
+ <div class="my-display">
+ <span>{{ child.title }}</span>
+ <span v-if="item.total > 0"> {{ child.total }}</span>
+ </div>
+ </a-menu-item>
+ </a-sub-menu>
+ <a-menu-item v-else :key="item.key" @click="handleClick(item)">
+ <div class="my-display">
+ <span>{{ item.title }}</span
+ ><span class="my-left" v-if="item.total > 0">{{ item.total }}</span>
+ </div>
+ </a-menu-item>
+ </template>
+ </a-menu>
+ </div>
+ </div>
</PageWrapper>
- <!-- </ScrollContainer> -->
</template>
+
<script lang="ts" setup>
- import { ref } from 'vue';
- import type { MenuProps } from 'ant-design-vue';
- import { Menu } from 'ant-design-vue';
- import { useEmailRouterStoreWithout } from '@/store/modules/emailRouter';
+ import { ref, onMounted } from 'vue';
+ import { PageWrapper } from '@/components/Page';
import { MailOutlined, UserOutlined } from '@ant-design/icons-vue';
+ import { getEmailModuleApi } from '@/api/email/userList';
+ import { useRouter } from 'vue-router';
+
const selectedKeys = ref<string[]>(['Index']);
- const openKeys = ref<string[]>(['index']);
+ const openKeys = ref<string[]>(['Inbox']);
+ const items = ref([]); // 瀹氫箟 items 绫诲瀷
- const AMenu = Menu;
+ const fnGetEmailModule = async () => {
+ try {
+ const res = await getEmailModuleApi();
+ items.value = convertRoutesToMenuItems(res.data);
+ } catch (error) {
+ console.error('鑾峰彇閭妯″潡澶辫触:', error); // 澶勭悊閿欒
+ }
+ };
- function convertRoutesToMenuItems(routes) {
- return routes.map((route) => {
- // 妫�鏌ユ槸鍚︽湁瀛愯矾鐢�
- if (route.children && route.children.length > 0) {
- return {
- key: route.name, // 浣滀负 Menu 缁勪欢鐨� key
- label: route.meta?.title || route.name, // 鏄剧ず鐨勬爣绛惧悕绉�
- title: route.meta?.title || route.name, // title 灞炴�э紙鍙�夛級
- children: convertRoutesToMenuItems(route.children), // 閫掑綊澶勭悊瀛愯矾鐢�
- };
- } else {
- if (!route.meta?.hideMenu) {
+ const convertRoutesToMenuItems = (routes: any[]) => {
+ return routes
+ .map((route) => {
+ if (route.children && route.children.length > 0) {
return {
- key: route.name, // 濡傛灉娌℃湁瀛愯矾鐢憋紝鐩存帴杩斿洖 key 鍜� label
- label: route.meta?.title || route.name,
- title: route.meta?.title || route.name,
+ key: route.key,
+ title: route.mailName,
+ total: route.total,
+ children: convertRoutesToMenuItems(route.children),
};
+ }
+ if (!route.hideMenu) {
+ return {
+ key: route.key,
+ title: route.mailName,
+ total: route.total,
+ };
+ }
+ })
+ .filter(Boolean); // 杩囨护鎺� undefined
+ };
+
+ // 鐢熷懡鍛ㄦ湡閽╁瓙锛屽姞杞借彍鍗曟暟鎹�
+ onMounted(() => {
+ fnGetEmailModule();
+ });
+ const routesConfig = {
+ InboxPage1: '/email/index',
+ receiver: '/email/Inbox/list',
+ };
+ // 鐐瑰嚮浜嬩欢澶勭悊
+ const router = useRouter();
+ const handleClick = (e: any) => {
+ console.log(e, '------4');
+ 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; // 璺冲嚭褰撳墠寰幆
+ default:
+ // 澶勭悊榛樿鎯呭喌锛屼緥濡傝褰曟棩蹇楁垨鎶涘嚭璀﹀憡
+ console.warn(`Unknown key: ${e.key}`);
}
}
});
- }
- const emailRouter = useEmailRouterStoreWithout();
- const items = ref(convertRoutesToMenuItems(emailRouter.$state.children));
- import { useRouter } from 'vue-router';
- const router = useRouter();
- const handleClick: MenuProps['onClick'] = (e) => {
- console.log('click', router.getRoutes());
- router.getRoutes().map((item) => {
- if (item.name === e.key) {
- router.push(item.path);
- }
- });
+ };
+ const popupClassName = {
+ display: 'flex',
+ 'align-items': 'center',
+ 'justify-content': 'space-between',
};
</script>
+
<style lang="less" scoped>
:deep(.ant-menu-inline) {
border-inline-end: 0 solid rgb(5 5 5 / 6%) !important;
}
+
+ .menu-container {
+ height: 70vh;
+ overflow: auto;
+ }
+
+ .my-display {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .my-left {
+ margin-left: 5px;
+ }
</style>
--
Gitblit v1.8.0