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 moment from 'moment'
|
import { Dropdown, Menu, Icon, Modal, Form, notification, Switch, Input } from 'antd'
|
|
import {
|
toggleCollapse,
|
modifyMainMenu,
|
initActionPermission,
|
initMenuPermission,
|
logout
|
} from '@/store/action'
|
import asyncComponent from '@/utils/asyncComponent'
|
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 './index.scss'
|
|
const { confirm } = Modal
|
const { Search } = Input
|
const Resetpwd = asyncComponent(() => import('./resetpwd'))
|
const LoginForm = asyncComponent(() => import('./loginform'))
|
|
class Header extends Component {
|
static propTpyes = {
|
collapse: PropTypes.bool
|
}
|
state = {
|
menulist: null, // 一级菜单
|
visible: false, // 修改密码模态框
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
confirmLoading: false,
|
userName: sessionStorage.getItem('User_Name'),
|
logourl: window.GLOB.mainlogo,
|
appVersion: window.GLOB.appVersion,
|
loginVisible: false,
|
loginLoading: false,
|
avatar: Utils.getrealurl(sessionStorage.getItem('avatar')),
|
systems: [],
|
searchkey: '',
|
thdMenuList: [],
|
debug: sessionStorage.getItem('debug') === 'true',
|
navBar: ['linkage_navigation', 'linkage', 'menu_board', 'menu_board_navigation'].includes(window.GLOB.navBar) ? 'topmenu' : '',
|
menuType: window.GLOB.navBar
|
}
|
|
handleCollapse = () => {
|
// 展开、收起左侧菜单栏
|
this.props.toggleCollapse(!this.props.collapse)
|
localStorage.setItem('collapse', !this.props.collapse)
|
}
|
|
changePassword = () => {
|
// 点击修改密码，显示弹窗
|
this.setState({
|
visible: true
|
})
|
}
|
|
resetPwdSubmit = () => {
|
this.formRef.handleConfirm().then(res => {
|
this.setState({
|
confirmLoading: true
|
})
|
|
let _param = {
|
func: 's_PwdUpt',
|
LText: `select '${res.originpwd}','${res.password}'`
|
}
|
|
_param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') // 时间戳
|
_param.LText = Utils.formatOptions(_param.LText) // 关键字符替换，base64加密
|
_param.secretkey = Utils.encrypt(_param.LText, _param.timestamp) // md5密钥
|
|
Api.getSystemConfig(_param).then(result => {
|
this.setState({
|
visible: !result.status,
|
confirmLoading: false
|
})
|
|
if (result.status) {
|
notification.success({
|
top: 92,
|
message: '修改成功，请重新登录。',
|
duration: 2
|
})
|
setTimeout(() => {
|
sessionStorage.clear()
|
this.props.logout()
|
this.props.history.replace('/login')
|
}, 2000)
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}, () => {})
|
}
|
|
handleCancel = () => {
|
// 取消时关闭修改密码模态框，清空表单数据
|
this.setState({
|
visible: false
|
})
|
}
|
|
logout = () => {
|
// 退出登录
|
let _this = this
|
confirm({
|
title: this.state.dict['main.logout.hint'],
|
content: '',
|
onOk() {
|
sessionStorage.clear()
|
_this.props.logout()
|
_this.props.history.replace('/login')
|
},
|
onCancel() {}
|
})
|
}
|
|
changeMenu (value) {
|
// 主菜单切换
|
if (value.OpenType === 'outpage' && value.linkUrl) {
|
window.open(value.linkUrl)
|
} else if (value.OpenType === 'menu') {
|
this.props.modifyMainMenu(value)
|
}
|
}
|
|
getRolesMenu () {
|
// 获取角色权限
|
let roledefer = new Promise(resolve => {
|
// edition_type 接口版本控制 ''、'Y'、'A'
|
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
|
})
|
}
|
|
this.props.initActionPermission(_permAction)
|
resolve()
|
})
|
}, 50)
|
})
|
|
// 获取主菜单参数
|
let menudefer = new Promise(resolve => {
|
let _param = {func: 's_get_pc_menus', systemType: options.sysType}
|
_param.pro_sys = window.GLOB.systemType === 'production' ? 'Y' : ''
|
|
Api.getSystemConfig(_param).then(result => {
|
if (!result.status) {
|
notification.error({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
return
|
}
|
|
const { menulist, thdMenuList } = this.getMenulist(result)
|
|
this.setState({
|
menulist,
|
thdMenuList,
|
systems: window.GLOB.systemType === 'production' || options.sysType === 'SSO' ? (result.sys_list || []) : []
|
})
|
|
let mainMenu = menulist[0] || ''
|
let _menu = null
|
|
if (mainMenu === '') { // 是否显示侧边栏控制
|
let _url = window.location.href.split('#')[0]
|
localStorage.setItem(_url + '-sideHidden', 'true')
|
} else {
|
let _url = window.location.href.split('#')[0]
|
localStorage.removeItem(_url + '-sideHidden')
|
}
|
|
if (sessionStorage.getItem('ThirdMenu')) { // 是否为打开新页面
|
let ThirdMenuId = sessionStorage.getItem('ThirdMenu')
|
_menu = thdMenuList.filter(item => item.MenuID === ThirdMenuId)[0] // 通过url中menuid筛选出选中的主菜单
|
|
if (_menu) {
|
mainMenu = menulist.filter(item => item.MenuID === _menu.FstId)[0]
|
mainMenu = fromJS(mainMenu).toJS()
|
mainMenu.openId = _menu.ParentId
|
}
|
|
sessionStorage.removeItem('ThirdMenu')
|
}
|
|
this.props.modifyMainMenu(mainMenu)
|
this.props.initMenuPermission([...thdMenuList, {MenuID: 'home_page_id', EasyCode: '', MenuName: 'home', type: 'CustomPage'}])
|
|
resolve(_menu)
|
})
|
})
|
|
Promise.all([roledefer, menudefer]).then(response => {
|
if (response[1]) {
|
let menu = fromJS(response[1]).toJS()
|
|
if (this.state.navBar === 'topmenu' && this.state.menuType !== 'menu_board_navigation') {
|
MKEmitter.emit('modifyTabs', menu, 'replace')
|
} else {
|
MKEmitter.emit('modifyTabs', menu, 'plus')
|
}
|
}
|
})
|
}
|
|
getMenulist = (result) => {
|
let thdMenuList = []
|
let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt']
|
let menulist = []
|
result.fst_menu && result.fst_menu.forEach(fst => {
|
let fstItem = {
|
MenuID: fst.MenuID,
|
MenuName: fst.MenuName,
|
OpenType: 'menu',
|
children: []
|
}
|
if (fst.PageParam) {
|
try {
|
fstItem.PageParam = JSON.parse(fst.PageParam)
|
} catch (e) {
|
fstItem.PageParam = null
|
}
|
if (fstItem.PageParam && fstItem.PageParam.OpenType === 'outpage' && fstItem.PageParam.linkUrl) {
|
fstItem.OpenType = 'outpage'
|
fstItem.linkUrl = fstItem.PageParam.linkUrl
|
}
|
}
|
|
if (fst.snd_menu) {
|
fstItem.children = fst.snd_menu.map(snd => {
|
let sndItem = {
|
ParentId: fst.MenuID,
|
MenuID: snd.MenuID,
|
MenuName: snd.MenuName,
|
PageParam: {Icon: 'folder'},
|
children: []
|
}
|
|
if (snd.PageParam) {
|
try {
|
sndItem.PageParam = JSON.parse(snd.PageParam)
|
} catch (e) {
|
sndItem.PageParam = {Icon: 'folder'}
|
}
|
}
|
|
let msg = {
|
UserID: sessionStorage.getItem('UserID'),
|
LoginUID: sessionStorage.getItem('LoginUID'),
|
User_Name: sessionStorage.getItem('User_Name'),
|
Full_Name: sessionStorage.getItem('Full_Name'),
|
Member_Level: sessionStorage.getItem('Member_Level'),
|
dataM: sessionStorage.getItem('dataM'),
|
avatar: sessionStorage.getItem('avatar'),
|
debug: sessionStorage.getItem('debug'),
|
role_id: sessionStorage.getItem('role_id'),
|
mainlogo: window.GLOB.mainlogo,
|
navBar: window.GLOB.navBar || '',
|
mstyle: window.GLOB.style
|
}
|
|
if (snd.trd_menu) {
|
sndItem.children = snd.trd_menu.map(trd => {
|
let trdItem = {
|
FstId: fst.MenuID,
|
ParentId: snd.MenuID,
|
MenuID: trd.MenuID,
|
MenuName: trd.MenuName,
|
ParentNames: [fst.MenuName, snd.MenuName],
|
MenuNo: trd.MenuNo,
|
EasyCode: trd.EasyCode,
|
type: 'CommonTable',
|
OpenType: 'newtab',
|
hidden: 'false'
|
}
|
|
if (trd.LinkUrl && iframes.includes(trd.LinkUrl.split('?')[0])) {
|
trdItem.type = 'iframe'
|
trdItem.LinkUrl = trd.LinkUrl.replace('&', '&')
|
} else {
|
try {
|
trdItem.PageParam = trd.PageParam ? JSON.parse(trd.PageParam) : {OpenType: 'newtab'}
|
} catch (e) {
|
trdItem.PageParam = {OpenType: 'newtab'}
|
}
|
|
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 || ''
|
|
if (trdItem.src.indexOf('paramsmain/') > -1) {
|
try {
|
let _url = trdItem.src.split('paramsmain/')[0] + 'paramsmain/'
|
let _param = JSON.parse(window.decodeURIComponent(window.atob(trdItem.src.split('paramsmain/')[1])))
|
_param.UserID = sessionStorage.getItem('UserID')
|
_param.LoginUID = sessionStorage.getItem('LoginUID')
|
_param.User_Name = sessionStorage.getItem('User_Name')
|
_param.Full_Name = sessionStorage.getItem('Full_Name')
|
|
trdItem.src = _url + window.btoa(window.encodeURIComponent(JSON.stringify(_param)))
|
} catch (e) {
|
console.warn('菜单参数解析错误！')
|
}
|
}
|
} else {
|
// 打开新页面链接
|
trdItem.src = '#/paramsmain/' + window.btoa(window.encodeURIComponent(JSON.stringify({
|
...msg,
|
ThirdMenu: trd.MenuID
|
})))
|
}
|
}
|
|
thdMenuList.push(trdItem)
|
|
return trdItem
|
})
|
}
|
|
sndItem.children = sndItem.children.filter(item => item.hidden !== 'true')
|
|
return sndItem
|
})
|
}
|
|
menulist.push(fstItem)
|
})
|
|
return { menulist, thdMenuList }
|
}
|
|
changeEditState = () => {
|
// 修改编辑状态
|
let UserID = sessionStorage.getItem('CloudUserID')
|
let LoginUID = sessionStorage.getItem('CloudLoginUID')
|
|
if (!UserID || !LoginUID) {
|
this.setState({
|
loginVisible: true
|
})
|
} else {
|
sessionStorage.setItem('role_id', sessionStorage.getItem('cloudRole_id'))
|
sessionStorage.setItem('dataM', sessionStorage.getItem('cloudDataM'))
|
sessionStorage.setItem('isEditState', 'true')
|
|
this.props.modifyMainMenu(null)
|
|
this.props.history.replace('/design')
|
}
|
}
|
|
loginSubmit = () => {
|
this.setState({
|
loginLoading: true
|
})
|
this.loginRef.handleConfirm().then(param => {
|
Api.getusermsg(param.username, param.password, true).then(res => {
|
if (res.status) {
|
sessionStorage.setItem('CloudUserID', res.UserID)
|
sessionStorage.setItem('CloudLoginUID', res.LoginUID)
|
sessionStorage.setItem('CloudUserName', res.UserName)
|
sessionStorage.setItem('CloudFullName', res.FullName)
|
sessionStorage.setItem('CloudAvatar', res.icon)
|
sessionStorage.setItem('cloudDataM', res.dataM ? 'true' : '')
|
sessionStorage.setItem('cloudRole_id', res.role_id || '')
|
|
sessionStorage.setItem('role_id', res.role_id || '')
|
sessionStorage.setItem('dataM', res.dataM ? 'true' : '')
|
sessionStorage.setItem('isEditState', 'true')
|
|
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
|
})
|
notification.error({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
})
|
}
|
|
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
|
})
|
return
|
} 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'})
|
}
|
}
|
}
|
}
|
})
|
}
|
|
changeSystem = (system) => {
|
let url = system.LinkUrl1
|
|
if (!url) {
|
notification.warning({
|
top: 92,
|
message: '系统地址不存在！',
|
duration: 5
|
})
|
return
|
} else if (/index\.html/ig.test(url)) {
|
url = url.replace(/index\.html.*/ig, '')
|
} else if (!/\/$/ig.test(url)) {
|
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 || ''
|
})))
|
|
window.open(href)
|
}
|
|
dropdownMenuChange = (visible) => {
|
this.setState({searchkey: ''}, () => {
|
if (visible) {
|
setTimeout(() => {
|
let input = document.getElementById('thdMenu-search')
|
input && input.focus()
|
}, 500)
|
}
|
})
|
}
|
|
UNSAFE_componentWillMount () {
|
// 组件加载时，获取菜单数据
|
this.getRolesMenu()
|
}
|
|
componentDidMount () {
|
// 获取系统的版本信息，延时查询
|
setTimeout(() => {
|
Api.getAppVersion().then(() => {}, () => {})
|
}, 1000)
|
}
|
|
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) {
|
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')}`)
|
}
|
}
|
|
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为打开外部页面地址，newpage为打开系统菜单
|
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, debug, menulist, navBar, menuType, appVersion } = this.state
|
|
const menu = (
|
<Menu className="header-dropdown">
|
{debug && <Menu.Item key="switch">
|
{this.state.dict['main.edit']}
|
<Switch size="small" style={{marginLeft: '7px'}} checked={false} onChange={this.changeEditState} />
|
</Menu.Item>}
|
<Menu.Item key="password" onClick={this.changePassword}>{this.state.dict['main.password']}</Menu.Item>
|
{this.state.systems.length ? <Menu.SubMenu style={{minWidth: '110px'}} title="切换系统">
|
{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}>{this.state.dict['main.doc']}</Menu.Item>
|
<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>
|
)
|
|
return (
|
<header className="header-container ant-menu-dark" id="main-header-container">
|
<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' ? <Icon type={collapse ? 'menu-unfold' : 'menu-fold'} onClick={this.handleCollapse}/> : null}
|
</div>
|
{/* 正常菜单 */}
|
{navBar !== 'topmenu' && menulist ?
|
<ul className="header-menu">{
|
menulist.map(item => {
|
return (
|
<li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={mainMenu && mainMenu.MenuID === item.MenuID ? 'active' : ''}>
|
<span>{item.MenuName}</span>
|
</li>
|
)
|
})}
|
</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} overlayClassName="vertical-dropdown-menu" overlay={
|
<Menu mode="vertical">
|
{item.children.map(cell => {
|
if (!cell.children || cell.children.length === 0) {
|
return (
|
<Menu.Item key={cell.MenuID}>
|
{cell.MenuName}
|
</Menu.Item>
|
)
|
} else {
|
return (
|
<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>
|
}>
|
<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
|
}
|
{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>
|
</div>
|
</Dropdown>
|
{/* 菜单搜索 */}
|
{thdMenuList.length > 0 ?
|
<Dropdown overlayClassName="menu-select-dropdown" getPopupContainer={() => document.getElementById('main-header-container')} overlay={
|
<div>
|
<Search
|
placeholder=""
|
id="thdMenu-search"
|
value={searchkey}
|
onChange={e => this.setState({searchkey: e.target.value})}
|
style={{ minWidth: '200px' }}
|
onSearch={(val, e) => {e.stopPropagation()}}
|
onClick={(e) => {e.stopPropagation()}}
|
/>
|
<div className="menu-select-box">
|
<Menu>
|
{thdMenuList.map(option => {
|
if (searchkey) {
|
if (
|
option.MenuName.toLowerCase().indexOf(searchkey.toLowerCase()) >= 0 ||
|
option.MenuNo.toLowerCase().indexOf(searchkey.toLowerCase()) >= 0 ||
|
option.EasyCode.toLowerCase().indexOf(searchkey.toLowerCase()) >= 0
|
) {
|
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.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" />
|
</Dropdown> : null
|
}
|
{/* 修改密码 */}
|
<Modal
|
title={this.state.dict['main.password']}
|
visible={this.state.visible}
|
onOk={this.resetPwdSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={this.handleCancel}
|
destroyOnClose
|
>
|
<Resetpwd dict={this.state.dict} wrappedComponentRef={(inst) => this.formRef = inst} resetPwdSubmit={this.resetPwdSubmit}/>
|
</Modal>
|
{/* 编辑状态登录 */}
|
<Modal
|
title={this.state.dict['main.login.develop']}
|
visible={this.state.loginVisible}
|
onOk={this.loginSubmit}
|
width={'430px'}
|
confirmLoading={this.state.loginLoading}
|
onCancel={() => {this.setState({ loginVisible: false, loginLoading: false })}}
|
destroyOnClose
|
>
|
<LoginForm handleSubmit={() => this.loginSubmit()} wrappedComponentRef={(inst) => this.loginRef = inst}/>
|
</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)),
|
initActionPermission: (permAction) => dispatch(initActionPermission(permAction)),
|
initMenuPermission: (permMenus) => dispatch(initMenuPermission(permMenus)),
|
logout: () => dispatch(logout())
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Form.create()(Header)))
|
