From 17e3fde33a40f21d980be770b0ec5c3186cfcae3 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Thu, 12 Aug 2021 01:09:53 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=9D=83=E9=99=90/=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/auth/user.ts | 11 ++++ src/hooks/auth/user.ts | 20 ++++++ src/interface/auth/user.ts | 11 ++++ src/router/asyncRoutes.ts | 3 +- src/views/auth/menu/index.tsx | 5 +- src/views/auth/user/index.scss | 9 +++ src/views/auth/user/index.tsx | 107 +++++++++++++++++++++++++++++++++ 7 files changed, 163 insertions(+), 3 deletions(-) create mode 100644 src/api/auth/user.ts create mode 100644 src/hooks/auth/user.ts create mode 100644 src/interface/auth/user.ts create mode 100644 src/views/auth/user/index.scss create mode 100644 src/views/auth/user/index.tsx diff --git a/src/api/auth/user.ts b/src/api/auth/user.ts new file mode 100644 index 0000000..e931a57 --- /dev/null +++ b/src/api/auth/user.ts @@ -0,0 +1,11 @@ +import request from '@/utils/request' +import { UserListParams } from '@/interface/auth/user' + +/** + * 获取用户列表 + * @param {UserListParams} data + * return + */ +export function getUserList(data: UserListParams): Promise { + return request.get('/api/auth/user/page', data) +} diff --git a/src/hooks/auth/user.ts b/src/hooks/auth/user.ts new file mode 100644 index 0000000..0e7647b --- /dev/null +++ b/src/hooks/auth/user.ts @@ -0,0 +1,20 @@ +import { getUserList } from '@/api/auth/user' +import { useEffect, useState } from 'react' +import { UserListParams } from '@/interface/auth/user' + +export function useUserTable() { + const [userList, setUserList] = useState([]) + const [loading, setLoading] = useState(false) + const [tableParams, setTableParams] = useState({ current: 1, size: 10 }) + // 获取用户表格数据 + const getUserData = async (params: UserListParams) => { + const res = await getUserList(params) + setUserList(res) + } + useEffect(() => { + setLoading(true) + getUserData(tableParams) + }, [tableParams]) + + return { loading, userList, setUserList, setTableParams } +} diff --git a/src/interface/auth/user.ts b/src/interface/auth/user.ts new file mode 100644 index 0000000..10a1778 --- /dev/null +++ b/src/interface/auth/user.ts @@ -0,0 +1,11 @@ +export interface UserListParams { + current: number + size: number + loginName?: string + nickName?: string + isLockout?: string + protectEmail?: string + protectPhone?: string + createTimeStart?: string + createTimeEnd?: string +} diff --git a/src/router/asyncRoutes.ts b/src/router/asyncRoutes.ts index 8c62250..7f60847 100644 --- a/src/router/asyncRoutes.ts +++ b/src/router/asyncRoutes.ts @@ -5,5 +5,6 @@ export default { overview: lazy(() => import('@/views/dashboard')), shopOverview: lazy(() => import('@/views/shop/overview')), shopDecoration: lazy(() => import('@/views/shop/decoration')), - authMenu: lazy(() => import('@/views/auth/menu/index')), + authMenu: lazy(() => import('@/views/auth/menu')), + authUser: lazy(() => import('@/views/auth/user')), } diff --git a/src/views/auth/menu/index.tsx b/src/views/auth/menu/index.tsx index bb67eea..3d12338 100644 --- a/src/views/auth/menu/index.tsx +++ b/src/views/auth/menu/index.tsx @@ -1,3 +1,4 @@ +import View from '@/components/View' import React, { useState } from 'react' import { useMenuTreeTable } from '@/hooks/auth/menu' import { Table, Button, Tooltip, Popconfirm, message, Input, Modal, Form, InputNumber, TreeSelect } from 'antd' @@ -172,7 +173,7 @@ const AuthMenu: React.FC = () => { }, ] return ( -
+
@@ -221,7 +222,7 @@ const AuthMenu: React.FC = () => { -
+ ) } export default AuthMenu diff --git a/src/views/auth/user/index.scss b/src/views/auth/user/index.scss new file mode 100644 index 0000000..c4fa431 --- /dev/null +++ b/src/views/auth/user/index.scss @@ -0,0 +1,9 @@ +.app-auth-user { + .user-top-bar { + text-align: right; + margin-bottom: 10px; + } + .user-table { + overflow: auto; + } +} diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx new file mode 100644 index 0000000..a3e96ff --- /dev/null +++ b/src/views/auth/user/index.tsx @@ -0,0 +1,107 @@ +import View from '@/components/View' +import React, { FC } from 'react' +import { useUserTable } from '@/hooks/auth/user' +import { Button, Popconfirm, Table, Tooltip } from 'antd' +import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons' +import './index.scss' + +const AuthUser:FC = () => { + const { userList } = useUserTable() + const { records, current, size, total, pages } = userList + console.log(records, current, size, total, pages) + const addUser = () => { + console.log(1) + } + const editUser = (params) => { + console.log(params) + } + const deleteUser = (id) => { + console.log(id) + } + const columns = [ + { + title: '登录名', + dataIndex: 'loginName', + key: 'loginName', + width: 100, + ellipsis: true, + }, + { + title: '昵称', + dataIndex: 'nickName', + key: 'nickName', + width: 150, + ellipsis: true, + }, + { + title: '账号状态', + dataIndex: 'isLockout', + key: 'isLockout', + width: 100, + align: 'center' as 'center', + }, + { + title: '密保邮箱', + dataIndex: 'protectEmail', + key: 'protectEmail', + width: 150, + }, + { + title: '密保手机', + dataIndex: 'protectPhone', + key: 'protectPhone', + width: 120, + }, + { + title: '创建时间', + dataIndex: 'createTime', + key: 'createTime', + width: 200, + align: 'center' as 'center', + }, + { + title: '操作', + dataIndex: '', + key: 'action', + className: 'aciton-th', + width: 120, + align: 'center' as 'center', + fixed: 'right' as 'right', + render: (text, record) => ( +
+ +
+ ), + }, + ] + return ( + +
+ +
+
+ record.id} /> + + + ) +} + +export default AuthUser -- Gitee From 69e949324ff4172dd36b8493113b01bd285b0412 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Thu, 12 Aug 2021 17:50:30 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=9D=83=E9=99=90=20=E7=94=A8=E6=88=B7=200?= =?UTF-8?q?812-01?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/auth/user.ts | 2 +- src/views/auth/user/index.tsx | 21 ++++++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/hooks/auth/user.ts b/src/hooks/auth/user.ts index 0e7647b..e897bad 100644 --- a/src/hooks/auth/user.ts +++ b/src/hooks/auth/user.ts @@ -5,7 +5,7 @@ import { UserListParams } from '@/interface/auth/user' export function useUserTable() { const [userList, setUserList] = useState([]) const [loading, setLoading] = useState(false) - const [tableParams, setTableParams] = useState({ current: 1, size: 10 }) + const [tableParams, setTableParams] = useState({ current: 1, size: 10 }) // 获取用户表格数据 const getUserData = async (params: UserListParams) => { const res = await getUserList(params) diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx index a3e96ff..a169365 100644 --- a/src/views/auth/user/index.tsx +++ b/src/views/auth/user/index.tsx @@ -1,14 +1,20 @@ import View from '@/components/View' import React, { FC } from 'react' import { useUserTable } from '@/hooks/auth/user' -import { Button, Popconfirm, Table, Tooltip } from 'antd' +import { Button, Form, Input, Popconfirm, Table, Tooltip } from 'antd' import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons' import './index.scss' +import { UserListParams } from '@/interface/auth/user' const AuthUser:FC = () => { const { userList } = useUserTable() const { records, current, size, total, pages } = userList console.log(records, current, size, total, pages) + const [form] = Form.useForm() + const filterForm: UserListParams = { + size: 1, + current, + } const addUser = () => { console.log(1) } @@ -94,6 +100,19 @@ const AuthUser:FC = () => { ] return ( +
+
+ + + + +
-- Gitee From 7ac9e03e6a4e9ac383492fa083a46f1cec8ca10c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Fri, 13 Aug 2021 16:13:09 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=BC=95=E5=85=A5ahooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 引入ahooks 2. antd表格使用ahooks的useAntdTable尝试 --- package.json | 1 + src/interface/ahooks.ts | 4 ++ src/interface/auth/user.ts | 34 +++++++++++++++ src/views/auth/user/index.scss | 16 +++++++- src/views/auth/user/index.tsx | 75 +++++++++++++++++++++++++++------- 5 files changed, 114 insertions(+), 16 deletions(-) create mode 100644 src/interface/ahooks.ts diff --git a/package.json b/package.json index 44a13a8..9dcc2c2 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/react": "^17.0.11", "@types/react-dom": "^17.0.8", "@types/react-router": "^5.1.15", + "ahooks": "^2.10.9", "antd": "^4.16.3", "axios": "^0.21.1", "dayjs": "^1.10.5", diff --git a/src/interface/ahooks.ts b/src/interface/ahooks.ts new file mode 100644 index 0000000..fe33d23 --- /dev/null +++ b/src/interface/ahooks.ts @@ -0,0 +1,4 @@ +export interface antdTableResult { + total: number; + list: Array; +} diff --git a/src/interface/auth/user.ts b/src/interface/auth/user.ts index 10a1778..911a003 100644 --- a/src/interface/auth/user.ts +++ b/src/interface/auth/user.ts @@ -1,3 +1,4 @@ +// 获取用户列表的参数 export interface UserListParams { current: number size: number @@ -9,3 +10,36 @@ export interface UserListParams { createTimeStart?: string createTimeEnd?: string } + +// 用户列表接口返回值 +export interface UserListRes { + countId?: string + current: number + hitCount?: boolean + maxLimit?: number + optimizeCountSql?: boolean + pages: number + orders?: Array + records: Array + searchCount?: boolean + size: number + total: number + [props: string]: any +} + +// 用户列表表格数据 +export interface UserTableType { + id: number + password: string + loginName: string + isLockout?: number + lockTime?: string + nickName?: string + protectEmail?: string + protectPhone?: string + psdWrongTime?: number + storeId?: number + createTime?: string + updateTime?: string + lastLoginTime?: string +} diff --git a/src/views/auth/user/index.scss b/src/views/auth/user/index.scss index c4fa431..b438ccc 100644 --- a/src/views/auth/user/index.scss +++ b/src/views/auth/user/index.scss @@ -1,7 +1,21 @@ .app-auth-user { + .filter-form { + margin-bottom: 20px; + background-color: #fff; + padding: 16px; + .ant-form { + display: flex; + flex-wrap: wrap; + .ant-form-item { + width: 33%; + max-width: 450px; + padding: 0 20px; + } + } + } .user-top-bar { text-align: right; - margin-bottom: 10px; + margin-bottom: 20px; } .user-table { overflow: auto; diff --git a/src/views/auth/user/index.tsx b/src/views/auth/user/index.tsx index a169365..d6ba5e9 100644 --- a/src/views/auth/user/index.tsx +++ b/src/views/auth/user/index.tsx @@ -1,20 +1,44 @@ import View from '@/components/View' import React, { FC } from 'react' -import { useUserTable } from '@/hooks/auth/user' -import { Button, Form, Input, Popconfirm, Table, Tooltip } from 'antd' +import { useAntdTable } from 'ahooks' +import { getUserList } from '@/api/auth/user' +import { PaginatedParams } from 'ahooks/lib/useAntdTable' +import { Button, Form, Input, Popconfirm, Row, Table, Tooltip } from 'antd' import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons' +import { UserListParams, UserListRes } from '@/interface/auth/user' +import { antdTableResult } from '@/interface/ahooks' import './index.scss' -import { UserListParams } from '@/interface/auth/user' + +/** + * @description: 定义useAntdTable第一个参数，调用获取表格数据接口 + * @param {*} 传入current，size和筛选表单 + * @return {*} 表格数据和total + */ +const getUserData = async ( + { current, pageSize }: PaginatedParams[0], + formData: UserListParams, +): Promise> => { + const params = { ...formData } + params.current = current + params.size = pageSize + const res: any = await getUserList(params) + return { + total: res.total, + list: res.records, + } +} const AuthUser:FC = () => { - const { userList } = useUserTable() - const { records, current, size, total, pages } = userList - console.log(records, current, size, total, pages) + // 获取表单实例 const [form] = Form.useForm() - const filterForm: UserListParams = { - size: 1, - current, - } + // ahooks定义表格数据和方法 + const { tableProps, search } = useAntdTable(getUserData, { + defaultPageSize: 10, + form, + }) + // 表单重置和搜索方法 + const { submit, reset } = search + const addUser = () => { console.log(1) } @@ -102,22 +126,43 @@ const AuthUser:FC = () => {
- + + + + + + + + + + + + + + + + + + + + + + +
-
record.id} /> +
record.id} {...tableProps} /> ) -- Gitee