From c0c820559b46f3a5ede6fbd7f66e77d09981829f Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Wed, 29 Apr 2020 11:56:31 +0800
Subject: [PATCH] 提升菜单栏体验，升级公共查询表单组件
---
src/components/common/MenuView/index.jsx | 31 +++++++++++++++++++------------
1 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/src/components/common/MenuView/index.jsx b/src/components/common/MenuView/index.jsx
index 12f1a65..19202f3 100644
--- a/src/components/common/MenuView/index.jsx
+++ b/src/components/common/MenuView/index.jsx
@@ -6,7 +6,7 @@
/** 菜单渲染组件 */
-import React from 'react';
+import React, { useState } from 'react';
import { Layout, Menu, Icon, Badge } from 'antd';
import { RouteComponentProps } from 'react-router-dom';
import './index.scss';
@@ -20,7 +20,7 @@
}) {
if (!menudata.length) return null;
- const { path, name } = find(menudata, pathname);
+ const { path, name, parentKey } = find(menudata, pathname);
if (name) {
const index = name.indexOf(' - ');
@@ -33,22 +33,29 @@
document.title = `恒巨信息`;
}
- const defaultOpenKeys = menudata.map(({ name }) => name);
+ const defaultOpenKeys = parentKey ? [parentKey] : [];//默认展开的菜单key
+ const [openKeys, setOpenKeys] = useState(defaultOpenKeys);//设置打开菜单的key
+
+ function onOpenChange(key) {
+ let allKeys = menudata.map((d) => d.key);
+ const latestOpenKey = key.find(key => openKeys.indexOf(key) === -1);
+ if (allKeys.indexOf(latestOpenKey) === -1) {
+ setOpenKeys(key)
+ } else {
+ setOpenKeys(latestOpenKey ? [latestOpenKey] : [])
+ }
+ };
return (
- // <Layout.Sider
- // // width={200}
- // theme="light"
- // style={{ backgroundColor: 'white' }}>
<Menu
key={defaultOpenKeys.join('-')}
style={{ height: '100%', borderRight: 0 }}
- defaultOpenKeys={defaultOpenKeys}
+ openKeys={openKeys}
selectedKeys={path ? [path] : []}
+ onOpenChange={onOpenChange}
mode="inline">
{render(menudata, history)}
</Menu>
- // </Layout.Sider>
);
}
@@ -56,7 +63,7 @@
return data.map(({ name, icon, path, count, children, type }, index) =>
children && children.length ? (
<SubMenu
- key={name}
+ key={path}
title={
<span>
<Icon type={icon || 'setting'} />
@@ -84,7 +91,7 @@
};
const find = (data, full, pathname = { path: '', name: '' }) =>
- data.reduce((pn, { path, name, children }) => {
+ data.reduce((pn, { path, name, parentKey, children }) => {
if (children && children.length) {
return find(children, full, pn);
}
@@ -92,7 +99,7 @@
path.length > pn.path.length &&
full.replace(/\/\d+/g, '').startsWith(path.replace(/\/\d+/g, ''))
) {
- return { path, name };
+ return { path, name, parentKey };
}
return pn;
}, pathname);
--
Gitblit v1.8.0