管理人员页面重构

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,
   });
 }
 

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";

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
   ),

src/compenents/tree-adminroles/index.tsx

@@ -1,3 +1,71 @@
 import { Tree } from "antd";
 import { useState, useEffect } from "react";
-import { adminRole } from "../../api/index";
+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>
+  );
+};

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="姓名"
+              label="选择角色"
-              name="name"
+              name="roleIds"
-              rules={[{ required: true, message: "请输入姓名!" }]}
+              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"

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

@@ -109,11 +109,25 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
             autoComplete="off"
           >
             <Form.Item
-              label="姓名"
+              label="选择角色"
-              name="name"
+              name="roleIds"
-              rules={[{ required: true, message: "请输入姓名!" }]}
+              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"

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",
+      title: "管理员",
-      key: "id",
+      dataIndex: "name",
-      dataIndex: "id",
+      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,70 +165,120 @@ const SystemAdministratorPage = () => {
 
   return (
     <>
-      <div className="playedu-main-body">
+      <div className="tree-main-body">
-        <div className="float-left j-b-flex mb-24">
+        <div className="left-box">
-          <div className="d-flex">
+          <TreeAdminroles
-            <PerButton
+            type=""
-              type="primary"
+            text={"管理员"}
-              text="添加管理员"
+            onUpdate={(keys: any, title: any) => {
-              class="mr-16"
+              setRoleIds(keys);
-              icon={<PlusOutlined />}
+              setLabel(title);
-              p="admin-user-cud"
+            }}
-              onClick={() => setCreateVisible(true)}
+          />
-              disabled={null}
+        </div>
-            />
+        <div className="right-box">
+          <div className="d-flex playedu-main-title float-left mb-24">
+            {selLabel}
           </div>
-          <div className="d-flex">
+          <div className="float-left j-b-flex mb-24">
-            <div className="d-flex mr-24">
+            <div className="d-flex">
-              <Typography.Text>姓名：</Typography.Text>
+              <PerButton
-              <Input
+                text="新建角色"
-                value={name}
+                icon={<PlusOutlined />}
-                onChange={(e) => {
+                class="mr-16"
-                  setName(e.target.value);
+                type="primary"
-                }}
+                p="admin-role"
-                style={{ width: 160 }}
+                onClick={() => setCreateRoleVisible(true)}
-                placeholder="请输入姓名"
+                disabled={null}
+              />
+              <PerButton
+                type="default"
+                text="添加管理员"
+                class="mr-16"
+                icon={null}
+                p="admin-user-cud"
+                onClick={() => setCreateVisible(true)}
+                disabled={null}
               />
             </div>
             <div className="d-flex">
-              <Button className="mr-16" onClick={resetData}>
+              <div className="d-flex mr-24">
-                重 置
+                <Typography.Text>管理员姓名：</Typography.Text>
-              </Button>
+                <Input
-              <Button
+                  value={name}
-                type="primary"
+                  onChange={(e) => {
-                onClick={() => {
+                    setName(e.target.value);
-                  setPage(1);
+                  }}
-                  setRefresh(!refresh);
+                  style={{ width: 160 }}
-                }}
+                  placeholder="请输入管理员姓名"
-              >
+                />
-                查 询
+              </div>
-              </Button>
+              <div className="d-flex">
+                <Button className="mr-16" onClick={resetData}>
+                  重 置
+                </Button>
+                <Button
+                  className="mr-16"
+                  type="primary"
+                  onClick={() => {
+                    setPage(1);
+                    setRefresh(!refresh);
+                  }}
+                >
+                  查 询
+                </Button>
+                <PerButton
+                  text="角色权限"
+                  icon={null}
+                  class=""
+                  type="default"
+                  p="admin-role"
+                  onClick={() => setUpdateRoleVisible(true)}
+                  disabled={null}
+                />
+              </div>
             </div>
           </div>
-        </div>
+          <div className="float-left">
-        <div className="float-left">
+            <Table
-          <Table
+              columns={columns}
-            columns={columns}
+              dataSource={list}
-            dataSource={list}
+              loading={loading}
-            loading={loading}
+              pagination={paginationProps}
-            pagination={paginationProps}
+              rowKey={(record) => record.id}
-            rowKey={(record) => record.id}
+            />
-          />
+            <SystemAdministratorCreate
-          <SystemAdministratorCreate
+              roleId={role_ids[0]}
-            open={createVisible}
+              open={createVisible}
-            onCancel={() => {
+              onCancel={() => {
-              setCreateVisible(false);
+                setCreateVisible(false);
-              setRefresh(!refresh);
+                setRefresh(!refresh);
-            }}
+              }}
-          />
+            />
-          <SystemAdministratorUpdate
+            <SystemAdministratorUpdate
-            id={cid}
+              id={cid}
-            open={updateVisible}
+              open={updateVisible}
-            onCancel={() => {
+              onCancel={() => {
-              setUpdateVisible(false);
+                setUpdateVisible(false);
-              setRefresh(!refresh);
+                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>
     </>