From 22f2aeedf9d68e56929290ddce191e3b53c790bd Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Wed, 17 Aug 2022 15:58:39 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/mouseMenu/main.js | 153 +++++++++++-------- src/components/subnav/main.js | 253 +++++++++++++++---------------- src/pages/home/home.js | 92 ++--------- src/router/index.js | 78 +++++++++- 4 files changed, 297 insertions(+), 279 deletions(-) diff --git a/src/components/mouseMenu/main.js b/src/components/mouseMenu/main.js index 296dadd3..d851c562 100644 --- a/src/components/mouseMenu/main.js +++ b/src/components/mouseMenu/main.js @@ -1,72 +1,93 @@ -import React from "react" -import ReactDOM from "react-dom" -import "./main.less" -import { Icon } from "zent" -import { HashRouter as Router, Route, Link } from "react-router-dom"; -import Bus from "../../assets/eventBus.js"; +/* + * @Author: Wind + * @Date: 2022-08-17 12:09:24 + * @LastEditors: Wind + * @LastEditTime: 2022-08-17 15:55:08 + * @Description: + * @FilePath: \frontend\src\components\mouseMenu\main.js + */ +import React from 'react' +import ReactDOM from 'react-dom' +import './main.less' +import { Icon } from 'zent' +import { HashRouter as Router, Route, Link } from 'react-router-dom' +import Bus from '../../assets/eventBus.js' export default class MouseMenu extends React.Component { - constructor(props) { - super(props); - this.state = { - activeMenuList: []//总动态路由数据 + constructor(props) { + super(props) + this.state = { + activeMenuList: [] //总动态路由数据 + } + } + componentDidMount() { + let activeMenuList = JSON.parse(sessionStorage.getItem('activeMenu')) + this.setState({ activeMenuList }) + } + closeMenuMask() { + this.props.mouseLeaveFn() + } + //点击菜单 + clickMenuItem(e, it) { + if (it.router == '/home/distributor-add') { + sessionStorage.setItem('pathname2', '/home/system/distributor-add') + let activerou = [ + { + pagetitle: '新建', + items: [ + { + path: 'distributor-list', + name: '分销商管理' + }, + { + path: 'distributor-add', + name: '新建分销商' + } + ] } + ] + sessionStorage.setItem('breaknav', JSON.stringify(activerou)) } - componentDidMount() { - let activeMenuList = JSON.parse(sessionStorage.getItem("activeMenu")); - this.setState({ activeMenuList }); - } - closeMenuMask() { - this.props.mouseLeaveFn(); - } - //点击菜单 - clickMenuItem(e, it) { - if (it.router == '/home/distributor-add') { - sessionStorage.setItem('pathname2', '/home/system/distributor-add') - let activerou = [{ - 'pagetitle': '新建', items: [ - { - "path": "distributor-list", - "name": "分销商管理" - }, - { - "path": "distributor-add", - "name": "新建分销商" - } - ] - }] - sessionStorage.setItem('breaknav', JSON.stringify(activerou)); + this.props.mouseLeaveFn() + } + render() { + let menuList = this.state.activeMenuList //路由表 + let urlHref = window.location.href.replace(/^\/|\/$/g, '') + const pathname = urlHref.lastIndexOf('/') + const pathnamestr = urlHref.substr(pathname) - } - this.props.mouseLeaveFn(); - } - render() { - let menuList = this.state.activeMenuList;//路由表 - let urlHref=(window.location.href).replace(/^\/|\/$/g, ''); - const pathname = urlHref.lastIndexOf("/"); - const pathnamestr = urlHref.substr(pathname); - - return ( -
-
-
- { - menuList.map((item, i) => { - return ( -
- { - item.children.map((childItem, childI) => { - return ( - childItem.level == 5 ? = 1 ? 'mouse_menuactive menu_items' : 'menu_items'} onClick={(e) => this.clickMenuItem(e, childItem)}>{childItem.title} : null - ) - }) - } -
- ) - }) + return ( +
+
+
+ {menuList?.map((item, i) => { + return ( +
+ {item.children.map((childItem, childI) => { + return childItem.level == 5 ? ( + = 1 + ? 'mouse_menuactive menu_items' + : 'menu_items' } -
- {/* */} + onClick={(e) => this.clickMenuItem(e, childItem)}> + {childItem.title} + + ) : null + })}
-
) - } -} \ No newline at end of file + ) + })} +
+ {/* */} +
+
+ ) + } +} diff --git a/src/components/subnav/main.js b/src/components/subnav/main.js index 2070c54d..3dd8faf9 100644 --- a/src/components/subnav/main.js +++ b/src/components/subnav/main.js @@ -1,165 +1,164 @@ -import React from "react"; -import ReactDOM from "react-dom"; -import "./main.less"; -import { Pop } from "zent"; -import MouseMenu from "../mouseMenu/main.js"; -import Bus from "../../assets/eventBus.js"; -import { HashRouter as Router, Route, Link } from "react-router-dom"; +import React from 'react' +import ReactDOM from 'react-dom' +import './main.less' +import { Pop } from 'zent' +import MouseMenu from '../mouseMenu/main.js' +import Bus from '../../assets/eventBus.js' +import { HashRouter as Router, Route, Link } from 'react-router-dom' export default class topNav extends React.Component { constructor(props) { - super(props); + super(props) this.state = { - pathname: "", - pathname2: sessionStorage.getItem("pathname2"), + pathname: '', + pathname2: sessionStorage.getItem('pathname2'), navlists: this.props.listnav, - menulinklist: JSON.parse(sessionStorage.getItem("menulinklist")) - ? JSON.parse(sessionStorage.getItem("menulinklist")) + menulinklist: JSON.parse(sessionStorage.getItem('menulinklist')) + ? JSON.parse(sessionStorage.getItem('menulinklist')) : [], - linkshowname: sessionStorage.getItem("linkshowname"), - showflag: JSON.parse(sessionStorage.getItem("showflag")), - mouseMenuFlag: false, //控制菜单移入效果 - }; - this.backFn = this.backFn.bind(this); + linkshowname: sessionStorage.getItem('linkshowname'), + showflag: JSON.parse(sessionStorage.getItem('showflag')), + mouseMenuFlag: false //控制菜单移入效果 + } + this.backFn = this.backFn.bind(this) } //点击一级菜单 showlinkmenu(e, item) { - let self = this; + let self = this try { item.children.forEach((it) => { if (it.level === 5) { - sessionStorage.setItem("pathname2", it.router); - throw "终止循环"; + sessionStorage.setItem('pathname2', it.router) + throw '终止循环' } - }); + }) } catch (e) {} - self.setState({ linkshowname: item.title }); - self.setState({ menulinklist: item.children }); + self.setState({ linkshowname: item.title }) + self.setState({ menulinklist: item.children }) // 防止刷新页面，导航签清空 - sessionStorage.setItem("menulinklist", JSON.stringify(item.children)); - sessionStorage.setItem("showflag", true); - sessionStorage.setItem("linkshowname", item.title); - Bus.emit("closeMask", false); //中介传参，关闭弹出框 - this.setState({ mouseMenuFlag: false }); + sessionStorage.setItem('menulinklist', JSON.stringify(item.children)) + sessionStorage.setItem('showflag', true) + sessionStorage.setItem('linkshowname', item.title) + Bus.emit('closeMask', false) //中介传参，关闭弹出框 + this.setState({ mouseMenuFlag: false }) } //鼠标移入 mouseMenuFn() { - this.setState({ mouseMenuFlag: true }); - this.props.openMouseMask(); + this.setState({ mouseMenuFlag: true }) + this.props.openMouseMask() } mouseLeaveFn() { //鼠标移出 - this.setState({ mouseMenuFlag: false }); - Bus.emit("closeMask", false); //中介传参，关闭弹出框 + this.setState({ mouseMenuFlag: false }) + Bus.emit('closeMask', false) //中介传参，关闭弹出框 } btnfn(item2) { - this.setState({ pathname2: item2.router }); - this.setState({ showflag: true }); - sessionStorage.setItem("showflag", true); - sessionStorage.setItem("pathname2", item2.router); + this.setState({ pathname2: item2.router }) + this.setState({ showflag: true }) + sessionStorage.setItem('showflag', true) + sessionStorage.setItem('pathname2', item2.router) } //返回 backFn(items) { - this.setState({ pathname2: items.router }); - sessionStorage.setItem("showflag", true); - sessionStorage.setItem("pathname2", items.router); - window.history.go(-1); + this.setState({ pathname2: items.router }) + sessionStorage.setItem('showflag', true) + sessionStorage.setItem('pathname2', items.router) + window.history.go(-1) if (items.length > 1) { - sessionStorage.setItem("pathname2", items[0].path); + sessionStorage.setItem('pathname2', items[0].path) } } componentDidUpdate(nextProps, nextState) { if (this.props.setrender !== nextProps.setrender) { this.setState({ - linkshowname: sessionStorage.getItem("linkshowname"), - menulinklist: JSON.parse(sessionStorage.getItem("menulinklist")) - ? JSON.parse(sessionStorage.getItem("menulinklist")) - : [], - }); + linkshowname: sessionStorage.getItem('linkshowname'), + menulinklist: JSON.parse(sessionStorage.getItem('menulinklist')) + ? JSON.parse(sessionStorage.getItem('menulinklist')) + : [] + }) } } render() { - let history0 = window.history.length <= 1; - let routeflag = sessionStorage.getItem("showflag"); - let breaknav = JSON.parse(sessionStorage.getItem("breaknav")); - let urlHref=(window.location.href).replace(/^\/|\/$/g, ''); - const pathname = urlHref.lastIndexOf("/"); - const pathnamestr = urlHref.substr(pathname); + let history0 = window.history.length <= 1 + let routeflag = sessionStorage.getItem('showflag') + let breaknav = JSON.parse(sessionStorage.getItem('breaknav')) + let urlHref = window.location.href.replace(/^\/|\/$/g, '') + const pathname = urlHref.lastIndexOf('/') + const pathnamestr = urlHref.substr(pathname) let breakflag = - pathnamestr.includes("add") || - pathnamestr.includes("aid") || - pathnamestr.includes("exchangecode-copyCode") || - pathnamestr.includes("distributor-edit") || - pathnamestr.includes("key-list") || - pathnamestr.includes("key-detail") || - pathnamestr.includes("key-edit") || - pathnamestr.includes("exchangecode-edit") || - pathnamestr.includes("plan-edit") || - pathnamestr.includes("product-edit"); - let sedcbreakflag = pathnamestr.includes("plan-create"); - let planbreakflag = pathnamestr.includes("mytempMould"); - let editbreakflag = pathnamestr.includes("edittemplate"); + pathnamestr.includes('add') || + pathnamestr.includes('aid') || + pathnamestr.includes('exchangecode-copyCode') || + pathnamestr.includes('distributor-edit') || + pathnamestr.includes('key-list') || + pathnamestr.includes('key-detail') || + pathnamestr.includes('key-edit') || + pathnamestr.includes('exchangecode-edit') || + pathnamestr.includes('plan-edit') || + pathnamestr.includes('product-edit') + let sedcbreakflag = pathnamestr.includes('plan-create') + let planbreakflag = pathnamestr.includes('mytempMould') + let editbreakflag = pathnamestr.includes('edittemplate') let backshow = - pathnamestr.includes("account-add") || - pathnamestr.includes("role-add") || - pathnamestr.includes("distributor-add") || - pathnamestr.includes("subaccount-add") || - pathnamestr.includes("exchangecode-edit") || - pathnamestr.includes("plan-edit") || - pathnamestr.includes("key-list") || - pathnamestr.includes("exchange-addcommodity"); + pathnamestr.includes('account-add') || + pathnamestr.includes('role-add') || + pathnamestr.includes('distributor-add') || + pathnamestr.includes('subaccount-add') || + pathnamestr.includes('exchangecode-edit') || + pathnamestr.includes('plan-edit') || + pathnamestr.includes('key-list') || + pathnamestr.includes('exchange-addcommodity') let breakchange = - pathnamestr.includes("exchangecode-add") || - pathnamestr.includes("key-edit") || - pathnamestr.includes("key-detail") || - pathnamestr.includes("product-edit") || - pathnamestr.includes("plan-edit"); + pathnamestr.includes('exchangecode-add') || + pathnamestr.includes('key-edit') || + pathnamestr.includes('key-detail') || + pathnamestr.includes('product-edit') || + pathnamestr.includes('plan-edit') if (breakchange) { - breaknav = JSON.parse(sessionStorage.getItem("breakchangenav")); + breaknav = JSON.parse(sessionStorage.getItem('breakchangenav')) } - if (pathnamestr.includes("aid")) { - breaknav = JSON.parse(sessionStorage.getItem("subbreaknav")); + if (pathnamestr.includes('aid')) { + breaknav = JSON.parse(sessionStorage.getItem('subbreaknav')) } - let accPath = null; + let accPath = null return ( -
-
- {this.state.navlists.map((item, i) => { +
+
+ {this.state.navlists?.map((item, i) => { try { item.children.forEach((it) => { if (it.level === 5) { - accPath = it.router; - throw "终止循环"; + accPath = it.router + throw '终止循环' } - }); + }) } catch (e) {} return item.children && item.children.length > 0 ? ( this.showlinkmenu(e, item)} onMouseEnter={this.mouseMenuFn.bind(this)} - onMouseLeave={this.mouseLeaveFn.bind(this)} - > + onMouseLeave={this.mouseLeaveFn.bind(this)}> {item.title} - ) : null; + ) : null })} {this.state.mouseMenuFlag ? ( -
+
-
-
+ routeflag == 'true' ? ( +
+
+
{this.state.menulinklist.map((item, key) => { return item.level == 5 ? ( it.level == 5) .length > 1 - ? "menuactive" - : "" - } - > + ? 'menuactive' + : '' + }> {item.title} - ) : null; + ) : null })}
数据最后更新时间:{window.timeshow} @@ -204,56 +202,53 @@ export default class topNav extends React.Component { sedcbreakflag == false && breakflag == true && breaknav != null && - routeflag == "true" ? ( -
+ routeflag == 'true' ? ( +
{breaknav.map((item, key) => { return ( -
+
{!history0 && !backshow ? ( + trigger='hover' + position='bottom-center' + content='返回'> this.backFn(item.items)} - src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/Marketing/back.svg" - alt="" + src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/Marketing/back.svg' + alt='' /> ) : null}
+ !history0 && !backshow ? '1px solid #d1cfcf' : 'none' + }}> {item.items.map((item2, key2) => { return ( -
+
{key2 != 0 ? > : null} - {" "} + ? 'nomenuactive' + : '' + }> + {' '} {item2.name}
- ); + ) })}
- ); + ) })}
) : null}
- ); + ) } } diff --git a/src/pages/home/home.js b/src/pages/home/home.js index 20a33499..a4e49f43 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -6,7 +6,7 @@ import Bus from '@/assets/eventBus.js' import Subnav from '@/components/subnav/main' import { Avatar, Pop, Sweetalert, Dialog, Icon, Notify } from 'zent' import ModifySelfpwd from './ModifySelfpwd' -import router from '@/router/index' +import { router, navRoute } from '@/router/index' import { getUserinfo, @@ -33,81 +33,7 @@ export default class App extends Component { ], pathname: '', userInfo: {}, - navlist: [ - { - name: '系统管理', - childmenu: [ - { - group: '账号管理', - items: [ - { path: '/home/system/account-list', name: '账号管理' }, - { path: '/home/system/role-list', name: '角色管理' }, - { path: '/home/system/station', name: '岗位管理' }, - { path: '/home/system/menu', name: '菜单管理' }, - { path: '/home/system/customize', name: '定制化模板' }, - { path: '/home/system/systemModel', name: '系统模板' } - ] - } - ], - path: '/system' - }, - { - name: '分销商管理', - childmenu: [ - { - group: '分销商管理', - items: [{ path: '/home/distributor-list', name: '分销商管理' }] - } - ], - path: '/home/distributor-list' - }, - { - name: '营销计划管理', - childmenu: [ - { - group: '营销计划管理', - items: [ - { path: '/home/plan-list', name: '营销计划管理' }, - { path: '/home/plan-keyList', name: 'KEY列表管理' } - ] - } - ], - path: '/home/plan-list' - }, - { - name: '兑换码管理', - childmenu: [ - { - group: '兑换码列表', - items: [{ path: '/home/exchangecode-list', name: '兑换码列表' }] - } - ], - path: '/home/exchangecode-list' - }, - { - name: '落地页管理', - childmenu: [ - { - group: '落地页列表', - items: [ - { path: '/home/exchangepage', name: '落地页列表' }, - { path: '/home/myexchangetemplate', name: '我的模板' } - ] - } - ], - path: '/home/exchangepage' - }, - { - name: '订单管理', - childmenu: [ - { - group: '订单管理', - items: [{ path: '/home/order-list', name: '订单列表' }] - } - ], - path: '/home/order-list' - } - ] + navlist: navRoute } //打开菜单移入遮罩 openMouseMask() { @@ -223,23 +149,23 @@ export default class App extends Component { let pathnameNow = nextProps.location.pathname let item = null if (pathnameNow.includes('system')) { - item = activeMenuList.filter((item) => item.id == 14) + item = activeMenuList?.filter((item) => item.id == 14) this.setState({ setrender: 1 }) } if (pathnameNow.includes('distributor')) { - item = activeMenuList.filter((item) => item.id == 15) + item = activeMenuList?.filter((item) => item.id == 15) this.setState({ setrender: 2 }) } if (pathnameNow.includes('plan') || pathnameNow.includes('key')) { - item = activeMenuList.filter((item) => item.id == 16) + item = activeMenuList?.filter((item) => item.id == 16) this.setState({ setrender: 3 }) } if ( pathnameNow.includes('exchangecode') && !pathnameNow.includes('exchangecode-add') ) { - item = activeMenuList.filter((item) => item.id == 17) + item = activeMenuList?.filter((item) => item.id == 17) this.setState({ setrender: 4 }) } if ( @@ -247,16 +173,16 @@ export default class App extends Component { pathnameNow.includes('edittemplate') || pathnameNow.includes('myexchangetemplate') ) { - item = activeMenuList.filter((item) => item.id == 18) + item = activeMenuList?.filter((item) => item.id == 18) this.setState({ setrender: 5 }) } if (pathnameNow.includes('order-list')) { - item = activeMenuList.filter((item) => item.id == 19) + item = activeMenuList?.filter((item) => item.id == 19) this.setState({ setrender: 6 }) } if (item) { try { - item[0].children.forEach((it) => { + item[0]?.children?.forEach((it) => { if (it.level === 5) { sessionStorage.setItem('pathname2', it.router) throw '终止循环' diff --git a/src/router/index.js b/src/router/index.js index 0c49a4fd..afe1d64c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -250,4 +250,80 @@ const router = [ } ] -export default router +const navRoute = [ + { + name: '系统管理', + childmenu: [ + { + group: '账号管理', + items: [ + { path: '/home/system/account-list', name: '账号管理' }, + { path: '/home/system/role-list', name: '角色管理' }, + { path: '/home/system/station', name: '岗位管理' }, + { path: '/home/system/menu', name: '菜单管理' }, + { path: '/home/system/customize', name: '定制化模板' }, + { path: '/home/system/systemModel', name: '系统模板' } + ] + } + ], + path: '/system' + }, + { + name: '分销商管理', + childmenu: [ + { + group: '分销商管理', + items: [{ path: '/home/distributor-list', name: '分销商管理' }] + } + ], + path: '/home/distributor-list' + }, + { + name: '营销计划管理', + childmenu: [ + { + group: '营销计划管理', + items: [ + { path: '/home/plan-list', name: '营销计划管理' }, + { path: '/home/plan-keyList', name: 'KEY列表管理' } + ] + } + ], + path: '/home/plan-list' + }, + { + name: '兑换码管理', + childmenu: [ + { + group: '兑换码列表', + items: [{ path: '/home/exchangecode-list', name: '兑换码列表' }] + } + ], + path: '/home/exchangecode-list' + }, + { + name: '落地页管理', + childmenu: [ + { + group: '落地页列表', + items: [ + { path: '/home/exchangepage', name: '落地页列表' }, + { path: '/home/myexchangetemplate', name: '我的模板' } + ] + } + ], + path: '/home/exchangepage' + }, + { + name: '订单管理', + childmenu: [ + { + group: '订单管理', + items: [{ path: '/home/order-list', name: '订单列表' }] + } + ], + path: '/home/order-list' + } +] + +export { router, navRoute }