HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

解决报错

This commit is contained in:
wangsongsole 2022-08-17 15:58:39 +08:00
parent 70228f96fb
commit 22f2aeedf9
4 changed files with 297 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/components/mouseMenu/main.js
View File

@ -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 (
<div className="mouseMenu" onMouseLeave={this.closeMenuMask.bind(this)} onMouseEnter={this.props.mouseEnter}>
<div className="menuBody">
<div className="first_menu">
{
menuList.map((item, i) => {
return (
<div key={i}>
{
item.children.map((childItem, childI) => {
return (
childItem.level == 5 ? <Link key={childI} to={childItem.router} className={childItem.router.includes(pathnamestr) && item.children.length >= 1 ? 'mouse_menuactive menu_items' : 'menu_items'} onClick={(e) => this.clickMenuItem(e, childItem)}>{childItem.title}</Link> : null
)
})
}
</div>
)
})
return (
<div
className='mouseMenu'
onMouseLeave={this.closeMenuMask.bind(this)}
onMouseEnter={this.props.mouseEnter}>
<div className='menuBody'>
<div className='first_menu'>
{menuList?.map((item, i) => {
return (
<div key={i}>
{item.children.map((childItem, childI) => {
return childItem.level == 5 ? (
<Link
key={childI}
to={childItem.router}
className={
childItem.router.includes(pathnamestr) &&
item.children.length >= 1
? 'mouse_menuactive menu_items'
: 'menu_items'
}
</div>
{/* <Icon type="close" className="closeMenu" onClick={this.closeMenuMask.bind(this)} /> */}
onClick={(e) => this.clickMenuItem(e, childItem)}>
{childItem.title}
</Link>
) : null
})}
</div>
</div>)
}
}
)
})}
</div>
{/* <Icon type="close" className="closeMenu" onClick={this.closeMenuMask.bind(this)} /> */}
</div>
</div>
)
}
}

253
src/components/subnav/main.js
View File

@ -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 (
<div className="topheader">
<div className="nava">
{this.state.navlists.map((item, i) => {
<div className='topheader'>
<div className='nava'>
{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 ? (
<Link
key={i}
to={item.router == "/system" ? accPath : item.router}
to={item.router == '/system' ? accPath : item.router}
style={
this.state.linkshowname == item.title
? {
width: "#100%",
background: "#f2f4f7",
color: "#296bef",
width: '#100%',
background: '#f2f4f7',
color: '#296bef'
}
: null
}
className={
this.state.linkshowname == item.title ? "active" : ""
this.state.linkshowname == item.title ? 'active' : ''
}
onClick={(e) => this.showlinkmenu(e, item)}
onMouseEnter={this.mouseMenuFn.bind(this)}
onMouseLeave={this.mouseLeaveFn.bind(this)}
>
onMouseLeave={this.mouseLeaveFn.bind(this)}>
{item.title}
</Link>
) : null;
) : null
})}
{this.state.mouseMenuFlag ? (
<div className="moveMenu">
<div className='moveMenu'>
<MouseMenu
mouseEnter={this.mouseMenuFn.bind(this)}
mouseLeaveFn={this.mouseLeaveFn.bind(this)}
@ -171,12 +170,12 @@ export default class topNav extends React.Component {
{editbreakflag == false &&
planbreakflag == false &&
sedcbreakflag == false &&
this.state.menulinklist != "" &&
this.state.menulinklist != '' &&
breakflag == false &&
routeflag == "true" ? (
<div className="linkmenu">
<div className="dflexaj navshow">
<div className="linkmenu-row">
routeflag == 'true' ? (
<div className='linkmenu'>
<div className='dflexaj navshow'>
<div className='linkmenu-row'>
{this.state.menulinklist.map((item, key) => {
return item.level == 5 ? (
<Link
@ -187,13 +186,12 @@ export default class topNav extends React.Component {
item.router.includes(pathnamestr) &&
this.state.menulinklist.filter((it) => it.level == 5)
.length > 1
? "menuactive"
: ""
}
>
? 'menuactive'
: ''
}>
{item.title}
</Link>
) : null;
) : null
})}
</div>
<span>数据最后更新时间:{window.timeshow}</span>
@ -204,56 +202,53 @@ export default class topNav extends React.Component {
sedcbreakflag == false &&
breakflag == true &&
breaknav != null &&
routeflag == "true" ? (
<div className="linkmenu">
routeflag == 'true' ? (
<div className='linkmenu'>
{breaknav.map((item, key) => {
return (
<div className="nolinkmenu-row" key={key}>
<div className='nolinkmenu-row' key={key}>
{!history0 && !backshow ? (
<Pop
trigger="hover"
position="bottom-center"
content="返回"
>
trigger='hover'
position='bottom-center'
content='返回'>
<img
onClick={() => 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=''
/>
</Pop>
) : null}
<div
className="nonav"
className='nonav'
style={{
borderLeft:
!history0 && !backshow ? "1px solid #d1cfcf" : "none",
}}
>
!history0 && !backshow ? '1px solid #d1cfcf' : 'none'
}}>
{item.items.map((item2, key2) => {
return (
<div className="dflexa" key={key2}>
<div className='dflexa' key={key2}>
{key2 != 0 ? <span>></span> : null}
<font
className={
key2 + 1 == breaknav[0].items.length
? "nomenuactive"
: ""
}
>
{" "}
? 'nomenuactive'
: ''
}>
{' '}
{item2.name}
</font>
</div>
);
)
})}
</div>
</div>
);
)
})}
</div>
) : null}
</div>
);
)
}
}

92
src/pages/home/home.js
View File

@ -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 '终止循环'

78
src/router/index.js
View File

@ -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 }