From 6cbe507cb359248f72699d72b70500e37473ea93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Fri, 3 Mar 2023 16:55:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E5=91=98=E5=88=97=E8=A1=A8=E5=88=9D?= =?UTF-8?q?=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/compenents/leftMenu/index.tsx | 8 +- src/index.less | 9 ++ src/pages/index.ts | 1 + src/pages/member/index.module.less | 0 src/pages/member/index.tsx | 183 +++++++++++++++++++++++++++++ src/router/routes.tsx | 5 + 6 files changed, 205 insertions(+), 1 deletion(-) create mode 100644 src/pages/member/index.module.less create mode 100644 src/pages/member/index.tsx diff --git a/src/compenents/leftMenu/index.tsx b/src/compenents/leftMenu/index.tsx index 3d8d502..b59f371 100644 --- a/src/compenents/leftMenu/index.tsx +++ b/src/compenents/leftMenu/index.tsx @@ -33,7 +33,13 @@ const items = [ ], null ), - getItem("学员管理", "3", , [], null), + getItem( + "学员管理", + "3", + , + [getItem("学员", "/member", null, null, null)], + null + ), getItem("证书管理", "4", , [], null), getItem("系统设置", "5", , [,], null), ]; diff --git a/src/index.less b/src/index.less index e098117..693efb4 100644 --- a/src/index.less +++ b/src/index.less @@ -155,9 +155,18 @@ textarea.ant-input { .ant-select:not(.ant-select-disabled):hover .ant-select-selector { border-color: #ff4d4f !important; } + .ant-select-focused .ant-select-selector, .ant-select-selector:focus, .ant-select-selector:active { border-color: #ff4d4f !important; box-shadow: 0 0 2px #ff4d4f !important; } + +.ant-pagination-item-active { + border-color: #ff4d4f !important; +} + +.ant-pagination-item-active a { + color: #ff4d4f !important; +} diff --git a/src/pages/index.ts b/src/pages/index.ts index 06e283a..1876add 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -4,3 +4,4 @@ export * from "./dashboard"; export * from "./error"; export * from "./test"; export * from "./course/vod"; +export * from "./member" diff --git a/src/pages/member/index.module.less b/src/pages/member/index.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/member/index.tsx b/src/pages/member/index.tsx new file mode 100644 index 0000000..f1b0808 --- /dev/null +++ b/src/pages/member/index.tsx @@ -0,0 +1,183 @@ +import React, { useState, useEffect } from "react"; +import { Typography, Input, Select, Button, Space, Table } 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"; + +interface DataType { + id: React.Key; + nickname: string; + email: string; + created_at: string; + credit1: number; + is_lock: number; +} + +const columns: ColumnsType = [ + { + title: "ID", + key: "id", + dataIndex: "id", + }, + { + title: "学员昵称", + dataIndex: "nickname", + render: (text: string) => {text}, + }, + { + title: "邮箱", + dataIndex: "email", + }, + { + title: "积分", + dataIndex: "credit1", + }, + { + title: "注册时间", + dataIndex: "created_at", + }, + { + title: "操作", + key: "action", + render: (_, record) => ( + + + + + ), + }, +]; + +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([]); + const [loading, setLoading] = useState(true); + const [page, setPage] = useState(1); + const [size, setSize] = useState(10); + const [list, setList] = useState([]); + const [total, setTotal] = useState(0); + const [params, setParams] = useState({}); + + useEffect(() => { + getData(1, size); + }, []); + + const onSelectChange = (newSelectedRowKeys: React.Key[]) => { + console.log("selectedRowKeys changed: ", newSelectedRowKeys); + setSelectedRowKeys(newSelectedRowKeys); + }; + + const getData = (page: number, size: number) => { + 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); + }); + }; + + const resetData = () => { + setList([]); + setParams({}); + setTimeout(() => { + getData(1, 10); + }, 500); + }; + + const rowSelection = { + selectedRowKeys, + onChange: onSelectChange, + }; + + const paginationProps = { + current: page, //当前页码 + pageSize: size, + total: total, // 总条数 + onChange: (page: number, pageSize: number) => + handlePageChange(page, pageSize), //改变页码的函数 + showSizeChanger: true, + }; + + const handlePageChange = (page: number, pageSize: number) => { + console.log(page, pageSize); + setTimeout(() => { + getData(page, pageSize); + }, 500); + }; + + const hasSelected = selectedRowKeys.length > 0; + return ( + <> +
+
+
+ 昵称或手机号： + +
+
+ + +
+
+
+
+
+
+ + +
+
+ +
+
+
+ + + + + ); +}; diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 318ea9c..e28c244 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -6,6 +6,7 @@ import { ErrorPage, VodListPage, TestPage, + MemberPage, } from "../pages"; const routes: RouteObject[] = [ @@ -21,6 +22,10 @@ const routes: RouteObject[] = [ path: "/vod", element: , }, + { + path: "/member", + element: , + }, ], }, {