WXCS_HT/src/pages/Layout/index.tsx

import React, { useCallback, useEffect, 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 } 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 logoImg from "@/assets/img/logo.png";
import NotFound from "@/components/NotFound";

import { RouterType, RouterTypeRow } from "@/types";
import tabLeftArr from "./data";
import MyPopconfirm from "@/components/MyPopconfirm";
import { UserListType } from "../Z1user/Z1auth";
import { D3_APIgetInfo } from "@/store/action/D3role";

function Layout() {
  // 当前路径选中的左侧菜单
  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 getUserAuthFu = useCallback(async () => {
    const userInfo = getTokenInfo().user;

    const res = await D3_APIgetInfo(userInfo.roleId);
    if (res.code === 0) {

      console.log(123456,res);
      

      const tempList: UserListType[] = res.data.permission || [];
      const isOkIdArr = tempList.filter((c) => c.authority).map((v) => v.id);

      // 是管理员
      if (userInfo.isAdmin === 1) {
        isOkIdArr.push(2100);
        isOkIdArr.push(2200);
        isOkIdArr.push(2300);
      }

      const tempArr: RouterTypeRow = [];

      tabLeftArr.forEach((v1) => {
        if (v1.son && v1.son[0]) {
          v1.son.forEach((v2) => {
            if (isOkIdArr.includes(v2.id)) {
              tempArr.push(v2);
            }
          });
        }
      });

      setRouterCom(tempArr);

      // 如果当前页面没有权限了，跳转有权限的第一个页面
      const urlAll = window.location.hash;
      const isNowPath = urlAll.replace("#", "");
      const pathArr = tempArr.map((v) => v.path);
      if (!pathArr.includes(isNowPath)) {
        history.push(pathArr[0]);
      }

      const resList = tabLeftArr.map((v) => ({
        ...v,
        son: v.son.filter((c) => isOkIdArr.includes(c.id)),
      }));

      setList(resList);
    }
  }, []);

  useEffect(() => {
    getUserAuthFu();
  }, [getUserAuthFu]);

  // 左侧菜单 信息
  const [list, setList] = useState([] as RouterType);

  // 路由信息（过滤之后的）
  const [RouterCom, setRouterCom] = useState<RouterTypeRow>([]);

  // useEffect(() => {
  //   console.log(123, list);
  // }, [list]);

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

  // 修改密码相关
  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">
          <img src={logoImg} alt="" />
        </div>
        {/* 左边主体 */}
        <div className="layoutLeftMain">
          {list.map((v) => (
            <div
              className={classNames("layoutLRowBox")}
              key={v.id}
              hidden={!v.son.length}
            >
              {/* 这个项目没有一级目录 */}
              {/* <div className="layoutLRowBoxTxt">{v.name}</div> */}
              {v.son.map((v2) => (
                <div
                  key={v2.id}
                  className={classNames(
                    "layoutLRowBoxRow",
                    path === v2.path ? "active" : ""
                  )}
                  onClick={() => pathCutFu(v2.path)}
                >
                  {v2.name}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
      {/* 右边 */}
      <div className="layoutRight">
        <div className="layoutRightTop">
          {/* 用户相关 */}
          <div className="user">
            {getTokenInfo().user.realName ||
              getTokenInfo().user.userName ||
              "匿名"}
            <div className="userInco userInco1">
              <CaretUpOutlined rev={undefined} />
            </div>
            <div className="userInco userInco2">
              <CaretDownOutlined rev={undefined} />
            </div>
            <div className="userSet">
              <div>
                <span onClick={() => setOpen(true)}>修改密码</span>
                <MyPopconfirm
                  txtK="退出登录"
                  onConfirm={loginExit}
                  Dom="退出登录"
                  loc="bottom"
                />
              </div>
            </div>
          </div>
        </div>
        {/* 右边主体 */}
        <div className="layoutRightMain">
          {/* 二级路由页面 */}
          <div className="mainBoxR">
            <React.Suspense fallback={<SpinLoding />}>
              <Switch>
                {RouterCom.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
          scrollToFirstError={true}
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="旧密码"
            name="oldPassword"
            rules={[{ required: true, message: "不能为空!" }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <Input.Password maxLength={20} />
          </Form.Item>

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

          <Form.Item
            label="确定新密码"
            name="checkPass"
            rules={[{ validator: checkPassWord }]}
            getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
          >
            <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;