| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import {connect} from 'react-redux' |
| | | import { is, fromJS } from 'immutable' |
| | | import {Tabs, Icon, BackTop} from 'antd' |
| | | import { fromJS } from 'immutable' |
| | | import { Tabs, BackTop, notification, Modal } from 'antd' |
| | | import { RedoOutlined, CloseOutlined, LoadingOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | import 'moment/locale/zh-cn' |
| | | |
| | | import { modifyTabview, toggleIsiframe } from '@/store/action' |
| | | import asyncComponent from '@/utils/asyncLoadComponent' |
| | | import NotFount from '@/components/404' |
| | | import mzhCN from '@/locales/zh-CN/main.js' |
| | | import menUS from '@/locales/en-US/main.js' |
| | | import MKEmitter from '@/utils/events.js' |
| | | |
| | | import Api from '@/api' |
| | | import './index.scss' |
| | | |
| | | const Home = asyncComponent(() => import('@/tabviews/home')) |
| | | const CustomPage = asyncComponent(() => import('@/tabviews/custom')) |
| | | const CommonTable = asyncComponent(() => import('@/tabviews/commontable')) |
| | | const CalendarPage = asyncComponent(() => import('@/tabviews/calendar')) |
| | | const BaseTable = asyncComponent(() => import('@/tabviews/basetable')) |
| | | const TreePage = asyncComponent(() => import('@/tabviews/treepage')) |
| | | const VerupTable = asyncComponent(() => import('@/tabviews/verupmanage')) |
| | | const ScriptTable = asyncComponent(() => import('@/tabviews/scriptmanage')) |
| | | const TabManage = asyncComponent(() => import('@/tabviews/tabmanage')) |
| | | const Iframe = asyncComponent(() => import('@/tabviews/iframe')) |
| | | const RoleManage = asyncComponent(() => import('@/tabviews/rolemanage')) |
| | | const FormTab = asyncComponent(() => import('@/tabviews/formtab')) |
| | | |
| | | let service = '' |
| | | moment.locale('zh-cn') |
| | | |
| | | 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/' |
| | | } |
| | | |
| | | class Header extends Component { |
| | | static propTpyes = { |
| | | collapse: PropTypes.bool, |
| | | tabviews: PropTypes.array // 标签页数组 |
| | | } |
| | | |
| | | class TabViews extends Component { |
| | | state = { |
| | | activeId: '', |
| | | tabviews: null, // 标签集 |
| | | iFrameHeight: 0, |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? mzhCN : menUS, |
| | | tabviews: [], |
| | | visible: false |
| | | } |
| | | |
| | | handleTabview = (e, menu) => { |
| | | e.stopPropagation() |
| | | // 关闭tab页,重新选择显示页 |
| | | let tabs = fromJS(this.state.tabviews).toJS() |
| | | tabs = tabs.filter(tab => { |
| | | return tab.MenuID !== menu.MenuID |
| | | }) |
| | | |
| | | 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) |
| | | } |
| | | |
| | | refreshTabview = (e, menu) => { |
| | | e.stopPropagation() |
| | | window.GLOB.CacheMap = new Map() |
| | | |
| | | MKEmitter.emit('reloadMenuView', menu.MenuID) |
| | | } |
| | | |
| | | changeTab = (e, menu) => { |
| | | e.stopPropagation() |
| | | // 窗口切换 |
| | | let tabs = fromJS(this.state.tabviews).toJS() |
| | | tabs = tabs.map(tab => { |
| | | tab.selected = false |
| | | |
| | | if (tab.MenuID === menu.MenuID) { |
| | | tab.selected = true |
| | | } |
| | | |
| | | 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, |
| | | activeId: menu.MenuID || '' |
| | | }, () => { |
| | | if (menu.MenuID) { |
| | | MKEmitter.emit('resetActiveMenu', menu.MenuID) |
| | | } |
| | | }) |
| | | |
| | | this.props.modifyTabview(tabs) |
| | | } |
| | | |
| | | selectcomponent = (view) => { |
| | | // 根据tab页中菜单信息,选择所需的组件 |
| | | if (view.type === 'Home') { |
| | | return (<Home MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) |
| | | } else if (view.type === 'CommonTable' || view.type === 'ManageTable') { |
| | | return (<CommonTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) |
| | | } else if (view.type === 'CustomPage') { |
| | | return (<CustomPage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) |
| | | } else if (view.type === 'TreePage') { |
| | | return (<TreePage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) |
| | | } else if (view.type === 'CalendarPage') { |
| | | return (<CalendarPage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) |
| | | } else if (view.type === 'VerupTable') { |
| | | return (<VerupTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) |
| | | } else if (view.type === 'ScriptTable') { |
| | | return (<ScriptTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) |
| | | } else if (view.type === 'TabManage') { |
| | | return (<TabManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) |
| | | } else if (view.type === 'RolePermission') { |
| | | return (<RoleManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) |
| | | } 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} MenuID={view.MenuID} MenuNo={view.MenuNo} title={view.MenuName} MenuName={view.MenuName} url={service + view.LinkUrl}/>) |
| | | } else { |
| | | return (<NotFount key={view.MenuID} />) |
| | | } |
| | | } |
| | | reloading = false |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | if (!sessionStorage.getItem('lang') || sessionStorage.getItem('lang') === 'zh-CN') { |
| | | moment.locale('zh-cn') |
| | | } else { |
| | | moment.locale('en') |
| | | if (!window.GLOB.mkHS) { |
| | | this.setState({ |
| | | activeId: 'home_page_id', |
| | | tabviews: [{ |
| | | MenuID: 'home_page_id', |
| | | MenuName: '首页', |
| | | type: 'Home' |
| | | }] |
| | | }) |
| | | } |
| | | this.setState({ |
| | | tabviews: this.props.tabviews |
| | | }) |
| | | } |
| | | |
| | | componentDidMount () { |
| | | 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]) |
| | | } |
| | | } |
| | | MKEmitter.addListener('modifyTabs', this.modifyTabs) |
| | | MKEmitter.addListener('closeTabView', this.closeTabView) |
| | | |
| | | 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, |
| | | activeId |
| | | }) |
| | | |
| | | let node = document.getElementById('root').parentNode.parentNode |
| | | if (node) { |
| | | node.scrollTop = 0 |
| | | } |
| | | if (window.GLOB.forcedUpdate) { |
| | | MKEmitter.addListener('reloadTabs', this.reloadTabs) |
| | | } |
| | | } |
| | | |
| | |
| | | this.setState = () => { |
| | | return |
| | | } |
| | | MKEmitter.removeListener('modifyTabs', this.modifyTabs) |
| | | MKEmitter.removeListener('reloadTabs', this.reloadTabs) |
| | | MKEmitter.removeListener('closeTabView', this.closeTabView) |
| | | } |
| | | |
| | | // 关闭tab页,重新选择显示页 |
| | | closeTabView = (id) => { |
| | | let tabs = fromJS(this.state.tabviews).toJS() |
| | | let index = -1 |
| | | |
| | | tabs = tabs.filter((tab, i) => { |
| | | if (tab.MenuID === id) { |
| | | index = i |
| | | return false |
| | | } else { |
| | | return true |
| | | } |
| | | }) |
| | | |
| | | if (index > -1) { |
| | | let activeId = '' |
| | | if (id !== this.state.activeId) { |
| | | activeId = this.state.activeId |
| | | } else if (index > 0) { |
| | | activeId = tabs[index - 1].MenuID || '' |
| | | } else if (tabs[index]) { |
| | | activeId = tabs[index].MenuID || '' |
| | | } |
| | | |
| | | this.setState({ |
| | | activeId, |
| | | tabviews: tabs |
| | | }) |
| | | |
| | | let node = document.getElementById('root').parentNode.parentNode |
| | | if (node) { |
| | | node.scrollTop = 0 |
| | | } |
| | | } |
| | | } |
| | | |
| | | refreshTabview = (e, menu) => { |
| | | e.stopPropagation() |
| | | window.GLOB.CacheMap = new Map() |
| | | |
| | | if (window.GLOB.sysType === 'local' && window.GLOB.systemType !== 'production') { |
| | | let roledefer = new Promise(resolve => { |
| | | Api.getSystemConfig({ |
| | | func: 's_Get_TrdMenu_Role', |
| | | edition_type: 'A', |
| | | pro_sys: '' |
| | | }).then(result => { |
| | | if (!result) return |
| | | if (!result.status) { |
| | | notification.error({ |
| | | top: 92, |
| | | message: result.message, |
| | | duration: 10 |
| | | }) |
| | | } else { |
| | | let _permAction = {loaded: true} // 按钮权限 |
| | | |
| | | if (result.UserRoles_Menu) { |
| | | result.UserRoles_Menu.forEach(menu => { |
| | | if (!menu.MenuID) return |
| | | _permAction[menu.MenuID] = true |
| | | }) |
| | | } |
| | | |
| | | window.GLOB.mkActions = _permAction |
| | | } |
| | | |
| | | resolve() |
| | | }) |
| | | }) |
| | | |
| | | // 获取主菜单参数 |
| | | let menudefer = new Promise(resolve => { |
| | | Api.getAppVersion(menu.MenuID).then(() => { |
| | | resolve() |
| | | }, () => { |
| | | resolve() |
| | | }) |
| | | }) |
| | | |
| | | Promise.all([roledefer, menudefer]).then(() => { |
| | | MKEmitter.emit('reloadMenuView', menu.MenuID) |
| | | }) |
| | | } else { |
| | | MKEmitter.emit('reloadMenuView', menu.MenuID) |
| | | } |
| | | } |
| | | |
| | | reloadTabs = () => { |
| | | if (this.reloading) return |
| | | |
| | | this.reloading = true |
| | | let time = new Date().getTime() |
| | | |
| | | this.setState({visible: true}) |
| | | |
| | | Api.getAppVersion(true).then((list) => { |
| | | let _time = new Date().getTime() |
| | | let delay = _time - time |
| | | delay = delay < 3000 ? 3000 - delay : 0 |
| | | |
| | | setTimeout(() => { |
| | | this.setState({visible: false}) |
| | | this.reloading = false |
| | | |
| | | Modal.success({ |
| | | title: '更新成功。', |
| | | }) |
| | | |
| | | if (list && list.length) { |
| | | let _tabIds = this.state.tabviews.map(item => item.MenuID) |
| | | list.forEach((m, i) => { |
| | | if (_tabIds.includes(m)) { |
| | | setTimeout(() => { |
| | | MKEmitter.emit('reloadMenuView', m) |
| | | }, i * 20) |
| | | } |
| | | }) |
| | | } |
| | | }, delay) |
| | | }, (message) => { |
| | | let _time = new Date().getTime() |
| | | let delay = _time - time |
| | | delay = delay < 3000 ? 3000 - delay : 0 |
| | | |
| | | setTimeout(() => { |
| | | this.setState({visible: false}) |
| | | this.reloading = false |
| | | Modal.error({ |
| | | title: message || '系统配置更新失败!', |
| | | }) |
| | | }, delay) |
| | | }) |
| | | } |
| | | |
| | | modifyTabs = (tab, fixed) => { |
| | | const { tabviews, activeId } = this.state |
| | | |
| | | if (fixed) { |
| | | let _tabs = tabviews.filter(item => item.MenuID !== tab.MenuID) |
| | | let index = _tabs.findIndex(item => item.MenuID === activeId) |
| | | |
| | | this.setState({ |
| | | tabviews: _tabs |
| | | }, () => { |
| | | if (index > -1) { |
| | | _tabs.splice(index + 1, 0, tab) |
| | | } else { |
| | | _tabs.push(tab) |
| | | } |
| | | this.setState({ |
| | | tabviews: _tabs, |
| | | activeId: tab.MenuID |
| | | }) |
| | | }) |
| | | } else { |
| | | if (tabviews.findIndex(item => item.MenuID === tab.MenuID) > -1) { |
| | | let _tabs = tabviews.filter(item => item.MenuID !== tab.MenuID) |
| | | this.setState({ |
| | | tabviews: _tabs |
| | | }, () => { |
| | | this.setState({ |
| | | tabviews: [..._tabs, tab], |
| | | activeId: tab.MenuID |
| | | }) |
| | | }) |
| | | } else { |
| | | this.setState({ |
| | | tabviews: [...tabviews, tab], |
| | | activeId: tab.MenuID |
| | | }) |
| | | } |
| | | } |
| | | |
| | | let node = document.getElementById('root').parentNode.parentNode |
| | | if (node) { |
| | | node.scrollTop = 0 |
| | | } |
| | | } |
| | | |
| | | changeTab = (e, menu) => { |
| | | e.stopPropagation() |
| | | // 窗口切换 |
| | | |
| | | this.setState({ |
| | | activeId: menu.MenuID || '' |
| | | }, () => { |
| | | MKEmitter.emit('resetActiveMenu', menu.MenuID || '') |
| | | }) |
| | | } |
| | | |
| | | changeTemp = (MenuID, Template) => { |
| | | let tabs = fromJS(this.state.tabviews).toJS() |
| | | |
| | | this.setState({ |
| | | tabviews: tabs.map(item => { |
| | | if (item.MenuID === MenuID) { |
| | | item.type = Template |
| | | } |
| | | return item |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | selectcomponent = (view) => { |
| | | // 根据tab页中菜单信息,选择所需的组件 |
| | | if (view.type === 'Home') { |
| | | return (<Home MenuID={view.MenuID} MenuName={view.MenuName}/>) |
| | | } else if (view.type === 'BaseTable') { |
| | | return (<BaseTable MenuID={view.MenuID} MenuName={view.MenuName} param={view.param} changeTemp={this.changeTemp}/>) |
| | | } else if (view.type === 'CustomPage') { |
| | | return (<CustomPage MenuID={view.MenuID} MenuName={view.MenuName} param={view.param} changeTemp={this.changeTemp}/>) |
| | | } else if (view.type === 'CommonTable') { |
| | | return (<CommonTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} param={view.param} changeTemp={this.changeTemp}/>) |
| | | } else if (view.type === 'TreePage') { |
| | | return (<TreePage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} param={view.param}/>) |
| | | } else if (view.type === 'RolePermission') { |
| | | return (<RoleManage MenuID={view.MenuID}/>) |
| | | } else if (view.type === 'iframe') { |
| | | return (<Iframe MenuID={view.MenuID} title={view.MenuName} url={view.src}/>) |
| | | } else { |
| | | return (<NotFount />) |
| | | } |
| | | } |
| | | |
| | | render () { |
| | | const { tabviews, activeId } = this.state |
| | | const { tabviews, activeId, visible } = this.state |
| | | |
| | | return ( |
| | | <section id="mk-tabview-wrap" className={'mk-tabview-wrap' + (this.props.collapse ? ' collapsed' : '')}> |
| | | <section id="mk-tabgroup-wrap" className="mk-tabview-wrap"> |
| | | <div className="content-header"> |
| | | {tabviews && tabviews.length > 0 && |
| | | {tabviews.length > 0 && |
| | | <Tabs activeKey={activeId}> |
| | | {tabviews.map(view => { |
| | | return ( |
| | | <Tabs.TabPane |
| | | tab={ |
| | | <span className="tab-control"> |
| | | <Icon type="redo" onClick={(e) => {this.refreshTabview(e, view)}}/> |
| | | <RedoOutlined onClick={(e) => {this.refreshTabview(e, view)}}/> |
| | | <span className="tab-name" onClick={(e) => {this.changeTab(e, view)}}> |
| | | {view.MenuName} |
| | | </span> |
| | | {view.type !== 'Home' ? |
| | | <Icon type="close" onClick={(e) => {this.handleTabview(e, view)}}/> : null |
| | | <CloseOutlined onClick={(e) => {e.stopPropagation();this.closeTabView(view.MenuID)}}/> : null |
| | | } |
| | | </span> |
| | | } |
| | |
| | | </Tabs> |
| | | } |
| | | </div> |
| | | <Modal |
| | | visible={visible} |
| | | width={400} |
| | | closable={false} |
| | | centered={true} |
| | | footer={null} |
| | | destroyOnClose |
| | | > |
| | | <div className="mk-menus-update"> |
| | | <div className="tip"> |
| | | 系统更新中,请稍后 |
| | | </div> |
| | | <LoadingOutlined /> |
| | | </div> |
| | | </Modal> |
| | | </section> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | const mapStateToProps = (state) => { |
| | | return { |
| | | tabviews: state.tabviews, |
| | | collapse: state.collapse, |
| | | isiframe: state.isiframe |
| | | } |
| | | } |
| | | |
| | | const mapDispatchToProps = (dispatch) => { |
| | | return { |
| | | modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)), |
| | | toggleIsiframe: (isiframe) => dispatch(toggleIsiframe(isiframe)) |
| | | } |
| | | } |
| | | |
| | | export default connect(mapStateToProps, mapDispatchToProps)(Header) |
| | | export default TabViews |