diff --git a/web-react/src/store/reducer/index.js b/web-react/src/store/reducer/index.js index 4624821..cd269ca 100644 --- a/web-react/src/store/reducer/index.js +++ b/web-react/src/store/reducer/index.js @@ -1,11 +1,13 @@ import { combineReducers } from 'redux' import user from './user' import layout from './layout' +import nav from './nav' import dictData from './dict-data' const combine = combineReducers({ user, layout, + nav, dictData }) diff --git a/web-react/src/store/reducer/nav.js b/web-react/src/store/reducer/nav.js new file mode 100644 index 0000000..dcb18a3 --- /dev/null +++ b/web-react/src/store/reducer/nav.js @@ -0,0 +1,12 @@ +const nav = (state = { nav: [] }, action) => { + // 写入各种action对应的操作 + switch (action.type) { + case 'SET_ANV': + const _state = { ...state, nav: action.nav } + return _state + default: + return state + } +} + +export default nav \ No newline at end of file diff --git a/web-react/src/store/reducer/pane.js b/web-react/src/store/reducer/pane.js new file mode 100644 index 0000000..e69de29 diff --git a/web-react/src/views/main/_layout/header/index.jsx b/web-react/src/views/main/_layout/header/index.jsx index d51fe0e..f89493d 100644 --- a/web-react/src/views/main/_layout/header/index.jsx +++ b/web-react/src/views/main/_layout/header/index.jsx @@ -3,6 +3,7 @@ import { Layout, Badge } from 'antd' import { AntIcon, Container } from 'components' import Logo from '../logo' import User from './user' +import Search from './search' import store from 'store' const { getState, subscribe, dispatch } = store @@ -41,7 +42,7 @@ export default class index extends Component { - {/* search */} +
window.realodContentWindow()}> diff --git a/web-react/src/views/main/_layout/header/search.jsx b/web-react/src/views/main/_layout/header/search.jsx new file mode 100644 index 0000000..8985a45 --- /dev/null +++ b/web-react/src/views/main/_layout/header/search.jsx @@ -0,0 +1,144 @@ +import React, { Component } from 'react' +import { AutoComplete, Input } from 'antd' +import { AntIcon } from 'components' +import store from 'store' +import { concat } from 'lodash' + +const { getState, subscribe } = store + +const unZip = (menus) => { + const result = [] + menus.forEach(item => { + if (item.children) { + result.push({ + parent: item.meta.title, + children: item.children + }) + } else { + result.push({ + parent: item.meta.title, + children: [item] + }) + } + }) + return result +} + +export default class search extends Component { + + state = { + options: [], + + searchValue: '' + } + + nav = getState('nav').nav + + autoComplete = React.createRef() + + constructor(props) { + super(props) + + this.unsubscribe = subscribe('nav', state => { + this.getOptions(state.nav) + }) + } + + componentDidMount() { + this.getOptions(this.nav) + } + + componentWillUnmount() { + this.unsubscribe() + } + + onSearch(searchValue, option) { + searchValue = searchValue.toLowerCase() + return (option.value && option.value.toLowerCase().indexOf(searchValue) > -1) + || (option.component && option.component.toLowerCase().indexOf(searchValue) > -1) + } + + onSelect(value, option) { + const { id, meta, component } = option.menu + + // 选中时清空输入框内容,并失去焦点 + this.setState({ searchValue: '' }) + this.autoComplete.current.blur() + + window.openContentWindow({ + key: id, + title: meta.title, + icon: meta.icon, + path: component, + }) + } + + getOptions(nav) { + + const menus = unZip(concat.apply(this, nav.map(p => p.menu))) + + const options = menus.map(item => { + if (item.parent) { + return { + label: this.renderTitle(item.parent), + options: item.children.map(menu => { + return this.renderItem(menu.meta.title, menu) + }) + } + } else { + return { + options: item.children.map(menu => { + return this.renderItem(menu.meta.title, menu) + }) + } + } + }) + this.setState({ options }) + } + + renderTitle(title) { + return + {title} + + } + + renderItem(title, menu) { + return { + value: title, + component: menu.component, + menu, + label: ( + <> + {title} +
{menu.component}
+ + ), + } + } + + render() { + + const { options, searchValue } = this.state + + return ( + this.onSearch(searchValue, option)} + onSelect={(value, option) => this.onSelect(value, option)} + onChange={(value) => this.setState({ searchValue: value })} + > + } + /> + + ) + } +} \ No newline at end of file diff --git a/web-react/src/views/main/_layout/sider/index.jsx b/web-react/src/views/main/_layout/sider/index.jsx index ce01f66..6a15f53 100644 --- a/web-react/src/views/main/_layout/sider/index.jsx +++ b/web-react/src/views/main/_layout/sider/index.jsx @@ -78,7 +78,7 @@ export default class index extends Component {
- +
diff --git a/web-react/src/views/main/_layout/sider/menu.jsx b/web-react/src/views/main/_layout/sider/menu.jsx index f53e200..4d91304 100644 --- a/web-react/src/views/main/_layout/sider/menu.jsx +++ b/web-react/src/views/main/_layout/sider/menu.jsx @@ -1,9 +1,28 @@ import React, { Component } from 'react' import { Menu } from 'antd' import AntIcon from 'components/ant-icon' +import store from 'store' + +const { getState, subscribe } = store export default class index extends Component { + state = { + ...getState('nav') + } + + constructor(props) { + super(props) + + this.unsubscribe = subscribe('nav', state => { + this.setState(state) + }) + } + + componentWillUnmount() { + this.unsubscribe() + } + renderMenu = (menu) => { return menu.map((p) => { return p.children ? this.renderSubMenu(p) : this.renderMenuItem(p) @@ -56,7 +75,7 @@ export default class index extends Component { return ( <> { - this.props.nav.map((item, i) => { + this.state.nav.map((item, i) => { return (
{item.app.name}
diff --git a/web-react/src/views/main/index.jsx b/web-react/src/views/main/index.jsx index 349bf75..ed0e9a1 100644 --- a/web-react/src/views/main/index.jsx +++ b/web-react/src/views/main/index.jsx @@ -36,8 +36,7 @@ const setNav = async (nav) => { }) }) - const menus = await api - .$queue(getNav.map((p) => api.sysMenuChangeAwait({ application: p.app.code }))) + const menus = await Promise.all(getNav.map(p => api.sysMenuChange({ application: p.app.code }))) menus.forEach((menu, i) => { getNav[i].menu = serializeMenu(menu.data) }) @@ -52,7 +51,6 @@ export default class index extends Component { state = { loading: true, - nav: [], panes: [], actived: '', test: 0 @@ -73,7 +71,12 @@ export default class index extends Component { user: data }) - this.setState({ loading: false, nav }, () => { + dispatch({ + type: 'SET_ANV', + nav + }) + + this.setState({ loading: false }, () => { this.onOpenContentWindow({ title: '工作台', path: '/home', @@ -233,7 +236,7 @@ export default class index extends Component {
- +