系统角色新建、编辑初步

src/pages/index.ts

@@ -4,10 +4,12 @@ export * from "./dashboard";
 export * from "./error";
 export * from "./test";
 export * from "./course/vod";
-export * from "./member/index"
+export * from "./member/index";
-export * from "./member/create"
+export * from "./member/create";
-export * from "./member/update"
+export * from "./member/update";
-export * from "./system/administrator/index"
+export * from "./system/administrator/index";
-export * from "./system/administrator/create"
+export * from "./system/administrator/create";
-export * from "./system/administrator/update"
+export * from "./system/administrator/update";
-export * from "./system/adminroles/index"
+export * from "./system/adminroles/index";
+export * from "./system/adminroles/create";
+export * from "./system/adminroles/update";

src/pages/system/adminroles/create.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from "react";
+import { Row, Col, Form, Input, Select, Button, message } from "antd";
+import styles from "./create.module.less";
+import { adminRole } from "../../../api/index";
+import { useNavigate } from "react-router-dom";
+
+export const AdminrolesCreatePage: React.FC = () => {
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [permissions, setPermissions] = useState<any>([]);
+
+  useEffect(() => {
+    getParams();
+  }, []);
+
+  const getParams = () => {
+    adminRole.createAdminRole().then((res: any) => {
+      const arr = [];
+      let permissions = res.data.permissions;
+      for (let i = 0; i < permissions.length; i++) {
+        arr.push({
+          label: permissions[i].name,
+          value: permissions[i].id,
+        });
+      }
+      setPermissions(arr);
+    });
+  };
+
+  const onFinish = (values: any) => {
+    adminRole
+      .storeAdminRole(values.name, values.permission_ids)
+      .then((res: any) => {
+        message.success("保存成功！");
+        navigate(-1);
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const handleChange = (value: any) => {};
+
+  return (
+    <>
+      <Row className="playedu-main-body">
+        <Col>
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            style={{ width: 600 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="姓名"
+              name="name"
+              rules={[{ required: true, message: "请输入角色名!" }]}
+            >
+              <Input style={{ width: 300 }} placeholder="请输入角色名" />
+            </Form.Item>
+            <Form.Item label="权限" name="permission_ids">
+              <Select
+                style={{ width: 300 }}
+                mode="multiple"
+                allowClear
+                placeholder="请选择权限"
+                onChange={handleChange}
+                options={permissions}
+              />
+            </Form.Item>
+            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+              <Button type="primary" htmlType="submit">
+                保存
+              </Button>
+              <Button
+                className="ml-15"
+                htmlType="button"
+                onClick={() => navigate(-1)}
+              >
+                取消
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
+    </>
+  );
+};

src/pages/system/adminroles/index.tsx

@@ -19,7 +19,6 @@ import { Link, useNavigate } from "react-router-dom";
 interface DataType {
   id: React.Key;
   name: string;
-  slug: string;
   created_at: string;
 }
 
@@ -40,10 +39,6 @@ export const SystemAdminrolesPage: React.FC = () => {
       dataIndex: "name",
       render: (text: string) => <span>{text}</span>,
     },
-    {
-      title: "Slug",
-      dataIndex: "slug",
-    },
     {
       title: "时间",
       dataIndex: "created_at",

src/pages/system/adminroles/update.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from "react";
+import { Row, Col, Form, Input, Select, Button, message } from "antd";
+import styles from "./update.module.less";
+import { adminRole } from "../../../api/index";
+import { useParams, useNavigate } from "react-router-dom";
+
+export const AdminrolesUpdatePage: React.FC = () => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [permissions, setPermissions] = useState<any>([]);
+
+  useEffect(() => {
+    getParams();
+  }, []);
+  useEffect(() => {
+    getDetail();
+  }, [params.roleId]);
+
+  const getParams = () => {
+    adminRole.createAdminRole().then((res: any) => {
+      const arr = [];
+      let permissions = res.data.permissions;
+      for (let i = 0; i < permissions.length; i++) {
+        arr.push({
+          label: permissions[i].name,
+          value: permissions[i].id,
+        });
+      }
+      setPermissions(arr);
+    });
+  };
+
+  const getDetail = () => {
+    adminRole.adminRole(Number(params.roleId)).then((res: any) => {
+      let role = res.data.role;
+      form.setFieldsValue({
+        name: role.name,
+        permission_ids: res.data.permission_ids,
+      });
+    });
+  };
+
+  const onFinish = (values: any) => {
+    let id = Number(params.roleId);
+    adminRole
+      .updateAdminRole(id, values.name, values.permission_ids)
+      .then((res: any) => {
+        message.success("保存成功！");
+        navigate(-1);
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const handleChange = (value: any) => {};
+
+  return (
+    <>
+      <Row className="playedu-main-body">
+        <Col>
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            style={{ width: 600 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="姓名"
+              name="name"
+              rules={[{ required: true, message: "请输入角色名!" }]}
+            >
+              <Input style={{ width: 300 }} placeholder="请输入角色名" />
+            </Form.Item>
+            <Form.Item label="权限" name="permission_ids">
+              <Select
+                style={{ width: 300 }}
+                mode="multiple"
+                allowClear
+                placeholder="请选择权限"
+                onChange={handleChange}
+                options={permissions}
+              />
+            </Form.Item>
+            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+              <Button type="primary" htmlType="submit">
+                保存
+              </Button>
+              <Button
+                className="ml-15"
+                htmlType="button"
+                onClick={() => navigate(-1)}
+              >
+                取消
+              </Button>
+            </Form.Item>
+          </Form>
+        </Col>
+      </Row>
+    </>
+  );
+};

src/router/routes.tsx

@@ -13,6 +13,8 @@ import {
   AdministratorCreatePage,
   AdministratorUpdatePage,
   SystemAdminrolesPage,
+  AdminrolesCreatePage,
+  AdminrolesUpdatePage,
 } from "../pages";
 
 const routes: RouteObject[] = [
@@ -56,6 +58,14 @@ const routes: RouteObject[] = [
         path: "/system/adminroles",
         element: <SystemAdminrolesPage />,
       },
+      {
+        path: "/system/adminroles/create",
+        element: <AdminrolesCreatePage />,
+      },
+      {
+        path: "/system/adminroles/update/:roleId",
+        element: <AdminrolesUpdatePage />,
+      },
     ],
   },
   {