| | |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import {Tabs, Icon, Button, message, BackTop} from 'antd' |
| | | import {Tabs, Icon, BackTop} from 'antd' |
| | | import moment from 'moment' |
| | | import 'moment/locale/zh-cn' |
| | | |
| | | import {modifyTabview, toggleIsiframe, refreshTabView} from '@/store/action' |
| | | import { modifyTabview, toggleIsiframe } from '@/store/action' |
| | | import asyncComponent from '@/utils/asyncLoadComponent' |
| | | import NotFount from '@/components/404' |
| | | import options from '@/store/options.js' |
| | | import mzhCN from '@/locales/zh-CN/main.js' |
| | | import menUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | |
| | | import './index.scss' |
| | | |
| | |
| | | if (process.env.NODE_ENV === 'production') { |
| | | service = document.location.origin + '/' + window.GLOB.service + 'zh-CN/' |
| | | } else { |
| | | service = window.GLOB.location + window.GLOB.service + 'zh-CN/' |
| | | service = window.GLOB.location + '/' + window.GLOB.service + 'zh-CN/' |
| | | } |
| | | |
| | | class Header extends Component { |
| | | class TabViews extends Component { |
| | | static propTpyes = { |
| | | collapse: PropTypes.bool, |
| | | tabviews: PropTypes.array // 标签页数组 |
| | | } |
| | | |
| | | state = { |
| | | activeId: '', |
| | | tabviews: null, // 标签集 |
| | | iFrameHeight: 0, |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? mzhCN : menUS |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? mzhCN : menUS, |
| | | } |
| | | |
| | | handleTabview = (e, menu) => { |
| | |
| | | return tab.MenuID !== menu.MenuID |
| | | }) |
| | | |
| | | if (menu.selected) { |
| | | tabs[0] && (tabs[0].selected = true) |
| | | if (menu.selected && tabs[0]) { |
| | | tabs[0].selected = true |
| | | this.setState({ |
| | | activeId: tabs[0].MenuID || '' |
| | | }) |
| | | |
| | | if (this.props.isiframe) { |
| | | this.props.toggleIsiframe(false) |
| | | } |
| | | } |
| | | |
| | | this.props.modifyTabview(tabs) |
| | |
| | | e.stopPropagation() |
| | | window.GLOB.CacheMap = new Map() |
| | | |
| | | let _menu = { |
| | | MenuID: menu.MenuID, |
| | | position: 'view' |
| | | } |
| | | this.props.refreshTabView(_menu) |
| | | MKEmitter.emit('reloadMenuView', menu.MenuID) |
| | | } |
| | | |
| | | changeTab = (e, menu) => { |
| | |
| | | return tab |
| | | }) |
| | | |
| | | if (menu) { |
| | | let _isiframe = this.props.isiframe |
| | | if (menu.type === 'iframe') { |
| | | _isiframe = true |
| | | } else { |
| | | _isiframe = false |
| | | } |
| | | |
| | | if (_isiframe !== this.props.isiframe) { |
| | | this.props.toggleIsiframe(_isiframe) |
| | | } |
| | | } |
| | | |
| | | this.setState({ |
| | | tabviews: tabs |
| | | tabviews: tabs, |
| | | activeId: menu.MenuID || '' |
| | | }, () => { |
| | | if (menu.MenuID) { |
| | | MKEmitter.emit('resetActiveMenu', menu.MenuID) |
| | | } |
| | | }) |
| | | |
| | | this.props.modifyTabview(tabs) |
| | |
| | | } else if (view.type === 'FormTab') { |
| | | return (<FormTab MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) |
| | | } else if (view.type === 'iframe') { |
| | | return (<Iframe key={view.MenuID} title={view.MenuName} MenuName={view.MenuName} url={service + view.LinkUrl}/>) |
| | | return (<Iframe key={view.MenuID} MenuID={view.MenuID} MenuNo={view.MenuNo} title={view.MenuName} MenuName={view.MenuName} url={service + view.LinkUrl}/>) |
| | | } else { |
| | | return (<NotFount key={view.MenuID} />) |
| | | } |
| | | } |
| | | |
| | | resetWindow = (view) => { |
| | | // 窗口在iframe与普通页面切换时,修改左侧菜单栏样式 |
| | | if (!view) return |
| | | let _isiframe = this.props.isiframe |
| | | if (view && view.type === 'iframe') { |
| | | _isiframe = true |
| | | } else { |
| | | _isiframe = false |
| | | } |
| | | |
| | | if (_isiframe !== this.props.isiframe) { |
| | | this.props.toggleIsiframe(_isiframe) |
| | | } |
| | | } |
| | | |
| | | copyMenuNo = (e) => { |
| | | e.stopPropagation() |
| | | let oInput = document.createElement('input') |
| | | oInput.value = e.target.dataset.menuno || '' |
| | | document.body.appendChild(oInput) |
| | | oInput.select() |
| | | document.execCommand('Copy') |
| | | oInput.className = 'oInput' |
| | | oInput.style.display = 'none' |
| | | message.success(this.state.dict['main.copy.success']) |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | |
| | | } |
| | | |
| | | componentDidMount () { |
| | | let home = { |
| | | MenuID: 'home_page_id', |
| | | MenuName: '首页', |
| | | selected: true, |
| | | type: 'Home' |
| | | if (sessionStorage.getItem('isEditState') !== 'true') { |
| | | let home = { |
| | | MenuID: 'home_page_id', |
| | | MenuName: this.state.dict['main.homepage'], |
| | | selected: true, |
| | | type: 'Home' |
| | | } |
| | | this.props.modifyTabview([home]) |
| | | } |
| | | this.props.modifyTabview([home]) |
| | | } |
| | | |
| | | UNSAFE_componentWillReceiveProps (nextProps) { |
| | | if (nextProps.tabviews && !is(fromJS(this.state.tabviews), fromJS(nextProps.tabviews))) { |
| | | let view = nextProps.tabviews.filter(tab => tab.selected)[0] |
| | | |
| | | // 窗口在iframe与普通页面切换时,修改左侧菜单栏样式 |
| | | let activeId = '' |
| | | if (view) { |
| | | let _isiframe = this.props.isiframe |
| | | if (view.type === 'iframe') { |
| | | _isiframe = true |
| | | } else { |
| | | _isiframe = false |
| | | } |
| | | |
| | | if (_isiframe !== this.props.isiframe) { |
| | | this.props.toggleIsiframe(_isiframe) |
| | | } |
| | | |
| | | activeId = view.MenuID |
| | | } |
| | | |
| | | // 保存修改标签集 |
| | | this.setState({ |
| | | tabviews: nextProps.tabviews |
| | | tabviews: nextProps.tabviews, |
| | | activeId |
| | | }) |
| | | |
| | | let node = document.getElementById('root').parentNode.parentNode |
| | |
| | | } |
| | | |
| | | render () { |
| | | const { menuType } = this.props |
| | | const { tabviews } = this.state |
| | | let view = tabviews.filter(tab => tab.selected)[0] |
| | | this.resetWindow(view) |
| | | let selectedTabId = view ? view.MenuID : '' |
| | | const { tabviews, activeId } = this.state |
| | | |
| | | return ( |
| | | <section className={'flex-container content-box' + (this.props.collapse ? ' collapsed' : '')}> |
| | | <section id="mk-tabview-wrap" className={'mk-tabview-wrap' + (this.props.collapse ? ' collapsed' : '')}> |
| | | <div className="content-header"> |
| | | {tabviews && tabviews.length > 0 && |
| | | <Tabs activeKey={selectedTabId}> |
| | | <Tabs activeKey={activeId}> |
| | | {tabviews.map(view => { |
| | | return ( |
| | | <Tabs.TabPane |
| | | tab={ |
| | | <span className="tab-control"> |
| | | {['CommonTable', 'FormTab', 'TreePage', 'CalendarPage', 'CustomPage'].includes(view.type) ? |
| | | <Icon type="redo" onClick={(e) => {this.refreshTabview(e, view)}}/> : null |
| | | } |
| | | <Icon type="redo" onClick={(e) => {this.refreshTabview(e, view)}}/> |
| | | <span className="tab-name" onClick={(e) => {this.changeTab(e, view)}}> |
| | | {view.MenuName} |
| | | </span> |
| | |
| | | key={view.MenuID} |
| | | > |
| | | {this.selectcomponent(view)} |
| | | {options.sysType !== 'cloud' && menuType !== 'HS' && !['CommonTable', 'TreePage', 'ManageTable', 'CalendarPage', 'Home'].includes(view.type) ? |
| | | <Button |
| | | icon="copy" |
| | | shape="circle" |
| | | className={'main-copy ' + (view.type === 'iframe' ? 'ifr-copy' : '')} |
| | | data-menuno={view.MenuNo} |
| | | onClick={this.copyMenuNo} |
| | | /> : null |
| | | } |
| | | <BackTop> |
| | | <div className="ant-back-top"> |
| | | <div className="ant-back-top-content"> |
| | |
| | | </div> |
| | | </div> |
| | | </BackTop> |
| | | {options.sysType === 'local' && window.GLOB.systemType !== 'production' ? <div className="mk-water-mark">测试系统</div> : null} |
| | | </Tabs.TabPane> |
| | | ) |
| | | })} |
| | |
| | | |
| | | const mapStateToProps = (state) => { |
| | | return { |
| | | menuType: state.editLevel, |
| | | tabviews: state.tabviews, |
| | | collapse: state.collapse, |
| | | isiframe: state.isiframe |
| | |
| | | const mapDispatchToProps = (dispatch) => { |
| | | return { |
| | | modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)), |
| | | refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab)), |
| | | toggleIsiframe: (isiframe) => dispatch(toggleIsiframe(isiframe)) |
| | | } |
| | | } |
| | | |
| | | export default connect(mapStateToProps, mapDispatchToProps)(Header) |
| | | export default connect(mapStateToProps, mapDispatchToProps)(TabViews) |