Browse Source

导航

release_0.0.1
deartibers 3 years ago
parent
commit
f5bda27f5e
  1. 102
      web/client/src/layout/components/sider/index.jsx
  2. 7
      web/client/src/layout/containers/layout/index.jsx
  3. 4
      web/client/src/sections/auth/containers/login.jsx
  4. 12
      web/client/src/sections/example/nav-item.jsx
  5. 12
      web/client/src/sections/example1/nav-item.jsx

102
web/client/src/layout/components/sider/index.jsx

@ -16,49 +16,50 @@ const Sider = (props) => {
useEffect(() => { useEffect(() => {
const { sections, dispatch, user } = props; const { sections, dispatch, user } = props;
let nextItems = leftItems let nextItems = leftItems
let pathname_ = pathname == '/' ? homePath : pathname // let pathname_ = pathname == '/' ? homePath : pathname
const initKeys = (items, lastKeys) => { // const initKeys = (items, lastKeys) => {
console.log('1111111',items); // // console.log('1111111',items);
for (let it of items) { // for (let it of items) {
if (it.to && it.to == pathname_) { // if (it.to && it.to == pathname_) {
lastKeys.selectedKeys.push(it.itemKey) // // console.log('22222222222',it.itemKey);
return lastKeys // lastKeys.selectedKeys.push(it.itemKey)
} else if (it.items && it.items.length) { // return lastKeys
const preLastKeys = JSON.parse(JSON.stringify(lastKeys)) // } else if (it.items && it.items.length) {
preLastKeys.openKeys.push(it.itemKey) // const preLastKeys = JSON.parse(JSON.stringify(lastKeys))
const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys))) // preLastKeys.openKeys.push(it.itemKey)
if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) { // const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys)))
return nextKeys // if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) {
} // return nextKeys
} // }
} // }
return lastKeys // }
return { // return lastKeys
selectedKeys: [], // return {
openKeys: [] // selectedKeys: [],
} // openKeys: []
} // }
// }
setItems(nextItems) setItems(nextItems)
const { selectedKeys, openKeys } = initKeys( // const { selectedKeys, openKeys } = initKeys(
nextItems, // nextItems,
{ // {
selectedKeys: [], // selectedKeys: [],
openKeys: [] // openKeys: []
} // }
) // )
if (selectedKeys.length || openKeys.length) { // if (selectedKeys.length || openKeys.length) {
setSelectedKeys(selectedKeys) // setSelectedKeys(selectedKeys)
setOpenKeys(openKeys) // setOpenKeys(openKeys)
} else { // } else {
const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider') // const lastSelectedKeys = localStorage.getItem('vcmp_selected_sider')
if (lastSelectedKeys) { // if (lastSelectedKeys) {
setSelectedKeys(JSON.parse(lastSelectedKeys)) // setSelectedKeys(JSON.parse(lastSelectedKeys))
} // }
const lastOpenKeys = localStorage.getItem('vcmp_open_sider') // const lastOpenKeys = localStorage.getItem('vcmp_open_sider')
if (lastOpenKeys) { // if (lastOpenKeys) {
setOpenKeys(JSON.parse(lastOpenKeys)) // setOpenKeys(JSON.parse(lastOpenKeys))
} // }
} // }
scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true }); scrollbar = new PerfectScrollbar('#page-slider', { suppressScrollX: true });
if (pathname == '/') { if (pathname == '/') {
@ -69,23 +70,6 @@ const Sider = (props) => {
let routeSelectedKeys = [useLocation().pathname.split('/')[2]]// let routeSelectedKeys = [useLocation().pathname.split('/')[2]]//
let routeSelectedKeyss = [useLocation().pathname.split('/')[3]]// let routeSelectedKeyss = [useLocation().pathname.split('/')[3]]//
useEffect(() => { useEffect(() => {
let pathname_ = pathname == '/' ? homePath : pathname
const initKeys = (items, lastKeys) => {
for (let it of items) {
if (it.to && it.to == pathname_) {
lastKeys.selectedKeys.push(it.itemKey)
return lastKeys
} else if (it.items && it.items.length) {
const preLastKeys = JSON.parse(JSON.stringify(lastKeys))
preLastKeys.openKeys.push(it.itemKey)
const nextKeys = initKeys(it.items, JSON.parse(JSON.stringify(preLastKeys)))
if (nextKeys.selectedKeys.length > preLastKeys.selectedKeys.length || nextKeys.openKeys.length > preLastKeys.openKeys.length) {
return nextKeys
}
}
}
return lastKeys
}
if (routeSelectedKeyss[0]) { if (routeSelectedKeyss[0]) {
setSelectedKeys(routeSelectedKeyss) setSelectedKeys(routeSelectedKeyss)
} }

7
web/client/src/layout/containers/layout/index.jsx

@ -94,11 +94,11 @@ const LayoutContainer = props => {
if (item) { if (item) {
nextItems.push.apply(nextItems, item) nextItems.push.apply(nextItems, item)
if (item.length > 0) { if (item.length > 0) {
let itm = deepCopy(item[0]); for (let j = 0; j < item.length; j++) {
let itms=deepCopy(item[0]); let itm = deepCopy(item[j]);
if (itm.hasOwnProperty('items')) { if (itm.hasOwnProperty('items')) {
// siderItems.push.apply(siderItems, itms.items)
for (let i = 0; i < itm.items.length; i++) { for (let i = 0; i < itm.items.length; i++) {
itm.items[i].fatherKey=itm.itemKey
delete itm.items[i].items delete itm.items[i].items
} }
topItems.push(itm) topItems.push(itm)
@ -110,6 +110,7 @@ const LayoutContainer = props => {
} }
} }
} }
}
setLeftShow(false) setLeftShow(false)
setAllItems(nextItems) setAllItems(nextItems)
setHeaderItems(topItems) setHeaderItems(topItems)

4
web/client/src/sections/auth/containers/login.jsx

@ -20,9 +20,7 @@ const Login = props => {
useEffect(() => { useEffect(() => {
if (user && user.authorized) { if (user && user.authorized) {
dispatch(push('/example/e1/c1')); dispatch(push('/console'));
localStorage.setItem('vcmp_selected_sider', JSON.stringify(['nvr']))
localStorage.setItem('vcmp_open_sider', JSON.stringify(['equipmentWarehouse']))
} }
}, [user]) }, [user])

12
web/client/src/sections/example/nav-item.jsx

@ -14,7 +14,6 @@ export function getNavItem (user, dispatch) {
text: '举个棒子1', text: '举个棒子1',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e1/c1', to: '/example/e1/c1',
fatherKey:'example',
items: [{ items: [{
itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1' itemKey: 'c1', to: '/example/e1/c1', text: '举个锤子1'
}] }]
@ -23,7 +22,6 @@ export function getNavItem (user, dispatch) {
text: '举个棒子2', text: '举个棒子2',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e2/c2', to: '/example/e2/c2',
fatherKey:'example',
items: [{ items: [{
itemKey: 'c2', to: '/example/e2/c2', text: '举个锤子2' itemKey: 'c2', to: '/example/e2/c2', text: '举个锤子2'
}] }]
@ -31,15 +29,5 @@ export function getNavItem (user, dispatch) {
] ]
}, },
] ]
// ,[
// {
// itemKey: 'equipmentWarehouse', text: '', icon:<iconpark-icon style={{width:20,height:20}} name="she-1"></iconpark-icon>,
// items: [
// { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR' },
// { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '' },
// { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '' },
// ]
// },
// ]
); );
} }

12
web/client/src/sections/example1/nav-item.jsx

@ -14,7 +14,6 @@ export function getNavItem (user, dispatch) {
text: '举个棒子3', text: '举个棒子3',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e3/c3', to: '/example/e3/c3',
fatherKey:'example1',
items: [{ items: [{
itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3' itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3'
}] }]
@ -23,7 +22,6 @@ export function getNavItem (user, dispatch) {
text: '举个棒子4', text: '举个棒子4',
icon: <IconCode />, icon: <IconCode />,
to: '/example/e4/c4', to: '/example/e4/c4',
fatherKey:'example1',
items: [{ items: [{
itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4' itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4'
}] }]
@ -31,15 +29,5 @@ export function getNavItem (user, dispatch) {
] ]
}, },
] ]
// ,[
// {
// itemKey: 'equipmentWarehouse', text: '', icon:<iconpark-icon style={{width:20,height:20}} name="she-1"></iconpark-icon>,
// items: [
// { itemKey: 'nvr', to: '/equipmentWarehouse/nvr', text: 'NVR' },
// { itemKey: 'camera', to: '/equipmentWarehouse/camera', text: '' },
// { itemKey: 'recycle', to: '/equipmentWarehouse/recycle', text: '' },
// ]
// },
// ]
); );
} }
Loading…
Cancel
Save