diff --git a/web-react/src/components/component-dynamic/index.jsx b/web-react/src/components/component-dynamic/index.jsx index 8586d3a..2ef2371 100644 --- a/web-react/src/components/component-dynamic/index.jsx +++ b/web-react/src/components/component-dynamic/index.jsx @@ -4,29 +4,42 @@ import { cloneDeep } from 'lodash' export default class ComponentDynamic extends Component { state = { + key: null, component: null } - async componentDidMount() { - let c; + shouldComponentUpdate() { + if (this.props.onRef) { + this.props.onRef(this) + } + + return true + } + + componentDidMount() { + this.loadComponent() + } + + async loadComponent() { + let component; try { if (this.props.is) { if (this.props.is.constructor === Function) { // 导入函数 - c = await this.props.is() + component = await this.props.is() } else { // 导入路径,必须是src以下节点,如 pages/home - c = await import(`../../${this.props.is}`) + component = await import(`../../${this.props.is}`) } } - } - catch { - c = await import(`views/error/404`) + } catch { + component = await import(`views/error/404`) } this.setState({ - component: c.default + key: Math.random().toString(16).slice(2), + component: component.default }) } @@ -36,10 +49,9 @@ export default class ComponentDynamic extends Component { delete props.is - return (<> - { - this.state.component && - } - ) + if (this.state.component) { + return + } + return <> } } \ No newline at end of file diff --git a/web-react/src/views/main/_layout/content/index.jsx b/web-react/src/views/main/_layout/content/index.jsx index c0ab654..b230380 100644 --- a/web-react/src/views/main/_layout/content/index.jsx +++ b/web-react/src/views/main/_layout/content/index.jsx @@ -9,26 +9,40 @@ NProgress.configure({ parent: '.ant-layout-content > .yo-tab-external-mount > .y class ComponentDynamic extends Component { state = { + // 组件内部组件的key,用于刷新 + key: null, component: null } - componentDidMount() { + shouldComponentUpdate() { + if (this.props.onRef) { + this.props.onRef(this) + } + return true + } + + componentDidMount() { + this.loadComponent() + } + + loadComponent() { NProgress.start() + // 在这里使用setTimeout调用,是防止打开窗口时卡顿 setTimeout(async () => { - let c; + let component; try { - c = await import(`../../../../pages${this.props.path}`) - } - catch { - c = await import(`views/error/404`) + component = await import(`../../../../pages${this.props.path}`) + } catch { + component = await import('views/error/404') } this.setState({ - component: c.default + key: Math.random().toString(16).slice(2), + component: component.default }, () => { NProgress.done() }) @@ -37,11 +51,10 @@ class ComponentDynamic extends Component { } render() { - return (<> - { - this.state.component && - } - ) + if (this.state.component) { + return + } + return <> } } @@ -51,25 +64,42 @@ export default class index extends Component { actived: '' } + panes = [] + + componentDidMount() { + window.realodContentWindow = this.onReload + } + static getDerivedStateFromProps(props) { return { actived: props.actived } } - onChange = (activeKey) => { + onChange(activeKey) { this.props.parent.setState({ actived: activeKey }) } - onClose = (targetKey, action) => { + onClose(targetKey, action) { if (action === 'remove') { window.closeContentWindow(targetKey) } } + onReload = (key) => { + key = key || this.state.actived + const pane = this.panes.find(p => p.props.id === key) + if (pane) { + pane.loadComponent() + } + } + render() { + + this.panes = [] + return (
@@ -77,8 +107,8 @@ export default class index extends Component { type="editable-card" hideAdd activeKey={this.state.actived} - onChange={this.onChange} - onEdit={this.onClose} + onChange={(activeKey) => this.onChange(activeKey)} + onEdit={(targetKey, action) => this.onClose(targetKey, action)} > { this.props.panes.map(pane => { @@ -91,7 +121,7 @@ export default class index extends Component { trigger={['contextMenu']} overlay={ - 重新加载 + this.onReload(pane.key)}>重新加载 window.closeContentWindow(pane.key)}>关闭 window.closeOtherContentWindow(pane.key)}>关闭其他标签页 @@ -125,6 +155,7 @@ export default class index extends Component { id={pane.key} key={pane.key} param={pane.param} + onRef={p => this.panes.push(p)} />
) diff --git a/web-react/src/views/main/_layout/header/index.jsx b/web-react/src/views/main/_layout/header/index.jsx index a25b9e4..6452b78 100644 --- a/web-react/src/views/main/_layout/header/index.jsx +++ b/web-react/src/views/main/_layout/header/index.jsx @@ -17,7 +17,7 @@ export default class index extends Component { {/* search */}
- + window.realodContentWindow()}>