add 文件管理
This commit is contained in:
@@ -5,14 +5,15 @@ import 'nprogress/nprogress.css'
|
||||
import AntIcon from 'components/ant-icon'
|
||||
import { Container } from 'components'
|
||||
|
||||
NProgress.configure({ parent: '.ant-layout-content > .yo-tab-external-mount > .yo-tab-external-mount-content' });
|
||||
NProgress.configure({
|
||||
parent: '.ant-layout-content > .yo-tab-external-mount > .yo-tab-external-mount-content',
|
||||
})
|
||||
|
||||
class ComponentDynamic extends Component {
|
||||
|
||||
state = {
|
||||
// 组件内部组件的key,用于刷新
|
||||
key: null,
|
||||
component: null
|
||||
component: null,
|
||||
}
|
||||
|
||||
shouldComponentUpdate() {
|
||||
@@ -32,8 +33,7 @@ class ComponentDynamic extends Component {
|
||||
|
||||
// 在这里使用setTimeout调用,是防止打开窗口时卡顿
|
||||
setTimeout(async () => {
|
||||
|
||||
let component;
|
||||
let component
|
||||
|
||||
try {
|
||||
component = await import(`../../../../pages${this.props.path}`)
|
||||
@@ -41,38 +41,41 @@ class ComponentDynamic extends Component {
|
||||
component = await import('views/error/404')
|
||||
}
|
||||
|
||||
this.setState({
|
||||
key: Math.random().toString(16).slice(2),
|
||||
component: component.default
|
||||
}, () => {
|
||||
NProgress.done()
|
||||
})
|
||||
|
||||
this.setState(
|
||||
{
|
||||
key: Math.random().toString(16).slice(2),
|
||||
component: component.default,
|
||||
},
|
||||
() => {
|
||||
NProgress.done()
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.state.component) {
|
||||
return <this.state.component
|
||||
key={this.state.key}
|
||||
{...this.props}
|
||||
supportInfo={
|
||||
<Container>
|
||||
<Divider>
|
||||
<span className="h6 text-gray">Ewide Core ©2021 v1.0</span>
|
||||
</Divider>
|
||||
</Container>
|
||||
}
|
||||
/>
|
||||
return (
|
||||
<this.state.component
|
||||
key={this.state.key}
|
||||
{...this.props}
|
||||
supportInfo={
|
||||
<Container>
|
||||
<Divider>
|
||||
<span className="h6 text-gray">Ewide Core ©2021 v1.0</span>
|
||||
</Divider>
|
||||
</Container>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
return <></>
|
||||
}
|
||||
}
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
actived: ''
|
||||
actived: '',
|
||||
}
|
||||
|
||||
panes = []
|
||||
@@ -83,13 +86,13 @@ export default class index extends Component {
|
||||
|
||||
static getDerivedStateFromProps(props) {
|
||||
return {
|
||||
actived: props.actived
|
||||
actived: props.actived,
|
||||
}
|
||||
}
|
||||
|
||||
onChange(activeKey) {
|
||||
this.props.parent.setState({
|
||||
actived: activeKey
|
||||
actived: activeKey,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -99,7 +102,7 @@ export default class index extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
onReload = (key) => {
|
||||
onReload = key => {
|
||||
key = key || this.state.actived
|
||||
const pane = this.panes.find(p => p.props.id === key)
|
||||
if (pane) {
|
||||
@@ -108,7 +111,6 @@ export default class index extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
this.panes = []
|
||||
|
||||
return (
|
||||
@@ -118,60 +120,85 @@ export default class index extends Component {
|
||||
type="editable-card"
|
||||
hideAdd
|
||||
activeKey={this.state.actived}
|
||||
onChange={(activeKey) => this.onChange(activeKey)}
|
||||
onChange={activeKey => this.onChange(activeKey)}
|
||||
onEdit={(targetKey, action) => this.onClose(targetKey, action)}
|
||||
>
|
||||
{
|
||||
this.props.panes.map(pane => {
|
||||
return (
|
||||
<Tabs.TabPane
|
||||
closable={pane.closable}
|
||||
key={pane.key}
|
||||
tab={
|
||||
<Dropdown
|
||||
trigger={['contextMenu']}
|
||||
overlay={
|
||||
<Menu>
|
||||
<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>
|
||||
<Menu.Item key="3" onClick={() => window.closeRightContentWindow(pane.key)}>关闭右侧标签页</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
{pane.icon && <AntIcon type={pane.icon} />}
|
||||
{pane.title}
|
||||
</div>
|
||||
</Dropdown>
|
||||
}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
{this.props.panes.map(pane => {
|
||||
return (
|
||||
<Tabs.TabPane
|
||||
closable={pane.closable}
|
||||
key={pane.key}
|
||||
tab={
|
||||
<Dropdown
|
||||
trigger={['contextMenu']}
|
||||
overlay={
|
||||
<Menu>
|
||||
<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>
|
||||
<Menu.Item
|
||||
key="3"
|
||||
onClick={() =>
|
||||
window.closeRightContentWindow(pane.key)
|
||||
}
|
||||
>
|
||||
关闭右侧标签页
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
{pane.icon && <AntIcon type={pane.icon} />}
|
||||
{pane.title}
|
||||
</div>
|
||||
</Dropdown>
|
||||
}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Tabs>
|
||||
<div className="yo-tab-external-mount-content">
|
||||
{
|
||||
this.props.panes.map(pane => {
|
||||
return (
|
||||
<div
|
||||
{this.props.panes.map(pane => {
|
||||
return (
|
||||
<div
|
||||
key={pane.key}
|
||||
className={
|
||||
(pane.key === this.state.actived
|
||||
? 'yo-tab-external-tabpane-active'
|
||||
: 'yo-tab-external-tabpane-inactive') +
|
||||
' yo-tab-external-tabpane'
|
||||
}
|
||||
>
|
||||
<ComponentDynamic
|
||||
path={pane.path}
|
||||
id={pane.key}
|
||||
key={pane.key}
|
||||
className={
|
||||
(pane.key === this.state.actived ? 'yo-tab-external-tabpane-active' : 'yo-tab-external-tabpane-inactive') + ' yo-tab-external-tabpane'
|
||||
}
|
||||
>
|
||||
<ComponentDynamic
|
||||
path={pane.path}
|
||||
id={pane.key}
|
||||
key={pane.key}
|
||||
param={pane.param}
|
||||
onRef={p => this.panes.push(p)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
param={pane.param}
|
||||
onRef={p => this.panes.push(p)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</Layout.Content>
|
||||
|
||||
Reference in New Issue
Block a user