系统角色新建、编辑弹窗组件化

src/pages/index.ts

@@ -15,8 +15,6 @@ export * from "./system/administrator/index";
 export * from "./system/administrator/create";
 export * from "./system/administrator/update";
 export * from "./system/adminroles/index";
-export * from "./system/adminroles/create";
-export * from "./system/adminroles/update";
 export * from "./department";
 export * from "./change-password";
 export * from "./resource/images";

src/pages/system/adminroles/compenents/create.tsx

@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Select, Form, Input, message } from "antd";
+import styles from "./create.module.less";
+import { adminRole } from "../../../../api/index";
+
+interface PropInterface {
+  open: boolean;
+  onCancel: () => void;
+}
+
+export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
+  open,
+  onCancel,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [permissions, setPermissions] = useState<any>([]);
+  const [actions, setActions] = useState<any>([]);
+
+  useEffect(() => {
+    getParams();
+  }, []);
+
+  useEffect(() => {
+    form.setFieldsValue({
+      name: "",
+    });
+  }, [form, open]);
+
+  const getParams = () => {
+    adminRole.createAdminRole().then((res: any) => {
+      const arr = [];
+      const arr2 = [];
+      let actions = res.data.perm_action.action;
+      let permissions = res.data.perm_action.data;
+      for (let i = 0; i < permissions.length; i++) {
+        arr.push({
+          label: permissions[i].group_name + "-" + permissions[i].name,
+          value: permissions[i].id,
+        });
+      }
+      for (let j = 0; j < actions.length; j++) {
+        arr2.push({
+          label: actions[j].group_name + "-" + actions[j].name,
+          value: actions[j].id,
+        });
+      }
+      setPermissions(arr);
+      setActions(arr2);
+    });
+  };
+
+  const onFinish = (values: any) => {
+    const params = values.action_ids.concat(values.permission_ids);
+    adminRole.storeAdminRole(values.name, params).then((res: any) => {
+      message.success("保存成功！");
+      onCancel();
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  return (
+    <>
+      <Modal
+        title="新建角色"
+        centered
+        forceRender
+        open={open}
+        width={416}
+        onOk={() => form.submit()}
+        onCancel={() => onCancel()}
+      >
+        <div className="float-left mt-24">
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="角色名"
+              name="name"
+              rules={[{ required: true, message: "请输入角色名!" }]}
+            >
+              <Input style={{ width: 200 }} placeholder="请输入角色名" />
+            </Form.Item>
+            <Form.Item label="操作权限" name="action_ids">
+              <Select
+                style={{ width: 200 }}
+                mode="multiple"
+                allowClear
+                placeholder="请选择权限"
+                options={actions}
+              />
+            </Form.Item>
+            <Form.Item label="数据权限" name="permission_ids">
+              <Select
+                style={{ width: 200 }}
+                mode="multiple"
+                allowClear
+                placeholder="请选择权限"
+                options={permissions}
+              />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/pages/system/adminroles/compenents/update.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Form, Input, Select, message } from "antd";
+import styles from "./update.module.less";
+import { adminRole } from "../../../../api/index";
+
+interface PropInterface {
+  id: number;
+  open: boolean;
+  onCancel: () => void;
+}
+
+export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
+  id,
+  open,
+  onCancel,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [permissions, setPermissions] = useState<any>([]);
+  const [actions, setActions] = useState<any>([]);
+
+  useEffect(() => {
+    getParams();
+  }, []);
+
+  useEffect(() => {
+    if (id === 0) {
+      return;
+    }
+    getDetail();
+  }, [id]);
+
+  const getParams = () => {
+    adminRole.createAdminRole().then((res: any) => {
+      const arr = [];
+      const arr2 = [];
+      let actions = res.data.perm_action.action;
+      let permissions = res.data.perm_action.data;
+      for (let i = 0; i < permissions.length; i++) {
+        arr.push({
+          label: permissions[i].group_name + "-" + permissions[i].name,
+          value: permissions[i].id,
+        });
+      }
+      for (let j = 0; j < actions.length; j++) {
+        arr2.push({
+          label: actions[j].group_name + "-" + actions[j].name,
+          value: actions[j].id,
+        });
+      }
+      setPermissions(arr);
+      setActions(arr2);
+    });
+  };
+
+  const getDetail = () => {
+    adminRole.adminRole(id).then((res: any) => {
+      let role = res.data.role;
+      form.setFieldsValue({
+        name: role.name,
+        permission_ids: res.data.perm_data,
+        action_ids: res.data.perm_action,
+      });
+    });
+  };
+
+  const onFinish = (values: any) => {
+    const arr = values.action_ids.concat(values.permission_ids);
+    adminRole.updateAdminRole(id, values.name, arr).then((res: any) => {
+      message.success("保存成功！");
+      onCancel();
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  return (
+    <>
+      <Modal
+        title="编辑部门"
+        centered
+        forceRender
+        open={open}
+        width={416}
+        onOk={() => form.submit()}
+        onCancel={() => onCancel()}
+      >
+        <div className="float-left mt-24">
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="角色名"
+              name="name"
+              rules={[{ required: true, message: "请输入角色名!" }]}
+            >
+              <Input style={{ width: 200 }} placeholder="请输入角色名" />
+            </Form.Item>
+            <Form.Item label="操作权限" name="action_ids">
+              <Select
+                style={{ width: 200 }}
+                mode="multiple"
+                allowClear
+                placeholder="请选择权限"
+                options={actions}
+              />
+            </Form.Item>
+            <Form.Item label="数据权限" name="permission_ids">
+              <Select
+                style={{ width: 200 }}
+                mode="multiple"
+                allowClear
+                placeholder="请选择权限"
+                options={permissions}
+              />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/pages/system/adminroles/create.tsx

@@ -1,117 +0,0 @@
-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";
-import { BackBartment } from "../../../compenents";
-
-export const AdminrolesCreatePage: React.FC = () => {
-  const navigate = useNavigate();
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState<boolean>(true);
-  const [permissions, setPermissions] = useState<any>([]);
-  const [actions, setActions] = useState<any>([]);
-
-  useEffect(() => {
-    getParams();
-  }, []);
-
-  const getParams = () => {
-    adminRole.createAdminRole().then((res: any) => {
-      const arr = [];
-      const arr2 = [];
-      let actions = res.data.perm_action.action;
-      let permissions = res.data.perm_action.data;
-      for (let i = 0; i < permissions.length; i++) {
-        arr.push({
-          label: permissions[i].name,
-          value: permissions[i].id,
-        });
-      }
-      for (let j = 0; j < actions.length; j++) {
-        arr2.push({
-          label: actions[j].name,
-          value: actions[j].id,
-        });
-      }
-      setPermissions(arr);
-      setActions(arr2);
-    });
-  };
-
-  const onFinish = (values: any) => {
-    const params = values.action_ids.concat(values.permission_ids);
-
-    adminRole.storeAdminRole(values.name, params).then((res: any) => {
-      message.success("保存成功！");
-      navigate(-1);
-    });
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log("Failed:", errorInfo);
-  };
-
-  return (
-    <>
-      <Row className="playedu-main-body">
-        <Col>
-          <div className="float-left mb-24">
-            <BackBartment title="新建管理员角色" />
-          </div>
-          <div className="float-left">
-            <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="action_ids">
-                <Select
-                  style={{ width: 300 }}
-                  mode="multiple"
-                  allowClear
-                  placeholder="请选择权限"
-                  options={actions}
-                />
-              </Form.Item>
-              <Form.Item label="数据权限" name="permission_ids">
-                <Select
-                  style={{ width: 300 }}
-                  mode="multiple"
-                  allowClear
-                  placeholder="请选择权限"
-                  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>
-          </div>
-        </Col>
-      </Row>
-    </>
-  );
-};

src/pages/system/adminroles/index.tsx

@@ -5,7 +5,9 @@ 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";
+import { useNavigate } from "react-router-dom";
+import { SystemAdminrolesCreate } from "./compenents/create";
+import { SystemAdminrolesUpdate } from "./compenents/update";
 
 interface DataType {
   id: React.Key;
@@ -18,6 +20,9 @@ export const SystemAdminrolesPage: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(true);
   const [list, setList] = useState<any>([]);
   const [refresh, setRefresh] = useState(false);
+  const [createVisible, setCreateVisible] = useState<boolean>(false);
+  const [updateVisible, setUpdateVisible] = useState<boolean>(false);
+  const [cid, setCid] = useState<number>(0);
 
   const columns: ColumnsType<DataType> = [
     {
@@ -41,7 +46,10 @@ export const SystemAdminrolesPage: React.FC = () => {
             type="link"
             danger
             className="b-link c-red"
-            onClick={() => navigate(`/system/adminroles/update/${record.id}`)}
+            onClick={() => {
+              setCid(Number(record.id));
+              setUpdateVisible(true);
+            }}
           >
             详情
           </Button>
@@ -90,14 +98,14 @@ export const SystemAdminrolesPage: React.FC = () => {
       <div className="playedu-main-body">
         <div className="float-left j-b-flex mb-24">
           <div className="d-flex">
-            <Link
+            <Button
-              style={{ textDecoration: "none" }}
+              icon={<PlusOutlined />}
-              to={`/system/adminroles/create`}
+              className="mr-16"
+              type="primary"
+              onClick={() => setCreateVisible(true)}
             >
-              <Button icon={<PlusOutlined />} className="mr-16" type="primary">
+              新建角色
-                新建
             </Button>
-            </Link>
           </div>
           <div className="d-flex">
             <Button
@@ -118,6 +126,21 @@ export const SystemAdminrolesPage: React.FC = () => {
             rowKey={(record) => record.id}
           />
         </div>
+        <SystemAdminrolesCreate
+          open={createVisible}
+          onCancel={() => {
+            setCreateVisible(false);
+            setRefresh(!refresh);
+          }}
+        />
+        <SystemAdminrolesUpdate
+          id={cid}
+          open={updateVisible}
+          onCancel={() => {
+            setUpdateVisible(false);
+            setRefresh(!refresh);
+          }}
+        />
       </div>
     </>
   );

src/pages/system/adminroles/update.tsx

@@ -1,135 +0,0 @@
-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";
-import { BackBartment } from "../../../compenents";
-
-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>([]);
-  const [actions, setActions] = useState<any>([]);
-
-  useEffect(() => {
-    getParams();
-  }, []);
-
-  useEffect(() => {
-    getDetail();
-  }, [params.roleId]);
-
-  const getParams = () => {
-    adminRole.createAdminRole().then((res: any) => {
-      const arr = [];
-      const arr2 = [];
-      let actions = res.data.perm_action.action;
-      let permissions = res.data.perm_action.data;
-      for (let i = 0; i < permissions.length; i++) {
-        arr.push({
-          label: permissions[i].name,
-          value: permissions[i].id,
-        });
-      }
-      for (let j = 0; j < actions.length; j++) {
-        arr2.push({
-          label: actions[j].name,
-          value: actions[j].id,
-        });
-      }
-      setPermissions(arr);
-      setActions(arr2);
-    });
-  };
-
-  const getDetail = () => {
-    adminRole.adminRole(Number(params.roleId)).then((res: any) => {
-      let role = res.data.role;
-      form.setFieldsValue({
-        name: role.name,
-        permission_ids: res.data.perm_data,
-        action_ids: res.data.perm_action,
-      });
-    });
-  };
-
-  const onFinish = (values: any) => {
-    let id = Number(params.roleId);
-    const arr = values.action_ids.concat(values.permission_ids);
-    adminRole.updateAdminRole(id, values.name, arr).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>
-          <div className="float-left mb-24">
-            <BackBartment title="编辑管理员角色" />
-          </div>
-          <div className="float-left">
-            <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="action_ids">
-                <Select
-                  style={{ width: 300 }}
-                  mode="multiple"
-                  allowClear
-                  placeholder="请选择权限"
-                  options={actions}
-                />
-              </Form.Item>
-              <Form.Item label="数据权限" name="permission_ids">
-                <Select
-                  style={{ width: 300 }}
-                  mode="multiple"
-                  allowClear
-                  placeholder="请选择权限"
-                  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>
-          </div>
-        </Col>
-      </Row>
-    </>
-  );
-};

src/router/routes.tsx

@@ -16,8 +16,6 @@ import {
   AdministratorCreatePage,
   AdministratorUpdatePage,
   SystemAdminrolesPage,
-  AdminrolesCreatePage,
-  AdminrolesUpdatePage,
   DepartmentPage,
   ChangePasswordPage,
   ResourceImagesPage,
@@ -100,14 +98,6 @@ const routes: RouteObject[] = [
         path: "/system/adminroles",
         element: <SystemAdminrolesPage />,
       },
-      {
-        path: "/system/adminroles/create",
-        element: <AdminrolesCreatePage />,
-      },
-      {
-        path: "/system/adminroles/update/:roleId",
-        element: <AdminrolesUpdatePage />,
-      },
       {
         path: "/department",
         element: <DepartmentPage />,