管理人员页面重构

2025-06-08 04:04:27 +08:00 · 2023-04-04 11:02:45 +08:00 · 2023-04-04 11:02:45 +08:00 · 4c68e77d92
commit 4c68e77d92
parent c5016196e9
7 changed files with 249 additions and 103 deletions
--- a/src/api/admin-user.ts
+++ b/src/api/admin-user.ts
@ -1,10 +1,16 @@
 import client from "./internal/httpClient";

-export function adminUserList(page: number, size: number, name: string) {
+export function adminUserList(
+  page: number,
+  size: number,
+  name: string,
+  roleId: number
+) {
  return client.get("/backend/v1/admin-user/index", {
    page: page,
    size: size,
    name: name,
+    role_id: roleId,
  });
 }

--- a/src/compenents/index.ts
+++ b/src/compenents/index.ts
@ -6,6 +6,7 @@ export * from "./tree-department";
 export * from "./back-bar";
 export * from "./permission-button";
 export * from "./tree-category";
+export * from ".//tree-adminroles";
 export * from "./duration-text";
 export * from "./upload-video-sub";
 export * from "./select-resource";
--- a/src/compenents/left-menu/index.tsx
+++ b/src/compenents/left-menu/index.tsx
@ -62,7 +62,7 @@ const items = [
    [
      getItem("系统配置", "/system/config/index", null, null, null),
      getItem("管理人员", "/system/administrator", null, null, null),
-      getItem("角色配置", "/system/adminroles", null, null, null),
+      // getItem("角色配置", "/system/adminroles", null, null, null),
    ],
    null
  ),
--- a/src/compenents/tree-adminroles/index.tsx
+++ b/src/compenents/tree-adminroles/index.tsx
@ -1,3 +1,71 @@
 import { Tree } from "antd";
 import { useState, useEffect } from "react";
 import { adminRole } from "../../api/index";
+
+interface Option {
+  key: string | number;
+  title: any;
+  children: any[];
+}
+
+interface PropInterface {
+  type: string;
+  text: string;
+  onUpdate: (keys: any, title: any) => void;
+}
+
+export const TreeAdminroles = (props: PropInterface) => {
+  const [treeData, setTreeData] = useState<any>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [selectKey, setSelectKey] = useState<any>([]);
+
+  useEffect(() => {
+    adminRole.adminRoleList().then((res: any) => {
+      let adminrole = res.data;
+      if (adminrole.length > 0) {
+        const new_arr: Option[] = [];
+        for (let i = 0; i < adminrole.length; i++) {
+          new_arr.push({
+            title: adminrole[i].name,
+            key: adminrole[i].id,
+            children: [],
+          });
+        }
+        setTreeData(new_arr);
+      }
+    });
+  }, []);
+  const onSelect = (selectedKeys: any, info: any) => {
+    let label = "全部" + props.text;
+    if (info) {
+      label = info.node.title;
+    }
+    props.onUpdate(selectedKeys, label);
+    setSelectKey(selectedKeys);
+  };
+
+  return (
+    <div>
+      <div
+        className={
+          selectKey.length === 0
+            ? "mb-8 category-label active"
+            : "mb-8 category-label"
+        }
+        onClick={() => {
+          onSelect([], "");
+        }}
+      >
+        <div className="j-b-flex">
+          <span>全部{props.text}</span>
+        </div>
+      </div>
+      <Tree
+        onSelect={onSelect}
+        selectedKeys={selectKey}
+        treeData={treeData}
+        switcherIcon={<i className="iconfont icon-icon-fold c-gray" />}
+      />
+    </div>
+  );
+};
--- a/src/pages/system/administrator/compenents/create.tsx
+++ b/src/pages/system/administrator/compenents/create.tsx
@ -4,11 +4,13 @@ import styles from "./create.module.less";
 import { adminUser } from "../../../../api/index";

 interface PropInterface {
+  roleId: number;
  open: boolean;
  onCancel: () => void;
 }

 export const SystemAdministratorCreate: React.FC<PropInterface> = ({
+  roleId,
  open,
  onCancel,
 }) => {
@ -21,14 +23,18 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
  }, []);

  useEffect(() => {
+    let roleIds = [];
+    if (roleId) {
+      roleIds.push(roleId);
+    }
    form.setFieldsValue({
      email: "",
      name: "",
      password: "",
      is_ban_login: 0,
-      roleIds: [],
+      roleIds: roleIds,
    });
-  }, [form, open]);
+  }, [form, open, roleId]);

  const getParams = () => {
    adminUser.createAdminUser().then((res: any) => {
@ -97,11 +103,25 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
            autoComplete="off"
          >
            <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入姓名!" }]}
+              label="选择角色"
+              name="roleIds"
+              rules={[{ required: true, message: "请选择角色!" }]}
            >
-              <Input style={{ width: 200 }} placeholder="请输入姓名" />
+              <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="邮箱"
@ -120,16 +140,7 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
                placeholder="请输入登录密码"
              />
            </Form.Item>
-            <Form.Item label="角色" name="roleIds">
-              <Select
-                style={{ width: 200 }}
-                mode="multiple"
-                allowClear
-                placeholder="请选择角色"
-                onChange={handleChange}
-                options={roles}
-              />
-            </Form.Item>
+
            <Form.Item
              label="禁止登录"
              name="is_ban_login"
--- a/src/pages/system/administrator/compenents/update.tsx
+++ b/src/pages/system/administrator/compenents/update.tsx
@ -109,11 +109,25 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
            autoComplete="off"
          >
            <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: "请输入姓名!" }]}
