一、MenuSearch/index.tsx
import React, { useState, useEffect } from 'react'
import { Select } from 'antd'
import { history } from 'umi'
import styles from './index.less'
import { SearchOutlined } from '@ant-design/icons'
interface MenuSearchProps {
routerOptions: Array<object> // 下拉框options
routerList: Array<string> // pathname集合
}
const MenuSearch: React.FC<MenuSearchProps> = (props: any) => {
const { routerOptions, routerList } = props
let { pathname, search } = history.location
pathname = pathname + search
const [currentPath, setcurrentPath] = useState<string | undefined>(undefined)
const [isHide, setIsHide] = useState(true) // 是否隱藏搜索框 默認隱藏
useEffect(() => {
const currentPath = routerList.includes(pathname) ? pathname : undefined
setcurrentPath(currentPath) // 點擊菜單欄，menuSearch中回顯
}, [pathname, routerList])
return (
<div className={styles.menuSearch}>
<SearchOutlined onClick={setIsHide.bind(this, !isHide)} />
<Select
onChange={(pathname: string) => history.push(pathname)}
showSearch
optionFilterProp="label"
placeholder="請搜索菜單名稱"
options={routerOptions}
value={currentPath}
className={isHide ? styles.isHide : null}
onBlur={setIsHide.bind(this, true)}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
/>
</div>
)
}
export default MenuSearch
MenuSearch/index.less
.menuSearch { display: flex; align-items: center; :global { .ant-select { width: 200px; margin-right: 20px; margin-left: 10px; transition: all 0.5s; .ant-select-selector { border-radius: 4px; background-color: var(--theme-input-bk); } } } .isHide { width: 0; opacity: 0; // overflow: hidden; margin-right: 0; } }
二、使用
BasicLayout.tsx
import MenuSearch from './components/MenuSearch'
<MenuSearch routerOptions={routerOptions} routerList={routerList} />
三、數據結構
routerOptions
[ { "name": "監測台", "path": "/monitoringStation", "label": "監測台", "value": "/monitoringStation", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-gongzuotai" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "客戶列表", "path": "/customer/customerList", "label": "客戶列表", "value": "/customer/customerList", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "項目庫", "path": "/crm/project", "label": "項目庫", "value": "/crm/project", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "學校庫", "path": "/crm/school", "label": "學校庫", "value": "/crm/school", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "員工項目管理", "path": "/management/staffproject", "label": "員工項目管理", "value": "/management/staffproject", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "模板管理", "path": "/management/template", "label": "模板管理", "value": "/management/template", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "項目流程管理", "path": "/management/projectProcess", "label": "項目流程管理", "value": "/management/projectProcess", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "客戶信任流程管理", "path": "/management/customerTrust?flowType=2", "label": "客戶信任流程管理", "value": "/management/customerTrust?flowType=2", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "服務流程管理", "path": "/management/processOrderlySales", "label": "服務流程管理", "value": "/management/processOrderlySales", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "周計划維度管理", "path": "/management/weeklyPlan?flowType=3", "label": "周計划維度管理", "value": "/management/weeklyPlan?flowType=3", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "知識庫設置", "path": "/management/knowledge", "label": "知識庫設置", "value": "/management/knowledge", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "產品庫設置", "path": "/management/product", "label": "產品庫設置", "value": "/management/product", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "項目階段設置", "path": "/management/projectStage", "label": "項目階段設置", "value": "/management/projectStage", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "服務階段設置", "path": "/management/projectPhase", "label": "服務階段設置", "value": "/management/projectPhase", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "客戶標簽管理", "path": "/management/customerLabel", "label": "客戶標簽管理", "value": "/management/customerLabel", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "客戶等級管理", "path": "/management/customerLevel", "label": "客戶等級管理", "value": "/management/customerLevel", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "年度目標設置", "path": "/management/yearTargetSetting", "label": "年度目標設置", "value": "/management/yearTargetSetting", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "資料庫", "path": "/application/database", "label": "資料庫", "value": "/application/database", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "項目報", "path": "/application/projectreport", "label": "項目報", "value": "/application/projectreport", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "周計划", "path": "/application/weeklyPlan", "label": "周計划", "value": "/application/weeklyPlan", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "知識庫", "path": "/application/knowledgeBase", "label": "知識庫", "value": "/application/knowledgeBase", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon-xiaoxi" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "項目推進審核", "path": "/application/projectScheduleReview", "label": "項目推進審核", "value": "/application/projectScheduleReview", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "服務推進審核", "path": "/application/serverScheduleReview", "label": "服務推進審核", "value": "/application/serverScheduleReview", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "客戶背調信息管理", "path": "/application/customerBackgroundInfoManage", "label": "客戶背調信息管理", "value": "/application/customerBackgroundInfoManage", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "拜訪計划", "path": "/application/visitPlan", "label": "拜訪計划", "value": "/application/visitPlan", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "拜訪反饋", "path": "/application/visitFeedback", "label": "拜訪反饋", "value": "/application/visitFeedback", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "項目實時階段", "path": "/dataCenter/projectRealTimePhase", "label": "項目實時階段", "value": "/dataCenter/projectRealTimePhase", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "項目動態變化", "path": "/dataCenter/projectDynamicChange", "label": "項目動態變化", "value": "/dataCenter/projectDynamicChange", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "客戶關系實時階段", "path": "/dataCenter/customerRelationshipsRealTimePhase", "label": "客戶關系實時階段", "value": "/dataCenter/customerRelationshipsRealTimePhase", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "客戶關系動態變化", "path": "/dataCenter/customerRelationshipsDynamicChange", "label": "客戶關系動態變化", "value": "/dataCenter/customerRelationshipsDynamicChange", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "年度關鍵任務", "path": "/dataCenter/yearPivotalTask", "label": "年度關鍵任務", "value": "/dataCenter/yearPivotalTask", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "大區/公司", "path": "/dataCenter/regionCompany", "label": "大區/公司", "value": "/dataCenter/regionCompany", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "菜單管理", "path": "/setting/menuManage", "label": "菜單管理", "value": "/setting/menuManage", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "角色權限管理", "path": "/setting/roleJurisdiction", "label": "角色權限管理", "value": "/setting/roleJurisdiction", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "賬號管理", "path": "/setting/account", "label": "賬號管理", "value": "/setting/account", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "導入記錄管理", "path": "/setting/importRecord", "label": "導入記錄管理", "value": "/setting/importRecord", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "部門設置", "path": "/setting/department", "label": "部門設置", "value": "/setting/department", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] }, { "name": "臨時團隊管理", "path": "/setting/temporaryTeam", "label": "臨時團隊管理", "value": "/setting/temporaryTeam", "icon": { "type": "span", "key": null, "ref": null, "props": { "className": "iconfont icon-icon" }, "_owner": null, "_store": {} }, "children": [] } ]
routerList
[ "/monitoringStation", "/customer/customerList", "/crm/project", "/crm/school", "/management/staffproject", "/management/template", "/management/projectProcess", "/management/customerTrust?flowType=2", "/management/processOrderlySales", "/management/weeklyPlan?flowType=3", "/management/knowledge", "/management/product", "/management/projectStage", "/management/projectPhase", "/management/customerLabel", "/management/customerLevel", "/management/yearTargetSetting", "/application/database", "/application/projectreport", "/application/weeklyPlan", "/application/knowledgeBase", "/application/projectScheduleReview", "/application/serverScheduleReview", "/application/customerBackgroundInfoManage", "/application/visitPlan", "/application/visitFeedback", "/dataCenter/projectRealTimePhase", "/dataCenter/projectDynamicChange", "/dataCenter/customerRelationshipsRealTimePhase", "/dataCenter/customerRelationshipsDynamicChange", "/dataCenter/yearPivotalTask", "/dataCenter/regionCompany", "/setting/menuManage", "/setting/roleJurisdiction", "/setting/account", "/setting/importRecord", "/setting/department", "/setting/temporaryTeam", "/management/customerTrust", "/management/weeklyPlan" ]
四、效果
1、下拉框中支持搜索，點擊菜單跳轉至對應頁面
2、點擊左側菜單欄，下拉框中回顯當前菜單名稱
3、點擊放大鏡icon展開下拉框，再次點擊收起。下拉框失焦時收起下拉框
五、注意
1、根據路由攔截，如果路由中帶參數（get形式），需要將?前路徑截取下來，存到routerList中
{/*
路由攔截
【白名單】：pdf預覽組件
*/}
{routerList.length ? (
// routerList.includes(pathname) || pathname.includes('/pdfPreview') ? (
routerList.some((item) => pathname.includes(item)) || pathname.includes('/pdfPreview') ? (
<Authorized authority={authorized!.authority} noMatch={noMatch}>
{children}
</Authorized>
) : pathname === '/' ? (
<Authorized authority={authorized!.authority} noMatch={noMatch}>
{children}
</Authorized>
) : (
noMatch
)
) : (
''
)}
2、當前菜單下有新增、編輯、詳情等子路由，下拉框中是沒有回顯的，此時路由攔截的規則需要對應的修改