back-bar组件

src/compenents/leftMenu/index.tsx

@@ -40,6 +40,13 @@ const items = [
     [getItem("学员", "/member", null, null, null)],
     null
   ),
+  getItem(
+    "部门管理",
+    "7",
+    <AppstoreOutlined />,
+    [getItem("部门", "/department", null, null, null)],
+    null
+  ),
   getItem("证书管理", "5", <SettingOutlined />, [], null),
   getItem(
     "系统设置",
@@ -50,7 +57,7 @@ const items = [
   ),
 ];
 
-const rootSubmenuKeys = ["3", "4", "5", "6"];
+const rootSubmenuKeys = ["3", "4", "5", "6", "7"];
 
 export const LeftMenu: React.FC = () => {
   //展开的subMenu

src/pages/department/index.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from "react";
+import { Button, Space, Table, Popconfirm, message } from "antd";
+import type { ColumnsType } from "antd/es/table";
+import styles from "./index.module.less";
+import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
+import { adminRole } from "../../api/index";
+import { dateFormat } from "../../utils/index";
+import { Link, useNavigate } from "react-router-dom";
+
+interface DataType {
+  id: React.Key;
+  name: string;
+  created_at: string;
+}
+
+export const DepartmentPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [list, setList] = useState<any>([]);
+  const [refresh, setRefresh] = useState(false);
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: "ID",
+      key: "id",
+      dataIndex: "id",
+    },
+    {
+      title: "角色名",
+      dataIndex: "name",
+      render: (text: string) => <span>{text}</span>,
+    },
+    {
+      title: "时间",
+      dataIndex: "created_at",
+      render: (text: string) => <span>{text && dateFormat(text)}</span>,
+    },
+    {
+      title: "操作",
+      key: "action",
+      fixed: "right",
+      width: 160,
+      render: (_, record) => (
+        <Space size="small">
+          <Button
+            type="link"
+            danger
+            className="c-red"
+            onClick={() => navigate(`/system/adminroles/update/${record.id}`)}
+          >
+            详情
+          </Button>
+          <Popconfirm
+            title="警告"
+            description="即将删除此角色，确认操作？"
+            onConfirm={() => delUser(record.id)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button type="link" danger className="c-red">
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  useEffect(() => {
+    getData();
+  }, [refresh]);
+
+  const getData = () => {
+    setLoading(true);
+    adminRole.adminRoleList().then((res: any) => {
+      setList(res.data);
+      setTimeout(() => {
+        setLoading(false);
+      }, 1000);
+    });
+  };
+
+  const resetData = () => {
+    setList([]);
+    setRefresh(!refresh);
+  };
+
+  const delUser = (id: any) => {
+    adminRole.destroyAdminRole(id).then((res: any) => {
+      setTimeout(() => {
+        message.success("操作成功");
+        setRefresh(!refresh);
+      }, 1000);
+    });
+  };
+
+  return (
+    <>
+      <div className="playedu-main-body">
+        <div className="float-left j-b-flex mb-24">
+          <div className="d-flex">
+            <Link
+              style={{ textDecoration: "none" }}
+              to={`/system/adminroles/create`}
+            >
+              <Button icon={<PlusOutlined />} className="mr-16" type="primary">
+                新建
+              </Button>
+            </Link>
+          </div>
+          <div className="d-flex">
+            <Button
+              type="link"
+              icon={<ReloadOutlined />}
+              style={{ color: "#333333" }}
+              onClick={() => {
+                setRefresh(!refresh);
+              }}
+            ></Button>
+          </div>
+        </div>
+        <div className="float-left">
+          <Table
+            columns={columns}
+            dataSource={list}
+            loading={loading}
+            rowKey={(record) => record.id}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

src/pages/index.ts

@@ -13,3 +13,4 @@ export * from "./system/administrator/update";
 export * from "./system/adminroles/index";
 export * from "./system/adminroles/create";
 export * from "./system/adminroles/update";
+export * from "./department";

src/pages/member/create.tsx

@@ -26,7 +26,6 @@ export const MemberCreatePage: React.FC = () => {
     department.departmentList().then((res: any) => {
       const departments = res.data.departments;
       const new_arr: Option[] = checkArr(departments, 0);
-      console.log(new_arr);
       setDepartments(new_arr);
     });
   };
@@ -72,9 +71,7 @@ export const MemberCreatePage: React.FC = () => {
     console.log("Failed:", errorInfo);
   };
 
-  const onChange = (value: any) => {
-    console.log(value);
-  };
+  const onChange = (value: any) => {};
 
   return (
     <>

src/pages/member/update.tsx

@@ -30,7 +30,6 @@ export const MemberUpdatePage: React.FC = () => {
     department.departmentList().then((res: any) => {
       const departments = res.data.departments;
       const new_arr: Option[] = checkArr(departments, 0);
-      console.log(new_arr);
       setDepartments(new_arr);
     });
   };
@@ -94,9 +93,7 @@ export const MemberUpdatePage: React.FC = () => {
     console.log("Failed:", errorInfo);
   };
 
-  const onChange = (value: any) => {
-    console.log(value);
-  };
+  const onChange = (value: any) => {};
 
   return (
     <>

src/pages/system/adminroles/index.tsx

@@ -1,14 +1,5 @@
 import React, { useState, useEffect } from "react";
-import {
-  Typography,
-  Input,
-  Select,
-  Button,
-  Space,
-  Table,
-  Popconfirm,
-  message,
-} from "antd";
+import { Button, Space, Table, Popconfirm, message } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import styles from "./index.module.less";
 import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";

src/router/routes.tsx

@@ -15,6 +15,7 @@ import {
   SystemAdminrolesPage,
   AdminrolesCreatePage,
   AdminrolesUpdatePage,
+  DepartmentPage,
 } from "../pages";
 
 const routes: RouteObject[] = [
@@ -66,6 +67,10 @@ const routes: RouteObject[] = [
         path: "/system/adminroles/update/:roleId",
         element: <AdminrolesUpdatePage />,
       },
+      {
+        path: "/department",
+        element: <DepartmentPage />,
+      },
     ],
   },
   {