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

import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button } from "antd";
import { useDispatch } from "react-redux";
import { A5_APIgetList } from "@/store/action/A5Section";
import { A5TableType } from "@/types";
import A5Add from "./A5Add";
import A2Table3 from "../A2Dict/A2Tab1/A2Table3";

function A5Section() {
  const dispatch = useDispatch();

  const getListFu = useCallback(() => {
    dispatch(A5_APIgetList());
  }, [dispatch]);

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

  // 新增和编辑
  const [addInfo, setAddInfo] = useState({} as A5TableType);

  return (
    <div className={styles.A5Section}>
      <div className="pageTitle">部门管理</div>
      <div className="A5Main">
        <div className="A5Top">
          <Button
            type="primary"
            onClick={() =>
              setAddInfo({ id: "-1", parentId: "0" } as A5TableType)
            }
          >
            新增
          </Button>
        </div>

        {/* 表格主体 */}
        <div className="A5tableBox">
          <A2Table3
            editFu={(item) => setAddInfo(item)}
            upTaleFu={() => getListFu()}
            myType="部门"
          />
        </div>
      </div>

      {addInfo.id ? (
        <A5Add
          info={addInfo}
          closeFu={() => setAddInfo({} as A5TableType)}
          addFu={() => getListFu()}
        />
      ) : null}
    </div>
  );
}

const MemoA5Section = React.memo(A5Section);

export default MemoA5Section;