BR-SCENE-HT/后台大场景编辑/src/pages/Layout/index.tsx

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,
        img: 1,
        name: '场景管理',
        path: '/list',
        Com: React.lazy(() => import('../A1List'))
      },
      {
        id: 900,
        img: 2,
        name: '用户管理',
        path: '/user',
        Com: React.lazy(() => import('../A9User'))
      },
      {
        id: 901,
        img: 3,
        name: '系统日志',
        path: '/log',
        Com: React.lazy(() => import('../Z2log'))
      }
    ]
  }, [])

  useEffect(() => {
    // 如果是超级管理员
    // const userInfo = getTokenInfo().user
    // if (userInfo.isAdmin === 1) {
    //   list.push({
    //     id: 900,
    //     name: '用户管理',
    //     path: '/user',
    //     Com: React.lazy(() => import('../A9User'))
    //   })
    // }
  }, [list])

  // 点击跳转
  const pathCutFu = useCallback((path: string) => {
    history.push(path)
  }, [])

  // 当前路径选中的左侧菜单
  const location = useLocation()
  const [path, setPath] = useState('')

  useEffect(() => {
    const arr = location.pathname.split('/')
    let pathTemp = '/'
    if (arr[1]) pathTemp = '/' + arr[1]

    setPath(pathTemp)
  }, [location])

  const userInfo = useMemo(() => {
    return getTokenInfo().user
  }, [])

  // 修改密码相关
  const [open, setOpen] = useState(false)

  // 拿到新密码的输入框的值
  const oldPasswordValue = useRef('')

  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('新旧密码不能相同!')
    const obj = {
      oldPassword: encodeStr(Base64.encode(values.oldPassword)),
      newPassword: encodeStr(Base64.encode(values.newPassword))
    }
    const res: any = await passWordEditAPI(obj)
    if (res.code === 0) {
      MessageFu.success('修改成功!')
      loginExit()
    }
  }

  // 点击退出登录
  const loginExit = () => {
    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='layTxt'>数字孪生建模平台</div>
        </div>
        {/* 左边主体 */}
        <div className='layoutLeftMain'>
          {list.map(v => (
            <div
              key={v.id}
              onClick={() => pathCutFu(v.path)}
              className={classNames('mainBoxL2Row', v.path === path ? 'active' : '')}
            >
              <div className='txt'>
                <img
                  className='txtImg1'
                  src={require(`../../assets/img/tuBiao/${v.img}.png`)}
                  alt=''
                />
                <img
                  className='txtImg2'
                  src={require(`../../assets/img/tuBiao/${v.img}Ac.png`)}
                  alt=''
                />
                {v.name}
              </div>
            </div>
          ))}
        </div>
      </div>
      {/* 右边 */}
      <div className='layoutRight'>
        <div className='layoutRightTop'>
          {/* 用户相关 */}
          <div className='user'>
            {userInfo.realName}
            <div className='userInco userInco1'>
              <CaretUpOutlined />
            </div>
            <div className='userInco userInco2'>
              <CaretDownOutlined />
            </div>
            <div className='userSet'>
              <span onClick={() => setOpen(true)} hidden>
                修改密码
              </span>
              <Popconfirm
                placement='bottom'
                title='确定退出吗?'
                okText='确定'
                cancelText='取消'
                okButtonProps={{ loading: false }}
                onConfirm={loginExit}
              >
                退出登录
              </Popconfirm>
            </div>
          </div>
        </div>
        {/* 右边主体 */}
        <div className='layoutRightMain'>
          {/* 二级路由页面 */}
          <div className='mainBoxR'>
            <React.Suspense fallback={<SpinLoding />}>
              <Switch>
                {list.map(v => (
                  <AuthRoute key={v.id} exact path={v.path} component={v.Com} />
                ))}

                <Route path='*' component={NotFound} />
              </Switch>
            </React.Suspense>
          </div>
        </div>
      </div>

      {/* 点击修改密码打开的对话框 */}
      <Modal
        destroyOnClose
        open={open}
        title='修改密码'
        onCancel={() => setOpen(false)}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        <Form
          name='basic'
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          autoComplete='off'
        >
          <Form.Item
            label='旧密码'
            name='oldPassword'
            rules={[{ required: true, message: '不能为空!' }]}
          >
            <Input.Password maxLength={15} />
          </Form.Item>

          <Form.Item
            label='新密码'
            name='newPassword'
            rules={[
              { required: true, message: '不能为空!' },
              { min: 6, max: 15, message: '密码长度为6-15个字符!' }
            ]}
          >
            <Input.Password
              maxLength={15}
              onChange={e => (oldPasswordValue.current = e.target.value)}
            />
          </Form.Item>

          <Form.Item
            label='确定新密码'
            name='checkPass'
            rules={[{ validator: checkPassWord }]}
          >
            <Input.Password maxLength={15} />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 14, span: 16 }}>
            <Button onClick={() => setOpen(false)}>取消</Button>
            &emsp;
            <Button type='primary' htmlType='submit'>
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

// 使用 React.memo 来优化组件，避免组件的无效更新，类似 类组件里面的PureComponent
const MemoLayout = React.memo(Layout)
export default MemoLayout