树形部门选择组件

src/compenents/index.ts

@@ -1,4 +1,5 @@
 export * from "./footer";
 export * from "./header";
 export * from "./leftMenu";
-export * from "./uploadImageButton";
+export * from "./uploadImageButton";
+export * from ".//treeDepartment";

src/compenents/leftMenu/index.tsx

@@ -24,7 +24,7 @@ const items = [
   getItem("网校装修", "/decoration", <SettingOutlined />, null, null),
   getItem(
     "课程内容",
-    "2",
+    "3",
     <MailOutlined />,
     [
       getItem("视频", "/vod", null, null, null),
@@ -35,16 +35,16 @@ const items = [
   ),
   getItem(
     "学员管理",
-    "3",
+    "4",
     <AppstoreOutlined />,
     [getItem("学员", "/member", null, null, null)],
     null
   ),
-  getItem("证书管理", "4", <SettingOutlined />, [], null),
-  getItem("系统设置", "5", <SettingOutlined />, [,], null),
+  getItem("证书管理", "5", <SettingOutlined />, [], null),
+  getItem("系统设置", "6", <SettingOutlined />, [,], null),
 ];
 
-const rootSubmenuKeys = ["2", "3", "4", "5"];
+const rootSubmenuKeys = ["3", "4", "5", "6"];
 
 export const LeftMenu: React.FC = () => {
   //展开的subMenu

src/compenents/treeDepartment/index.tsx

@@ -0,0 +1,37 @@
+import { Button, Input, message, Tree } from "antd";
+import { useState, useEffect } from "react";
+import { department } from "../../api/index";
+
+interface PropInterface {
+  defaultExpandedKeys: any;
+  defaultSelectedKeys: any;
+  defaultCheckedKeys: any;
+  onUpdate: () => void;
+}
+
+export const TreeDepartment = (props: PropInterface) => {
+  const [treeData, setTreeData] = useState<any>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  useEffect(() => {
+    setLoading(true);
+    department.departmentList().then((res: any) => {
+      setTreeData(res.data);
+      setTimeout(() => {
+        setLoading(false);
+      }, 1000);
+    });
+  }, []);
+  const onSelect = () => {};
+  const onCheck = () => {};
+  return (
+    <Tree
+      checkable
+      defaultExpandedKeys={props.defaultExpandedKeys}
+      defaultSelectedKeys={props.defaultSelectedKeys}
+      defaultCheckedKeys={props.defaultCheckedKeys}
+      onSelect={onSelect}
+      onCheck={onCheck}
+      treeData={treeData}
+    />
+  );
+};

src/pages/member/index.tsx

@@ -1,9 +1,21 @@
 import React, { useState, useEffect } from "react";
-import { Typography, Input, Select, Button, Space, Table } from "antd";
+import {
+  Row,
+  Col,
+  Typography,
+  Input,
+  Select,
+  Button,
+  Space,
+  Table,
+  Popconfirm,
+  message,
+} from "antd";
 import type { ColumnsType } from "antd/es/table";
 import styles from "./index.module.less";
 import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { user } from "../../api/index";
+import { TreeDepartment } from "../../compenents";
 
 interface DataType {
   id: React.Key;
@@ -14,59 +26,6 @@ interface DataType {
   is_lock: number;
 }
 
-const columns: ColumnsType<DataType> = [
-  {
-    title: "ID",
-    key: "id",
-    dataIndex: "id",
-  },
-  {
-    title: "学员昵称",
-    dataIndex: "nickname",
-    render: (text: string) => <span>{text}</span>,
-  },
-  {
-    title: "邮箱",
-    dataIndex: "email",
-  },
-  {
-    title: "积分",
-    dataIndex: "credit1",
-  },
-  {
-    title: "注册时间",
-    dataIndex: "created_at",
-  },
-  {
-    title: "操作",
-    key: "action",
-    render: (_, record) => (
-      <Space size="middle">
-        <Button type="link" danger className="c-red">
-          详情
-        </Button>
-        <Button type="link" danger className="c-red">
-          删除
-        </Button>
-      </Space>
-    ),
-  },
-];
-
-const rowSelection = {
-  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
-    console.log(
-      `selectedRowKeys: ${selectedRowKeys}`,
-      "selectedRows: ",
-      selectedRows
-    );
-  },
-  getCheckboxProps: (record: DataType) => ({
-    disabled: record.nickname === "Disabled User",
-    name: record.nickname,
-  }),
-};
-
 export const MemberPage: React.FC = () => {
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -74,7 +33,56 @@ export const MemberPage: React.FC = () => {
   const [size, setSize] = useState<number>(10);
   const [list, setList] = useState<any>([]);
   const [total, setTotal] = useState<number>(0);
-  const [params, setParams] = useState<any>({});
+  const [nickname, setNickname] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+  const [id_card, setIdCard] = useState<string>("");
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: "ID",
+      key: "id",
+      dataIndex: "id",
+    },
+    {
+      title: "学员昵称",
+      dataIndex: "nickname",
+      render: (text: string) => <span>{text}</span>,
+    },
+    {
+      title: "邮箱",
+      dataIndex: "email",
+    },
+    {
+      title: "积分",
+      dataIndex: "credit1",
+    },
+    {
+      title: "注册时间",
+      dataIndex: "created_at",
+    },
+    {
+      title: "操作",
+      key: "action",
+      render: (_, record) => (
+        <Space size="middle">
+          <Button type="link" danger className="c-red">
+            详情
+          </Button>
+          <Popconfirm
+            title="警告"
+            description="即将删除此账号，确认操作？"
+            onConfirm={() => delUser(record.id)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button type="link" danger className="c-red">
+              删除
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
 
   useEffect(() => {
     getData(1, size);
@@ -89,22 +97,29 @@ export const MemberPage: React.FC = () => {
     setSize(size);
     setPage(page);
     setLoading(true);
-    user.userList(page, size, params).then((res: any) => {
-      setList(res.data.data);
-      setTotal(res.data.total);
-      setTimeout(() => {
-        setSelectedRowKeys([]);
-        setLoading(false);
-      }, 1000);
-    });
+    user
+      .userList(page, size, {
+        nickname: nickname,
+        email: email,
+        id_card: id_card,
+      })
+      .then((res: any) => {
+        setList(res.data.data);
+        setTotal(res.data.total);
+        setTimeout(() => {
+          setSelectedRowKeys([]);
+          setLoading(false);
+        }, 1000);
+      });
   };
 
   const resetData = () => {
-    setList([]);
-    setParams({});
+    setNickname("");
+    setEmail("");
+    setIdCard("");
     setTimeout(() => {
       getData(1, 10);
-    }, 500);
+    }, 1000);
   };
 
   const rowSelection = {
@@ -122,55 +137,120 @@ export const MemberPage: React.FC = () => {
   };
 
   const handlePageChange = (page: number, pageSize: number) => {
-    console.log(page, pageSize);
     setTimeout(() => {
       getData(page, pageSize);
     }, 500);
   };
 
+  const delUser = (id: any) => {
+    user.destroyUser(id).then((res: any) => {
+      setTimeout(() => {
+        message.success("操作成功");
+        getData(1, size);
+      }, 1000);
+    });
+  };
+
   const hasSelected = selectedRowKeys.length > 0;
   return (
     <>
-      <div className="playedu-main-body mb-24">
-        <div className="float-left d-flex">
-          <div className="d-flex mr-24">
-            <Typography.Text>昵称或手机号：</Typography.Text>
-            <Input style={{ width: 160 }} placeholder="昵称或手机号" />
+      <Row>
+        <Col span={4}>
+          <TreeDepartment
+            defaultExpandedKeys={["0-0-0", "0-0-1"]}
+            defaultSelectedKeys={["0-0-0", "0-0-1"]}
+            defaultCheckedKeys={["0-0-0", "0-0-1"]}
+            onUpdate={() => {
+              console.log(111);
+            }}
+          ></TreeDepartment>
+        </Col>
+        <Col span={20}>
+          <div className="playedu-main-body mb-24">
+            <div className="float-left d-flex">
+              <div className="d-flex mr-24">
+                <Typography.Text>昵称：</Typography.Text>
+                <Input
+                  value={nickname}
+                  onChange={(e) => {
+                    setNickname(e.target.value);
+                  }}
+                  style={{ width: 160 }}
+                  placeholder="请输入昵称"
+                />
+              </div>
+              <div className="d-flex mr-24">
+                <Typography.Text>邮箱：</Typography.Text>
+                <Input
+                  value={email}
+                  onChange={(e) => {
+                    setEmail(e.target.value);
+                  }}
+                  style={{ width: 160 }}
+                  placeholder="请输入邮箱"
+                />
+              </div>
+              <div className="d-flex mr-24">
+                <Typography.Text>身份证号：</Typography.Text>
+                <Input
+                  value={id_card}
+                  onChange={(e) => {
+                    setIdCard(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={() => {
+                    getData(1, size);
+                  }}
+                >
+                  查 询
+                </Button>
+              </div>
+            </div>
           </div>
-          <div className="d-flex mr-24">
-            <Button className="mr-16" onClick={resetData}>
-              重 置
-            </Button>
-            <Button type="primary">查 询</Button>
+          <div className="playedu-main-body">
+            <div className="float-left j-b-flex mb-24">
+              <div className="d-flex">
+                <Button
+                  icon={<PlusOutlined />}
+                  className="mr-16"
+                  type="primary"
+                >
+                  新建
+                </Button>
+              </div>
+              <div className="d-flex">
+                <Button
+                  type="link"
+                  icon={<ReloadOutlined />}
+                  style={{ color: "#333333" }}
+                  onClick={() => {
+                    getData(page, size);
+                  }}
+                ></Button>
+              </div>
+            </div>
+            <div className="float-left">
+              <Table
+                rowSelection={rowSelection}
+                columns={columns}
+                dataSource={list}
+                loading={loading}
+                pagination={paginationProps}
+                rowKey={(record) => record.id}
+              />
+            </div>
           </div>
-        </div>
-      </div>
-      <div className="playedu-main-body">
-        <div className="float-left j-b-flex mb-24">
-          <div className="d-flex">
-            <Button icon={<PlusOutlined />} className="mr-16" type="primary">
-              新建
-            </Button>
-            <Button>删除</Button>
-          </div>
-          <div className="d-flex">
-            <Button
-              type="link"
-              icon={<ReloadOutlined />}
-              style={{ color: "#333333" }}
-            ></Button>
-          </div>
-        </div>
-        <div className="float-left">
-          <Table
-            rowSelection={rowSelection}
-            columns={columns}
-            dataSource={list}
-            loading={loading}
-            pagination={paginationProps}
-          />
-        </div>
-      </div>
+        </Col>
+      </Row>
     </>
   );
 };