部门按钮替换为权限按钮

src/compenents/index.ts

@@ -4,3 +4,4 @@ export * from "./left-menu";
 export * from "./upload-image-button";
 export * from "./tree-department";
 export * from "./back-bar";
+export * from "./permission-button";

src/compenents/permission-button/index.tsx

@@ -0,0 +1,50 @@
+import { Button } from "antd";
+import { useSelector } from "../../store/hooks";
+
+interface PropInterface {
+  type: "link" | "text" | "primary" | "default";
+  text: string;
+  p: string;
+  class: string;
+  icon: any;
+  onClick: () => void;
+}
+
+export const PerButton = (props: PropInterface) => {
+  const permisssions = useSelector((state: any) => state.permisssions);
+  const through = () => {
+    if (!permisssions) {
+      return false;
+    }
+    return typeof permisssions[props.p] !== "undefined";
+  };
+  return (
+    <>
+      {through() && props.type === "link" && (
+        <Button
+          className={props.class}
+          type="link"
+          danger
+          icon={props.icon}
+          onClick={() => {
+            props.onClick();
+          }}
+        >
+          {props.text}
+        </Button>
+      )}
+      {through() && props.type !== "link" && (
+        <Button
+          className={props.class}
+          type={props.type}
+          icon={props.icon}
+          onClick={() => {
+            props.onClick();
+          }}
+        >
+          {props.text}
+        </Button>
+      )}
+    </>
+  );
+};

src/pages/department/index.tsx

@@ -6,6 +6,7 @@ import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { department } from "../../api/index";
 import { dateFormat } from "../../utils/index";
 import { Link, useNavigate } from "react-router-dom";
+import { PerButton } from "../../compenents";
 
 interface Option {
   id: string | number;
@@ -57,14 +58,14 @@ export const DepartmentPage: React.FC = () => {
       width: 160,
       render: (_, record) => (
         <Space size="small">
-          <Button
+          <PerButton
             type="link"
-            danger
+            text="详情"
-            className="c-red"
+            class="c-red"
+            icon={null}
+            p="department-update"
             onClick={() => navigate(`/department/update/${record.id}`)}
-          >
+          />
-            详情
-          </Button>
           <Popconfirm
             title="警告"
             description="即将删除此部门，确认操作？"
@@ -72,9 +73,14 @@ export const DepartmentPage: React.FC = () => {
             okText="确定"
             cancelText="取消"
           >
-            <Button type="link" danger className="c-red">
+            <PerButton
-              删除
+              type="link"
-            </Button>
+              text="删除"
+              class="c-red"
+              icon={null}
+              p="department-destroy"
+              onClick={() => null}
+            />
           </Popconfirm>
         </Space>
       ),
@@ -143,9 +149,14 @@ export const DepartmentPage: React.FC = () => {
         <div className="float-left j-b-flex mb-24">
           <div className="d-flex">
             <Link style={{ textDecoration: "none" }} to={`/department/create`}>
-              <Button icon={<PlusOutlined />} className="mr-16" type="primary">
+              <PerButton
-                新建
+                type="primary"
-              </Button>
+                text="新建"
+                class="mr-16"
+                icon={<PlusOutlined />}
+                p="department-store"
+                onClick={() => console.log("ok")}
+              />
             </Link>
           </div>
           <div className="d-flex">