Merge branch 'feng-v1-editor' of http://192.168.100.20:9090/r/onbus_crm int...

Sanakey

5 天以前 2af71bcf522c485ea005184c977986374a7dcc4a

 src/views/email/components/LeftNav.vue

@@ -1,107 +1,181 @@
<template>
  <ScrollContainer class="mt-4">
    <a-menu
      id="email-left-nav"
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      :items="items"
      @click="handleClick"
    ></a-menu>
  </ScrollContainer>
  <PageWrapper dense contentFullHeight fixedHeight>
    <div>
      <div style="height: 15vh; padding: 20px 40px; text-align: center">
        <span style="display: flex; justify-content: space-around">
          <a-button shape="circle" size="large">
            <MailOutlined />
          </a-button>
          <a-button shape="circle" size="large">
            <UserOutlined />
          </a-button>
        </span>
        <a-button
          style="width: 100%; margin-top: 10px; padding: 0 30px"
          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"
          :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>
</template>

<script lang="ts" setup>
import {  ref,   } from 'vue';
import type { MenuProps } from 'ant-design-vue';
import  { Menu } from 'ant-design-vue';
import { ScrollContainer } from '@/components/Container';
  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[]>(['1']);
const openKeys = ref<string[]>(['sub1']);
  const selectedKeys = 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); // 处理错误
    }
  };

const items = ref([
  {
    key: '1',
    label: 'Navigation One',
    title: 'Navigation One',
  },
  {
    key: '2',
    label: 'Navigation Two',
    title: 'Navigation Two',
  },
  {
    key: 'sub1',
    label: 'Navigation Three',
    title: 'Navigation Three',
    children: [
      {
        key: '3',
        label: 'Option 3',
        title: 'Option 3',
      },
      {
        key: '4',
        label: 'Option 4',
        title: 'Option 4',
      },
      {
        key: 'sub1-2',
        label: 'Submenu',
        title: 'Submenu',
        children: [
          {
            key: '5',
            label: 'Option 5',
            title: 'Option 5',
          },
          {
            key: '6',
            label: 'Option 6',
            title: 'Option 6',
          },
        ],
      },
    ],
  },
  {
    key: 'sub2',
    label: 'Navigation Four',
    title: 'Navigation Four',
    children: [
      {
        key: '7',
        label: 'Option 7',
        title: 'Option 7',
      },
      {
        key: '8',
        label: 'Option 8',
        title: 'Option 8',
      },
      {
        key: '9',
        label: 'Option 9',
        title: 'Option 9',
      },
      {
        key: '10',
        label: 'Option 10',
        title: 'Option 10',
      },
    ],
  },
]);
  const convertRoutesToMenuItems = (routes: any[]) => {
    return routes
      .map((route) => {
        if (route.children && route.children.length > 0) {
          return {
            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
  };

const handleClick: MenuProps['onClick'] = e => {
  console.log('click', e);
};
  // 生命周期钩子，加载菜单数据
  onMounted(() => {
    fnGetEmailModule();
  });
  const routesConfig = {
    InboxPage1: '/email/index',
    receiver: '/email/Inbox/list',
    sender: '/email/outbox',
    IndexPage1:'/email/outbox'
  };
  // 点击事件处理
  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; // 跳出当前循环
      }

// watch(openKeys, val => {
//   console.log('openKeys', val);
// });
      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 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>