From 1db0ce888b7a85997f60649db91aba5f35e9d066 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?=
 <188633308@qq.com>
Date: Sun, 13 Jun 2021 14:10:11 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E5=8A=A0=E8=BD=BD=E7=AA=97?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/component-dynamic/index.jsx    | 38 +++++++----
 .../src/views/main/_layout/content/index.jsx  | 65 ++++++++++++++-----
 .../src/views/main/_layout/header/index.jsx   |  2 +-
 3 files changed, 74 insertions(+), 31 deletions(-)

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 && <this.state.component {...props} />
-            }
-        </>)
+        if (this.state.component) {
+            return <this.state.component key={this.state.key} {...props} />
+        }
+        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 && <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>
                                 )
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 */}
                     </div>
                     <div className="header-actions">
-                        <span className="header-action">
+                        <span className="header-action" onClick={() => window.realodContentWindow()}>
                             <AntIcon type="reload" />
                         </span>
                         <span className="header-action">