|
@@ -1,148 +1,140 @@
|
|
|
-import React, {
|
|
|
- useCallback,
|
|
|
- useEffect,
|
|
|
- useMemo,
|
|
|
- useRef,
|
|
|
- useState,
|
|
|
-} from "react";
|
|
|
-import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons";
|
|
|
-import styles from "./index.module.scss";
|
|
|
-import SpinLoding from "@/components/SpinLoding";
|
|
|
-import { Route, Switch, useLocation } from "react-router-dom";
|
|
|
-import AuthRoute from "@/components/AuthRoute";
|
|
|
-import classNames from "classnames";
|
|
|
-import history from "@/utils/history";
|
|
|
-import { Button, Form, Input, Modal, Popconfirm } from "antd";
|
|
|
-import { Base64 } from "js-base64";
|
|
|
-import encodeStr from "@/utils/pass";
|
|
|
-import { passWordEditAPI } from "@/store/action/layout";
|
|
|
-import { getTokenInfo, removeTokenInfo } from "@/utils/storage";
|
|
|
-import { MessageFu } from "@/utils/message";
|
|
|
-import logonImg from "@/assets/img/logo.png";
|
|
|
-
|
|
|
-const NotFound = React.lazy(() => import("@/components/NotFound"));
|
|
|
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
|
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
|
|
|
+import styles from './index.module.scss'
|
|
|
+import SpinLoding from '@/components/SpinLoding'
|
|
|
+import { Route, Switch, useLocation } from 'react-router-dom'
|
|
|
+import AuthRoute from '@/components/AuthRoute'
|
|
|
+import classNames from 'classnames'
|
|
|
+import history from '@/utils/history'
|
|
|
+import { Button, Form, Input, Modal, Popconfirm } from 'antd'
|
|
|
+import { Base64 } from 'js-base64'
|
|
|
+import encodeStr from '@/utils/pass'
|
|
|
+import { passWordEditAPI } from '@/store/action/layout'
|
|
|
+import { getTokenInfo, removeTokenInfo } from '@/utils/storage'
|
|
|
+import { MessageFu } from '@/utils/message'
|
|
|
+import logonImg from '@/assets/img/logo.png'
|
|
|
+
|
|
|
+const NotFound = React.lazy(() => import('@/components/NotFound'))
|
|
|
|
|
|
function Layout() {
|
|
|
const list = useMemo(() => {
|
|
|
return [
|
|
|
{
|
|
|
id: 100,
|
|
|
- name: "场景管理",
|
|
|
- path: "/",
|
|
|
- Com: React.lazy(() => import("../A1List")),
|
|
|
- },
|
|
|
- ];
|
|
|
- }, []);
|
|
|
+ name: '场景管理',
|
|
|
+ path: '/list',
|
|
|
+ Com: React.lazy(() => import('../A1List'))
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
// 如果是超级管理员
|
|
|
- const userInfo = getTokenInfo().user;
|
|
|
+ const userInfo = getTokenInfo().user
|
|
|
if (userInfo.isAdmin === 1) {
|
|
|
list.push({
|
|
|
id: 900,
|
|
|
- name: "用户管理",
|
|
|
- path: "/user",
|
|
|
- Com: React.lazy(() => import("../A9User")),
|
|
|
- });
|
|
|
+ name: '用户管理',
|
|
|
+ path: '/user',
|
|
|
+ Com: React.lazy(() => import('../A9User'))
|
|
|
+ })
|
|
|
}
|
|
|
- }, [list]);
|
|
|
+ }, [list])
|
|
|
|
|
|
// 点击跳转
|
|
|
const pathCutFu = useCallback((path: string) => {
|
|
|
- history.push(path);
|
|
|
- }, []);
|
|
|
+ history.push(path)
|
|
|
+ }, [])
|
|
|
|
|
|
// 当前路径选中的左侧菜单
|
|
|
- const location = useLocation();
|
|
|
- const [path, setPath] = useState("");
|
|
|
+ const location = useLocation()
|
|
|
+ const [path, setPath] = useState('')
|
|
|
|
|
|
useEffect(() => {
|
|
|
- const arr = location.pathname.split("/");
|
|
|
- let pathTemp = "/";
|
|
|
- if (arr[1]) pathTemp = "/" + arr[1];
|
|
|
+ const arr = location.pathname.split('/')
|
|
|
+ let pathTemp = '/'
|
|
|
+ if (arr[1]) pathTemp = '/' + arr[1]
|
|
|
|
|
|
- setPath(pathTemp);
|
|
|
- }, [location]);
|
|
|
+ setPath(pathTemp)
|
|
|
+ }, [location])
|
|
|
|
|
|
const userInfo = useMemo(() => {
|
|
|
- return getTokenInfo().user;
|
|
|
- }, []);
|
|
|
+ return getTokenInfo().user
|
|
|
+ }, [])
|
|
|
|
|
|
// 修改密码相关
|
|
|
- const [open, setOpen] = useState(false);
|
|
|
+ const [open, setOpen] = useState(false)
|
|
|
|
|
|
// 拿到新密码的输入框的值
|
|
|
- const oldPasswordValue = useRef("");
|
|
|
+ const oldPasswordValue = useRef('')
|
|
|
|
|
|
- const checkPassWord = (rule: any, value: any = "") => {
|
|
|
- if (value !== oldPasswordValue.current)
|
|
|
- return Promise.reject("新密码不一致!");
|
|
|
- else return Promise.resolve(value);
|
|
|
- };
|
|
|
+ const checkPassWord = (rule: any, value: any = '') => {
|
|
|
+ if (value !== oldPasswordValue.current) return Promise.reject('新密码不一致!')
|
|
|
+ else return Promise.resolve(value)
|
|
|
+ }
|
|
|
|
|
|
const onFinish = async (values: any) => {
|
|
|
// 通过校验之后发送请求
|
|
|
if (values.oldPassword === values.newPassword)
|
|
|
- return MessageFu.warning("新旧密码不能相同!");
|
|
|
+ return MessageFu.warning('新旧密码不能相同!')
|
|
|
const obj = {
|
|
|
oldPassword: encodeStr(Base64.encode(values.oldPassword)),
|
|
|
- newPassword: encodeStr(Base64.encode(values.newPassword)),
|
|
|
- };
|
|
|
- const res: any = await passWordEditAPI(obj);
|
|
|
+ newPassword: encodeStr(Base64.encode(values.newPassword))
|
|
|
+ }
|
|
|
+ const res: any = await passWordEditAPI(obj)
|
|
|
if (res.code === 0) {
|
|
|
- MessageFu.success("修改成功!");
|
|
|
- loginExit();
|
|
|
+ MessageFu.success('修改成功!')
|
|
|
+ loginExit()
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
// 点击退出登录
|
|
|
const loginExit = () => {
|
|
|
- removeTokenInfo();
|
|
|
- history.push("/login");
|
|
|
- };
|
|
|
+ removeTokenInfo()
|
|
|
+ history.push('/login')
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<div className={styles.Layout}>
|
|
|
{/* 左边 */}
|
|
|
- <div className="layoutLeft">
|
|
|
- <div className="layoutLeftTop">
|
|
|
- {userInfo.isAdmin === 1 ? <img src={logonImg} alt="" /> : null}
|
|
|
+ <div className='layoutLeft'>
|
|
|
+ <div className='layoutLeftTop'>
|
|
|
+ {userInfo.isAdmin === 1 ? <img src={logonImg} alt='' /> : null}
|
|
|
</div>
|
|
|
{/* 左边主体 */}
|
|
|
- <div className="layoutLeftMain">
|
|
|
- {list.map((v) => (
|
|
|
+ <div className='layoutLeftMain'>
|
|
|
+ {list.map(v => (
|
|
|
<div
|
|
|
key={v.id}
|
|
|
onClick={() => pathCutFu(v.path)}
|
|
|
- className={classNames(
|
|
|
- "mainBoxL2Row",
|
|
|
- v.path === path ? "active" : ""
|
|
|
- )}
|
|
|
+ className={classNames('mainBoxL2Row', v.path === path ? 'active' : '')}
|
|
|
>
|
|
|
- <div className="txt">{v.name}</div>
|
|
|
+ <div className='txt'>{v.name}</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
{/* 右边 */}
|
|
|
- <div className="layoutRight">
|
|
|
- <div className="layoutRightTop">
|
|
|
+ <div className='layoutRight'>
|
|
|
+ <div className='layoutRightTop'>
|
|
|
{/* 用户相关 */}
|
|
|
- <div className="user">
|
|
|
+ <div className='user'>
|
|
|
{userInfo.realName}
|
|
|
- <div className="userInco userInco1">
|
|
|
+ <div className='userInco userInco1'>
|
|
|
<CaretUpOutlined />
|
|
|
</div>
|
|
|
- <div className="userInco userInco2">
|
|
|
+ <div className='userInco userInco2'>
|
|
|
<CaretDownOutlined />
|
|
|
</div>
|
|
|
- <div className="userSet">
|
|
|
- <span onClick={() => setOpen(true)}>修改密码</span>
|
|
|
+ <div className='userSet'>
|
|
|
+ <span onClick={() => setOpen(true)} hidden>
|
|
|
+ 修改密码
|
|
|
+ </span>
|
|
|
<Popconfirm
|
|
|
- placement="bottom"
|
|
|
- title="确定退出吗?"
|
|
|
- okText="确定"
|
|
|
- cancelText="取消"
|
|
|
+ placement='bottom'
|
|
|
+ title='确定退出吗?'
|
|
|
+ okText='确定'
|
|
|
+ cancelText='取消'
|
|
|
okButtonProps={{ loading: false }}
|
|
|
onConfirm={loginExit}
|
|
|
>
|
|
@@ -152,16 +144,16 @@ function Layout() {
|
|
|
</div>
|
|
|
</div>
|
|
|
{/* 右边主体 */}
|
|
|
- <div className="layoutRightMain">
|
|
|
+ <div className='layoutRightMain'>
|
|
|
{/* 二级路由页面 */}
|
|
|
- <div className="mainBoxR">
|
|
|
+ <div className='mainBoxR'>
|
|
|
<React.Suspense fallback={<SpinLoding />}>
|
|
|
<Switch>
|
|
|
- {list.map((v) => (
|
|
|
+ {list.map(v => (
|
|
|
<AuthRoute key={v.id} exact path={v.path} component={v.Com} />
|
|
|
))}
|
|
|
|
|
|
- <Route path="*" component={NotFound} />
|
|
|
+ <Route path='*' component={NotFound} />
|
|
|
</Switch>
|
|
|
</React.Suspense>
|
|
|
</div>
|
|
@@ -172,44 +164,44 @@ function Layout() {
|
|
|
<Modal
|
|
|
destroyOnClose
|
|
|
open={open}
|
|
|
- title="修改密码"
|
|
|
+ title='修改密码'
|
|
|
onCancel={() => setOpen(false)}
|
|
|
footer={
|
|
|
[] // 设置footer为空,去掉 取消 确定默认按钮
|
|
|
}
|
|
|
>
|
|
|
<Form
|
|
|
- name="basic"
|
|
|
+ name='basic'
|
|
|
labelCol={{ span: 5 }}
|
|
|
wrapperCol={{ span: 16 }}
|
|
|
onFinish={onFinish}
|
|
|
- autoComplete="off"
|
|
|
+ autoComplete='off'
|
|
|
>
|
|
|
<Form.Item
|
|
|
- label="旧密码"
|
|
|
- name="oldPassword"
|
|
|
- rules={[{ required: true, message: "不能为空!" }]}
|
|
|
+ label='旧密码'
|
|
|
+ name='oldPassword'
|
|
|
+ rules={[{ required: true, message: '不能为空!' }]}
|
|
|
>
|
|
|
<Input.Password maxLength={15} />
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
- label="新密码"
|
|
|
- name="newPassword"
|
|
|
+ label='新密码'
|
|
|
+ name='newPassword'
|
|
|
rules={[
|
|
|
- { required: true, message: "不能为空!" },
|
|
|
- { min: 6, max: 15, message: "密码长度为6-15个字符!" },
|
|
|
+ { required: true, message: '不能为空!' },
|
|
|
+ { min: 6, max: 15, message: '密码长度为6-15个字符!' }
|
|
|
]}
|
|
|
>
|
|
|
<Input.Password
|
|
|
maxLength={15}
|
|
|
- onChange={(e) => (oldPasswordValue.current = e.target.value)}
|
|
|
+ onChange={e => (oldPasswordValue.current = e.target.value)}
|
|
|
/>
|
|
|
</Form.Item>
|
|
|
|
|
|
<Form.Item
|
|
|
- label="确定新密码"
|
|
|
- name="checkPass"
|
|
|
+ label='确定新密码'
|
|
|
+ name='checkPass'
|
|
|
rules={[{ validator: checkPassWord }]}
|
|
|
>
|
|
|
<Input.Password maxLength={15} />
|
|
@@ -218,16 +210,16 @@ function Layout() {
|
|
|
<Form.Item wrapperCol={{ offset: 14, span: 16 }}>
|
|
|
<Button onClick={() => setOpen(false)}>取消</Button>
|
|
|
 
|
|
|
- <Button type="primary" htmlType="submit">
|
|
|
+ <Button type='primary' htmlType='submit'>
|
|
|
确定
|
|
|
</Button>
|
|
|
</Form.Item>
|
|
|
</Form>
|
|
|
</Modal>
|
|
|
</div>
|
|
|
- );
|
|
|
+ )
|
|
|
}
|
|
|
|
|
|
// 使用 React.memo 来优化组件,避免组件的无效更新,类似 类组件里面的PureComponent
|
|
|
-const MemoLayout = React.memo(Layout);
|
|
|
-export default MemoLayout;
|
|
|
+const MemoLayout = React.memo(Layout)
|
|
|
+export default MemoLayout
|