+              label="选择角色"
+              name="roleIds"
+              rules={[{ required: true, message: "请选择角色!" }]}
            >
-              <Input style={{ width: 200 }} placeholder="请输入姓名" />
+              <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="邮箱"
@ -128,16 +142,6 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
                placeholder="请输入登录密码"
              />
            </Form.Item>
-            <Form.Item label="角色" name="roleIds">
-              <Select
-                style={{ width: 200 }}
-                mode="multiple"
-                allowClear
-                placeholder="请选择角色"
-                onChange={handleChange}
-                options={roles}
-              />
-            </Form.Item>
            <Form.Item
              label="禁止登录"
              name="is_ban_login"
--- a/src/pages/system/administrator/index.tsx
+++ b/src/pages/system/administrator/index.tsx
@ -5,9 +5,11 @@ import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { adminUser } from "../../../api/index";
 import { dateFormat } from "../../../utils/index";
 import { useNavigate } from "react-router-dom";
-import { PerButton } from "../../../compenents";
+import { TreeAdminroles, PerButton } from "../../../compenents";
 import { SystemAdministratorCreate } from "./compenents/create";
 import { SystemAdministratorUpdate } from "./compenents/update";
+import { SystemAdminrolesCreate } from "../adminroles/compenents/create";
+import { SystemAdminrolesUpdate } from "../adminroles/compenents/update";

 const { confirm } = Modal;

