配key列表路由

This commit is contained in:
wangsongsole 2022-07-28 11:02:19 +08:00
parent f6da7c08cf
commit 2da88498aa
1 changed files with 283 additions and 278 deletions

View File

@ -1,314 +1,319 @@
import ReactDOM from "react-dom";
import React, { Component } from "react";
import ReactDOM from 'react-dom'
import React, { Component } from 'react'
import { HashRouter as Router, Route, Link, Redirect } from "react-router-dom";
import "./home.less";
import "../../assets/comm.css";
import Bus from "../../assets/eventBus.js";
import { HashRouter as Router, Route, Link, Redirect } from 'react-router-dom'
import './home.less'
import '../../assets/comm.css'
import Bus from '../../assets/eventBus.js'
// import Topnav from "../../components/topNav/main"
import Subnav from "../../components/subnav/main";
import { Avatar, Pop, Sweetalert, Dialog, Icon, Notify, Button } from "zent";
import ModifySelfpwd from "./ModifySelfpwd";
import extension from "../extension/main/main";
import overview from "../overview/main/main";
import Subnav from '../../components/subnav/main'
import { Avatar, Pop, Sweetalert, Dialog, Icon, Notify, Button } from 'zent'
import ModifySelfpwd from './ModifySelfpwd'
import extension from '../extension/main/main'
import overview from '../overview/main/main'
import distributor from "../distributor/main/main";
import exchangecodelist from "../exchangecode/list/list";
import exchangecodeadd from "../exchangecode/add/add";
import exchangecodeedit from "../exchangecode/edit/edit";
import exchangecommodity from "../exchangecode/commodity/commodity";
import productedit from "../exchangecode/commodity/goodedit.js";
import Errpage from "../errpage/errpage.js";
import distributor from '../distributor/main/main'
import exchangecodelist from '../exchangecode/list/list'
import exchangecodeadd from '../exchangecode/add/add'
import exchangecodeedit from '../exchangecode/edit/edit'
import exchangecommodity from '../exchangecode/commodity/commodity'
import productedit from '../exchangecode/commodity/goodedit.js'
import Errpage from '../errpage/errpage.js'
import exchangepage from "../exchangepage/main/main";
import order from "../order/main/main";
import orderList from "../order/list/list";
import orderdetails from "../order/more/more";
import orderadd from "../order/add/add";
import plan from "../plan/main/main";
import planlist from "../plan/list/list";
import planadd from "../plan/add/add";
import planedit from "../plan/add/edit";
import exchangepage from '../exchangepage/main/main'
import order from '../order/main/main'
import orderList from '../order/list/list'
import orderdetails from '../order/more/more'
import orderadd from '../order/add/add'
import plan from '../plan/main/main'
import planlist from '../plan/list/list'
import planadd from '../plan/add/add'
import planedit from '../plan/add/edit'
import keylist from "../plan/key/list";
import keyorderlist from "../plan/keyorder/keyorder";
import keyedit from "../plan/key/edit.js";
import keydetail from "../plan/key/detail/list.js";
import keylog from "../plan/key/detail/log.js";
import keylist from '../plan/key/list'
import keysList from '../plan/keyList'
import keyorderlist from '../plan/keyorder/keyorder'
import keyedit from '../plan/key/edit.js'
import keydetail from '../plan/key/detail/list.js'
import keylog from '../plan/key/detail/log.js'
import accountlist from "../system/account/list/list";
import accountadd from "../system/account/add/add";
import subaccountlist from "../system/subAccount/list/list";
import subaccountadd from "../system/subAccount/add/add";
import rolelist from "../system/role/list/list";
import roleadd from "../system/role/add/add";
import station from "../system/station/main";
import customize from "../system/customize/main.js";
import myMould from "../system/systemMould/main.js";
import accountlist from '../system/account/list/list'
import accountadd from '../system/account/add/add'
import subaccountlist from '../system/subAccount/list/list'
import subaccountadd from '../system/subAccount/add/add'
import rolelist from '../system/role/list/list'
import roleadd from '../system/role/add/add'
import station from '../system/station/main'
import customize from '../system/customize/main.js'
import myMould from '../system/systemMould/main.js'
import menu from "../system/menu/main/main";
import menu from '../system/menu/main/main'
import distributorlist from "../distributor/list/list";
import distributoradd from "../distributor/add/add";
import distributorEdit from "../distributor/add/add";
import mytempMouldadd from "../exchangepage/template/main.js";
import distributorlist from '../distributor/list/list'
import distributoradd from '../distributor/add/add'
import distributorEdit from '../distributor/add/add'
import mytempMouldadd from '../exchangepage/template/main.js'
// import edittemplate from '../exchangepage/edittemplate/main.js'
import myexchangetemplate from "../exchangepage/mytemplate/main.js";
import myexchangetemplate from '../exchangepage/mytemplate/main.js'
import {
getUserinfo,
handelResponse,
postLogOut,
getProductInfoSelect,
} from "../../assets/api.js";
let timerstop = null;
getProductInfoSelect
} from '../../assets/api.js'
let timerstop = null
export default class App extends Component {
constructor(props) {
super(props);
super(props)
}
state = {
visible: false,
mouseMenuMask: false,
setrender: 1,
linkshow: "系统管理",
linkshow: '系统管理',
isShowSub: true,
noShowSubMenu: [
"/home/extension",
"/home/overview",
"/home/plan-create",
"/home/mytempMould",
"/home/edittemplate",
'/home/extension',
'/home/overview',
'/home/plan-create',
'/home/mytempMould',
'/home/edittemplate'
],
pathname: "",
pathname: '',
userInfo: {},
navlist: [
{
name: "系统管理",
name: '系统管理',
childmenu: [
{
group: "账号管理",
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: '/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",
path: '/system'
},
{
name: "分销商管理",
name: '分销商管理',
childmenu: [
{
group: "分销商管理",
items: [{ path: "/home/distributor-list", name: "分销商管理" }],
},
group: '分销商管理',
items: [{ path: '/home/distributor-list', name: '分销商管理' }]
}
],
path: "/home/distributor-list",
path: '/home/distributor-list'
},
{
name: "营销计划管理",
name: '营销计划管理',
childmenu: [
{
group: "营销计划管理",
items: [{ path: "/home/plan-list", name: "营销计划管理" }],
},
],
path: "/home/plan-list",
},
{
name: "兑换码管理",
childmenu: [
{
group: "兑换码列表",
items: [{ path: "/home/exchangecode-list", name: "兑换码列表" }],
},
],
path: "/home/exchangecode-list",
},
{
name: "落地页管理",
childmenu: [
{
group: "落地页列表",
group: '营销计划管理',
items: [
{ path: "/home/exchangepage", name: "落地页列表" },
{ path: "/home/myexchangetemplate", name: "我的模板" },
{ path: '/home/plan-list', name: '营销计划管理' },
{ path: '/home/plan-keyList', name: 'KEY列表管理' }
]
}
],
},
],
path: "/home/exchangepage",
path: '/home/plan-list'
},
{
name: "订单管理",
name: '兑换码管理',
childmenu: [
{
group: "订单管理",
items: [{ path: "/home/order-list", name: "订单列表" }],
},
group: '兑换码列表',
items: [{ path: '/home/exchangecode-list', name: '兑换码列表' }]
}
],
path: "/home/order-list",
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'
}
]
}
//打开菜单移入遮罩
openMouseMask() {
this.setState({ mouseMenuMask: true });
this.setState({ mouseMenuMask: true })
}
componentDidMount(e) {
Bus.addListener('closeMask', (prop) => {
console.log(161, this);
this.setState({ mouseMenuMask: prop });
console.log(161, this)
this.setState({ mouseMenuMask: prop })
})
if (this.state.noShowSubMenu.indexOf(this.props.location.pathname) > -1) {
this.setState({ isShowSub: false });
this.setState({ isShowSub: false })
} else {
this.setState({ isShowSub: true });
this.setState({ isShowSub: true })
}
}
componentWillUnmount() { }
componentWillUnmount() {}
//获取用户信息
getUserInfuFn() {
let self = this;
let self = this
getUserinfo()
.then((res) => {
handelResponse(
res,
(response, msg) => {
self.setState({ userInfo: response });
sessionStorage.setItem("userInfo", JSON.stringify(response));
self.setState({ userInfo: response })
sessionStorage.setItem('userInfo', JSON.stringify(response))
},
(err) => { }
);
(err) => {}
)
})
.catch((err) => { });
.catch((err) => {})
}
//修改密码
modifyFn() {
this.setState({ visible: true });
this.setState({ visible: true })
}
//修改密码
modifyPwdFn() { }
modifyPwdFn() {}
//退出登录
exitFn() {
let self = this;
let self = this
Sweetalert.confirm({
type: "warning",
type: 'warning',
closeBtn: true,
title: "确认操作",
title: '确认操作',
content: <p>是否退出登录</p>,
onConfirm: () => {
postLogOut()
.then((res) => {
if (res.code == 200) {
setTimeout(() => {
self.props.history.replace("/login");
Notify.clear();
Notify.success("退出成功!");
sessionStorage.clear();
}, 1000);
self.props.history.replace('/login')
Notify.clear()
Notify.success('退出成功!')
sessionStorage.clear()
}, 1000)
}
})
.catch((err) => { });
.catch((err) => {})
},
onCancel: this.onCancel,
className: "questModal",
parentComponent: this,
});
className: 'questModal',
parentComponent: this
})
}
setVisible = (visible) => {
this.setState({ visible });
};
this.setState({ visible })
}
componentWillMount(e) {
let activeMenuList = JSON.parse(sessionStorage.getItem("activeMenu"));
this.setState({ navlist: activeMenuList });
const pathname = window.location.href.lastIndexOf("/");
let activeMenuList = JSON.parse(sessionStorage.getItem('activeMenu'))
this.setState({ navlist: activeMenuList })
const pathname = window.location.href.lastIndexOf('/')
const pathnamestr = window.location.href.substr(pathname);
this.getUserInfuFn();
this.setState({ pathname: `${pathnamestr}` });
sessionStorage.setItem("showflag", true);
const pathnamestr = window.location.href.substr(pathname)
this.getUserInfuFn()
this.setState({ pathname: `${pathnamestr}` })
sessionStorage.setItem('showflag', true)
}
componentWillReceiveProps(nextProps) {
//5分钟更新一次商品数据
let datetime = sessionStorage.getItem("updatetime");
let datetime = sessionStorage.getItem('updatetime')
if (datetime) {
if (Date.now() - datetime > 300000) {
getProductInfoSelect().then((res) => {
handelResponse(
res,
(req, msg) => {
sessionStorage.setItem("updatetime", Date.now());
sessionStorage.setItem("productsList", JSON.stringify(req.data));
sessionStorage.setItem('updatetime', Date.now())
sessionStorage.setItem('productsList', JSON.stringify(req.data))
},
(err) => { }
);
});
(err) => {}
)
})
}
}
if (this.state.noShowSubMenu.indexOf(nextProps.location.pathname) > -1) {
this.setState({ isShowSub: false });
this.setState({ isShowSub: false })
} else {
this.setState({ isShowSub: true });
this.setState({ isShowSub: true })
}
}
/* 定时器 间隔1秒检测是否长时间未操作页面 */
UNSAFE_componentWillReceiveProps(nextProps) {
let activeMenuList = JSON.parse(sessionStorage.getItem("activeMenu"));
let activeMenuList = JSON.parse(sessionStorage.getItem('activeMenu'))
// 判断跳转路由不等于当前路由
if (nextProps.location.pathname !== this.props.location.pathname) {
let pathnameNow = nextProps.location.pathname;
let item = null;
if (pathnameNow.includes("system")) {
item = activeMenuList.filter((item) => item.id == 14);
this.setState({ setrender: 1 });
let pathnameNow = nextProps.location.pathname
let item = null
if (pathnameNow.includes('system')) {
item = activeMenuList.filter((item) => item.id == 14)
this.setState({ setrender: 1 })
}
if (pathnameNow.includes("distributor")) {
item = activeMenuList.filter((item) => item.id == 15);
this.setState({ setrender: 2 });
if (pathnameNow.includes('distributor')) {
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);
this.setState({ setrender: 3 });
}
if (pathnameNow.includes("exchangecode")&&!pathnameNow.includes("exchangecode-add")) {
item = activeMenuList.filter((item) => item.id == 17);
this.setState({ setrender: 4 });
if (pathnameNow.includes('plan') || pathnameNow.includes('key')) {
item = activeMenuList.filter((item) => item.id == 16)
this.setState({ setrender: 3 })
}
if (
pathnameNow.includes("exchangepage") ||
pathnameNow.includes("edittemplate") ||
pathnameNow.includes("myexchangetemplate")
pathnameNow.includes('exchangecode') &&
!pathnameNow.includes('exchangecode-add')
) {
item = activeMenuList.filter((item) => item.id == 18);
this.setState({ setrender: 5 });
item = activeMenuList.filter((item) => item.id == 17)
this.setState({ setrender: 4 })
}
if (pathnameNow.includes("order-list")) {
item = activeMenuList.filter((item) => item.id == 19);
this.setState({ setrender: 6 });
if (
pathnameNow.includes('exchangepage') ||
pathnameNow.includes('edittemplate') ||
pathnameNow.includes('myexchangetemplate')
) {
item = activeMenuList.filter((item) => item.id == 18)
this.setState({ setrender: 5 })
}
if (pathnameNow.includes('order-list')) {
item = activeMenuList.filter((item) => item.id == 19)
this.setState({ setrender: 6 })
}
if (item) {
try {
item[0].children.forEach((it) => {
if (it.level === 5) {
sessionStorage.setItem("pathname2", it.router);
throw "终止循环";
sessionStorage.setItem('pathname2', it.router)
throw '终止循环'
}
});
} catch (e) { }
sessionStorage.setItem(
"menulinklist",
JSON.stringify(item[0].children)
);
sessionStorage.setItem("showflag", true);
sessionStorage.setItem("linkshowname", item[0].title);
})
} catch (e) {}
sessionStorage.setItem('menulinklist', JSON.stringify(item[0].children))
sessionStorage.setItem('showflag', true)
sessionStorage.setItem('linkshowname', item[0].title)
}
}
}
@ -316,22 +321,19 @@ export default class App extends Component {
render() {
return (
<Router>
<div className="start dflexajc">
{
this.state.mouseMenuMask ? <div className="maskMenu"></div> : null
}
<div className="header boxs">
<div className='start dflexajc'>
{this.state.mouseMenuMask ? <div className='maskMenu'></div> : null}
<div className='header boxs'>
{/* logo */}
<div className="log">
<div className='log'>
<img
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/Marketing/logo.svg"
alt=""
src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/Marketing/logo.svg'
alt=''
/>
<span>营销系统管理平台</span>
</div>
{/* 顶部导航 */}
<div className="nav">
<div className='nav'>
{/* <Link to="/overview" className={this.state.pathname=='/overview'?'active':''} onClick={()=>this.setState({pathname:'/overview'})}></Link>
<Link to="/extension" className={this.state.pathname=='/extension'?'active':''} onClick={()=>this.setState({pathname:'/extension'})}>推广</Link> */}
<Subnav
@ -342,139 +344,142 @@ export default class App extends Component {
openMouseMask={this.openMouseMask.bind(this)}
/>
</div>
<div className="nav-person">
<div className="navicon">
<div className='nav-person'>
<div className='navicon'>
<img
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logs.svg"
alt=""
src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/logs.svg'
alt=''
/>
<a href="https://shimo.im/docs/dPkpKZYV7yfNpqOy/"
target="_blank"
className="help">
<a
href='https://shimo.im/docs/dPkpKZYV7yfNpqOy/'
target='_blank'
className='help'
rel='noreferrer'>
更新日志
</a>
</div>
<div className="navicon">
<div className='navicon'>
<img
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/help.svg"
alt=""
src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/help.svg'
alt=''
/>
<a
href="https://shimo.im/docs/wV3VVQP5W6I1nz3y/"
target="_blank"
className="help"
>
href='https://shimo.im/docs/wV3VVQP5W6I1nz3y/'
target='_blank'
className='help'
rel='noreferrer'>
帮助中心
</a>
</div>
<Pop
className="exitPop"
trigger="hover"
position="bottom-right"
className='exitPop'
trigger='hover'
position='bottom-right'
content={
<div>
<div className="exit-box">
<p className="exit-header dflexacsa">
<div className='exit-box'>
<p className='exit-header dflexacsa'>
{this.state.userInfo.head ? (
<Avatar size="large" src={this.state.userInfo.head} />
<Avatar size='large' src={this.state.userInfo.head} />
) : (
<Avatar
size="large"
src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg"
size='large'
src='https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/default.svg'
/>
)}
<p className="exit-userInfo dflexacs">
<p className='exit-userInfo dflexacs'>
<span> 姓名:{this.state.userInfo.real_name}</span>
<span> 账号:{this.state.userInfo.user_name}</span>
</p>
</p>
<p className="dflexaj">
<p className='dflexaj'>
<span
onClick={() => {
this.exitFn();
this.exitFn()
}}
className="exit-btn"
>
className='exit-btn'>
退出
</span>
<span
onClick={() => {
this.modifyFn();
this.modifyFn()
}}
className="modify-btn"
>
className='modify-btn'>
修改密码
</span>
</p>
</div>
</div>
}
>
}>
{/* */}
<div className="nameItem">
<div className='nameItem'>
{this.state.userInfo.real_name}&nbsp;
<Icon type="down" className="exitIcon" />
<Icon type='down' className='exitIcon' />
</div>
</Pop>
</div>
</div>
<Dialog
visible={this.state.visible}
className="questModal"
className='questModal'
onClose={() => this.setVisible(false)}
title="修改密码"
>
title='修改密码'>
<ModifySelfpwd
visibleShow={(visible) => this.setVisible(visible)}
/>
<div></div>
</Dialog>
<aside className="mainbody">
{this.state.isShowSub ? <div className="subtitle"> </div> : null}
<aside className='mainbody'>
{this.state.isShowSub ? <div className='subtitle'> </div> : null}
<div className="route-box">
<Route path="/home/extension" component={extension} />
<Route path="/home/overview" component={overview} />
<div className='route-box'>
<Route path='/home/extension' component={extension} />
<Route path='/home/overview' component={overview} />
<Route path="/home/distributor" component={distributor} />
<Route path="/home/exchangepage" component={exchangepage} />
<Route path='/home/distributor' component={distributor} />
<Route path='/home/exchangepage' component={exchangepage} />
<Route
path="/home/mytempMould"
path='/home/mytempMould'
exact={true}
component={mytempMouldadd}
/>
{/* <Route path="/home/edittemplate" exact={true} component={edittemplate} /> */}
<Route
path="/home/myexchangetemplate"
path='/home/myexchangetemplate'
exact={true}
component={myexchangetemplate}
/>
<Route path="/home/order" component={order} />
<Route path="/home/order-list" component={orderList} />
<Route path='/home/order' component={order} />
<Route path='/home/order-list' component={orderList} />
<Route path="/home/order-addetails" component={orderdetails} />
<Route path='/home/order-addetails' component={orderdetails} />
<Route path="/home/order-add" component={orderadd} />
<Route path="/home/plan" exact={true} component={plan} />
<Route path="/home/plan-list" component={planlist} />
<Route path='/home/order-add' component={orderadd} />
<Route path='/home/plan' exact={true} component={plan} />
<Route path='/home/plan-list' component={planlist} />
<Route
path="/home/plan-create"
path='/home/plan-create'
exact={true}
component={planadd}
/>
<Route path="/home/plan-edit" exact={true} component={planedit} />
<Route path="/home/key-list" exact={true} component={keylist} />
<Route path="/home/key-edit" exact={true} component={keyedit} />
<Route path='/home/plan-edit' exact={true} component={planedit} />
<Route path='/home/key-list' exact={true} component={keylist} />
<Route
path="/home/key-detail"
path='/home/plan-keyList'
exact={true}
component={keysList}
/>
<Route path='/home/key-edit' exact={true} component={keyedit} />
<Route
path='/home/key-detail'
exact={true}
component={keydetail}
/>
<Route path="/home/key-log" exact={true} component={keylog} />
<Route path='/home/key-log' exact={true} component={keylog} />
<Route
path="/home/addkeyorder"
path='/home/addkeyorder'
exact={true}
component={keyorderlist}
/>
@ -484,91 +489,91 @@ export default class App extends Component {
<Redirect to="/home/system/account-list"/>)}>
</Route> */}
<Route
path="/home/system/account-list"
path='/home/system/account-list'
exact={true}
component={accountlist}
/>
<Route
path="/home/system/account-add"
path='/home/system/account-add'
exact={true}
component={accountadd}
/>
<Route
path="/home/system/subaccount-list"
path='/home/system/subaccount-list'
exact={true}
component={subaccountlist}
/>
<Route
path="/home/system/subaccount-add"
path='/home/system/subaccount-add'
exact={true}
component={subaccountadd}
/>
<Route
path="/home/system/role-list"
path='/home/system/role-list'
exact={true}
component={rolelist}
/>
<Route
path="/home/system/role-add"
path='/home/system/role-add'
exact={true}
component={roleadd}
/>
<Route
path="/home/system/station"
path='/home/system/station'
exact={true}
component={station}
/>
<Route
path="/home/system/customize"
path='/home/system/customize'
exact={true}
component={customize}
/>
<Route path="/home/system/menu" exact={true} component={menu} />
<Route path='/home/system/menu' exact={true} component={menu} />
<Route
path="/home/system/my-mould"
path='/home/system/my-mould'
exact={true}
component={myMould}
/>
<Route
path="/home/distributor-list"
path='/home/distributor-list'
exact={true}
component={distributorlist}
/>
<Route
path="/home/distributor-add"
path='/home/distributor-add'
exact={true}
component={distributoradd}
/>
<Route
path="/home/distributor-edit"
path='/home/distributor-edit'
exact={true}
component={distributorEdit}
/>
<Route
path="/home/exchangecode-list"
path='/home/exchangecode-list'
exact={true}
component={exchangecodelist}
/>
<Route
path="/home/exchangecode-add"
path='/home/exchangecode-add'
exact={true}
component={exchangecodeadd}
/>
<Route
path="/home/exchangecode-edit"
path='/home/exchangecode-edit'
exact={true}
component={exchangecodeedit}
/>
<Route
path="/home/exchange-addcommodity"
path='/home/exchange-addcommodity'
exact={true}
component={exchangecommodity}
/>
<Route
path="/home/product-edit"
path='/home/product-edit'
exact={true}
component={productedit}
/>
@ -576,6 +581,6 @@ export default class App extends Component {
</aside>
</div>
</Router>
);
)
}
}