树形部门选择组件

src/compenents/index.ts

@@ -2,3 +2,4 @@ export * from "./footer";
 export * from "./header";
 export * from "./leftMenu";
 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,7 +26,18 @@ interface DataType {
   is_lock: number;
 }
 
-const columns: ColumnsType<DataType> = [
+export const MemberPage: React.FC = () => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [page, setPage] = useState<number>(1);
+  const [size, setSize] = useState<number>(10);
+  const [list, setList] = useState<any>([]);
+  const [total, setTotal] = useState<number>(0);
+  const [nickname, setNickname] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+  const [id_card, setIdCard] = useState<string>("");
+
+  const columns: ColumnsType<DataType> = [
     {
       title: "ID",
       key: "id",
@@ -45,36 +68,21 @@ const columns: ColumnsType<DataType> = [
           <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>
       ),
     },
-];
-
-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);
-  const [page, setPage] = useState<number>(1);
-  const [size, setSize] = useState<number>(10);
-  const [list, setList] = useState<any>([]);
-  const [total, setTotal] = useState<number>(0);
-  const [params, setParams] = useState<any>({});
+  ];
 
   useEffect(() => {
     getData(1, size);
@@ -89,7 +97,13 @@ export const MemberPage: React.FC = () => {
     setSize(size);
     setPage(page);
     setLoading(true);
-    user.userList(page, size, params).then((res: any) => {
+    user
+      .userList(page, size, {
+        nickname: nickname,
+        email: email,
+        id_card: id_card,
+      })
+      .then((res: any) => {
         setList(res.data.data);
         setTotal(res.data.total);
         setTimeout(() => {
@@ -100,11 +114,12 @@ export const MemberPage: React.FC = () => {
   };
 
   const resetData = () => {
-    setList([]);
-    setParams({});
+    setNickname("");
+    setEmail("");
+    setIdCard("");
     setTimeout(() => {
       getData(1, 10);
-    }, 500);
+    }, 1000);
   };
 
   const rowSelection = {
@@ -122,42 +137,104 @@ 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 (
     <>
+      <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 style={{ width: 160 }} placeholder="昵称或手机号" />
+                <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">查 询</Button>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    getData(1, size);
+                  }}
+                >
+                  查 询
+                </Button>
               </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
+                  icon={<PlusOutlined />}
+                  className="mr-16"
+                  type="primary"
+                >
                   新建
                 </Button>
-            <Button>删除</Button>
               </div>
               <div className="d-flex">
                 <Button
                   type="link"
                   icon={<ReloadOutlined />}
                   style={{ color: "#333333" }}
+                  onClick={() => {
+                    getData(page, size);
+                  }}
                 ></Button>
               </div>
             </div>
@@ -168,9 +245,12 @@ export const MemberPage: React.FC = () => {
                 dataSource={list}
                 loading={loading}
                 pagination={paginationProps}
+                rowKey={(record) => record.id}
               />
             </div>
           </div>
+        </Col>
+      </Row>
     </>
   );
 };