From 1b89aa4493d1c9768447f2f480d594cdb8077fdc Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 26 十月 2020 09:24:19 +0800 Subject: [PATCH] 2020-10-26 --- src/components/tabview/index.jsx | 137 ++++++++++++++++++++++++--------------------- 1 files changed, 72 insertions(+), 65 deletions(-) diff --git a/src/components/tabview/index.jsx b/src/components/tabview/index.jsx index 2637efe..83ef4ff 100644 --- a/src/components/tabview/index.jsx +++ b/src/components/tabview/index.jsx @@ -2,38 +2,39 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import {Tabs, Icon, Button, ConfigProvider, message, BackTop} from 'antd' -import enUS from 'antd/es/locale/en_US' -import zhCN from 'antd/es/locale/zh_CN' +import {Tabs, Icon, Button, message, BackTop} from 'antd' 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 options from '@/store/options.js' 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 CustomPage = asyncComponent(() => import('@/tabviews/custom')) const CommonTable = asyncComponent(() => import('@/tabviews/commontable')) +const CalendarPage = asyncComponent(() => import('@/tabviews/calendar')) +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 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 service = window.GLOB.service ? (/\/$/.test(window.GLOB.service) ? window.GLOB.service : window.GLOB.service + '/') : '' +let service = '' if (process.env.NODE_ENV === 'production') { - service = document.location.origin + '/' + service + 'zh-CN/' + service = document.location.origin + '/' + window.GLOB.service + 'zh-CN/' } else { - service = 'http://qingqiumarket.cn/' + service + 'zh-CN/' + service = window.GLOB.location + window.GLOB.service + 'zh-CN/' } class Header extends Component { @@ -45,14 +46,13 @@ state = { tabviews: null, // 鏍囩闆� iFrameHeight: 0, - dict: (!sessionStorage.getItem('lang') || sessionStorage.getItem('lang') === 'zh-CN') ? mzhCN : menUS, - locale: (!sessionStorage.getItem('lang') || sessionStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS + dict: localStorage.getItem('lang') !== 'en-US' ? mzhCN : menUS } handleTabview = (e, menu) => { e.stopPropagation() // 鍏抽棴tab椤碉紝閲嶆柊閫夋嫨鏄剧ず椤� - let tabs = JSON.parse(JSON.stringify(this.state.tabviews)) + let tabs = fromJS(this.state.tabviews).toJS() tabs = tabs.filter(tab => { return tab.MenuID !== menu.MenuID }) @@ -78,7 +78,7 @@ changeTab = (e, menu) => { e.stopPropagation() // 绐楀彛鍒囨崲 - let tabs = JSON.parse(JSON.stringify(this.state.tabviews)) + let tabs = fromJS(this.state.tabviews).toJS() tabs = tabs.map(tab => { tab.selected = false @@ -100,16 +100,20 @@ // 鏍规嵁tab椤典腑鑿滃崟淇℃伅锛岄�夋嫨鎵�闇�鐨勭粍浠� if (view.type === 'Home') { return (<Home MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) - } else if (view.type === 'CommonTable') { + } 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 === 'ManageTable') { - return (<ManageTable MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) } else if (view.type === 'DataManage') { return (<DataManage MenuNo={view.MenuNo} MenuID={view.MenuID} MenuName={view.MenuName} key={view.MenuID}/>) } else if (view.type === 'RolePermission') { @@ -165,14 +169,9 @@ componentDidMount () { let home = { - MenuID: '1576117946681plembmkk9akkv8sn0vtdfdsfaf', + MenuID: 'home_page_id', MenuName: '棣栭〉', - MenuNo: 'MESOrderDetailMwe', - PageParam: {}, - id: 1, selected: true, - src: '', - text: '棣栭〉', type: 'Home' } this.props.modifyTabview([home]) @@ -192,7 +191,17 @@ } } + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 + */ + componentWillUnmount () { + this.setState = () => { + return + } + } + render () { + const { menuType } = this.props const { tabviews } = this.state let view = tabviews.filter(tab => tab.selected)[0] this.resetWindow(view) @@ -200,53 +209,50 @@ return ( <section className={'flex-container content-box' + (this.props.collapse ? ' collapsed' : '')}> - <ConfigProvider locale={this.state.locale}> - <div className="content-header"> - {tabviews && tabviews.length > 0 && - <Tabs activeKey={selectedTabId}> - {tabviews.map(view => { - return ( - <Tabs.TabPane - 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 - } + <div className="content-header"> + {tabviews && tabviews.length > 0 && + <Tabs activeKey={selectedTabId}> + {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 + } + <span className="tab-name" onClick={(e) => {this.changeTab(e, view)}}> + {view.MenuName} </span> - } - key={view.MenuID} - > - {this.selectcomponent(view)} - {view.type !== 'CommonTable' && view.type !== 'ManageTable' ? - <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 className="ant-back-top-icon"></div> - </div> + {view.type !== 'Home' ? + <Icon type="close" onClick={(e) => {this.handleTabview(e, view)}}/> : null + } + </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 className="ant-back-top-icon"></div> </div> - </BackTop> - </Tabs.TabPane> - ) - })} - </Tabs> - } - </div> - </ConfigProvider> + </div> + </BackTop> + </Tabs.TabPane> + ) + })} + </Tabs> + } + </div> </section> ) } @@ -254,6 +260,7 @@ const mapStateToProps = (state) => { return { + menuType: state.editLevel, tabviews: state.tabviews, collapse: state.collapse, isiframe: state.isiframe -- Gitblit v1.8.0