From ea34e669b45f86793017621a0dc3f9a71aa3276b Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 23 二月 2021 18:23:26 +0800 Subject: [PATCH] 2021-02-23 --- src/components/tabview/index.jsx | 142 ++++++++++++++++++++++++----------------------- 1 files changed, 72 insertions(+), 70 deletions(-) diff --git a/src/components/tabview/index.jsx b/src/components/tabview/index.jsx index 386daec..ce5a0e8 100644 --- a/src/components/tabview/index.jsx +++ b/src/components/tabview/index.jsx @@ -2,16 +2,17 @@ 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' @@ -32,19 +33,20 @@ 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) => { @@ -55,8 +57,15 @@ 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) @@ -66,11 +75,7 @@ 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) => { @@ -87,8 +92,26 @@ 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) @@ -117,37 +140,10 @@ } 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) => { - // 绐楀彛鍦╥frame涓庢櫘閫氶〉闈㈠垏鎹㈡椂锛屼慨鏀瑰乏渚ц彍鍗曟爮鏍峰紡 - 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 () { @@ -162,20 +158,42 @@ } 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] + + // 绐楀彛鍦╥frame涓庢櫘閫氶〉闈㈠垏鎹㈡椂锛屼慨鏀瑰乏渚ц彍鍗曟爮鏍峰紡 + 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 @@ -195,25 +213,19 @@ } 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> @@ -225,15 +237,6 @@ 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"> @@ -241,6 +244,7 @@ </div> </div> </BackTop> + {options.sysType === 'local' && window.GLOB.systemType !== 'production' ? <div className="mk-water-mark">娴嬭瘯绯荤粺</div> : null} </Tabs.TabPane> ) })} @@ -254,7 +258,6 @@ const mapStateToProps = (state) => { return { - menuType: state.editLevel, tabviews: state.tabviews, collapse: state.collapse, isiframe: state.isiframe @@ -264,9 +267,8 @@ 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) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(TabViews) \ No newline at end of file -- Gitblit v1.8.0