From c8804ceb1fe2dea76f9949c5ea04423876ee2c81 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 28 六月 2024 14:02:47 +0800 Subject: [PATCH] 2024-06-28 --- src/components/header/index.jsx | 324 +++++++++++++++++++++++++++++++---------------------- 1 files changed, 188 insertions(+), 136 deletions(-) diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index 5ddbc2a..8cf0ff8 100644 --- a/src/components/header/index.jsx +++ b/src/components/header/index.jsx @@ -1,23 +1,16 @@ import React, {Component} from 'react' import { withRouter } from 'react-router-dom' -import PropTypes from 'prop-types' -import {connect} from 'react-redux' import { is, fromJS } from 'immutable' import { Dropdown, Menu, Modal, notification, Switch, Input } from 'antd' import { SearchOutlined, DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons' -import { - toggleCollapse, - modifyMainMenu, - logout -} from '@/store/action' import asyncSpinComponent from '@/utils/asyncSpinComponent' import asyncComponent from '@/utils/asyncComponent' import Api from '@/api' import MKEmitter from '@/utils/events.js' -import options from '@/store/options.js' import Utils from '@/utils/utils.js' import avatar from '@/assets/img/avatar.jpg' +import wxicon from '@/assets/img/wx-icon.png' import './index.scss' const { confirm } = Modal @@ -27,27 +20,87 @@ const LoginForm = asyncSpinComponent(() => import('./loginform')) class Header extends Component { - static propTpyes = { - collapse: PropTypes.bool - } state = { menulist: null, // 涓�绾ц彍鍗� userName: '', fullName: '', logourl: window.GLOB.mainlogo, + wxVisible: false, loginVisible: false, loginLoading: false, avatar: Utils.getrealurl(sessionStorage.getItem('avatar')), systems: [], searchkey: '', thdMenuList: [], - debug: sessionStorage.getItem('debug') === 'true' + debug: sessionStorage.getItem('debug') === 'true' && window.GLOB.memberLevel > 0, + collapse: sessionStorage.getItem('collapse') === 'true', + lang: sessionStorage.getItem('lang') || '', + dict: window.GLOB.dict + } + + UNSAFE_componentWillMount () { + window.GLOB.mainMenu = null + // 缁勪欢鍔犺浇鏃讹紝鑾峰彇鑿滃崟鏁版嵁 + this.getRolesMenu() + + let fullName = sessionStorage.getItem('Full_Name') || '' + let userName = sessionStorage.getItem('User_Name') || '' + + if (fullName.toLowerCase() === userName.toLowerCase()) { + userName = '' + } + + this.setState({fullName, userName}) + } + + componentDidMount () { + // 鑾峰彇绯荤粺鐨勭増鏈俊鎭紝寤舵椂鏌ヨ + setTimeout(() => { + Api.getAppVersion() + }, 1000) + + // sessionStorage 璺ㄩ〉闈㈠叡浜� + window.addEventListener('storage', (e) => { + if (e.key === 'getSessionStorage' && e.newValue === window.GLOB.appkey) { + localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)) + } else if (e.key === 'getSysPermission' && e.newValue === window.GLOB.appkey) { + localStorage.setItem('sysPermissions', JSON.stringify({mkThdMenus: this.state.thdMenuList, mkActions: window.GLOB.mkActions})) + } else if (e.key === 'menuUpdate') { + let vals = e.newValue.split(',') + let menuId = vals[1] + let position = vals[2] || '' + if (position === 'menu') { + MKEmitter.emit('reloadMenuView', menuId) + } else if (menuId) { + Api.getAppVersion(menuId).then(() => { + MKEmitter.emit('reloadMenuView', menuId) + }) + } + } + }) + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 + */ + componentWillUnmount () { + this.setState = () => { + return + } } handleCollapse = () => { - // 灞曞紑銆佹敹璧峰乏渚ц彍鍗曟爮 - this.props.toggleCollapse(!this.props.collapse) - localStorage.setItem('collapse', !this.props.collapse) + const { collapse } = this.state + + sessionStorage.setItem('collapse', !collapse) + + this.setState({collapse: !collapse}) + + MKEmitter.emit('toggleCollapse', !collapse) } changePassword = () => { @@ -55,24 +108,25 @@ MKEmitter.emit('resetpassword', () => { setTimeout(() => { sessionStorage.clear() - this.props.logout() this.props.history.replace('/login') + window.location.reload() }, 2000) }) } logout = () => { + const { dict } = this.state // 閫�鍑虹櫥褰� let _this = this confirm({ - title: '鎮ㄧ‘瀹氳閫�鍑哄悧?', + title: dict['logout_query'] || '鎮ㄧ‘瀹氳閫�鍑哄悧锛�', content: '', - okText: '纭畾', - cancelText: '鍙栨秷', + okText: dict['ok'] || '纭畾', + cancelText: dict['cancel'] || '鍙栨秷', onOk() { sessionStorage.clear() - _this.props.logout() _this.props.history.replace('/login') + window.location.reload() }, onCancel() {} }) @@ -85,13 +139,14 @@ } else if (value.OpenType === 'newtab') { MKEmitter.emit('modifyTabs', value) } else if (value.OpenType === 'menu') { - this.props.modifyMainMenu(value) + window.GLOB.mainMenu = value + MKEmitter.emit('mainMenuChange') } } getRolesMenu () { // 鑾峰彇涓昏彍鍗曞弬鏁� - let _param = {func: 's_get_pc_menus', systemType: options.sysType} + let _param = {func: 's_get_pc_menus', systemType: window.GLOB.sysType} _param.pro_sys = window.GLOB.systemType === 'production' ? 'Y' : '' Api.getSystemConfig(_param).then(result => { @@ -107,10 +162,10 @@ const { menulist, thdMenuList } = this.getMenulist(result) let systems = [] - if ((options.sysType === 'local' || options.sysType === 'SSO') && result.sys_list) { + if ((window.GLOB.sysType === 'local' || window.GLOB.sysType === 'SSO') && result.sys_list) { systems = result.sys_list - if (options.sysType === 'local' && window.GLOB.systemType !== 'production' && systems.length > 10) { + if (window.GLOB.sysType === 'local' && window.GLOB.systemType !== 'production' && systems.length > 10) { systems.length = 10 } } @@ -131,16 +186,23 @@ sessionStorage.removeItem('ThirdMenu') } - this.props.modifyMainMenu(mainMenu) + window.GLOB.mainMenu = mainMenu - window.GLOB.mkThdMenus = [...thdMenuList, {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}] + thdMenuList.forEach(item => { + window.GLOB.mkThdMenus.set(item.MenuID, item) + }) - if (_menu) { // 寤舵椂鎵撳紑锛岄槻姝㈡爣绛剧粍鏈畬鎴愬姞杞� - setTimeout(() => { - MKEmitter.emit('modifyTabs', _menu) - }, 200) + window.GLOB.mkThdMenus.set('home_page_id', {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}) + + MKEmitter.emit('mainMenuChange') + + if (_menu) { + this.openTab(_menu, 0) } - MKEmitter.emit('mkMenuLoaded') + + setTimeout(() => { + this.getwork() + }, 100) }) // 鑾峰彇瑙掕壊鏉冮檺, edition_type 鎺ュ彛鐗堟湰鎺у埗 ''銆�'Y'銆�'A' @@ -159,7 +221,7 @@ _permAction[menu.MenuID] = true }) } - } else { + } else if (!/PRIMARY KEY/ig.test(result.message)) { notification.error({ top: 92, message: result.message, @@ -167,10 +229,47 @@ }) } - MKEmitter.emit('mkActionLoaded') window.GLOB.mkActions = _permAction }) }, 50) + } + + getwork = () => { + if (sessionStorage.getItem('work_grade')) return + + let param = {func: 's_get_local_my_worker_v1'} + + if (window.GLOB.forcedUpdate) { + param.s_version_up = 'true' + } + + Api.genericInterface(param).then(result => { + sessionStorage.setItem('work_grade', result.work_grade || 0) + sessionStorage.setItem('work_group', result.work_group || '') + + if (!result.status && sessionStorage.getItem('debug') === 'true') { + notification.error({ + top: 92, + message: /s_get_local_my_worker_v1/.test(result.message) ? '鑱屽憳淇℃伅鑾峰彇澶辫触锛岃鑱旂郴绠$悊鍛樸��' : result.message, + duration: 10 + }) + } + }) + } + + openTab = (menu, times) => { + if (times > 50) return + times++ + + let tabgroup = document.getElementById('mk-tabgroup-wrap') + + if (window.GLOB.mkActions.loaded && tabgroup) { + MKEmitter.emit('modifyTabs', menu) + } else { + setTimeout(() => { + this.openTab(menu, times) + }, 200) + } } getMenulist = (result) => { @@ -242,6 +341,8 @@ trdItem.type = PageParam.Template || 'CommonTable' trdItem.OpenType = PageParam.OpenType || 'newtab' trdItem.hidden = PageParam.hidden || 'false' + trdItem.menuColor = PageParam.menuColor || '' + trdItem.urlFields = PageParam.urlFields || '' if (trdItem.type === 'NewPage') { trdItem.OpenType = 'newpage' @@ -303,10 +404,7 @@ loginVisible: true }) } else { - sessionStorage.setItem('isEditState', 'true') - - this.props.modifyMainMenu(null) - + window.GLOB.mainMenu = null this.props.history.replace('/design') } } @@ -345,15 +443,16 @@ sessionStorage.setItem('cloudDataM', res.dataM ? 'true' : '') sessionStorage.setItem('cloudRole_id', res.role_id || '') - sessionStorage.setItem('isEditState', 'true') + sessionStorage.setItem('CloudLogo', res.open_logo || '') if (param.remember) { - let _url = window.location.href.split('#')[0] + 'cloud' - - localStorage.setItem(_url, window.btoa(window.encodeURIComponent(JSON.stringify({time: new Date().getTime(), username: param.username, password: param.password})))) + localStorage.setItem(window.GLOB.sysSign + 'cloud', window.btoa(window.encodeURIComponent(JSON.stringify({time: new Date().getTime(), username: param.username, password: param.password})))) + } else { + localStorage.setItem(window.GLOB.sysSign + 'cloud', window.btoa(window.encodeURIComponent(JSON.stringify({time: new Date().getTime(), username: param.username, password: ''})))) } - this.props.modifyMainMenu(null) + window.GLOB.mainMenu = null + this.props.history.replace('/design') } else { if (res.message.indexOf('瀵嗙爜閿欒') > -1) { @@ -435,63 +534,13 @@ } }) } - - UNSAFE_componentWillMount () { - // 缁勪欢鍔犺浇鏃讹紝鑾峰彇鑿滃崟鏁版嵁 - this.getRolesMenu() - - let fullName = sessionStorage.getItem('Full_Name') || '' - let userName = sessionStorage.getItem('User_Name') || '' - - if (fullName.toLowerCase() === userName.toLowerCase()) { - userName = '' - } - - this.setState({fullName, userName}) - } - - componentDidMount () { - // 鑾峰彇绯荤粺鐨勭増鏈俊鎭紝寤舵椂鏌ヨ - setTimeout(() => { - Api.getAppVersion() - }, 1000) - - // sessionStorage 璺ㄩ〉闈㈠叡浜� - window.addEventListener('storage', (e) => { - if (e.key === 'getSessionStorage' && e.newValue === window.GLOB.appkey) { - localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)) - } else if (e.key === 'getSysPermission' && e.newValue === window.GLOB.appkey) { - localStorage.setItem('sysPermissions', JSON.stringify({mkThdMenus: window.GLOB.mkThdMenus, mkActions: window.GLOB.mkActions})) - } else if (e.key === 'menuUpdate') { - let menuId = e.newValue.split(',')[1] - if (menuId) { - Api.getAppVersion(menuId).then(() => { - MKEmitter.emit('reloadMenuView', menuId) - }) - } - } - }) - } - - shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) - } - - /** - * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 - */ - componentWillUnmount () { - this.setState = () => { - return - } - } gotoDoc = () => { - if (options.sysType === 'local' && window.GLOB.mainSystemApi) { + if (window.GLOB.sysType === 'local' && window.GLOB.mainSystemApi) { let ssodomain = window.GLOB.mainSystemApi.replace('/webapi/dostars', '') let url = `${ssodomain}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}` window.open(url) - } else if (options.sysType === 'SSO' || options.sysType === 'cloud') { + } else if (window.GLOB.sysType === 'SSO' || window.GLOB.sysType === 'cloud') { window.open(`${window.location.href.replace(/\/admin(.*)|\/index.html(.*)|\/#(.*)/ig, '')}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`) } } @@ -517,25 +566,31 @@ } verup = () => { + const { dict } = this.state + confirm({ - title: '椤甸潰鏇存柊', - content: '閲嶆柊鍔犺浇搴旂敤淇℃伅', + title: dict['page_upd'] || '椤甸潰鏇存柊', + content: dict['reload_app'] || '閲嶆柊鍔犺浇搴旂敤淇℃伅', + okText: dict['ok'] || '纭畾', + cancelText: dict['cancel'] || '鍙栨秷', onOk() { return new Promise(resolve => { if (!window.GLOB.IndexDB) { notification.warning({ top: 92, - message: '鏇存柊澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯锛�', + message: dict['exc_fail'] || '鏇存柊澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯锛�', duration: 2 }) resolve() } else { Api.updateAppVersion() Api.delCacheConfig('all') + localStorage.removeItem(window.location.href.split('#')[0] + 'AuthCode') + setTimeout(() => { notification.success({ top: 92, - message: '鏇存柊鎴愬姛锛�', + message: dict['exc_success'] || '鏇存柊鎴愬姛锛�', duration: 2 }) resolve() @@ -549,15 +604,8 @@ about = () => { Modal.success({ - title: '绯荤粺鐗堟湰v' + window.GLOB.appVersion - }) - } - - wxnotice = () => { - Modal.success({ - className: 'mk-wx-notice', - title: <QrCode card={{qrWidth: 320, color: '#000000'}} value={window.GLOB.baseurl + 'mob/wxnotice.html?userid=' + sessionStorage.getItem('UserID') + '&loginuid=' + sessionStorage.getItem('LoginUID')}/>, - okText: '鍏抽棴' + title: (window.GLOB.dict['sys_ver'] || '绯荤粺鐗堟湰') + ' v' + window.GLOB.appVersion, + okText: window.GLOB.dict['got_it'] || '鐭ラ亾浜�', }) } @@ -568,33 +616,32 @@ } render () { - const { mainMenu, collapse } = this.props - const { thdMenuList, searchkey, debug, menulist } = this.state + const { thdMenuList, searchkey, debug, menulist, collapse, dict } = this.state const navBar = window.GLOB.navBar const menu = ( <Menu className="header-dropdown"> {debug && <Menu.Item key="switch"> - 缂栬緫 + {dict['edit'] || '缂栬緫'} <Switch size="small" style={{marginLeft: '7px'}} checked={false} onChange={this.changeEditState} /> </Menu.Item>} - <Menu.Item key="password" onClick={this.changePassword}>淇敼瀵嗙爜</Menu.Item> - {this.state.systems.length ? <Menu.SubMenu style={{minWidth: '110px'}} title="鍒囨崲绯荤粺"> + <Menu.Item key="password" onClick={this.changePassword}>{dict['ch_pwd'] || '淇敼瀵嗙爜'}</Menu.Item> + {this.state.systems.length ? <Menu.SubMenu style={{minWidth: '110px'}} title={dict['swt_sys'] || '鍒囨崲绯荤粺'}> {this.state.systems.map((system, index) => ( <Menu.Item style={{minWidth: '100px', lineHeight: '30px'}} key={'sub' + index} onClick={() => {this.changeSystem(system)}}> {system.AppName} </Menu.Item> ))} </Menu.SubMenu> : null} - <Menu.Item key="doc" onClick={this.gotoDoc}>鏂囨。涓績</Menu.Item> + <Menu.Item key="doc" onClick={this.gotoDoc}>{dict['doc_center'] || '鏂囨。涓績'}</Menu.Item> <Menu.Item key="verup" onClick={this.verup}> - 椤甸潰鏇存柊 + {dict['page_upd'] || '椤甸潰鏇存柊'} </Menu.Item> - {window.GLOB.WXNotice ? <Menu.Item key="wxnotice" onClick={this.wxnotice}> + {window.GLOB.WXNotice ? <Menu.Item key="wxnotice" onClick={() => this.setState({wxVisible: true})}> 寰俊娑堟伅 </Menu.Item> : null} {window.GLOB.appVersion ? <Menu.Item key="version" onClick={this.about}> - 鍏充簬 + {dict['about'] || '鍏充簬'} </Menu.Item> : null} - <Menu.Item key="logout" onClick={this.logout}>閫�鍑�</Menu.Item> + <Menu.Item key="logout" onClick={this.logout}>{dict['logout'] || '閫�鍑�'}</Menu.Item> </Menu> ) @@ -611,7 +658,7 @@ <ul className="header-menu">{ menulist.map(item => { return ( - <li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={mainMenu && mainMenu.MenuID === item.MenuID ? 'active' : ''}> + <li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={window.GLOB.mainMenu && window.GLOB.mainMenu.MenuID === item.MenuID ? 'active' : ''}> <span>{item.MenuName}</span> </li> ) @@ -674,7 +721,7 @@ <div className="title" onClick={e => e.stopPropagation()}>{cell.MenuName}</div> <div className="menu-detail"> {cell.children && cell.children.map(m => ( - <div key={m.MenuID} title={m.MenuName} onClick={() => {this.changeVerMenu(m)}}> + <div key={m.MenuID} title={m.MenuName} style={m.menuColor ? {color: m.menuColor} : null} onClick={() => {this.changeVerMenu(m)}}> {m.MenuName} </div> ))} @@ -749,7 +796,7 @@ </Dropdown> {/* 缂栬緫鐘舵�佺櫥褰� */} <Modal - title="鐧诲綍寮�鍙戞満" + title={<span>鐧诲綍寮�鍙戞満{this.state.lang === 'en-US' ? <span style={{color: 'red'}}>锛堣嫳鏂囷級</span> : ''}</span>} visible={this.state.loginVisible} onOk={this.loginSubmit} width={'430px'} @@ -761,24 +808,29 @@ </Modal> {/* 淇敼瀵嗙爜 */} <Resetpwd /> + {/* 寰俊娑堟伅 */} + <Modal + wrapClassName="mk-wx-sms-modal" + visible={this.state.wxVisible} + title="鎵爜鍏虫敞 鎺ユ敹娑堟伅" + width={400} + centered={true} + onCancel={() => this.setState({wxVisible: false})} + footer={null} + destroyOnClose + > + <div className="wx-sms-wrap"> + <QrCode card={{qrWidth: 200, color: '#000000'}} value={window.GLOB.baseurl + 'mob/wxnotice.html?userid=' + sessionStorage.getItem('UserID') + '&loginuid=' + sessionStorage.getItem('LoginUID')}/> + <div className="tip"> + <img src={wxicon} alt=""/> + <span>寰俊鎵爜</span> + <span>鍏虫敞鍏紬鍙�</span> + </div> + </div> + </Modal> </header> ) } } -const mapStateToProps = (state) => { - return { - collapse: state.collapse, - mainMenu: state.mainMenu - } -} - -const mapDispatchToProps = (dispatch) => { - return { - toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)), - modifyMainMenu: (mainMenu) => dispatch(modifyMainMenu(mainMenu)), - logout: () => dispatch(logout()) - } -} - -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header)) \ No newline at end of file +export default withRouter(Header) \ No newline at end of file -- Gitblit v1.8.0