diff --git a/web/client/src/layout/containers/layout/index.jsx b/web/client/src/layout/containers/layout/index.jsx index e20bcb6..56f4a73 100644 --- a/web/client/src/layout/containers/layout/index.jsx +++ b/web/client/src/layout/containers/layout/index.jsx @@ -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: `
@@ -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: (