import React, {Component} from 'react'
|
import { withRouter } from 'react-router-dom'
|
import { Dropdown, Menu, Modal, notification, Switch, Button, Popover } from 'antd'
|
import { MenuFoldOutlined, SettingOutlined, AppstoreOutlined, DownOutlined, HomeOutlined, ApiOutlined, PlusOutlined, EditOutlined, MenuOutlined, DatabaseOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import avatar from '@/assets/img/avatar.jpg'
|
import MainLogo from '@/assets/img/main-logo.png'
|
import asyncComponent from '@/utils/asyncComponent'
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
const EditMenu = asyncComponent(() => import('./editfirstmenu'))
|
const VersionsUp = asyncComponent(() => import('./versions'))
|
const ThawMenu = asyncComponent(() => import('@/components/thawmenu'))
|
const MenuForm = asyncComponent(() => import('./editfirstmenu/menuform'))
|
const TransMenu = asyncComponent(() => import('./transmenu'))
|
|
const { confirm } = Modal
|
|
class Header extends Component {
|
state = {
|
menulist: null, // 一级菜单
|
userName: sessionStorage.getItem('CloudUserName'),
|
avatar: Utils.getrealurl(sessionStorage.getItem('CloudAvatar')),
|
logo: sessionStorage.getItem('CloudLogo') || MainLogo,
|
visible: false,
|
loading: false
|
}
|
|
logout = () => {
|
// 退出登录
|
let that = this
|
confirm({
|
title: '您确定要退出吗?',
|
content: '',
|
onOk() {
|
sessionStorage.clear()
|
that.props.history.replace('/login')
|
window.location.reload()
|
},
|
onCancel() {}
|
})
|
}
|
|
changeMenu (value) {
|
// 主菜单切换
|
if (value.PageParam.OpenType === 'menu') {
|
this.props.modifyMainMenu(value)
|
} else if (value.PageParam.OpenType === 'outpage') {
|
window.open(value.PageParam.linkUrl)
|
}
|
}
|
|
async loadmenu () {
|
// 获取主菜单
|
let _param = {
|
func: 's_get_pc_menus',
|
systemType: window.GLOB.sysType,
|
pro_sys: window.GLOB.systemType === 'production' ? 'Y' : '',
|
debug: 'Y'
|
}
|
|
let result = await Api.getCloudConfig(_param)
|
|
// 登录超时
|
if (!result) return
|
|
if (result.status) {
|
const { menulist } = this.getMenulist(result)
|
|
this.setState({ menulist })
|
|
let mainMenu = menulist[0] || null
|
|
if (this.props.editLevel === 'level1') {
|
mainMenu = null
|
} else if (this.props.mainMenu && this.props.mainMenu.MenuID) {
|
let _menu = menulist.filter(item => item.MenuID === this.props.mainMenu.MenuID)[0]
|
mainMenu = _menu || mainMenu
|
|
if (!_menu && (this.props.editLevel === 'level2' || this.props.editLevel === 'level3')) {
|
this.props.resetEditLevel(false)
|
}
|
}
|
|
this.props.modifyMenuTree(menulist)
|
this.props.modifyMainMenu(mainMenu)
|
} else {
|
notification.error({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
}
|
}
|
|
getMenulist = (result) => {
|
let menulist = []
|
let thdMenuList = []
|
result.fst_menu && result.fst_menu.forEach(fst => {
|
let fstItem = {
|
MenuID: fst.MenuID,
|
MenuName: fst.MenuName,
|
PageParam: {OpenType: 'menu', linkUrl: ''},
|
children: []
|
}
|
if (fst.PageParam) {
|
try {
|
fstItem.PageParam = JSON.parse(fst.PageParam)
|
} catch (e) {
|
fstItem.PageParam = {OpenType: 'menu', 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: [],
|
level: 'second'
|
}
|
|
if (snd.PageParam) {
|
try {
|
sndItem.PageParam = JSON.parse(snd.PageParam)
|
} catch (e) {
|
sndItem.PageParam = {Icon: 'folder'}
|
}
|
}
|
|
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,
|
MenuNo: trd.MenuNo,
|
EasyCode: trd.EasyCode,
|
type: 'CommonTable', // 默认值为常用表
|
OpenType: 'newtab', // 打开方式
|
up_action: window.GLOB.upStatus && trd.up_action === 'Y',
|
level: 'third'
|
}
|
|
try {
|
trdItem.PageParam = trd.PageParam ? JSON.parse(trd.PageParam) : {OpenType: 'newtab'}
|
|
trdItem.type = trdItem.PageParam.Template || trdItem.type
|
trdItem.OpenType = trdItem.PageParam.OpenType
|
} catch (e) {
|
trdItem.PageParam = {OpenType: 'newtab'}
|
}
|
if (trdItem.PageParam.Template === 'RolePermission' || trdItem.PageParam.Template === 'NewPage') {
|
trdItem.PageParam.backend = 'level1'
|
}
|
|
if (trdItem.type === 'CustomPage' && window.GLOB.memberLevel < 20) { // 会员等级大于等于20时，有编辑权限
|
trdItem.forbidden = true
|
}
|
|
thdMenuList.push(trdItem)
|
|
return trdItem
|
})
|
}
|
|
return sndItem
|
})
|
}
|
|
menulist.push(fstItem)
|
})
|
|
sessionStorage.setItem('thdMenuList', JSON.stringify(thdMenuList))
|
return { menulist }
|
}
|
|
reload = () => {
|
this.loadmenu()
|
}
|
|
changeEditState = () => {
|
sessionStorage.removeItem('isEditState')
|
this.props.history.replace('/main')
|
window.location.reload()
|
}
|
|
enterEdit = () => {
|
// 进入编辑状态
|
this.props.resetEditLevel('level1')
|
this.props.modifyMainMenu(null)
|
}
|
|
exitEdit = () => {
|
// 退出编辑状态
|
this.props.resetEditLevel(false)
|
this.props.modifyMainMenu(this.state.menulist[0] || null)
|
}
|
|
addMemuSubmit = () => {
|
// 新建菜单：提交
|
this.addMenuFormRef.handleConfirm().then(param => {
|
param.func = 'sPC_MainMenu_Add'
|
param.Sort = (this.state.menulist.length + 1) * 10
|
|
this.setState({
|
loading: true
|
})
|
Api.getCloudConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
loading: false,
|
visible: false,
|
})
|
|
this.loadmenu()
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}, () => {})
|
}
|
|
// setSystemFuncs = () => {
|
// if (!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 shim = +sessionStorage.getItem('sys_time_shim')
|
// let timestamp = moment().add(shim, 'seconds').format('YYYY-MM-DD HH:mm:ss')
|
|
// 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) => {
|
// 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'})
|
// }
|
// }
|
// }
|
// })
|
// }
|
|
getSmStemp = () => {
|
if (!sessionStorage.getItem('msgTemplate')) {
|
let _sql = `select ID,TemplateCode,SignName+'_'+describe as SignName from (select * from bd_msn_sms_temp where deleted=0 and status=20 ) a
|
inner join (select openid from sapp where id='${window.GLOB.appkey}') b
|
on a.openid=b.openid`
|
|
_sql = Utils.formatOptions(_sql, 'x')
|
|
let param = {
|
func: 'sPC_Get_SelectedList',
|
LText: _sql,
|
obj_name: 'data',
|
arr_field: 'ID,TemplateCode,SignName',
|
exec_type: 'x'
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt('', param.timestamp)
|
param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) // 云端数据验证
|
|
Api.getCloudConfig(param).then(res => {
|
let msgs = []
|
if (!res.status) {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
} else if (res.data) {
|
msgs = res.data
|
}
|
sessionStorage.setItem('msgTemplate', JSON.stringify(msgs))
|
})
|
}
|
}
|
|
UNSAFE_componentWillMount () {
|
document.body.className = ''
|
|
// 组件加载时，获取菜单数据
|
this.loadmenu()
|
}
|
|
componentDidMount () {
|
window.addEventListener('storage', (e) => {
|
if (e.key === 'menuUpdate') {
|
this.reload()
|
}
|
})
|
MKEmitter.addListener('mkUpdateMenuList', this.reload)
|
|
if (window.GLOB.systemType !== 'production') {
|
setTimeout(() => {
|
Api.getCloudConfig({func: 'sPC_Get_Roles_sModular'}).then(res => {
|
if (res.status) {
|
let _permFuncField = []
|
let _sysRoles = []
|
|
if (res.Roles && res.Roles.length > 0) {
|
_sysRoles = res.Roles.map(role => {
|
return {
|
uuid: Utils.getuuid(),
|
value: role.RoleID,
|
text: role.RoleName
|
}
|
})
|
}
|
|
if (res.sModular && res.sModular.length > 0) {
|
res.sModular.forEach(field => {
|
if (field.ModularNo) {
|
_permFuncField.push(field.ModularNo)
|
}
|
})
|
_permFuncField = _permFuncField.sort()
|
}
|
|
sessionStorage.setItem('sysRoles', JSON.stringify(_sysRoles))
|
sessionStorage.setItem('permFuncField', JSON.stringify(_permFuncField))
|
}
|
})
|
}, 100)
|
|
setTimeout(() => {
|
// this.setSystemFuncs()
|
this.getSmStemp()
|
}, 500)
|
}
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('mkUpdateMenuList', this.reload)
|
}
|
|
gotoDoc = () => {
|
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 (window.GLOB.sysType === 'SSO' || window.GLOB.sysType === 'cloud') {
|
window.open(`${window.location.href.replace(/\/index.html(.*)|\/#(.*)/ig, '')}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`)
|
}
|
}
|
|
render () {
|
const { mainMenu, editLevel } = this.props
|
const { menulist, visible, loading, logo } = this.state
|
|
return (
|
<header className={'sys-header-container ant-menu-dark ' + (['level2', 'level3'].includes(editLevel) ? 'mask' : '')} id="main-header-container">
|
<div className="header-logo"><img src={logo} alt=""/></div>
|
<div className="header-collapse">
|
<MenuFoldOutlined/>
|
</div>
|
{/* 正常菜单 */}
|
{editLevel !== 'level1' && menulist ?
|
<ul className={'header-menu ' + editLevel}>{
|
menulist.map(item => {
|
return (
|
<li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={mainMenu && mainMenu.MenuID === item.MenuID ? 'active' : ''}>
|
<span>{item.MenuName}</span>
|
</li>
|
)
|
})}
|
{!editLevel ?
|
<li key="HS" onClick={() => window.open('#/hs')}>
|
<span>HS</span>
|
</li> : null
|
}
|
</ul> : null
|
}
|
{/* 进入编辑按钮 */}
|
{!editLevel && window.GLOB.systemType !== 'production' && menulist ? <Popover overlayClassName="mk-popover-control-wrap mk-menu-control" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
|
<div className="mk-popover-control">
|
<PlusOutlined onClick={() => this.setState({visible: true, loading: false})}/>
|
<EditOutlined onClick={this.enterEdit}/>
|
<div style={{display: 'inline-block', minWidth: '32px'}}><ThawMenu ParentId="0" Type="10"/></div>
|
</div>
|
} trigger="hover">
|
<SettingOutlined className="edit-check"/>
|
</Popover> : null}
|
{/* window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'home', MenuId: 'home_page_id', MenuName: '首页' }))) */}
|
<div className="entrance-wrap">
|
{window.GLOB.systemType !== 'production' ?
|
<div className="entrance">
|
<div className="icon"><HomeOutlined /></div>
|
<div className="title">首页</div>
|
<div className="detail">基于自定义页面的首页设计，可实现灵活的元素配置及样式调整，展现当前系统的风格。</div>
|
<Button type="primary" disabled={window.GLOB.memberLevel < 20} title={window.GLOB.memberLevel < 20 ? '会员等级不够，无开发权限。' : ''} onClick={() => {window.open('#/menudesign/JTdCJTIyTWVudVR5cGUlMjIlM0ElMjJob21lJTIyJTJDJTIyTWVudUlkJTIyJTNBJTIyaG9tZV9wYWdlX2lkJTIyJTJDJTIyTWVudU5hbWUlMjIlM0ElMjIlRTklQTYlOTYlRTklQTElQjUlMjIlN0Q=')}}>
|
编辑
|
</Button>
|
</div> : null
|
}
|
<div className="entrance">
|
<div className="icon"><ApiOutlined /></div>
|
<div className="title">接口调试</div>
|
<div className="detail">可自动处理登录接口的参数加密，以及业务接口的签名计算，方便开发人员的接口测试工作。</div>
|
<Button type="primary" disabled={window.GLOB.memberLevel < 20} title={window.GLOB.memberLevel < 20 ? '会员等级不够，无开发权限。' : ''} onClick={() => {window.open('#/interface')}}>
|
编辑
|
</Button>
|
</div>
|
<div className="entrance">
|
<div className="icon"><AppstoreOutlined /></div>
|
<div className="title">应用管理</div>
|
<div className="detail">可创建及管理PC、pad及移动端等不同设备的应用，实现明科云APP、微信公众号、小程序等多平台的应用共享。</div>
|
{window.GLOB.systemType !== 'production' ?
|
<Button type="primary" disabled={window.GLOB.memberLevel < 20} title={window.GLOB.memberLevel < 20 ? '会员等级不够，无开发权限。' : ''} onClick={() => {window.open('#/appmanage')}}>
|
编辑
|
</Button> :
|
<Button type="primary" disabled={window.GLOB.memberLevel < 20} title={window.GLOB.memberLevel < 20 ? '会员等级不够，无开发权限。' : ''} onClick={() => {window.open('#/appcheck')}}>
|
查看
|
</Button>
|
}
|
</div>
|
{window.GLOB.systemType !== 'production' ? <div className="entrance">
|
<div className="icon"><MenuOutlined /></div>
|
<div className="title">菜单操作说明</div>
|
<div className="detail">鼠标悬停 <SettingOutlined style={{color: '#1890ff'}}/> 可显示菜单的添加、排序（包括编辑、删除）与解冻功能，双击三级菜单可进入编辑窗口。</div>
|
<Button type="primary" onClick={() => {window.open('#/main')}}>
|
新窗口
|
</Button>
|
</div> : null}
|
{window.GLOB.systemType !== 'production' ? <div className="entrance">
|
<div className="icon"><DatabaseOutlined /></div>
|
<div className="title">存储过程</div>
|
<div className="detail">可在页面中查看或编辑本地存储过程。</div>
|
<Button type="primary" onClick={() => {window.open('#/proc')}}>
|
编辑
|
</Button>
|
</div> : null}
|
{window.GLOB.systemType !== 'production' && sessionStorage.getItem('lang') !== 'zh-CN' ? <div className="entrance">
|
<div className="icon"><PlusOutlined /></div>
|
<div className="title">菜单转换</div>
|
<div className="detail">可选择母语系统的菜单，快速转换到当前语言。打印模板请在HS下复制后，在此处选择指定模板进行语言转换。</div>
|
<TransMenu reload={this.reload} menulist={menulist}/>
|
</div> : null}
|
</div>
|
{/* 编辑菜单 */}
|
{editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}
|
{/* 头像、用户名 */}
|
<Dropdown className="header-setting" overlay={
|
<Menu className="header-dropdown">
|
<Menu.Item key="switch">
|
编辑
|
<Switch size="small" style={{marginLeft: '7px'}} disabled={!!editLevel} checked={true} onChange={this.changeEditState} />
|
</Menu.Item>
|
<Menu.Item key="doc" onClick={this.gotoDoc}>文档中心</Menu.Item>
|
{window.GLOB.sysType !== 'cloud' ? <Menu.Item style={{padding: 0}} key="verup">
|
<VersionsUp />
|
</Menu.Item> : null}
|
<Menu.Item key="logout" onClick={this.logout}>退出</Menu.Item>
|
</Menu>
|
}>
|
<div style={{zIndex: 1, position: 'relative'}}>
|
<img src={this.state.avatar || avatar} alt=""/>
|
<span>
|
<span className="username">{this.state.userName}</span> <DownOutlined />
|
</span>
|
</div>
|
</Dropdown>
|
<Modal
|
title="添加菜单"
|
visible={visible}
|
onOk={this.addMemuSubmit}
|
confirmLoading={loading}
|
onCancel={() => this.setState({visible: false})}
|
destroyOnClose
|
>
|
<MenuForm
|
menu={null}
|
inputSubmit={this.addMemuSubmit}
|
wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
|
/>
|
</Modal>
|
</header>
|
)
|
}
|
}
|
|
export default withRouter(Header)
|
