From 4c6bdfe1f3557e49a315c1564bcb6164c0bc7faa Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 03 四月 2020 18:27:22 +0800 Subject: [PATCH] 2020-04-03 --- src/components/tabview/index.jsx | 99 ++++++++++++++++++++++++++----------------------- 1 files changed, 53 insertions(+), 46 deletions(-) diff --git a/src/components/tabview/index.jsx b/src/components/tabview/index.jsx index ed5a8b2..e438c64 100644 --- a/src/components/tabview/index.jsx +++ b/src/components/tabview/index.jsx @@ -3,20 +3,30 @@ import {connect} from 'react-redux' import { is, fromJS } from 'immutable' import {Tabs, Icon, Button, ConfigProvider, message, BackTop} from 'antd' -import {modifyTabview, toggleIsiframe} from '@/store/action' -// import asyncComponent from '@/utils/asyncComponent' -import asyncComponent from '@/utils/asyncLoadComponent' -import NotFount from '@/components/404' import enUS from 'antd/es/locale/en_US' import zhCN from 'antd/es/locale/zh_CN' -import mzhCN from '@/locales/zh-CN/main.js' -import menUS from '@/locales/en-US/main.js' import moment from 'moment' import 'moment/locale/zh-cn' + +import {modifyTabview, toggleIsiframe, refreshTabView} 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 './index.scss' +const Home = asyncComponent(() => import('@/tabviews/home')) +const CommonTable = asyncComponent(() => import('@/tabviews/commontable')) +const VerupTable = asyncComponent(() => import('@/tabviews/verupmanage')) +const TabManage = asyncComponent(() => import('@/tabviews/tabmanage')) +const ManageTable = asyncComponent(() => import('@/tabviews/managetable')) +const Iframe = asyncComponent(() => import('@/tabviews/iframe')) +const DataManage = asyncComponent(() => import('@/tabviews/datamanage')) +const RoleManage = asyncComponent(() => import('@/tabviews/rolemanage')) +const TabForm = asyncComponent(() => import('@/tabviews/tabform')) +const FormTab = asyncComponent(() => import('@/tabviews/formtab')) -let Comps = {} let service = window.GLOB.service ? (/\/$/.test(window.GLOB.service) ? window.GLOB.service : window.GLOB.service + '/') : '' if (process.env.NODE_ENV === 'production') { @@ -38,7 +48,7 @@ locale: (!sessionStorage.getItem('lang') || sessionStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS } - handleTabview (e, menu) { + handleTabview = (e, menu) => { e.stopPropagation() // 鍏抽棴tab椤碉紝閲嶆柊閫夋嫨鏄剧ず椤� let tabs = JSON.parse(JSON.stringify(this.state.tabviews)) @@ -53,7 +63,18 @@ this.props.modifyTabview(tabs) } - changeTab (e, menu) { + refreshTabview = (e, menu) => { + e.stopPropagation() + window.GLOB.CacheMap = new Map() + + let _menu = { + MenuID: menu.MenuID, + position: 'view' + } + this.props.refreshTabView(_menu) + } + + changeTab = (e, menu) => { e.stopPropagation() // 绐楀彛鍒囨崲 let tabs = JSON.parse(JSON.stringify(this.state.tabviews)) @@ -74,28 +95,34 @@ this.props.modifyTabview(tabs) } - selectcomponent (view) { + selectcomponent = (view) => { // 鏍规嵁tab椤典腑鑿滃崟淇℃伅锛岄�夋嫨鎵�闇�鐨勭粍浠� if (view.type === 'Home') { - return (<Comps.Home MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) + return (<Home MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) } else if (view.type === 'CommonTable') { - return (<Comps.CommonTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) + return (<CommonTable 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 === 'TabManage') { + return (<TabManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) + } else if (view.type === 'ManageTable') { + return (<ManageTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) } else if (view.type === 'DataManage') { - return (<Comps.DataManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) + return (<DataManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) } else if (view.type === 'RolePermission') { - return (<Comps.RoleManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) + return (<RoleManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) } else if (view.type === 'TabForm') { - return (<Comps.TabForm MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) + return (<TabForm MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) } else if (view.type === 'FormTab') { - return (<Comps.FormTab MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) + return (<FormTab MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID} param={view.param}/>) } else if (view.type === 'iframe') { - return (<Comps.Iframe key={view.MenuID} title={view.MenuName} MenuName={view.MenuName} url={service + view.LinkUrl}/>) + return (<Iframe key={view.MenuID} title={view.MenuName} MenuName={view.MenuName} url={service + view.LinkUrl}/>) } else { return (<NotFount key={view.MenuID} />) } } - resetWindow (view) { + resetWindow = (view) => { // 绐楀彛鍦╥frame涓庢櫘閫氶〉闈㈠垏鎹㈡椂锛屼慨鏀瑰乏渚ц彍鍗曟爮鏍峰紡 if (!view) return let _isiframe = this.props.isiframe @@ -150,28 +177,6 @@ UNSAFE_componentWillReceiveProps (nextProps) { if (nextProps.tabviews && !is(fromJS(this.state.tabviews), fromJS(nextProps.tabviews))) { - // tab绐楀彛椤靛鍔犳垨鍒犻櫎 - if (nextProps.tabviews.length > this.state.tabviews.length) { - // 鏌ョ湅鏂皌ab椤甸渶瑕佺粍浠舵槸鍚﹀姞杞� - let MenuIDs = this.state.tabviews.map(tab => {return tab.MenuID}) - let newtab = nextProps.tabviews.filter(tab => !MenuIDs.includes(tab.MenuID))[0] - if (!Comps.Home && newtab.type === 'Home') { - Comps.Home = asyncComponent(() => import('@/tabviews/home')) - } else if (!Comps.CommonTable && newtab.type === 'CommonTable') { - Comps.CommonTable = asyncComponent(() => import('@/tabviews/commontable')) - } else if (!Comps.Iframe && newtab.type === 'iframe') { - Comps.Iframe = asyncComponent(() => import('@/tabviews/iframe')) - } else if (!Comps.DataManage && newtab.type === 'DataManage') { - Comps.DataManage = asyncComponent(() => import('@/tabviews/datamanage')) - } else if (!Comps.RoleManage && newtab.type === 'RolePermission') { - Comps.RoleManage = asyncComponent(() => import('@/tabviews/rolemanage')) - } else if (!Comps.TabForm && newtab.type === 'TabForm') { - Comps.TabForm = asyncComponent(() => import('@/tabviews/tabform')) - } else if (!Comps.TabForm && newtab.type === 'FormTab') { - Comps.FormTab = asyncComponent(() => import('@/tabviews/formtab')) - } - } - // 淇濆瓨淇敼鏍囩闆� this.setState({ tabviews: nextProps.tabviews @@ -183,10 +188,6 @@ } } } - - // shouldComponentUpdate(nextProps, nextState) { - // return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) - // } render () { const { tabviews } = this.state @@ -206,16 +207,21 @@ className="test" tab={ <span className="tab-control"> + {['CommonTable', 'FormTab'].includes(view.type) ? + <Icon type="redo" onClick={(e) => {this.refreshTabview(e, view)}}/> : null + } <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} + {view.type !== 'Home' ? + <Icon type="close" onClick={(e) => {this.handleTabview(e, view)}}/> : null + } </span> } key={view.MenuID} > {this.selectcomponent(view)} - {view.type !== 'CommonTable' ? + {view.type !== 'CommonTable' && view.type !== 'ManageTable' ? <Button icon="copy" shape="circle" @@ -254,6 +260,7 @@ const mapDispatchToProps = (dispatch) => { return { modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)), + refreshTabView: (refreshTab) => dispatch(refreshTabView(refreshTab)), toggleIsiframe: (isiframe) => dispatch(toggleIsiframe(isiframe)) } } -- Gitblit v1.8.0