From cbeffcc0902631909c0373f274752a97ddaf2d4e Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期六, 06 八月 2022 01:41:54 +0800 Subject: [PATCH] 2022-08-06 --- src/components/header/index.jsx | 579 +++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 396 insertions(+), 183 deletions(-) diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index df39098..afbac7f 100644 --- a/src/components/header/index.jsx +++ b/src/components/header/index.jsx @@ -4,29 +4,30 @@ import {connect} from 'react-redux' import { is, fromJS } from 'immutable' import moment from 'moment' -import { Dropdown, Menu, Icon, Modal, Form, notification, Switch, Input, Badge } from 'antd' +import { Dropdown, Menu, Modal, Form, notification, Switch, Input } from 'antd' +import { SearchOutlined, DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons' import { toggleCollapse, - modifyMenuTree, modifyMainMenu, - modifyTabview, initActionPermission, initMenuPermission, logout } from '@/store/action' +import asyncComponent from '@/utils/asyncSpinComponent' import Api from '@/api' +import MKEmitter from '@/utils/events.js' import options from '@/store/options.js' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' import Utils from '@/utils/utils.js' import avatar from '@/assets/img/avatar.jpg' -import Resetpwd from './resetpwd' -import LoginForm from './loginform' import './index.scss' const { confirm } = Modal const { Search } = Input +const Resetpwd = asyncComponent(() => import('./resetpwd')) +const LoginForm = asyncComponent(() => import('./loginform')) class Header extends Component { static propTpyes = { @@ -35,19 +36,21 @@ state = { menulist: null, // 涓�绾ц彍鍗� visible: false, // 淇敼瀵嗙爜妯℃�佹 - dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, confirmLoading: false, - userName: sessionStorage.getItem('User_Name'), + userName: '', + fullName: '', logourl: window.GLOB.mainlogo, + appVersion: window.GLOB.appVersion, loginVisible: false, loginLoading: false, avatar: Utils.getrealurl(sessionStorage.getItem('avatar')), systems: [], searchkey: '', thdMenuList: [], - oriVersion: '', - newVersion: '', - debug: sessionStorage.getItem('debug') === 'true' + debug: sessionStorage.getItem('debug') === 'true', + navBar: ['linkage_navigation', 'linkage', 'menu_board', 'menu_board_navigation'].includes(window.GLOB.navBar) ? 'topmenu' : '', + menuType: window.GLOB.navBar } handleCollapse = () => { @@ -64,6 +67,8 @@ } resetPwdSubmit = () => { + if (!this.formRef) return + this.formRef.handleConfirm().then(res => { this.setState({ confirmLoading: true @@ -87,9 +92,14 @@ if (result.status) { notification.success({ top: 92, - message: this.state.dict['main.password.resetsuccess'], + message: '淇敼鎴愬姛锛岃閲嶆柊鐧诲綍銆�', duration: 2 }) + setTimeout(() => { + sessionStorage.clear() + this.props.logout() + this.props.history.replace('/login') + }, 2000) } else { notification.warning({ top: 92, @@ -125,10 +135,10 @@ changeMenu (value) { // 涓昏彍鍗曞垏鎹� - if (value.PageParam.OpenType === 'menu') { + if (value.OpenType === 'outpage' && value.linkUrl) { + window.open(value.linkUrl) + } else if (value.OpenType === 'menu') { this.props.modifyMainMenu(value) - } else if (value.PageParam.OpenType === 'outpage') { - window.open(value.PageParam.linkUrl) } } @@ -136,39 +146,38 @@ // 鑾峰彇瑙掕壊鏉冮檺 let roledefer = new Promise(resolve => { // edition_type 鎺ュ彛鐗堟湰鎺у埗 ''銆�'Y'銆�'A' - Api.getSystemConfig({ - func: 's_Get_TrdMenu_Role', - edition_type: 'A', - pro_sys: window.GLOB.systemType === 'production' ? 'Y' : '' - }).then(result => { - let _permAction = {} // 鎸夐挳鏉冮檺 - - if (result && result.status) { - if (result.UserRoles_Menu) { - result.UserRoles_Menu.forEach(menu => { - if (!menu.MenuID) return - _permAction[menu.MenuID] = true + setTimeout(() => { + Api.getSystemConfig({ + func: 's_Get_TrdMenu_Role', + edition_type: 'A', + pro_sys: window.GLOB.systemType === 'production' ? 'Y' : '' + }).then(result => { + let _permAction = {loaded: true} // 鎸夐挳鏉冮檺 + + if (result && result.status) { + if (result.UserRoles_Menu) { + result.UserRoles_Menu.forEach(menu => { + if (!menu.MenuID) return + _permAction[menu.MenuID] = true + }) + } + } else if (result) { + notification.error({ + top: 92, + message: result.message, + duration: 10 }) } - } else if (result) { - notification.error({ - top: 92, - message: result.message, - duration: 10 - }) - } - - this.props.initActionPermission(_permAction) - resolve() - }) + + this.props.initActionPermission(_permAction) + resolve() + }) + }, 50) }) // 鑾峰彇涓昏彍鍗曞弬鏁� let menudefer = new Promise(resolve => { let _param = {func: 's_get_pc_menus', systemType: options.sysType} - if (options.sysType !== 'cloud' && window.GLOB.systemType !== 'production') { - _param.linkurl = window.GLOB.linkurl - } _param.pro_sys = window.GLOB.systemType === 'production' ? 'Y' : '' Api.getSystemConfig(_param).then(result => { @@ -183,10 +192,19 @@ const { menulist, thdMenuList } = this.getMenulist(result) + let systems = [] + if ((options.sysType === 'local' || options.sysType === 'SSO') && result.sys_list) { + systems = result.sys_list + + if (options.sysType === 'local' && window.GLOB.systemType !== 'production' && systems.length > 10) { + systems.length = 10 + } + } + this.setState({ menulist, thdMenuList, - systems: window.GLOB.systemType === 'production' || options.sysType === 'SSO' ? (result.sys_list || []) : [] + systems: systems }) let mainMenu = menulist[0] || '' @@ -213,9 +231,8 @@ sessionStorage.removeItem('ThirdMenu') } - this.props.modifyMenuTree(menulist) this.props.modifyMainMenu(mainMenu) - this.props.initMenuPermission(thdMenuList) + this.props.initMenuPermission([...thdMenuList, {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}]) resolve(_menu) }) @@ -223,17 +240,13 @@ Promise.all([roledefer, menudefer]).then(response => { if (response[1]) { - let tabs = fromJS(this.props.tabviews).toJS() let menu = fromJS(response[1]).toJS() - tabs = tabs.map(tab => { - tab.selected = false - return tab - }) - - menu.selected = true - tabs.push(menu) - this.props.modifyTabview(tabs) + if (this.state.navBar === 'topmenu' && this.state.menuType !== 'menu_board_navigation') { + MKEmitter.emit('modifyTabs', menu, 'replace') + } else { + MKEmitter.emit('modifyTabs', menu, 'plus') + } } }) } @@ -246,14 +259,18 @@ let fstItem = { MenuID: fst.MenuID, MenuName: fst.MenuName, - PageParam: {OpenType: 'menu', linkUrl: ''}, + OpenType: 'menu', children: [] } if (fst.PageParam) { try { fstItem.PageParam = JSON.parse(fst.PageParam) } catch (e) { - fstItem.PageParam = {OpenType: 'menu', linkUrl: ''} + fstItem.PageParam = null + } + if (fstItem.PageParam && fstItem.PageParam.OpenType === 'outpage' && fstItem.PageParam.linkUrl) { + fstItem.OpenType = 'outpage' + fstItem.linkUrl = fstItem.PageParam.linkUrl } } @@ -286,6 +303,7 @@ debug: sessionStorage.getItem('debug'), role_id: sessionStorage.getItem('role_id'), mainlogo: window.GLOB.mainlogo, + navBar: window.GLOB.navBar || '', mstyle: window.GLOB.style } @@ -296,15 +314,17 @@ ParentId: snd.MenuID, MenuID: trd.MenuID, MenuName: trd.MenuName, + ParentNames: [fst.MenuName, snd.MenuName], MenuNo: trd.MenuNo, EasyCode: trd.EasyCode, - type: 'CommonTable', // 榛樿鍊间负甯哥敤琛� - OpenType: 'newtab' // 鎵撳紑鏂瑰紡 + type: 'CommonTable', + OpenType: 'newtab', + hidden: 'false' } if (trd.LinkUrl && iframes.includes(trd.LinkUrl.split('?')[0])) { trdItem.type = 'iframe' - trdItem.LinkUrl = trd.LinkUrl + trdItem.LinkUrl = trd.LinkUrl.replace('&', '&') } else { try { trdItem.PageParam = trd.PageParam ? JSON.parse(trd.PageParam) : {OpenType: 'newtab'} @@ -314,6 +334,7 @@ trdItem.type = trdItem.PageParam.Template || trdItem.type trdItem.OpenType = trdItem.PageParam.OpenType || trdItem.OpenType + trdItem.hidden = trdItem.PageParam.hidden || trdItem.hidden if (trdItem.type === 'NewPage') { trdItem.src = trdItem.PageParam.url || '' @@ -328,7 +349,7 @@ _param.Full_Name = sessionStorage.getItem('Full_Name') trdItem.src = _url + window.btoa(window.encodeURIComponent(JSON.stringify(_param))) - } catch { + } catch (e) { console.warn('鑿滃崟鍙傛暟瑙f瀽閿欒锛�') } } @@ -347,6 +368,8 @@ }) } + sndItem.children = sndItem.children.filter(item => item.hidden !== 'true') + return sndItem }) } @@ -361,7 +384,7 @@ // 淇敼缂栬緫鐘舵�� let UserID = sessionStorage.getItem('CloudUserID') let LoginUID = sessionStorage.getItem('CloudLoginUID') - + if (!UserID || !LoginUID) { this.setState({ loginVisible: true @@ -371,21 +394,38 @@ sessionStorage.setItem('dataM', sessionStorage.getItem('cloudDataM')) sessionStorage.setItem('isEditState', 'true') - this.props.modifyMenuTree([]) this.props.modifyMainMenu(null) - this.props.modifyTabview([]) this.props.history.replace('/design') } } loginSubmit = () => { + if (!this.loginRef) return + this.setState({ loginLoading: true }) + this.loginRef.handleConfirm().then(param => { Api.getusermsg(param.username, param.password, true).then(res => { if (res.status) { + this.setState({ + loginLoading: false + }) + + if (res.modifydate) { + let s = (new Date().getTime() - new Date(res.modifydate).getTime()) / (1000 * 24 * 60 * 60) + if (!isNaN(s) && s > 90) { + Modal.warning({ + width: 520, + title: <span>绯荤粺妫�娴嬪埌鎮ㄧ殑璐︽埛瀛樺湪椋庨櫓锛岃鍙婃椂鍒�<a target="_blank" rel="noopener noreferrer" href="https://cloud.mk9h.cn/admin/index.html">浜戜腑蹇�</a>淇敼瀵嗙爜锛�</span>, + okText: '鐭ラ亾浜�' + }) + return + } + } + sessionStorage.setItem('CloudUserID', res.UserID) sessionStorage.setItem('CloudLoginUID', res.LoginUID) sessionStorage.setItem('CloudUserName', res.UserName) @@ -398,12 +438,20 @@ sessionStorage.setItem('dataM', res.dataM ? 'true' : '') sessionStorage.setItem('isEditState', 'true') - this.props.modifyMenuTree([]) - this.props.modifyMainMenu(null) - this.props.modifyTabview([]) + 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})))) + } + + this.setSystemFuncs() + this.props.modifyMainMenu(null) this.props.history.replace('/design') } else { + if (res.message.indexOf('瀵嗙爜閿欒') > -1) { + const input = document.getElementById('password') + input && input.select() + } this.setState({ loginLoading: false }) @@ -414,6 +462,106 @@ }) } }) + }) + } + + setSystemFuncs = () => { + if (!window.GLOB.WebSql && !window.GLOB.IndexDB) { + return + } + this.getfuncTime().then(res => { + Api.getSystemFuncs(res.createDate).then(result => { + if (!result.status) { + notification.error({ + top: 92, + message: result.message, + duration: 10 + }) + } else if (result.func_detail && result.func_detail.length > 0) { + this.writeFuncs(result.func_detail) + } + }) + }) + } + + writeFuncs = (funcs) => { + let timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + + let sys_datetime = sessionStorage.getItem('sys_datetime') + let app_datetime = sessionStorage.getItem('app_datetime') + if (sys_datetime && app_datetime) { + let seconds = Math.floor((new Date().getTime() - app_datetime) / 1000) + timestamp = moment(sys_datetime, 'YYYY-MM-DD HH:mm:ss').add(seconds, 'seconds').format('YYYY-MM-DD HH:mm:ss') + } + + if (window.GLOB.WebSql) { + window.GLOB.WebSql.transaction(tx => { + tx.executeSql('DELETE FROM FUNCS') + + funcs.forEach(item => { + if (!item.key_sql) return + tx.executeSql('INSERT INTO FUNCS (func_code, key_sql) VALUES (?, ?)', [item.func_code, item.key_sql]) + }) + tx.executeSql(`UPDATE VERSIONS SET createDate='${timestamp}' where CDefine1='funcs'`) + }) + } else { + let objectStore = window.GLOB.IndexDB.transaction(['funcs'], 'readwrite').objectStore('funcs') + + objectStore.clear() + + funcs.forEach(item => { + if (!item.key_sql) return + item.id = item.func_code + objectStore.add(item) + }) + + let funcStore = window.GLOB.IndexDB.transaction(['version'], 'readwrite').objectStore('version') + funcStore.put({id: 'funcs', version: '1.0', createDate: timestamp}) + } + } + + getfuncTime = () => { + return new Promise((resolve, reject) => { + if (window.GLOB.WebSql) { + window.GLOB.WebSql.transaction(tx => { + tx.executeSql("SELECT * FROM VERSIONS where CDefine1='funcs'", [], (tx, results) => { + let rows = results.rows + if (rows.length === 0) { + tx.executeSql('DELETE FROM FUNCS') + tx.executeSql('INSERT INTO VERSIONS (version, createDate, CDefine1) VALUES (?, ?, ?)', ['1.0', '1970-01-01 14:59:09.000', 'funcs']) + resolve({createDate: '1970-01-01 14:59:09.000'}) + } else { + resolve(rows[0]) + } + }, (tx, results) => { + reject() + console.warn(results) + }) + }) + } else { + let objectStore = window.GLOB.IndexDB.transaction(['version'], 'readwrite').objectStore('version') + let request = objectStore.get('funcs') + + request.onerror = (event) => { + console.warn(event) + reject() + } + + request.onsuccess = () => { + if (request.result) { + resolve(request.result) + } else { + let add = objectStore.add({id: 'funcs', version: '1.0', createDate: '1970-01-01 14:59:09.000'}) + + add.onerror = () => { + reject() + } + add.onsuccess = () => { + resolve({id: 'funcs', version: '1.0', createDate: '1970-01-01 14:59:09.000'}) + } + } + } + } }) } @@ -433,18 +581,40 @@ url = url + '/' } - let href = url + 'index.html#/ssologin/' + window.btoa(window.encodeURIComponent(JSON.stringify({ - UserID: sessionStorage.getItem('UserID'), - LoginUID: sessionStorage.getItem('LoginUID'), - User_Name: sessionStorage.getItem('User_Name'), - Full_Name: sessionStorage.getItem('Full_Name'), - avatar: sessionStorage.getItem('avatar'), - dataM: system.dataM ? 'true' : '', - debug: system.debug || '', - role_id: system.role_id || '' - }))) + let key = Utils.getuuid() - window.open(href) + let _param = { + func: 'webapi_scan_binding_key', + binding_type: 'mk', + scan_type: 'toggle', + scan_appkey: system.scan_appkey, + id: key + } + + Api.getSystemConfig(_param).then(res => { + if (!res.status) { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + } else if (res.thd_party_appid && res.thd_party_member_id && res.thd_party_openid) { + let href = url + 'admin/index.html#/ssologin/' + window.btoa(window.encodeURIComponent(JSON.stringify({ + appid: res.thd_party_appid, + memberId: res.thd_party_member_id, + openid: res.thd_party_openid, + key: key + }))) + + window.open(href) + } else { + notification.warning({ + top: 92, + message: '淇℃伅缂哄け锛岃鑱旂郴绠$悊鍛橈紒', + duration: 5 + }) + } + }) } dropdownMenuChange = (visible) => { @@ -457,54 +627,32 @@ } }) } - - selectMenu = (item) => { - let tabs = fromJS(this.props.tabviews).toJS() - let menu = fromJS(item).toJS() - menu.selected = true - - tabs = tabs.filter(tab => { - tab.selected = false - return tab.MenuID !== menu.MenuID - }) - - if (this.props.tabviews.length !== tabs.length) { - this.props.modifyTabview(fromJS(tabs).toJS()) - } - - this.setState({}, () => { - tabs.push(menu) - this.props.modifyTabview(tabs) - }) - } UNSAFE_componentWillMount () { // 缁勪欢鍔犺浇鏃讹紝鑾峰彇鑿滃崟鏁版嵁 this.getRolesMenu() - } - UNSAFE_componentWillReceiveProps (nextProps) { - if (!is(fromJS(this.props.menuTree), fromJS(nextProps.menuTree)) && !is(fromJS(this.state.menulist), fromJS(nextProps.menuTree))) { - this.setState({ - menulist: nextProps.menuTree - }) + let fullName = sessionStorage.getItem('Full_Name') || '' + let userName = sessionStorage.getItem('User_Name') || '' + + if (fullName.toLowerCase() === userName.toLowerCase()) { + userName = '' } + + this.setState({fullName, userName}) } componentDidMount () { // 鑾峰彇绯荤粺鐨勭増鏈俊鎭紝寤舵椂鏌ヨ setTimeout(() => { - new Promise((resolve, reject) => { - Api.getAppVersion(resolve, reject) - }).then(res => { - this.setState({ - oriVersion: res.oldVersion, - newVersion: res.newVersion - }) - }, () => { - console.warn('websql 鍒濆鍖栭敊璇紒') - }) + Api.getAppVersion().then(() => {}, () => {}) }, 1000) + // Api.genericInterface({ + // func: 's_get_fcc_account_data', + // fcc_date: '2022-03-01', + // search_type: '' + // }).then(res => { + // }) } shouldComponentUpdate (nextProps, nextState) { @@ -520,51 +668,79 @@ } } - verup = () => { - const { oriVersion, newVersion } = this.state - const _this = this - - confirm({ - title: this.state.dict['main.verup'], - content: `鏈�鏂扮増鏈�${newVersion}锛屽綋鍓嶇増鏈�${oriVersion}`, - onOk() { - return new Promise(resolve => { - Api.updateAppVersion(newVersion).then(res => { - if (res.status) { - notification.success({ - top: 92, - message: '鍗囩骇鎴愬姛锛�', - duration: 2 - }) - _this.setState({oriVersion: newVersion}) - } else { - notification.warning({ - top: 92, - message: '鍗囩骇澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯锛�', - duration: 2 - }) - } - resolve() - }) - }) - }, - onCancel() {} - }) - } - gotoDoc = () => { if (options.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') { - window.open(`${window.location.href.replace(/\/index.html(.*)|\/#(.*)/ig, '')}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`) + window.open(`${window.location.href.replace(/\/admin(.*)|\/index.html(.*)|\/#(.*)/ig, '')}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`) } + } + + changeVerMenu(menu, type) { + if (type === 'first') { + if (menu.OpenType === 'outpage' && menu.linkUrl) { + window.open(menu.linkUrl) + } else if (menu.OpenType === 'menu') { + + } + } else { + if (menu.OpenType === 'newpage' || menu.OpenType === 'NewPage') { // NewPage涓烘墦寮�澶栭儴椤甸潰鍦板潃锛宯ewpage涓烘墦寮�绯荤粺鑿滃崟 + window.open(menu.src) + } else if (menu.OpenType === 'blank') { + MKEmitter.emit('modifyTabs', menu, 'replace') + } else if (this.state.navBar === 'topmenu' && this.state.menuType !== 'menu_board_navigation') { + MKEmitter.emit('modifyTabs', menu, 'replace') + } else { + MKEmitter.emit('modifyTabs', menu, 'plus') + } + + if (window.GLOB.systemType === 'production') { + MKEmitter.emit('queryTrigger', {menuId: menu.MenuID, name: '鑿滃崟'}) + } + } + } + + verup = () => { + confirm({ + title: '椤甸潰鏇存柊', + content: '閲嶆柊鍔犺浇搴旂敤淇℃伅', + onOk() { + return new Promise(resolve => { + if (!window.GLOB.WebSql && !window.GLOB.IndexDB) { + notification.warning({ + top: 92, + message: '鏇存柊澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯锛�', + duration: 2 + }) + resolve() + } else { + Api.updateAppVersion() + setTimeout(() => { + notification.success({ + top: 92, + message: '鏇存柊鎴愬姛锛�', + duration: 2 + }) + resolve() + }, 1000) + } + }) + }, + onCancel() {} + }) + } + + about = () => { + Modal.success({ + title: '绯荤粺鐗堟湰v' + this.state.appVersion + }) } render () { const { mainMenu, collapse } = this.props - const { thdMenuList, searchkey, oriVersion, newVersion, debug, menulist } = this.state + const { thdMenuList, searchkey, debug, menulist, navBar, menuType, appVersion } = this.state const menu = ( <Menu className="header-dropdown"> @@ -579,8 +755,11 @@ ))} </Menu.SubMenu> : null} <Menu.Item key="doc" onClick={this.gotoDoc}>{this.state.dict['main.doc']}</Menu.Item> - {oriVersion ? <Menu.Item key="verup" onClick={this.verup}> - <Badge dot={oriVersion !== newVersion}>{this.state.dict['main.verup']}</Badge> + <Menu.Item key="verup" onClick={this.verup}> + 椤甸潰鏇存柊 + </Menu.Item> + {appVersion ? <Menu.Item key="version" onClick={this.about}> + 鍏充簬 </Menu.Item> : null} <Menu.Item key="logout" onClick={this.logout}>{this.state.dict['main.logout']}</Menu.Item> </Menu> @@ -588,12 +767,12 @@ return ( <header className="header-container ant-menu-dark" id="main-header-container"> - <div className={'header-logo ' + (collapse ? 'collapse' : '')}><img src={this.state.logourl} alt=""/></div> - <div className={'header-collapse ' + (collapse ? 'collapse' : '')}> - {menulist && menulist.length ? <Icon type={collapse ? 'menu-unfold' : 'menu-fold'} onClick={this.handleCollapse}/> : null} + <div className={'header-logo ' + (collapse && navBar !== 'topmenu' ? 'collapse' : '')}><img src={this.state.logourl} alt=""/></div> + <div className={'header-collapse ' + (collapse && navBar !== 'topmenu' ? 'collapse' : '')}> + {navBar !== 'topmenu' ? (collapse ? <MenuUnfoldOutlined onClick={this.handleCollapse}/> : <MenuFoldOutlined onClick={this.handleCollapse}/>) : null} </div> {/* 姝e父鑿滃崟 */} - {menulist ? + {navBar !== 'topmenu' && menulist ? <ul className="header-menu">{ menulist.map(item => { return ( @@ -604,18 +783,12 @@ })} </ul> : null } - {/* {menulist ? - <Menu className="header-vertical-menu" mode="horizontal"> - {menulist.map(item => { - if (!item.children || item.children.length === 0) { + {navBar === 'topmenu' && menuType !== 'menu_board' && menuType !== 'menu_board_navigation' && menulist ? + <ul className="header-menu vertical-menu">{ + menulist.map(item => { + if (item.children && item.children.length > 0) { return ( - <Menu.Item key={item.MenuID}> - {item.MenuName} - </Menu.Item> - ) - } else { - return ( - <Menu.SubMenu key={item.MenuID} title={item.MenuName}> + <Dropdown key={item.MenuID} overlayClassName="vertical-dropdown-menu" overlay={ <Menu mode="vertical"> {item.children.map(cell => { if (!cell.children || cell.children.length === 0) { @@ -626,32 +799,77 @@ ) } else { return ( - <Menu.SubMenu key={cell.MenuID} title={cell.MenuName}> - <Menu mode="vertical"> - {cell.children.map(m => ( - <Menu.Item key={m.MenuID}> - {m.MenuName} - </Menu.Item> - ))} - </Menu> + <Menu.SubMenu popupClassName="vertical-dropdown-submenu" key={cell.MenuID} title={cell.MenuName}> + {cell.children.map(m => ( + <Menu.Item key={m.MenuID} onClick={() => {this.changeVerMenu(m)}}> + {m.MenuName} + </Menu.Item> + ))} </Menu.SubMenu> ) } })} </Menu> - </Menu.SubMenu> + }> + <li> + <span>{item.MenuName}</span> + </li> + </Dropdown> + ) + } else { + return ( + <li key={item.MenuID} onClick={() => {this.changeVerMenu(item, 'first')}}> + <span>{item.MenuName}</span> + </li> ) } })} - </Menu> : null + </ul> : null } - */} + {navBar === 'topmenu' && (menuType === 'menu_board' || menuType === 'menu_board_navigation') && menulist ? + <ul className="header-menu vertical-menu">{ + menulist.map(item => { + if (item.children && item.children.length > 0) { + return ( + <Dropdown key={item.MenuID} placement="bottomCenter" overlayClassName="vertical-dropdown-menu" overlay={ + <div className="menu-board"> + {item.children.map(cell => { + return ( + <div className="menu-wrap" key={cell.MenuID}> + <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)}}> + {m.MenuName} + </div> + ))} + </div> + </div> + ) + })} + </div> + }> + <li> + <span>{item.MenuName}</span> + </li> + </Dropdown> + ) + } else { + return ( + <li key={item.MenuID} onClick={() => {this.changeVerMenu(item, 'first')}}> + <span>{item.MenuName}</span> + </li> + ) + } + })} + </ul> : null + } {/* 澶村儚銆佺敤鎴峰悕 */} <Dropdown className="header-setting" overlay={menu}> <div> <img src={this.state.avatar || avatar} alt=""/> <span> - <span className="username">{this.state.userName}</span> <Icon type="down" /> + <span className="username"><span>{this.state.fullName}</span>{this.state.userName ? <span>{this.state.userName}</span> : null}</span> <DownOutlined /> </span> </div> </Dropdown> @@ -677,18 +895,18 @@ option.MenuNo.toLowerCase().indexOf(searchkey.toLowerCase()) >= 0 || option.EasyCode.toLowerCase().indexOf(searchkey.toLowerCase()) >= 0 ) { - return <Menu.Item key={option.MenuID} onClick={() => this.selectMenu(option)}>{option.MenuName}</Menu.Item> + return <Menu.Item key={option.MenuID} onClick={() => this.changeVerMenu(option)}>{option.MenuName}</Menu.Item> } else { return null } } - return <Menu.Item key={option.MenuID} onClick={() => this.selectMenu(option)}>{option.MenuName}</Menu.Item> + return <Menu.Item key={option.MenuID} onClick={() => this.changeVerMenu(option)}>{option.MenuName}</Menu.Item> })} </Menu> </div> </div> } trigger={['click']} className="search-menu" placement="bottomRight" onVisibleChange={this.dropdownMenuChange}> - <Icon className="search-menu" type="search" /> + <SearchOutlined className="search-menu" /> </Dropdown> : null } {/* 淇敼瀵嗙爜 */} @@ -721,19 +939,14 @@ const mapStateToProps = (state) => { return { - tabviews: state.tabviews, collapse: state.collapse, - menuTree: state.menuTree, - mainMenu: state.mainMenu, - permAction: state.permAction, + mainMenu: state.mainMenu } } const mapDispatchToProps = (dispatch) => { return { toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)), - modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)), - modifyMenuTree: (menuTree) => dispatch(modifyMenuTree(menuTree)), modifyMainMenu: (mainMenu) => dispatch(modifyMainMenu(mainMenu)), initActionPermission: (permAction) => dispatch(initActionPermission(permAction)), initMenuPermission: (permMenus) => dispatch(initMenuPermission(permMenus)), -- Gitblit v1.8.0