sw-project-interior/src/pages/A4Role/index.tsx

import { RootState } from "@/store";
import { getRoleListAPI, roleRemoveAPI } from "@/store/action/A4Role";
import { RoleTableType } from "@/types";
import { MessageFu } from "@/utils/message";
import { Button, Input, Popconfirm, Table } from "antd";
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { useDispatch, useSelector } from "react-redux";
import styles from "./index.module.scss";
import RoleAdd from "./RoleAdd";
import A4Auth from "./A4Auth";
function A4Role() {
  const dispatch = useDispatch();

  // 顶部筛选

  type TableListType = {
    pageNum: number;
    pageSize: number;
    searchKey: string;
  };

  const [tableSelect, setTableSelect] = useState<TableListType>({
    pageNum: 1,
    pageSize: 10,
    searchKey: "",
  });


  useEffect(() => {
    dispatch(getRoleListAPI(tableSelect));
  }, [dispatch, tableSelect]);

  // 角色名的输入
  const nameTime = useRef(-1);
  const nameChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      clearTimeout(nameTime.current);
      nameTime.current = window.setTimeout(() => {
        setTableSelect({
          ...tableSelect,
          searchKey: e.target.value,
          pageNum: 1,
        });
      }, 500);
    },
    [tableSelect]
  );

  // 角色名的重置
  const [inputKey, setInputKey] = useState(1);
  const resetSelectFu = useCallback(() => {
    // 把2个输入框和时间选择器清空
    setInputKey(Date.now());
    setTableSelect({
      pageNum: 1,
      pageSize: 10,
      searchKey: "",
    });
  }, []);

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      const res: any = await roleRemoveAPI(id);
      if (res.code === 0) {
        MessageFu.success("删除成功!");
        dispatch(getRoleListAPI(tableSelect));
      }
    },
    [dispatch, tableSelect]
  );

  // 点击新增和编辑
  const [editPageShow, setEditPageShow] = useState(false);
  const editId = useRef(0);
  const openEditPageFu = useCallback((id: number) => {
    editId.current = id;
    setEditPageShow(true);
  }, []);

  // 从仓库中获取表格数据
  const tableInfo = useSelector((state: RootState) => state.A4Role.tableInfo);

  // 页码变化
  const paginationChange = useCallback(
    () => (pageNum: number, pageSize: number) => {
      setTableSelect({ ...tableSelect, pageNum, pageSize });
    },
    [tableSelect]
  );

  const columns = useMemo(() => {
    return [
      // {
      //   width: 80,
      //   title: "序号",
      //   render: (text: any, record: any, index: any) =>
      //     index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
      // },
      {
        title: "角色名称",
        dataIndex: "roleName",
      },
      {
        title: "角色说明",
        render: (item: RoleTableType) =>
          item.roleDesc ? (
            item.roleDesc.length >= 30 ? (
              <span style={{ cursor: "pointer" }} title={item.roleDesc}>
                {item.roleDesc.substring(0, 30) + "..."}
              </span>
            ) : (
              item.roleDesc
            )
          ) : (
            "（空）"
          ),
      },
      {
        title: "功能权限",
        render: (item: RoleTableType) =>
          item.pcsPerm ? item.pcsPerm + "项" : "-",
      },
      {
        title: "数据权限",
        render: (item: RoleTableType) =>
          item.dataScope === 1
            ? "本部门-自己创建的项目"
            : item.dataScope === 2
            ? "本部门-所有用户创建的项目"
            : item.dataScope === 3
            ? "跨部门数据"
            : "-",
      },
      {
        title: "内控文件权限",
        render: (item: RoleTableType) =>
          item.pcsAttr ? item.pcsAttr + "项" : "-",
      },

      {
        title: "操作",
        render: (item: RoleTableType) => {
          return (
            <>
              <Button
                size="small"
                type="text"
                onClick={() => setAuthId(item.id)}
              >
                授权
              </Button>

              <Button
                size="small"
                type="text"
                onClick={() => openEditPageFu(item.id)}
              >
                编辑
              </Button>
              {item.roleKey === "sys_common" ? null : (
                <Popconfirm
                  title="删除后无法恢复，是否删除?"
                  okText="删除"
                  cancelText="取消"
                  onConfirm={() => delTableFu(item.id!)}
                  okButtonProps={{ loading: false }}
                >
                  <Button size="small" type="text" danger>
                    删除
                  </Button>
                </Popconfirm>
              )}
            </>
          );
        },
      },
    ];
  }, [delTableFu, openEditPageFu]);

  // 点击授权出来的页面
  const [authId, setAuthId] = useState(0);

  return (
    <div className={styles.A4Role}>
      <div className="pageTitle">角色管理 {authId ? " > 授权" : null}</div>
      <div className="searchTop">
        <div className="searchTopRow">
          <span>角色名：</span>
          <Input
            key={inputKey}
            maxLength={8}
            style={{ width: 200 }}
            placeholder="请输入"
            allowClear
            onChange={(e) => nameChange(e)}
          />
        </div>
        <div className="searchTopRow">
          &emsp;&emsp;
          <Button type="primary" onClick={() => openEditPageFu(0)}>
            新增
          </Button>
        </div>
      </div>

      <div className="tableBox">
        <Table
          scroll={{ y: 617 }}
          dataSource={tableInfo.list}
          columns={columns}
          rowKey="id"
          pagination={{
            showQuickJumper: true,
            position: ["bottomCenter"],
            showSizeChanger: true,
            current: tableSelect.pageNum,
            pageSize: tableSelect.pageSize,
            total: tableInfo.total,
            onChange: paginationChange(),
          }}
        />
      </div>
      {/* 点击新增或者编辑 */}
      {editPageShow ? (
        <RoleAdd
          id={editId.current}
          closePage={() => setEditPageShow(false)}
          upTableList={() => dispatch(getRoleListAPI(tableSelect))}
          addTableList={resetSelectFu}
        />
      ) : null}

      {/* 点击授权 */}
      {authId ? (
        <A4Auth
          mId={authId}
          authColseFu={() => setAuthId(0)}
          authEditFu={() => dispatch(getRoleListAPI(tableSelect))}
        />
      ) : null}
    </div>
  );
}

const MemoA4Role = React.memo(A4Role);

export default MemoA4Role;