menus

Author: xlorne

antd-pro/src/access.ts

@@ -4,18 +4,15 @@
 export default function access(initialState: { currentUser?: API.CurrentUser } | undefined) {
   const { currentUser } = initialState ?? {};
   const isAdmin = currentUser && currentUser.authorities?.includes('ROLE_ADMIN');
-  const authentications =  localStorage.getItem('authentications');
+  const authentications = localStorage.getItem('authentications');
   return {
     isAdmin: isAdmin === undefined ? false : isAdmin,
     hasAuthentication: (element: any) => {
-      console.log('path:',element.path);
-      console.log('authentications:',authentications);
-      if (element.path === '/') {
+      if (authentications === null || authentications === undefined) {
         return true;
       }
-
-      if (authentications === null || authentications === undefined) {
-        return false;
+      if (element.path === '/') {
+        return true;
       }
       if (authentications.indexOf(element.path) > -1) {
         return true;

antd-pro/src/app.tsx

@@ -63,11 +63,16 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
       },
     },
     menu: {
-      request: async () => {
-        const response = await menus();
-        const authentications = await loadLoayoutMenuAuthentications(response);
-        localStorage.setItem('authentications', JSON.stringify(authentications));
-        return await loadLayoutMenus(response);
+      request: async (params,defaultMenuData) => {
+        try{
+          const response = await menus();
+          const authentications = await loadLoayoutMenuAuthentications(response);
+          localStorage.setItem('authentications', JSON.stringify(authentications));
+          return await loadLayoutMenus(response);
+        }catch(error){
+          localStorage.removeItem('authentications');
+          return defaultMenuData
+        }
       }
     },
     waterMarkProps: {

antd-pro/src/components/Menu/index.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
+import Icon from '@ant-design/icons'
+import * as icons from '@ant-design/icons'
+
 
 interface MenuProps {
   icon: string
 }
 
 const Menus: React.FC<MenuProps> = (props) => {
-  return (
-    <img src={props.icon} style={{
-      width: '20px'
-    }} />
-  )
+  if (props.icon === '-') {
+    return <></>
+  }
+
+  if (props.icon) {
+    return <Icon component={icons[props.icon]} />
+  } else {
+    return <></>
+  }
 }
 
-export async function loadLayoutMenus(response:any) {
+export async function loadLayoutMenus(response: any) {
   if (response.success) {
     let childrens = response.data.children;
     if (childrens === null) {
@@ -26,14 +33,14 @@ export async function loadLayoutMenus(response:any) {
       });
       return data;
     }
-    childrens = childrens.map((item:any) => fetchMenu(item));
+    childrens = childrens.map((item: any) => fetchMenu(item));
     return childrens;
   } else {
     return [];
   }
 }
 
-export async function loadLoayoutMenuAuthentications(response:any) {
+export async function loadLoayoutMenuAuthentications(response: any) {
   if (response.success) {
     let childrens = response.data.children;
     if (childrens === null) {
@@ -48,7 +55,7 @@ export async function loadLoayoutMenuAuthentications(response:any) {
         });
       }
     }
-    childrens.forEach((element:any) => {
+    childrens.forEach((element: any) => {
       feathAuthorities(element);
     });
     return authorities;

antd-pro/src/pages/components/menu/icons.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Icon from '@ant-design/icons'
+import * as icons from '@ant-design/icons'
+import { ProFormSelect, ProFormSelectProps } from '@ant-design/pro-components'
+
+export interface IconSelectProps extends ProFormSelectProps {
+  placeholder?: string
+}
+const IconSelect: React.FC<IconSelectProps> = (props) => {
+  const iconList = Object.keys(icons).filter((item) => typeof icons[item] === 'object')
+  const options = iconList.map(item => {
+    return {
+      label: (
+        <>
+          <Icon component={icons[item]} style={{ marginRight: '8px' }} /> {item}
+        </>
+      ),
+      value: item
+    }
+  });
+
+  return (
+    <ProFormSelect
+      {
+      ...props
+      }
+      showSearch
+      allowClear
+      options={options}
+    >
+    </ProFormSelect>
+  )
+}
+
+export default IconSelect

antd-pro/src/pages/components/menu/index.tsx

@@ -2,10 +2,13 @@ import { list, save, del, tree } from '@/services/api/menu';
 import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ModalForm, PageContainer, ProCard, ProFormDigit, ProFormText, ProFormTreeSelect } from '@ant-design/pro-components';
-import { Button, Form, message, Popconfirm } from 'antd';
+import { Button, Form, message, Modal, Popconfirm } from 'antd';
 import { MyTable } from 'coding-components';
 import React, { useRef, useState, useEffect } from 'react';
 import MenuTree from './tree';
+import IconSelect from './icons';
+import Icon from '@ant-design/icons';
+import * as icons from '@ant-design/icons'
 
 const MenuPage: React.FC = () => {
 
@@ -66,6 +69,16 @@ const MenuPage: React.FC = () => {
       title: "图标",
       dataIndex: 'icon',
       search: false,
+      render: (_, record) => {
+        if (record.icon === '-') {
+          return '';
+        }
+        if (record.icon) {
+          return <Icon component={icons[record.icon]} />
+        } else {
+          return '';
+        }
+      }
     },
     {
       title: "地址",
@@ -254,22 +267,15 @@ const MenuPage: React.FC = () => {
           label="菜单地址"
           rules={[
             {
-              required: true,
               message: "请输入菜单地址",
             },
           ]}
           name="path"
         />
-        <ProFormText
-          placeholder="请输入菜单图标"
+        <IconSelect
           label="菜单图标"
-          rules={[
-            {
-              required: true,
-              message: "请输入菜单图标",
-            },
-          ]}
           name="icon"
+          placeholder="请输入菜单图标"
         />
         <ProFormDigit
           min={0}
@@ -290,6 +296,8 @@ const MenuPage: React.FC = () => {
         />
       </ModalForm>
 
+
+
     </PageContainer>
   );
 };

antd-pro/src/pages/components/menu/tree.tsx

@@ -1,9 +1,10 @@
 import { Tree } from 'antd';
 import React, { useEffect, useImperativeHandle, useState, forwardRef } from 'react';
-import { DownOutlined, HomeOutlined, TeamOutlined } from '@ant-design/icons';
+import { DownOutlined } from '@ant-design/icons';
 import { DataNode } from 'antd/es/tree';
 import { tree } from '@/services/api/menu';
 
+const { DirectoryTree } = Tree;
 interface MenuPageProps {
   onSelect?: (selectedKeys: React.Key[], info?: any) => void;
 }
@@ -20,7 +21,7 @@ const MenuTree = forwardRef((props: MenuPageProps, ref) => {
         const search = (data: any) => {
           data.title = data.name;
           data.key = data.id;
-          data.icon = data.type === 'COMPANY' ? <HomeOutlined /> : <TeamOutlined />;
+          delete data.icon;
           data.children = data.children || [];
           data.children.forEach((item: any) => {
             search(item);
@@ -43,16 +44,18 @@ const MenuTree = forwardRef((props: MenuPageProps, ref) => {
   }));
 
   const onSelect = (selectedKeys: React.Key[]) => {
-    setSelectedKeys(selectedKeys);
-    if (props.onSelect) {
-      props.onSelect(selectedKeys);
+    if (selectedKeys.length > 0) {
+      setSelectedKeys(selectedKeys);
+      if (props.onSelect) {
+        props.onSelect(selectedKeys);
+      }
     }
   };
 
   return (
     <>
       {treeData && treeData.length > 0 && (
-        <Tree
+        <DirectoryTree
           showIcon
           blockNode
           defaultExpandAll

antd-pro/src/services/api/account.ts

@@ -39,5 +39,5 @@ export async function login(body: Account.LoginRequest) {
  * @returns 菜单列表
  */
 export async function menus(){
-  return get('/api/menu/tree');
+  return get('/api/menus');
 }

components-server/components-server/pom.xml

@@ -39,7 +39,6 @@
             <version>${project.version}</version>
         </dependency>
 
-
         <dependency>
             <groupId>com.codingapi.components</groupId>
             <artifactId>menu-restapi</artifactId>

components-server/components/menu/menu-domain/src/main/java/com/codingapi/components/menu/config/MenuDomainConfiguration.java

@@ -2,6 +2,7 @@
 
 import com.codingapi.components.menu.context.MenuContextRegister;
 import com.codingapi.components.menu.domain.Menu;
+import com.codingapi.components.menu.gateway.MenuGateway;
 import com.codingapi.components.menu.repository.MenuRepository;
 import com.codingapi.components.menu.service.MenuService;
 import com.codingapi.springboot.framework.dto.request.PageRequest;
@@ -61,4 +62,16 @@ public MenuService menuService(MenuRepository menuRepository) {
     public MenuContextRegister menuContextRegister(MenuRepository menuRepository){
         return new MenuContextRegister(menuRepository);
     }
+
+
+    @Bean
+    @ConditionalOnMissingBean
+    public MenuGateway menuGateway(MenuRepository menuRepository){
+        return new MenuGateway() {
+            @Override
+            public Menu loadMenus() {
+                return menuRepository.tree();
+            }
+        };
+    }
 }

components-server/components/menu/menu-domain/src/main/java/com/codingapi/components/menu/domain/Menu.java

@@ -21,7 +21,6 @@ public class Menu {
 
     private String name;
 
-    @Column(unique = true)
     private String path;
 
     private String icon;

components-server/components/menu/menu-domain/src/main/java/com/codingapi/components/menu/gateway/MenuGateway.java

@@ -0,0 +1,8 @@
+package com.codingapi.components.menu.gateway;
+
+import com.codingapi.components.menu.domain.Menu;
+
+public interface MenuGateway {
+
+    Menu loadMenus();
+}

components-server/components/menu/menu-restapi/src/main/java/com/codingapi/components/menu/controller/MenusController.java

@@ -0,0 +1,24 @@
+package com.codingapi.components.menu.controller;
+
+import com.codingapi.components.menu.domain.Menu;
+import com.codingapi.components.menu.gateway.MenuGateway;
+import com.codingapi.springboot.framework.dto.response.SingleResponse;
+import lombok.AllArgsConstructor;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+
+@RestController
+@AllArgsConstructor
+@RequestMapping("/api/menus")
+public class MenusController {
+
+    private final MenuGateway menuGateway;
+
+    @GetMapping
+    public SingleResponse<Menu> index() {
+        return SingleResponse.of(menuGateway.loadMenus());
+    }
+
+}