重新加载窗口

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 && <this.state.component {...props} />
+        if (this.state.component) {
+            return <this.state.component key={this.state.key} {...props} />
         }
-        </>)
+        return <></>
     }
 }

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 && <this.state.component {...this.props} />
+        if (this.state.component) {
+            return <this.state.component key={this.state.key} {...this.props} />
         }
-        </>)
+        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 (
             <Layout.Content>
                 <div className="yo-tab-external-mount">
@@ -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={
                                                     <Menu>
-                                                        <Menu.Item key="0">重新加载</Menu.Item>
+                                                        <Menu.Item key="0" onClick={() => this.onReload(pane.key)}>重新加载</Menu.Item>
                                                         <Menu.Divider />
                                                         <Menu.Item key="1" onClick={() => window.closeContentWindow(pane.key)}>关闭</Menu.Item>
                                                         <Menu.Item key="2" onClick={() => window.closeOtherContentWindow(pane.key)}>关闭其他标签页</Menu.Item>
@@ -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)}
                                         />
                                     </div>
                                 )

web-react/src/views/main/_layout/header/index.jsx

@@ -17,7 +17,7 @@ export default class index extends Component {
                         {/* search */}
                     </div>
                     <div className="header-actions">
-                        <span className="header-action">
+                        <span className="header-action" onClick={() => window.realodContentWindow()}>
                             <AntIcon type="reload" />
                         </span>
                         <span className="header-action">