系统角色管理列表初步

src/api/admin-role.ts

@@ -24,7 +24,7 @@ export function updateAdminRole(
   name: string,
   permissionIds: number[]
 ) {
-  return client.post(`/backend/v1/admin-role/${id}`, {
+  return client.put(`/backend/v1/admin-role/${id}`, {
     name: name,
     permission_ids: permissionIds,
   });

src/pages/index.ts

@@ -10,3 +10,4 @@ export * from "./member/update"
 export * from "./system/administrator/index"
 export * from "./system/administrator/create"
 export * from "./system/administrator/update"
+export * from "./system/adminroles/index"

src/pages/system/administrator/index.tsx

@@ -79,13 +79,15 @@ export const SystemAdministratorPage: React.FC = () => {
             type="link"
             danger
             className="c-red"
-            onClick={() => navigate(`/system/administrator/update/${record.id}`)}
+            onClick={() =>
+              navigate(`/system/administrator/update/${record.id}`)
+            }
           >
             详情
           </Button>
           <Popconfirm
             title="警告"
-            description="即将删除此账号，确认操作？"
+            description="即将删除此人员，确认操作？"
             onConfirm={() => delUser(record.id)}
             okText="确定"
             cancelText="取消"

src/pages/system/adminroles/index.tsx

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from "react";
+import {
+  Typography,
+  Input,
+  Select,
+  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;
+  slug: string;
+  created_at: string;
+}
+
+export const SystemAdminrolesPage: 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: "Slug",
+      dataIndex: "slug",
+    },
+    {
+      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/router/routes.tsx

@@ -12,6 +12,7 @@ import {
   SystemAdministratorPage,
   AdministratorCreatePage,
   AdministratorUpdatePage,
+  SystemAdminrolesPage,
 } from "../pages";
 
 const routes: RouteObject[] = [
@@ -51,6 +52,10 @@ const routes: RouteObject[] = [
         path: "/system/administrator/update/:userId",
         element: <AdministratorUpdatePage />,
       },
+      {
+        path: "/system/adminroles",
+        element: <SystemAdminrolesPage />,
+      },
     ],
   },
   {