Merge branch 'master' of http://118.178.224.202:3000/ewide/ewide_core
This commit is contained in:
@@ -20,7 +20,6 @@ class ComponentDynamic extends Component {
|
||||
if (this.props.onRef) {
|
||||
this.props.onRef(this)
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
@@ -73,6 +72,40 @@ class ComponentDynamic extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
class Iframe extends Component {
|
||||
shouldComponentUpdate() {
|
||||
if (this.props.onRef) {
|
||||
this.props.onRef(this)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.onRef) {
|
||||
this.props.onRef(this)
|
||||
}
|
||||
this.loadComponent()
|
||||
}
|
||||
|
||||
loadComponent() {
|
||||
NProgress.start()
|
||||
const iframe = this.refs.content
|
||||
iframe.onload = () => {
|
||||
NProgress.done()
|
||||
}
|
||||
iframe.onerror = () => {
|
||||
NProgress.done()
|
||||
}
|
||||
iframe.src = this.props.src
|
||||
}
|
||||
|
||||
render() {
|
||||
const { title } = this.props
|
||||
|
||||
return <iframe ref="content" title={title} />
|
||||
}
|
||||
}
|
||||
|
||||
export default class index extends Component {
|
||||
state = {
|
||||
actived: '',
|
||||
@@ -113,13 +146,15 @@ export default class index extends Component {
|
||||
render() {
|
||||
this.panes = []
|
||||
|
||||
const { actived } = this.state
|
||||
|
||||
return (
|
||||
<Layout.Content>
|
||||
<div className="yo-tab-external-mount">
|
||||
<Tabs
|
||||
type="editable-card"
|
||||
hideAdd
|
||||
activeKey={this.state.actived}
|
||||
activeKey={actived}
|
||||
onChange={activeKey => this.onChange(activeKey)}
|
||||
onEdit={(targetKey, action) => this.onClose(targetKey, action)}
|
||||
>
|
||||
@@ -183,19 +218,29 @@ export default class index extends Component {
|
||||
<div
|
||||
key={pane.key}
|
||||
className={
|
||||
(pane.key === this.state.actived
|
||||
(pane.key === 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)}
|
||||
/>
|
||||
{pane.openType === 1 ? (
|
||||
<ComponentDynamic
|
||||
path={pane.path}
|
||||
id={pane.key}
|
||||
key={pane.key}
|
||||
param={pane.param}
|
||||
paneActived={pane.key === actived}
|
||||
onRef={p => this.panes.push(p)}
|
||||
/>
|
||||
) : pane.openType === 2 ? (
|
||||
<Iframe
|
||||
src={pane.path}
|
||||
title={pane.key}
|
||||
id={pane.key}
|
||||
onRef={p => this.panes.push(p)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -33,13 +33,20 @@ export default class index extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { allowSiderCollapsed } = this.state
|
||||
|
||||
return (
|
||||
<Layout.Header>
|
||||
<Container mode="fluid">
|
||||
<div className="header-actions">
|
||||
<span className="header-action mr-md" onClick={() => this.onCollapsed()}>
|
||||
<AntIcon type="menu" />
|
||||
</span>
|
||||
{allowSiderCollapsed && (
|
||||
<span
|
||||
className="header-action mr-md"
|
||||
onClick={() => this.onCollapsed()}
|
||||
>
|
||||
<AntIcon type="menu" />
|
||||
</span>
|
||||
)}
|
||||
<Logo />
|
||||
<Search />
|
||||
</div>
|
||||
|
||||
@@ -78,7 +78,7 @@ export default class search extends Component {
|
||||
}
|
||||
|
||||
onSelect(value, option) {
|
||||
const { id, meta, component } = option.menu
|
||||
const { id, meta, component, link, redirect, openType } = option.menu
|
||||
|
||||
// 选中时清空输入框内容,并失去焦点
|
||||
this.setState({ searchValue: '' })
|
||||
@@ -88,7 +88,19 @@ export default class search extends Component {
|
||||
key: id,
|
||||
title: meta.title,
|
||||
icon: meta.icon,
|
||||
path: component,
|
||||
path: (() => {
|
||||
switch (openType) {
|
||||
case 1:
|
||||
return component
|
||||
case 2:
|
||||
return link
|
||||
case 3:
|
||||
return redirect
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})(),
|
||||
openType,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -83,7 +83,7 @@ class User extends Component {
|
||||
)}
|
||||
{user.roles &&
|
||||
user.roles.map(role => (
|
||||
<Tag color="purple" className="mb-xs">
|
||||
<Tag key={role.id} color="purple" className="mb-xs">
|
||||
{role.name}
|
||||
</Tag>
|
||||
))}
|
||||
|
||||
@@ -9,8 +9,7 @@ Swiper.use([Mousewheel, Scrollbar])
|
||||
|
||||
const { getState, subscribe } = store
|
||||
|
||||
let timer,
|
||||
swiper
|
||||
let timer, swiper
|
||||
|
||||
const siderSwiperOptions = {
|
||||
direction: 'vertical',
|
||||
@@ -31,17 +30,15 @@ const UpdateSwiper = () => {
|
||||
}, 300)
|
||||
}
|
||||
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
...getState('layout')
|
||||
...getState('layout'),
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.unsubscribe = subscribe('layout', (state) => {
|
||||
this.unsubscribe = subscribe('layout', state => {
|
||||
this.setState(state)
|
||||
})
|
||||
}
|
||||
@@ -78,7 +75,10 @@ export default class index extends Component {
|
||||
<div className="swiper-container" id="layout--swiper-container">
|
||||
<div className="swiper-wrapper">
|
||||
<div className="swiper-slide">
|
||||
<Menu parent={this} menuStyle={{ height: '100%', borderRight: 0 }} />
|
||||
<Menu
|
||||
parent={this}
|
||||
menuStyle={{ height: '100%', borderRight: 0 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
|
||||
|
||||
@@ -6,9 +6,8 @@ import store from 'store'
|
||||
const { getState, subscribe } = store
|
||||
|
||||
export default class index extends Component {
|
||||
|
||||
state = {
|
||||
...getState('nav')
|
||||
...getState('nav'),
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
@@ -23,21 +22,25 @@ export default class index extends Component {
|
||||
this.unsubscribe()
|
||||
}
|
||||
|
||||
renderMenu = (menu) => {
|
||||
return menu.map((p) => {
|
||||
renderMenu = menu => {
|
||||
return menu.map(p => {
|
||||
return p.children ? this.renderSubMenu(p) : this.renderMenuItem(p)
|
||||
})
|
||||
}
|
||||
|
||||
renderSubMenu = (menu) => {
|
||||
renderSubMenu = menu => {
|
||||
return (
|
||||
<Menu.SubMenu key={menu.id} title={menu.meta.title} icon={menu.meta.icon && <AntIcon type={menu.meta.icon} />}>
|
||||
<Menu.SubMenu
|
||||
key={menu.id}
|
||||
title={menu.meta.title}
|
||||
icon={menu.meta.icon && <AntIcon type={menu.meta.icon} />}
|
||||
>
|
||||
{this.renderMenu(menu.children)}
|
||||
</Menu.SubMenu>
|
||||
)
|
||||
}
|
||||
|
||||
renderMenuItem = (menu) => {
|
||||
renderMenuItem = menu => {
|
||||
return (
|
||||
<Menu.Item key={menu.id} onClick={() => this.onOpenContentWindow(menu)}>
|
||||
{menu.meta.icon && <AntIcon type={menu.meta.icon} />}
|
||||
@@ -46,12 +49,26 @@ export default class index extends Component {
|
||||
)
|
||||
}
|
||||
|
||||
onOpenContentWindow = (menu) => {
|
||||
onOpenContentWindow = menu => {
|
||||
const { id, meta, component, link, redirect, openType } = menu
|
||||
|
||||
window.openContentWindow({
|
||||
key: menu.id,
|
||||
title: menu.meta.title,
|
||||
icon: menu.meta.icon,
|
||||
path: menu.component
|
||||
key: id,
|
||||
title: meta.title,
|
||||
icon: meta.icon,
|
||||
path: (() => {
|
||||
switch (openType) {
|
||||
case 1:
|
||||
return component
|
||||
case 2:
|
||||
return link
|
||||
case 3:
|
||||
return redirect
|
||||
default:
|
||||
return null
|
||||
}
|
||||
})(),
|
||||
openType,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -60,12 +77,11 @@ export default class index extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const props = {
|
||||
mode: 'inline',
|
||||
selectable: false,
|
||||
style: this.props.menuStyle,
|
||||
theme: 'light'
|
||||
theme: 'light',
|
||||
}
|
||||
|
||||
const on = {
|
||||
@@ -74,16 +90,20 @@ export default class index extends Component {
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
this.state.nav.map((item, i) => {
|
||||
{this.state.nav.map((item, i) => {
|
||||
if (item.menu.length) {
|
||||
return (
|
||||
<section key={i}>
|
||||
<div className="yo-sider-nav--app">{item.app.name}</div>
|
||||
<Menu {...props} {...on}>{this.renderMenu(item.menu)}</Menu>
|
||||
<Menu {...props} {...on}>
|
||||
{this.renderMenu(item.menu)}
|
||||
</Menu>
|
||||
</section>
|
||||
)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import React, { Component } from 'react'
|
||||
import { Spin, Layout } from 'antd'
|
||||
import { LoadingOutlined } from '@ant-design/icons'
|
||||
import { api } from 'common/api'
|
||||
import { cloneDeep, groupBy, findIndex, last } from 'lodash'
|
||||
import store from 'store'
|
||||
import { EMPTY_ID } from 'util/global'
|
||||
import { EMPTY_ID, SIDER_BREAK_POINT } from 'util/global'
|
||||
|
||||
import Header from './_layout/header'
|
||||
import Sider from './_layout/sider'
|
||||
@@ -83,6 +82,9 @@ export default class index extends Component {
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
window.addEventListener('resize', this.onResizeSider)
|
||||
this.onResizeSider()
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -103,7 +105,31 @@ export default class index extends Component {
|
||||
return
|
||||
}
|
||||
|
||||
const path = settings.path.startsWith('/') ? settings.path : `/${settings.path}`
|
||||
let path = (p => {
|
||||
if (p.startsWith('http')) return p
|
||||
if (p.startsWith('/')) return p
|
||||
else return `/${p}`
|
||||
})(settings.path)
|
||||
|
||||
if ([2, 3].includes(settings.openType)) {
|
||||
const param = (p => {
|
||||
const arr = []
|
||||
if (p && p.constructor === Object) {
|
||||
Object.keys(p).forEach(key => {
|
||||
arr.push(`${key}=${(p[key] || '').toString()}`)
|
||||
})
|
||||
}
|
||||
return arr.join('&')
|
||||
})(settings.param)
|
||||
|
||||
path += param ? `?${param}` : ''
|
||||
|
||||
if (settings.openType === 3) {
|
||||
// 打开新的浏览器窗口
|
||||
window.open(path)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 向标签页队列中添加一个新的标签页
|
||||
@@ -118,7 +144,9 @@ export default class index extends Component {
|
||||
path,
|
||||
param: settings.param,
|
||||
loaded: false,
|
||||
openType: settings.openType || 1,
|
||||
}
|
||||
|
||||
this.setState({
|
||||
panes: [...this.state.panes, newPane],
|
||||
})
|
||||
@@ -231,6 +259,13 @@ export default class index extends Component {
|
||||
})
|
||||
}
|
||||
|
||||
onResizeSider = () => {
|
||||
dispatch({
|
||||
type: 'AUTO_TOGGLE_COLLAPSED',
|
||||
siderCollapsed: window.innerWidth <= SIDER_BREAK_POINT,
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const { loading, panes, actived } = this.state
|
||||
|
||||
|
||||
Reference in New Issue
Block a user