@ -30,18 +32,22 @@ const SystemAdministratorPage = () => {
  const [refresh, setRefresh] = useState(false);
  const [createVisible, setCreateVisible] = useState<boolean>(false);
  const [updateVisible, setUpdateVisible] = useState<boolean>(false);
+  const [createRoleVisible, setCreateRoleVisible] = useState<boolean>(false);
+  const [updateRoleVisible, setUpdateRoleVisible] = useState<boolean>(false);
  const [cid, setCid] = useState<number>(0);
+  const [role_ids, setRoleIds] = useState<any>([]);
+  const [selLabel, setLabel] = useState<string>("全部管理员");

  const [name, setName] = useState<string>("");

  const columns: ColumnsType<DataType> = [
    {
-      title: "ID",
-      key: "id",
-      dataIndex: "id",
+      title: "管理员",
+      dataIndex: "name",
+      render: (text: string) => <span>{text}</span>,
    },
    {
-      title: "姓名",
+      title: "角色",
      dataIndex: "name",
      render: (text: string) => <span>{text}</span>,
    },
@ -49,16 +55,16 @@ const SystemAdministratorPage = () => {
      title: "登录邮箱",
      dataIndex: "email",
    },
-    {
-      title: "登录时间",
-      dataIndex: "login_at",
-      render: (text: string) => <span>{text && dateFormat(text)}</span>,
-    },
    {
      title: "登录IP",
      dataIndex: "login_ip",
      render: (text: string) => <span>{text}</span>,
    },
+    {
+      title: "上次登录时间",
+      dataIndex: "login_at",
+      render: (text: string) => <span>{text && dateFormat(text)}</span>,
+    },
    {
      title: "禁止登录",
      dataIndex: "is_ban_login",
@ -101,11 +107,11 @@ const SystemAdministratorPage = () => {

  useEffect(() => {
    getData();
-  }, [refresh, page, size]);
+  }, [refresh, page, size, role_ids]);

  const getData = () => {
    setLoading(true);
-    adminUser.adminUserList(page, size, name).then((res: any) => {
+    adminUser.adminUserList(page, size, name, role_ids[0]).then((res: any) => {
      setList(res.data.data);
      setTotal(res.data.total);
      setLoading(false);
@ -159,14 +165,37 @@ const SystemAdministratorPage = () => {

  return (
    <>
-      <div className="playedu-main-body">
+      <div className="tree-main-body">
+        <div className="left-box">
+          <TreeAdminroles
+            type=""
+            text={"管理员"}
+            onUpdate={(keys: any, title: any) => {
+              setRoleIds(keys);
+              setLabel(title);
+            }}
+          />
+        </div>
+        <div className="right-box">
+          <div className="d-flex playedu-main-title float-left mb-24">
+            {selLabel}
+          </div>
          <div className="float-left j-b-flex mb-24">
            <div className="d-flex">
              <PerButton
+                text="新建角色"
+                icon={<PlusOutlined />}
+                class="mr-16"
                type="primary"
+                p="admin-role"
+                onClick={() => setCreateRoleVisible(true)}
+                disabled={null}
+              />
+              <PerButton
+                type="default"
                text="添加管理员"
                class="mr-16"
-              icon={<PlusOutlined />}
+                icon={null}
                p="admin-user-cud"
                onClick={() => setCreateVisible(true)}
                disabled={null}
@ -174,14 +203,14 @@ const SystemAdministratorPage = () => {
            </div>
            <div className="d-flex">
              <div className="d-flex mr-24">
-              <Typography.Text>姓名：</Typography.Text>
+                <Typography.Text>管理员姓名：</Typography.Text>
                <Input
                  value={name}
                  onChange={(e) => {
                    setName(e.target.value);
                  }}
                  style={{ width: 160 }}
-                placeholder="请输入姓名"
+                  placeholder="请输入管理员姓名"
                />
              </div>
              <div className="d-flex">
@ -189,6 +218,7 @@ const SystemAdministratorPage = () => {
                  重 置
                </Button>
                <Button
+                  className="mr-16"
                  type="primary"
                  onClick={() => {
                    setPage(1);
@ -197,6 +227,15 @@ const SystemAdministratorPage = () => {
                >
                  查 询
                </Button>
+                <PerButton
+                  text="角色权限"
+                  icon={null}
+                  class=""
+                  type="default"
+                  p="admin-role"
+                  onClick={() => setUpdateRoleVisible(true)}
+                  disabled={null}
+                />
              </div>
            </div>
          </div>
@ -209,6 +248,7 @@ const SystemAdministratorPage = () => {
              rowKey={(record) => record.id}
            />
            <SystemAdministratorCreate
+              roleId={role_ids[0]}
              open={createVisible}
              onCancel={() => {
                setCreateVisible(false);
@ -223,6 +263,22 @@ const SystemAdministratorPage = () => {
                setRefresh(!refresh);
              }}
            />
+            <SystemAdminrolesCreate
+              open={createRoleVisible}
+              onCancel={() => {
+                setCreateRoleVisible(false);
+                setRefresh(!refresh);
+              }}
+            />
+            <SystemAdminrolesUpdate
+              id={role_ids[0]}
+              open={updateRoleVisible}
+              onCancel={() => {
+                setUpdateRoleVisible(false);
+                setRefresh(!refresh);
+              }}
+            />
+          </div>
        </div>
      </div>
    </>