|
|
@ -2,7 +2,7 @@ |
|
|
|
|
|
|
|
import React, { useState, useEffect } from 'react'; |
|
|
|
import { connect } from 'react-redux'; |
|
|
|
import { Layout, Notification } from '@douyinfe/semi-ui'; |
|
|
|
import { Layout, Notification, Spin, Toast } from '@douyinfe/semi-ui'; |
|
|
|
import Sider from '../../components/sider'; |
|
|
|
import Header from '../../components/header'; |
|
|
|
import Footer from '../../components/footer'; |
|
|
@ -20,7 +20,7 @@ import actions from '../../../sections/humanAffairs/actions' |
|
|
|
|
|
|
|
|
|
|
|
NProgress.configure({ |
|
|
|
template: ` |
|
|
|
template: ` |
|
|
|
<div class="bar" style="height:2px" role="bar"> |
|
|
|
<div class="peg"></div> |
|
|
|
</div> |
|
|
@ -35,336 +35,355 @@ let requestUser = true |
|
|
|
let requestlogout = false; |
|
|
|
// const location111 = useLocation(); |
|
|
|
const LayoutContainer = props => { |
|
|
|
const { |
|
|
|
dispatch, actions, msg, user, copyright, children, sections, clientWidth, clientHeight, |
|
|
|
location, match, routes, history, socket, apiRoot, webPepUrl |
|
|
|
} = props |
|
|
|
const [collapsed, setCollapsed] = useState(false) |
|
|
|
const { |
|
|
|
dispatch, actions, msg, user, copyright, children, sections, clientWidth, clientHeight, |
|
|
|
location, match, routes, history, socket, apiRoot, webPepUrl |
|
|
|
} = props |
|
|
|
const [collapsed, setCollapsed] = useState(false) |
|
|
|
|
|
|
|
NProgress.start(); |
|
|
|
NProgress.start(); |
|
|
|
|
|
|
|
const resize_ = () => { |
|
|
|
dispatch(resize( |
|
|
|
document.getElementById('HrApp').clientHeight, |
|
|
|
document.getElementById('HrApp').clientWidth - (collapsed ? 120 : 240) |
|
|
|
)); |
|
|
|
} |
|
|
|
function deepCopy(data) {//深拷贝 |
|
|
|
//string,number,bool,null,undefined,symbol |
|
|
|
//object,array,date |
|
|
|
if (data && typeof data === "object") { |
|
|
|
//针对函数的拷贝 |
|
|
|
if (typeof data === "function") { |
|
|
|
let tempFunc = data.bind(null); |
|
|
|
tempFunc.prototype = deepCopy(data.prototype); |
|
|
|
return tempFunc; |
|
|
|
} |
|
|
|
const resize_ = () => { |
|
|
|
dispatch(resize( |
|
|
|
document.getElementById('HrApp').clientHeight, |
|
|
|
document.getElementById('HrApp').clientWidth - (collapsed ? 120 : 240) |
|
|
|
)); |
|
|
|
} |
|
|
|
function deepCopy(data) {//深拷贝 |
|
|
|
//string,number,bool,null,undefined,symbol |
|
|
|
//object,array,date |
|
|
|
if (data && typeof data === "object") { |
|
|
|
//针对函数的拷贝 |
|
|
|
if (typeof data === "function") { |
|
|
|
let tempFunc = data.bind(null); |
|
|
|
tempFunc.prototype = deepCopy(data.prototype); |
|
|
|
return tempFunc; |
|
|
|
} |
|
|
|
|
|
|
|
switch (Object.prototype.toString.call(data)) { |
|
|
|
case "[object String]": |
|
|
|
return data.toString(); |
|
|
|
case "[object Number]": |
|
|
|
return Number(data.toString()); |
|
|
|
case "[object Boolean]": |
|
|
|
return new Boolean(data.toString()); |
|
|
|
case "[object Date]": |
|
|
|
return new Date(data.getTime()); |
|
|
|
case "[object Array]": |
|
|
|
var arr = []; |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
arr[i] = deepCopy(data[i]); |
|
|
|
} |
|
|
|
return arr; |
|
|
|
switch (Object.prototype.toString.call(data)) { |
|
|
|
case "[object String]": |
|
|
|
return data.toString(); |
|
|
|
case "[object Number]": |
|
|
|
return Number(data.toString()); |
|
|
|
case "[object Boolean]": |
|
|
|
return new Boolean(data.toString()); |
|
|
|
case "[object Date]": |
|
|
|
return new Date(data.getTime()); |
|
|
|
case "[object Array]": |
|
|
|
var arr = []; |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
arr[i] = deepCopy(data[i]); |
|
|
|
} |
|
|
|
return arr; |
|
|
|
|
|
|
|
//js自带对象或用户自定义类实例 |
|
|
|
case "[object Object]": |
|
|
|
var obj = {}; |
|
|
|
for (let key in data) { |
|
|
|
//会遍历原型链上的属性方法,可以用hasOwnProperty来控制 (obj.hasOwnProperty(prop) |
|
|
|
obj[key] = deepCopy(data[key]); |
|
|
|
} |
|
|
|
return obj; |
|
|
|
} |
|
|
|
} else { |
|
|
|
//string,number,bool,null,undefined,symbol |
|
|
|
return data; |
|
|
|
} |
|
|
|
} |
|
|
|
const [allItems, setAllItems] = useState([]) |
|
|
|
// const [headerItems, setHeaderItems] = useState([]) |
|
|
|
const [leftItems, setLeftItems] = useState([]) |
|
|
|
const [leftChange, setLeftChange] = useState(true) |
|
|
|
const [leftShow, setLeftShow] = useState(false) |
|
|
|
useEffect(() => { |
|
|
|
let topItems = []//头部导航 |
|
|
|
const lastSelectedKeys = localStorage.getItem('poms_selected_sider') |
|
|
|
let nextItems = []//所有导航 |
|
|
|
for (let c of sections) { |
|
|
|
if (typeof c.getNavItem == 'function') { |
|
|
|
let item = c.getNavItem(user, dispatch); |
|
|
|
if (item) { |
|
|
|
nextItems.push.apply(nextItems, item) |
|
|
|
if (item.length > 0) { |
|
|
|
for (let j = 0; j < item.length; j++) { |
|
|
|
let itm = deepCopy(item[j]); |
|
|
|
if (itm.hasOwnProperty('items')) { |
|
|
|
for (let i = 0; i < itm.items.length; i++) { |
|
|
|
itm.items[i].fatherKey = itm.itemKey |
|
|
|
delete itm.items[i].items |
|
|
|
//js自带对象或用户自定义类实例 |
|
|
|
case "[object Object]": |
|
|
|
var obj = {}; |
|
|
|
for (let key in data) { |
|
|
|
//会遍历原型链上的属性方法,可以用hasOwnProperty来控制 (obj.hasOwnProperty(prop) |
|
|
|
obj[key] = deepCopy(data[key]); |
|
|
|
} |
|
|
|
return obj; |
|
|
|
} |
|
|
|
} else { |
|
|
|
//string,number,bool,null,undefined,symbol |
|
|
|
return data; |
|
|
|
} |
|
|
|
} |
|
|
|
const [allItems, setAllItems] = useState([]) |
|
|
|
// const [headerItems, setHeaderItems] = useState([]) |
|
|
|
const [leftItems, setLeftItems] = useState([]) |
|
|
|
const [leftChange, setLeftChange] = useState(true) |
|
|
|
const [leftShow, setLeftShow] = useState(false) |
|
|
|
const [loading, setLoading] = useState(false) |
|
|
|
useEffect(() => { |
|
|
|
let topItems = []//头部导航 |
|
|
|
const lastSelectedKeys = localStorage.getItem('poms_selected_sider') |
|
|
|
let nextItems = []//所有导航 |
|
|
|
for (let c of sections) { |
|
|
|
if (typeof c.getNavItem == 'function') { |
|
|
|
let item = c.getNavItem(user, dispatch); |
|
|
|
if (item) { |
|
|
|
nextItems.push.apply(nextItems, item) |
|
|
|
if (item.length > 0) { |
|
|
|
for (let j = 0; j < item.length; j++) { |
|
|
|
let itm = deepCopy(item[j]); |
|
|
|
if (itm.hasOwnProperty('items')) { |
|
|
|
for (let i = 0; i < itm.items.length; i++) { |
|
|
|
itm.items[i].fatherKey = itm.itemKey |
|
|
|
delete itm.items[i].items |
|
|
|
} |
|
|
|
// topItems.push(itm) |
|
|
|
// } |
|
|
|
// else { |
|
|
|
// topItems.push.apply(topItems, item) |
|
|
|
} |
|
|
|
} |
|
|
|
// topItems.push(itm) |
|
|
|
// } |
|
|
|
// else { |
|
|
|
// topItems.push.apply(topItems, item) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setAllItems(nextItems) |
|
|
|
// setHeaderItems(topItems) |
|
|
|
if (lastSelectedKeys) {//如果有缓存 |
|
|
|
for (let i = 0; i < nextItems.length; i++) { |
|
|
|
if (JSON.parse(lastSelectedKeys)[0] == nextItems[i].itemKey) { |
|
|
|
} |
|
|
|
setAllItems(nextItems) |
|
|
|
// setHeaderItems(topItems) |
|
|
|
if (lastSelectedKeys) {//如果有缓存 |
|
|
|
for (let i = 0; i < nextItems.length; i++) { |
|
|
|
if (JSON.parse(lastSelectedKeys)[0] == nextItems[i].itemKey) { |
|
|
|
|
|
|
|
// let openArr = [] |
|
|
|
// for (let j = 0; j < nextItems[i].items.length; j++) { |
|
|
|
// openArr.push(nextItems[i].items[j].itemKey) |
|
|
|
// } |
|
|
|
// localStorage.setItem('poms_open_sider', JSON.stringify(openArr)) |
|
|
|
setLeftItems(nextItems[i].items) |
|
|
|
// let openArr = [] |
|
|
|
// for (let j = 0; j < nextItems[i].items.length; j++) { |
|
|
|
// openArr.push(nextItems[i].items[j].itemKey) |
|
|
|
// } |
|
|
|
// localStorage.setItem('poms_open_sider', JSON.stringify(openArr)) |
|
|
|
setLeftItems(nextItems[i].items) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
setLeftShow(true) |
|
|
|
} |
|
|
|
else { |
|
|
|
setLeftShow(false) |
|
|
|
} |
|
|
|
setLeftShow(true) |
|
|
|
} |
|
|
|
else { |
|
|
|
setLeftShow(false) |
|
|
|
} |
|
|
|
|
|
|
|
window.addEventListener('resize', resize_); |
|
|
|
return () => { |
|
|
|
window.removeEventListener('resize', resize_); |
|
|
|
} |
|
|
|
}, []) |
|
|
|
window.addEventListener('resize', resize_); |
|
|
|
return () => { |
|
|
|
window.removeEventListener('resize', resize_); |
|
|
|
} |
|
|
|
}, [user.authorized]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
let pathnameArr = location.pathname.split('/') |
|
|
|
let openArr = [] |
|
|
|
for (let i = 0; i < allItems.length; i++) { |
|
|
|
if (allItems[i].items) { |
|
|
|
for (let j = 0; j < allItems[i].items.length; j++) { |
|
|
|
if (allItems[i].items[j].items) { |
|
|
|
for (let k = 0; k < allItems[i].items[j].items.length; k++) { |
|
|
|
if (allItems[i].items[j].items[k].to == location.pathname) { |
|
|
|
for (let o = 0; o < allItems[i].items.length; o++) { |
|
|
|
openArr.push(allItems[i].items[o].itemKey) |
|
|
|
useEffect(() => { |
|
|
|
let pathnameArr = location.pathname.split('/') |
|
|
|
let openArr = [] |
|
|
|
for (let i = 0; i < allItems.length; i++) { |
|
|
|
if (allItems[i].items) { |
|
|
|
for (let j = 0; j < allItems[i].items.length; j++) { |
|
|
|
if (allItems[i].items[j].items) { |
|
|
|
for (let k = 0; k < allItems[i].items[j].items.length; k++) { |
|
|
|
if (allItems[i].items[j].items[k].to == location.pathname) { |
|
|
|
for (let o = 0; o < allItems[i].items.length; o++) { |
|
|
|
openArr.push(allItems[i].items[o].itemKey) |
|
|
|
} |
|
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify([pathnameArr[1]])) |
|
|
|
// localStorage.setItem('poms_open_sider', JSON.stringify(openArr)) |
|
|
|
setLeftItems(allItems[i].items) |
|
|
|
setLeftShow(true) |
|
|
|
} |
|
|
|
} |
|
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify([pathnameArr[1]])) |
|
|
|
// localStorage.setItem('poms_open_sider', JSON.stringify(openArr)) |
|
|
|
setLeftItems(allItems[i].items) |
|
|
|
setLeftShow(true) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, [location]) |
|
|
|
} |
|
|
|
}, [location]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
NProgress.done(); |
|
|
|
if ((!user || !user.authorized)) { |
|
|
|
// history.push('/signin'); |
|
|
|
getUserInfoByToken() |
|
|
|
} |
|
|
|
if (msg) { |
|
|
|
if (msg.done) { |
|
|
|
Notification.success({ |
|
|
|
// title: msg.done, |
|
|
|
content: msg.done, |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
} |
|
|
|
if (msg.error) { |
|
|
|
Notification.error({ |
|
|
|
// title: msg.error, |
|
|
|
content: msg.error, |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
const dom = document.getElementById('page-content'); |
|
|
|
if (dom) { |
|
|
|
if (!scrollbar) { |
|
|
|
scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true }); |
|
|
|
scrollbar.update(); |
|
|
|
} else { |
|
|
|
scrollbar.update(); |
|
|
|
dom.scrollTop = 0; |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
const getUserInfoByToken = () => { |
|
|
|
if (requestUser) { |
|
|
|
requestUser = false; |
|
|
|
RouteRequest.get(RouteTable.getDomain).then(res => { |
|
|
|
let token = Cookie.get('pepToken', { domain: res.root }); |
|
|
|
dispatch(login({ token })).then(res => { |
|
|
|
if (res.type == 'LOGIN_SUCCESS') { |
|
|
|
const data = res.payload?.user || {} |
|
|
|
localStorage.setItem('poms_open_sider', JSON.stringify(["archivesCenter"])) |
|
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify(["humanAffairs"])) |
|
|
|
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token, hrUserId: data.hrUserInfo && hrUserInfo.id })) |
|
|
|
dispatch(actions.humanAffairs.getUserResource(res.payload.user.id)).then(res => { |
|
|
|
if (res.success) { |
|
|
|
sessionStorage.setItem('userResource', JSON.stringify(res.payload.data)) |
|
|
|
history.push('/humanAffairs/archivesCenter/personnelArchives/personnelFiles') |
|
|
|
window.location.reload() |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
window.location.href = `${webPepUrl}/signin` |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
NProgress.done(); |
|
|
|
if ((!user || !user.authorized)) { |
|
|
|
// history.push('/signin'); |
|
|
|
setLoading(true); |
|
|
|
getUserInfoByToken() |
|
|
|
} |
|
|
|
if (msg) { |
|
|
|
if (msg.done) { |
|
|
|
Notification.success({ |
|
|
|
// title: msg.done, |
|
|
|
content: msg.done, |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
} |
|
|
|
if (msg.error) { |
|
|
|
Notification.error({ |
|
|
|
// title: msg.error, |
|
|
|
content: msg.error, |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
const dom = document.getElementById('page-content'); |
|
|
|
if (dom) { |
|
|
|
if (!scrollbar) { |
|
|
|
scrollbar = new PerfectScrollbar('#page-content', { suppressScrollX: true }); |
|
|
|
scrollbar.update(); |
|
|
|
} else { |
|
|
|
scrollbar.update(); |
|
|
|
dom.scrollTop = 0; |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
const getUserInfoByToken = () => { |
|
|
|
if (requestUser) { |
|
|
|
requestUser = false; |
|
|
|
RouteRequest.get(RouteTable.getDomain).then(res => { |
|
|
|
let token = Cookie.get('pepToken', { domain: res.root }); |
|
|
|
dispatch(login({ token })).then(res => { |
|
|
|
if (res.type == 'LOGIN_SUCCESS') { |
|
|
|
const data = res.payload?.user || {} |
|
|
|
if (data.codes && data.codes.length) { |
|
|
|
dispatch(actions.layout.initWebSocket({ ioUrl: apiRoot, token: data.token, hrUserId: data.hrUserInfo && hrUserInfo.id })) |
|
|
|
history.push('/humanAffairs/archivesCenter/personnelArchives/personnelFiles') |
|
|
|
localStorage.setItem('poms_open_sider', JSON.stringify(["archivesCenter"])) |
|
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify(["humanAffairs"])) |
|
|
|
setLoading(false); |
|
|
|
} else { |
|
|
|
setLoading(false); |
|
|
|
Toast.warning({ |
|
|
|
content: '用户无模块权限', duration: 2, onClose: () => { |
|
|
|
window.location.href = `${webPepUrl}/signin` |
|
|
|
}, |
|
|
|
}) |
|
|
|
} |
|
|
|
} else { |
|
|
|
setLoading(false); |
|
|
|
Toast.warning({ |
|
|
|
content: '鉴权失败', duration: 2, onClose: () => { |
|
|
|
window.location.href = `${webPepUrl}/signin` |
|
|
|
}, |
|
|
|
}) |
|
|
|
} |
|
|
|
}, error => { |
|
|
|
setLoading(false); |
|
|
|
Toast.warning({ |
|
|
|
content: '鉴权失败', duration: 2, onClose: () => { |
|
|
|
window.location.href = `${webPepUrl}/signin` |
|
|
|
}, |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, error => { |
|
|
|
window.location.href = `${webPepUrl}/signin` |
|
|
|
setLoading(false); |
|
|
|
Toast.warning({ |
|
|
|
content: '鉴权失败', duration: 2, onClose: () => { |
|
|
|
window.location.href = `${webPepUrl}/signin` |
|
|
|
}, |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, error => { |
|
|
|
message.error('鉴权失败', 5); |
|
|
|
window.location.href = `${webPepUrl}/signin` |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// websocket 使用测试 |
|
|
|
useEffect(() => { |
|
|
|
// console.log(socket) |
|
|
|
if (socket) { |
|
|
|
socket.on('CAMERA_ONLINE', function (msg) { |
|
|
|
console.info(msg); |
|
|
|
if (msg.online == 'ON') { |
|
|
|
Notification.success({ |
|
|
|
title: 'Hi', |
|
|
|
content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>已上线。</div></div>), |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
} |
|
|
|
if (msg.online == 'OFF') { |
|
|
|
Notification.error({ |
|
|
|
title: 'Hi', |
|
|
|
content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>发生离线。</div></div>), |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
// websocket 使用测试 |
|
|
|
useEffect(() => { |
|
|
|
// console.log(socket) |
|
|
|
if (socket) { |
|
|
|
socket.on('CAMERA_ONLINE', function (msg) { |
|
|
|
console.info(msg); |
|
|
|
if (msg.online == 'ON') { |
|
|
|
Notification.success({ |
|
|
|
title: 'Hi', |
|
|
|
content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>已上线。</div></div>), |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
} |
|
|
|
if (msg.online == 'OFF') { |
|
|
|
Notification.error({ |
|
|
|
title: 'Hi', |
|
|
|
content: (<div><div>{msg.name}</div><div style={{ marginTop: 5 }}>发生离线。</div></div>), |
|
|
|
duration: 2, |
|
|
|
}) |
|
|
|
} |
|
|
|
}); |
|
|
|
return () => { |
|
|
|
socket.off("CAMERA_ONLINE"); |
|
|
|
} |
|
|
|
}); |
|
|
|
return () => { |
|
|
|
socket.off("CAMERA_ONLINE"); |
|
|
|
} |
|
|
|
} |
|
|
|
}, [socket]) |
|
|
|
} |
|
|
|
}, [socket]) |
|
|
|
|
|
|
|
return ( |
|
|
|
<Layout id="layout" style={{ height: '100%' }}> |
|
|
|
{ |
|
|
|
<> |
|
|
|
<Layout.Header> |
|
|
|
<Header |
|
|
|
// headerItems={headerItems} //菜单重新分类规整 |
|
|
|
user={user} |
|
|
|
pathname={location.pathname} |
|
|
|
toggleCollapsed={() => { |
|
|
|
setCollapsed(!collapsed); |
|
|
|
}} |
|
|
|
collapsed={collapsed} |
|
|
|
history={history} |
|
|
|
tochange={(val) => { |
|
|
|
// setLeftChange(!leftChange) //会导致顶部右上角转小圈 |
|
|
|
if (val.fatherKey) { |
|
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify([val.itemKey])); |
|
|
|
const historyOpenKeys = localStorage.getItem('poms_open_sider'); |
|
|
|
const openKeys = historyOpenKeys && JSON.parse(historyOpenKeys).concat(val.openKey || val.itemKey) || [val.openKey || val.itemKey] |
|
|
|
localStorage.setItem('poms_open_sider', JSON.stringify(openKeys)); |
|
|
|
// for (let i = 0; i < allItems.length; i++) { |
|
|
|
// if (val.fatherKey == allItems[i].itemKey) { |
|
|
|
// let openArr = [] |
|
|
|
// for (let j = 0; j < allItems[i].items.length; j++) { |
|
|
|
// openArr.push(allItems[i].items[j].itemKey) |
|
|
|
// } |
|
|
|
// localStorage.setItem('poms_selected_sider', JSON.stringify([val.fatherKey])) |
|
|
|
// localStorage.setItem('poms_open_sider', JSON.stringify(openArr)) |
|
|
|
// setLeftItems(allItems[i].items) |
|
|
|
// } |
|
|
|
// } |
|
|
|
// setLeftShow(true) |
|
|
|
} |
|
|
|
else { |
|
|
|
localStorage.setItem('poms_open_sider', JSON.stringify([])) |
|
|
|
localStorage.removeItem('poms_selected_sider') |
|
|
|
// setLeftShow(false) |
|
|
|
} |
|
|
|
history.push(val.to); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Layout.Header> |
|
|
|
<Layout style={{ height: 'calc(100% - 50px)' }}> |
|
|
|
{leftShow ? (<Layout.Sider> |
|
|
|
<Sider |
|
|
|
sections={sections} |
|
|
|
leftItems={leftItems} |
|
|
|
dispatch={dispatch} |
|
|
|
user={user} |
|
|
|
leftChange={leftChange} |
|
|
|
pathname={location.pathname} |
|
|
|
collapsed={collapsed} |
|
|
|
/> |
|
|
|
</Layout.Sider>) : ('')} |
|
|
|
<Layout.Content> |
|
|
|
<div style={{ |
|
|
|
background: "#F2F3F5", |
|
|
|
}}> |
|
|
|
<div id="page-content" style={{ |
|
|
|
height: clientHeight - 12, |
|
|
|
minWidth: 520, |
|
|
|
position: 'relative', |
|
|
|
}}> |
|
|
|
<div style={{ |
|
|
|
minHeight: clientHeight - 32 - 12, |
|
|
|
position: 'relative', |
|
|
|
padding: '12px 8px', |
|
|
|
}}> |
|
|
|
{children} |
|
|
|
</div> |
|
|
|
<Layout.Footer> |
|
|
|
<Footer /> |
|
|
|
</Layout.Footer> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Layout.Content> |
|
|
|
</Layout> |
|
|
|
</> |
|
|
|
} |
|
|
|
</Layout > |
|
|
|
) |
|
|
|
return ( |
|
|
|
<Layout id="layout" style={{ height: '100%' }}> |
|
|
|
{ |
|
|
|
<Spin spinning={loading}> |
|
|
|
<Layout.Header> |
|
|
|
<Header |
|
|
|
// headerItems={headerItems} //菜单重新分类规整 |
|
|
|
user={user} |
|
|
|
pathname={location.pathname} |
|
|
|
toggleCollapsed={() => { |
|
|
|
setCollapsed(!collapsed); |
|
|
|
}} |
|
|
|
collapsed={collapsed} |
|
|
|
history={history} |
|
|
|
tochange={(val) => { |
|
|
|
// setLeftChange(!leftChange) //会导致顶部右上角转小圈 |
|
|
|
if (val.fatherKey) { |
|
|
|
localStorage.setItem('poms_selected_sider', JSON.stringify([val.itemKey])); |
|
|
|
const historyOpenKeys = localStorage.getItem('poms_open_sider'); |
|
|
|
const openKeys = historyOpenKeys && JSON.parse(historyOpenKeys).concat(val.openKey || val.itemKey) || [val.openKey || val.itemKey] |
|
|
|
localStorage.setItem('poms_open_sider', JSON.stringify(openKeys)); |
|
|
|
// for (let i = 0; i < allItems.length; i++) { |
|
|
|
// if (val.fatherKey == allItems[i].itemKey) { |
|
|
|
// let openArr = [] |
|
|
|
// for (let j = 0; j < allItems[i].items.length; j++) { |
|
|
|
// openArr.push(allItems[i].items[j].itemKey) |
|
|
|
// } |
|
|
|
// localStorage.setItem('poms_selected_sider', JSON.stringify([val.fatherKey])) |
|
|
|
// localStorage.setItem('poms_open_sider', JSON.stringify(openArr)) |
|
|
|
// setLeftItems(allItems[i].items) |
|
|
|
// } |
|
|
|
// } |
|
|
|
// setLeftShow(true) |
|
|
|
} |
|
|
|
else { |
|
|
|
localStorage.setItem('poms_open_sider', JSON.stringify([])) |
|
|
|
localStorage.removeItem('poms_selected_sider') |
|
|
|
// setLeftShow(false) |
|
|
|
} |
|
|
|
history.push(val.to); |
|
|
|
}} |
|
|
|
/> |
|
|
|
</Layout.Header> |
|
|
|
<Layout style={{ height: 'calc(100% - 50px)' }}> |
|
|
|
{user && user.authorized ? (<Layout.Sider> |
|
|
|
<Sider |
|
|
|
sections={sections} |
|
|
|
leftItems={leftItems} |
|
|
|
dispatch={dispatch} |
|
|
|
user={user} |
|
|
|
leftChange={leftChange} |
|
|
|
pathname={location.pathname} |
|
|
|
collapsed={collapsed} |
|
|
|
/> |
|
|
|
</Layout.Sider>) : ('')} |
|
|
|
{user && user.authorized ? <Layout.Content> |
|
|
|
<div style={{ |
|
|
|
background: "#F2F3F5", |
|
|
|
}}> |
|
|
|
<div id="page-content" style={{ |
|
|
|
height: clientHeight - 12, |
|
|
|
minWidth: 520, |
|
|
|
position: 'relative', |
|
|
|
}}> |
|
|
|
<div style={{ |
|
|
|
minHeight: clientHeight - 32 - 12, |
|
|
|
position: 'relative', |
|
|
|
padding: '12px 8px', |
|
|
|
}}> |
|
|
|
{children} |
|
|
|
</div> |
|
|
|
<Layout.Footer> |
|
|
|
<Footer /> |
|
|
|
</Layout.Footer> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Layout.Content> : ''} |
|
|
|
</Layout> |
|
|
|
</Spin> |
|
|
|
} |
|
|
|
</Layout > |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps(state) { |
|
|
|
const { global, auth, ajaxResponse, webSocket } = state; |
|
|
|
return { |
|
|
|
title: global.title, |
|
|
|
copyright: global.copyright, |
|
|
|
sections: global.sections, |
|
|
|
actions: global.actions, |
|
|
|
clientWidth: global.clientWidth, |
|
|
|
clientHeight: global.clientHeight, |
|
|
|
msg: ajaxResponse.msg, |
|
|
|
user: auth.user, |
|
|
|
socket: webSocket.socket, |
|
|
|
apiRoot: global.apiRoot, |
|
|
|
webPepUrl: global.webPepUrl |
|
|
|
}; |
|
|
|
const { global, auth, ajaxResponse, webSocket } = state; |
|
|
|
return { |
|
|
|
title: global.title, |
|
|
|
copyright: global.copyright, |
|
|
|
sections: global.sections, |
|
|
|
actions: global.actions, |
|
|
|
clientWidth: global.clientWidth, |
|
|
|
clientHeight: global.clientHeight, |
|
|
|
msg: ajaxResponse.msg, |
|
|
|
user: auth.user, |
|
|
|
socket: webSocket.socket, |
|
|
|
apiRoot: global.apiRoot, |
|
|
|
webPepUrl: global.webPepUrl |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(LayoutContainer); |