系统管理人员新建、编辑弹窗组件化

src/pages/index.ts

@@ -12,8 +12,6 @@ export * from "./member/update";
 export * from "./member/import";
 export * from "./system/index";
 export * from "./system/administrator/index";
-export * from "./system/administrator/create";
-export * from "./system/administrator/update";
 export * from "./system/adminroles/index";
 export * from "./department";
 export * from "./change-password";

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

@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Select, Switch, Form, Input, message } from "antd";
+import styles from "./create.module.less";
+import { adminUser } from "../../../../api/index";
+
+interface PropInterface {
+  open: boolean;
+  onCancel: () => void;
+}
+
+export const SystemAdministratorCreate: React.FC<PropInterface> = ({
+  open,
+  onCancel,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [roles, setRoles] = useState<any>([]);
+
+  useEffect(() => {
+    getParams();
+  }, []);
+
+  useEffect(() => {
+    form.setFieldsValue({
+      email: "",
+      name: "",
+      password: "",
+      is_ban_login: 0,
+      roleIds: [],
+    });
+  }, [form, open]);
+
+  const getParams = () => {
+    adminUser.createAdminUser().then((res: any) => {
+      const arr = [];
+      let roles = res.data.roles;
+      for (let i = 0; i < roles.length; i++) {
+        arr.push({
+          label: roles[i].name,
+          value: roles[i].id,
+        });
+      }
+      setRoles(arr);
+    });
+  };
+
+  const onFinish = (values: any) => {
+    adminUser
+      .storeAdminUser(
+        values.name,
+        values.email,
+        values.password,
+        values.is_ban_login,
+        values.roleIds
+      )
+      .then((res: any) => {
+        message.success("保存成功！");
+        onCancel();
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const handleChange = (value: any) => {};
+
+  const onChange = (checked: boolean) => {
+    if (checked) {
+      form.setFieldsValue({ is_ban_login: 1 });
+    } else {
+      form.setFieldsValue({ is_ban_login: 0 });
+    }
+  };
+
+  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="roleIds">
+              <Select
+                style={{ width: 200 }}
+                mode="multiple"
+                allowClear
+                placeholder="请选择角色"
+                onChange={handleChange}
+                options={roles}
+              />
+            </Form.Item>
+            <Form.Item
+              label="姓名"
+              name="name"
+              rules={[{ required: true, message: "请输入姓名!" }]}
+            >
+              <Input style={{ width: 200 }} placeholder="请输入姓名" />
+            </Form.Item>
+            <Form.Item
+              label="邮箱"
+              name="email"
+              rules={[{ required: true, message: "请输入学员邮箱!" }]}
+            >
+              <Input style={{ width: 200 }} placeholder="请输入学员邮箱" />
+            </Form.Item>
+            <Form.Item
+              label="密码"
+              name="password"
+              rules={[{ required: true, message: "请输入登录密码!" }]}
+            >
+              <Input.Password
+                style={{ width: 200 }}
+                placeholder="请输入登录密码"
+              />
+            </Form.Item>
+            <Form.Item
+              label="禁止登录"
+              name="is_ban_login"
+              valuePropName="checked"
+              rules={[{ required: true, message: "请选择禁止登录!" }]}
+            >
+              <Switch onChange={onChange} />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

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

@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Form, Input, Select, Switch, message } from "antd";
+import styles from "./update.module.less";
+import { adminUser } from "../../../../api/index";
+
+interface PropInterface {
+  id: number;
+  open: boolean;
+  onCancel: () => void;
+}
+
+export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
+  id,
+  open,
+  onCancel,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [roles, setRoles] = useState<any>([]);
+
+  useEffect(() => {
+    getParams();
+  }, []);
+
+  useEffect(() => {
+    form.setFieldsValue({
+      is_ban_login: 0,
+    });
+  }, [form, open]);
+
+  useEffect(() => {
+    if (id === 0) {
+      return;
+    }
+    getDetail();
+  }, [id]);
+
+  const getParams = () => {
+    adminUser.createAdminUser().then((res: any) => {
+      const arr = [];
+      let roles = res.data.roles;
+      for (let i = 0; i < roles.length; i++) {
+        arr.push({
+          label: roles[i].name,
+          value: roles[i].id,
+        });
+      }
+      setRoles(arr);
+    });
+  };
+
+  const getDetail = () => {
+    adminUser.AdminUser(id).then((res: any) => {
+      let user = res.data.user;
+      form.setFieldsValue({
+        email: user.email,
+        name: user.name,
+        is_ban_login: user.is_ban_login,
+        roleIds: res.data.role_ids,
+      });
+    });
+  };
+
+  const onFinish = (values: any) => {
+    adminUser
+      .updateAdminUser(
+        id,
+        values.name,
+        values.email,
+        values.password,
+        values.is_ban_login,
+        values.roleIds
+      )
+      .then((res: any) => {
+        message.success("保存成功！");
+        onCancel();
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const handleChange = (value: any) => {};
+
+  const onChange = (checked: boolean) => {
+    if (checked) {
+      form.setFieldsValue({ is_ban_login: 1 });
+    } else {
+      form.setFieldsValue({ is_ban_login: 0 });
+    }
+  };
+
+  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="roleIds">
+              <Select
+                style={{ width: 200 }}
+                mode="multiple"
+                allowClear
+                placeholder="请选择角色"
+                onChange={handleChange}
+                options={roles}
+              />
+            </Form.Item>
+            <Form.Item
+              label="姓名"
+              name="name"
+              rules={[{ required: true, message: "请输入姓名!" }]}
+            >
+              <Input style={{ width: 200 }} placeholder="请输入姓名" />
+            </Form.Item>
+            <Form.Item
+              label="邮箱"
+              name="email"
+              rules={[{ required: true, message: "请输入学员邮箱!" }]}
+            >
+              <Input style={{ width: 200 }} placeholder="请输入学员邮箱" />
+            </Form.Item>
+            <Form.Item
+              label="密码"
+              name="password"
+              rules={[{ required: true, message: "请输入登录密码!" }]}
+            >
+              <Input.Password
+                style={{ width: 200 }}
+                placeholder="请输入登录密码"
+              />
+            </Form.Item>
+            <Form.Item
+              label="禁止登录"
+              name="is_ban_login"
+              valuePropName="checked"
+            >
+              <Switch onChange={onChange} />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/pages/system/administrator/create.tsx

@@ -1,141 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Row, Col, Form, Input, Select, Switch, Button, message } from "antd";
-import styles from "./create.module.less";
-import { adminUser } from "../../../api/index";
-import { useNavigate } from "react-router-dom";
-import { BackBartment } from "../../../compenents";
-
-export const AdministratorCreatePage: React.FC = () => {
-  const navigate = useNavigate();
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState<boolean>(true);
-  const [roles, setRoles] = useState<any>([]);
-
-  useEffect(() => {
-    getParams();
-  }, []);
-
-  const getParams = () => {
-    adminUser.createAdminUser().then((res: any) => {
-      const arr = [];
-      let roles = res.data.roles;
-      for (let i = 0; i < roles.length; i++) {
-        arr.push({
-          label: roles[i].name,
-          value: roles[i].id,
-        });
-      }
-      setRoles(arr);
-      form.setFieldsValue({ is_ban_login: 0 });
-    });
-  };
-
-  const onFinish = (values: any) => {
-    adminUser
-      .storeAdminUser(
-        values.name,
-        values.email,
-        values.password,
-        values.is_ban_login,
-        values.roleIds
-      )
-      .then((res: any) => {
-        message.success("保存成功！");
-        navigate(-1);
-      });
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log("Failed:", errorInfo);
-  };
-
-  const handleChange = (value: any) => {};
-
-  const onChange = (checked: boolean) => {
-    if (checked) {
-      form.setFieldsValue({ is_ban_login: 1 });
-    } else {
-      form.setFieldsValue({ is_ban_login: 0 });
-    }
-  };
-
-  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="roleIds">
-                <Select
-                  style={{ width: 300 }}
-                  mode="multiple"
-                  allowClear
-                  placeholder="请选择角色"
-                  onChange={handleChange}
-                  options={roles}
-                />
-              </Form.Item>
-              <Form.Item
-                label="姓名"
-                name="name"
-                rules={[{ required: true, message: "请输入姓名!" }]}
-              >
-                <Input style={{ width: 300 }} placeholder="请输入姓名" />
-              </Form.Item>
-              <Form.Item
-                label="邮箱"
-                name="email"
-                rules={[{ required: true, message: "请输入学员邮箱!" }]}
-              >
-                <Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
-              </Form.Item>
-              <Form.Item
-                label="密码"
-                name="password"
-                rules={[{ required: true, message: "请输入登录密码!" }]}
-              >
-                <Input.Password
-                  style={{ width: 300 }}
-                  placeholder="请输入登录密码"
-                />
-              </Form.Item>
-              <Form.Item
-                label="禁止登录"
-                name="is_ban_login"
-                valuePropName="checked"
-                rules={[{ required: true, message: "请选择禁止登录!" }]}
-              >
-                <Switch onChange={onChange} />
-              </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/administrator/index.tsx

@@ -1,19 +1,15 @@
 import React, { useState, useEffect } from "react";
-import {
-  Typography,
-  Input,
-  Button,
-  Space,
-  Table,
-  Popconfirm,
-  message,
-} from "antd";
+import { Typography, Input, Button, Space, Table, Modal, message } from "antd";
 import type { ColumnsType } from "antd/es/table";
-import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
+import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { adminUser } from "../../../api/index";
 import { dateFormat } from "../../../utils/index";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { PerButton } from "../../../compenents";
+import { SystemAdministratorCreate } from "./compenents/create";
+import { SystemAdministratorUpdate } from "./compenents/update";
+
+const { confirm } = Modal;
 
 interface DataType {
   id: React.Key;
@@ -32,6 +28,9 @@ export const SystemAdministratorPage: React.FC = () => {
   const [list, setList] = useState<any>([]);
   const [total, setTotal] = useState(0);
   const [refresh, setRefresh] = useState(false);
+  const [createVisible, setCreateVisible] = useState<boolean>(false);
+  const [updateVisible, setUpdateVisible] = useState<boolean>(false);
+  const [cid, setCid] = useState<number>(0);
 
   const [name, setName] = useState<string>("");
 
@@ -75,32 +74,26 @@ export const SystemAdministratorPage: React.FC = () => {
         <Space size="small">
           <PerButton
             type="link"
-            text="详情"
+            text="编辑"
             class="b-link c-red"
             icon={null}
             p="admin-user-cud"
-            onClick={() =>
-              navigate(`/system/administrator/update/${record.id}`)
-            }
+            onClick={() => {
+              setCid(Number(record.id));
+              setUpdateVisible(true);
+            }}
+            disabled={null}
+          />
+          <div className="form-column"></div>
+          <PerButton
+            type="link"
+            text="删除"
+            class="b-link c-red"
+            icon={null}
+            p="admin-user-cud"
+            onClick={() => delUser(record.id)}
             disabled={null}
           />
-          <Popconfirm
-            title="警告"
-            description="即将删除此人员，确认操作？"
-            onConfirm={() => delUser(record.id)}
-            okText="确定"
-            cancelText="取消"
-          >
-            <PerButton
-              type="link"
-              text="删除"
-              class="b-link c-red"
-              icon={null}
-              p="admin-user-cud"
-              onClick={() => null}
-              disabled={null}
-            />
-          </Popconfirm>
         </Space>
       ),
     },
@@ -142,71 +135,70 @@ export const SystemAdministratorPage: React.FC = () => {
   };
 
   const delUser = (id: any) => {
-    adminUser.destroyAdminUser(id).then((res: any) => {
-      message.success("操作成功");
-      setRefresh(!refresh);
+    if (id === 0) {
+      return;
+    }
+    confirm({
+      title: "操作确认",
+      icon: <ExclamationCircleFilled />,
+      content: "确认删除此人员？",
+      centered: true,
+      okText: "确认",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        adminUser.destroyAdminUser(id).then((res: any) => {
+          message.success("操作成功");
+          setRefresh(!refresh);
+        });
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
     });
   };
 
   return (
     <>
-      <div className="playedu-main-top mb-24">
-        <div className="float-left d-flex">
-          <div className="d-flex mr-24">
-            <Typography.Text>姓名：</Typography.Text>
-            <Input
-              value={name}
-              onChange={(e) => {
-                setName(e.target.value);
-              }}
-              style={{ width: 160 }}
-              placeholder="请输入姓名"
-            />
-          </div>
-          <div className="d-flex mr-24">
-            <Button className="mr-16" onClick={resetData}>
-              重 置
-            </Button>
-            <Button
-              type="primary"
-              onClick={() => {
-                setPage(1);
-                setRefresh(!refresh);
-              }}
-            >
-              查 询
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="playedu-main-body only">
+      <div className="playedu-main-body">
         <div className="float-left j-b-flex mb-24">
           <div className="d-flex">
-            <Link
-              style={{ textDecoration: "none" }}
-              to={`/system/administrator/create`}
-            >
-              <PerButton
-                type="primary"
-                text="新建"
-                class="mr-16"
-                icon={<PlusOutlined />}
-                p="admin-user-cud"
-                onClick={() => null}
-                disabled={null}
-              />
-            </Link>
+            <PerButton
+              type="primary"
+              text="新建管理人员"
+              class="mr-16"
+              icon={<PlusOutlined />}
+              p="admin-user-cud"
+              onClick={() => setCreateVisible(true)}
+              disabled={null}
+            />
           </div>
           <div className="d-flex">
-            <Button
-              type="link"
-              icon={<ReloadOutlined />}
-              style={{ color: "#333333" }}
-              onClick={() => {
-                setRefresh(!refresh);
-              }}
-            ></Button>
+            <div className="d-flex mr-24">
+              <Typography.Text>姓名：</Typography.Text>
+              <Input
+                value={name}
+                onChange={(e) => {
+                  setName(e.target.value);
+                }}
+                style={{ width: 160 }}
+                placeholder="请输入姓名"
+              />
+            </div>
+            <div className="d-flex">
+              <Button className="mr-16" onClick={resetData}>
+                重 置
+              </Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  setPage(1);
+                  setRefresh(!refresh);
+                }}
+              >
+                查 询
+              </Button>
+            </div>
           </div>
         </div>
         <div className="float-left">
@@ -217,6 +209,21 @@ export const SystemAdministratorPage: React.FC = () => {
             pagination={paginationProps}
             rowKey={(record) => record.id}
           />
+          <SystemAdministratorCreate
+            open={createVisible}
+            onCancel={() => {
+              setCreateVisible(false);
+              setRefresh(!refresh);
+            }}
+          />
+          <SystemAdministratorUpdate
+            id={cid}
+            open={updateVisible}
+            onCancel={() => {
+              setUpdateVisible(false);
+              setRefresh(!refresh);
+            }}
+          />
         </div>
       </div>
     </>

src/pages/system/administrator/update.tsx

@@ -1,158 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Row, Col, Form, Input, Select, Switch, Button, message } from "antd";
-import styles from "./update.module.less";
-import { adminUser } from "../../../api/index";
-import { useParams, useNavigate } from "react-router-dom";
-import { BackBartment } from "../../../compenents";
-
-export const AdministratorUpdatePage: React.FC = () => {
-  const params = useParams();
-  const navigate = useNavigate();
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState<boolean>(true);
-  const [roles, setRoles] = useState<any>([]);
-
-  useEffect(() => {
-    getParams();
-  }, []);
-  useEffect(() => {
-    getDetail();
-  }, [params.userId]);
-
-  const getParams = () => {
-    adminUser.createAdminUser().then((res: any) => {
-      const arr = [];
-      let roles = res.data.roles;
-      for (let i = 0; i < roles.length; i++) {
-        arr.push({
-          label: roles[i].name,
-          value: roles[i].id,
-        });
-      }
-      setRoles(arr);
-      form.setFieldsValue({ is_ban_login: 0 });
-    });
-  };
-
-  const getDetail = () => {
-    adminUser.AdminUser(Number(params.userId)).then((res: any) => {
-      let user = res.data.user;
-      form.setFieldsValue({
-        email: user.email,
-        name: user.name,
-        is_ban_login: user.is_ban_login,
-        roleIds: res.data.role_ids,
-      });
-    });
-  };
-
-  const onFinish = (values: any) => {
-    let id = Number(params.userId);
-    adminUser
-      .updateAdminUser(
-        id,
-        values.name,
-        values.email,
-        values.password,
-        values.is_ban_login,
-        values.roleIds
-      )
-      .then((res: any) => {
-        message.success("保存成功！");
-        navigate(-1);
-      });
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log("Failed:", errorInfo);
-  };
-
-  const handleChange = (value: any) => {};
-
-  const onChange = (checked: boolean) => {
-    if (checked) {
-      form.setFieldsValue({ is_ban_login: 1 });
-    } else {
-      form.setFieldsValue({ is_ban_login: 0 });
-    }
-  };
-
-  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="roleIds">
-                <Select
-                  style={{ width: 300 }}
-                  mode="multiple"
-                  allowClear
-                  placeholder="请选择角色"
-                  onChange={handleChange}
-                  options={roles}
-                />
-              </Form.Item>
-              <Form.Item
-                label="姓名"
-                name="name"
-                rules={[{ required: true, message: "请输入姓名!" }]}
-              >
-                <Input style={{ width: 300 }} placeholder="请输入姓名" />
-              </Form.Item>
-              <Form.Item
-                label="邮箱"
-                name="email"
-                rules={[{ required: true, message: "请输入学员邮箱!" }]}
-              >
-                <Input style={{ width: 300 }} placeholder="请输入学员邮箱" />
-              </Form.Item>
-              <Form.Item
-                label="密码"
-                name="password"
-                rules={[{ required: true, message: "请输入登录密码!" }]}
-              >
-                <Input.Password
-                  style={{ width: 300 }}
-                  placeholder="请输入登录密码"
-                />
-              </Form.Item>
-              <Form.Item
-                label="禁止登录"
-                name="is_ban_login"
-                valuePropName="checked"
-              >
-                <Switch onChange={onChange} />
-              </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/compenents/create.tsx

@@ -24,6 +24,8 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
   useEffect(() => {
     form.setFieldsValue({
       name: "",
+      permission_ids: [],
+      action_ids: [],
     });
   }, [form, open]);
 
@@ -51,7 +53,15 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
   };
 
   const onFinish = (values: any) => {
-    const params = values.action_ids.concat(values.permission_ids);
+    let pids = [];
+    let aids = [];
+    if (values.permission_ids) {
+      pids = values.permission_ids;
+    }
+    if (values.action_ids) {
+      aids = values.action_ids;
+    }
+    const params = aids.concat(pids);
     adminRole.storeAdminRole(values.name, params).then((res: any) => {
       message.success("保存成功！");
       onCancel();

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

@@ -65,8 +65,16 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
   };
 
   const onFinish = (values: any) => {
-    const arr = values.action_ids.concat(values.permission_ids);
-    adminRole.updateAdminRole(id, values.name, arr).then((res: any) => {
+    let pids = [];
+    let aids = [];
+    if (values.permission_ids) {
+      pids = values.permission_ids;
+    }
+    if (values.action_ids) {
+      aids = values.action_ids;
+    }
+    const params = aids.concat(pids);
+    adminRole.updateAdminRole(id, values.name, params).then((res: any) => {
       message.success("保存成功！");
       onCancel();
     });
@@ -79,7 +87,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
   return (
     <>
       <Modal
-        title="编辑部门"
+        title="编辑角色"
         centered
         forceRender
         open={open}

src/pages/system/adminroles/index.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from "react";
-import { Button, Space, Table, Popconfirm, message } from "antd";
+import { Button, Space, Table, Modal, message } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import styles from "./index.module.less";
-import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
+import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { adminRole } from "../../../api/index";
 import { dateFormat } from "../../../utils/index";
-import { useNavigate } from "react-router-dom";
 import { SystemAdminrolesCreate } from "./compenents/create";
 import { SystemAdminrolesUpdate } from "./compenents/update";
+import { PerButton } from "../../../compenents";
+
+const { confirm } = Modal;
 
 interface DataType {
   id: React.Key;
@@ -16,7 +18,6 @@ interface DataType {
 }
 
 export const SystemAdminrolesPage: React.FC = () => {
-  const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(true);
   const [list, setList] = useState<any>([]);
   const [refresh, setRefresh] = useState(false);
@@ -42,28 +43,28 @@ export const SystemAdminrolesPage: React.FC = () => {
       width: 160,
       render: (_, record) => (
         <Space size="small">
-          <Button
+          <PerButton
             type="link"
-            danger
-            className="b-link c-red"
+            text="编辑"
+            class="b-link c-red"
+            icon={null}
+            p="admin-role"
             onClick={() => {
               setCid(Number(record.id));
               setUpdateVisible(true);
             }}
-          >
-            详情
-          </Button>
-          <Popconfirm
-            title="警告"
-            description="即将删除此角色，确认操作？"
-            onConfirm={() => delUser(record.id)}
-            okText="确定"
-            cancelText="取消"
-          >
-            <Button type="link" danger className="b-link c-red">
-              删除
-            </Button>
-          </Popconfirm>
+            disabled={null}
+          />
+          <div className="form-column"></div>
+          <PerButton
+            type="link"
+            text="删除"
+            class="b-link c-red"
+            icon={null}
+            p="admin-role"
+            onClick={() => delUser(record.id)}
+            disabled={null}
+          />
         </Space>
       ),
     },
@@ -87,9 +88,26 @@ export const SystemAdminrolesPage: React.FC = () => {
   };
 
   const delUser = (id: any) => {
-    adminRole.destroyAdminRole(id).then((res: any) => {
-      message.success("操作成功");
-      resetData();
+    if (id === 0) {
+      return;
+    }
+    confirm({
+      title: "操作确认",
+      icon: <ExclamationCircleFilled />,
+      content: "确认删除此角色？",
+      centered: true,
+      okText: "确认",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        adminRole.destroyAdminRole(id).then((res: any) => {
+          message.success("操作成功");
+          resetData();
+        });
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
     });
   };
 
@@ -107,16 +125,7 @@ export const SystemAdminrolesPage: React.FC = () => {
               新建角色
             </Button>
           </div>
-          <div className="d-flex">
-            <Button
-              type="link"
-              icon={<ReloadOutlined />}
-              style={{ color: "#333333" }}
-              onClick={() => {
-                setRefresh(!refresh);
-              }}
-            ></Button>
-          </div>
+          <div className="d-flex"></div>
         </div>
         <div className="float-left">
           <Table
@@ -125,22 +134,22 @@ export const SystemAdminrolesPage: React.FC = () => {
             loading={loading}
             rowKey={(record) => record.id}
           />
+          <SystemAdminrolesCreate
+            open={createVisible}
+            onCancel={() => {
+              setCreateVisible(false);
+              setRefresh(!refresh);
+            }}
+          />
+          <SystemAdminrolesUpdate
+            id={cid}
+            open={updateVisible}
+            onCancel={() => {
+              setUpdateVisible(false);
+              setRefresh(!refresh);
+            }}
+          />
         </div>
-        <SystemAdminrolesCreate
-          open={createVisible}
-          onCancel={() => {
-            setCreateVisible(false);
-            setRefresh(!refresh);
-          }}
-        />
-        <SystemAdminrolesUpdate
-          id={cid}
-          open={updateVisible}
-          onCancel={() => {
-            setUpdateVisible(false);
-            setRefresh(!refresh);
-          }}
-        />
       </div>
     </>
   );

src/router/routes.tsx

@@ -13,8 +13,6 @@ import {
   MemberUpdatePage,
   MemberImportPage,
   SystemAdministratorPage,
-  AdministratorCreatePage,
-  AdministratorUpdatePage,
   SystemAdminrolesPage,
   DepartmentPage,
   ChangePasswordPage,
@@ -86,14 +84,6 @@ const routes: RouteObject[] = [
         path: "/system/administrator",
         element: <SystemAdministratorPage />,
       },
-      {
-        path: "/system/administrator/create",
-        element: <AdministratorCreatePage />,
-      },
-      {
-        path: "/system/administrator/update/:userId",
-        element: <AdministratorUpdatePage />,
-      },
       {
         path: "/system/adminroles",
         element: <SystemAdminrolesPage />,